@ambita/design-system 5.7.1-3081.0 → 5.7.1-31.0

package/README.md

@@ -31,8 +31,11 @@ The design system features:
 
 ### Documentation
 
+- **[Ambita Style Guide](https://design.ambita.com)** - Brand guidelines, colors, typography, and visual standards
+
 Key guides for contributors:
 
+- **[docs/CONTRIBUTING.md](docs/CONTRIBUTING.md)** - General info on contributing
 - **[docs/INTEGRATION_GUIDE.md](docs/INTEGRATION_GUIDE.md)** - How to use the design system in projects
 - **[docs/REKA_UI_SCSS_GUIDE.md](docs/REKA_UI_SCSS_GUIDE.md)** - Portal components and `:deep()` selectors
 - **[docs/NEO_COMPONENT_PATTERNS.md](docs/NEO_COMPONENT_PATTERNS.md)** - Common patterns and mixins

package/dist/ambita-logo.svg

@@ -1 +1,4 @@
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" preserveAspectRatio="xMinYMid meet" x="0px" y="0px" viewBox="0 0 694.11 164.663" style="enable-background:new 0 0 694.11 164.663;"> <path fill="currentcolor" class="ambita-logo__svg__path" d="M101.071,48.106h-5.002c-5.439,0-9.889,4.451-9.889,9.892v0.155 c-8.794-6.17-19.177-10.047-30.702-10.047c-15.85,0-29.602,6.764-39.627,17.485C5.876,76.03,0.058,90.393,0.002,106.385 c0,0.078-0.002,0.156-0.002,0.236c0,15.848,5.827,30.302,15.85,41.022c10.025,10.493,23.778,17.02,39.627,17.02 c11.525,0,21.909-3.648,30.705-9.814c0.04,5.403,4.472,9.814,9.886,9.814h5.002c5.437,0,9.887-4.453,9.887-9.889V57.998 C110.958,52.558,106.507,48.106,101.071,48.106z M86.18,108.901c-0.508,8.609-3.876,16.153-9.021,21.729 c-5.595,5.826-13.522,9.089-21.681,9.089c-8.389,0-16.316-3.263-21.677-9.089c-5.595-6.063-8.859-14.453-8.859-24.009 c0-0.08,0.003-0.158,0.003-0.236c0.051-9.691,3.305-17.993,8.856-23.777c5.36-6.293,13.288-9.556,21.677-9.556 c8.159,0,16.086,3.263,21.681,9.556c5.145,5.36,8.513,12.888,9.021,21.68v2.098V108.901z"></path> <path fill="currentcolor" class="ambita-logo__svg__path" d="M281.806,48.106H150.147l0,0c-5.439,0-9.891,4.451-9.891,9.892v96.776 c0,5.436,4.451,9.889,9.891,9.889h4.999c5.439,0,9.89-4.453,9.89-9.889V72.887h38.551v81.888c0,5.436,4.451,9.889,9.89,9.889h4.999 c5.439,0,9.889-4.453,9.889-9.889V72.887h38.551v81.888c0,5.436,4.452,9.889,9.889,9.889h5.001c5.44,0,9.889-4.453,9.889-9.889 V57.998C291.695,52.558,287.247,48.106,281.806,48.106z"></path> <path fill="currentcolor" class="ambita-logo__svg__path" d="M684.222,48.106h-5.001c-5.44,0-9.889,4.451-9.889,9.892v0.155 c-8.794-6.17-19.178-10.047-30.702-10.047c-15.85,0-29.601,6.764-39.626,17.485c-9.976,10.438-15.791,24.801-15.848,40.793 c0,0.078-0.003,0.156-0.003,0.236c0,15.848,5.827,30.302,15.851,41.022c10.025,10.493,23.776,17.02,39.626,17.02 c11.525,0,21.908-3.648,30.702-9.814c0.041,5.403,4.475,9.814,9.889,9.814h5.001c5.438,0,9.889-4.453,9.889-9.889V57.998 C694.11,52.558,689.659,48.106,684.222,48.106z M669.332,108.907c-0.511,8.608-3.878,16.147-9.023,21.723 c-5.595,5.826-13.519,9.089-21.68,9.089c-8.391,0-16.315-3.263-21.679-9.089c-5.594-6.063-8.855-14.453-8.855-24.009 c0-0.08,0-0.158,0.003-0.236c0.051-9.691,3.305-17.993,8.852-23.777c5.363-6.293,13.288-9.556,21.679-9.556 c8.16,0,16.085,3.263,21.68,9.556c5.145,5.357,8.512,12.886,9.023,21.672v2.106V108.907z"></path> <path fill="currentcolor" class="ambita-logo__svg__path" d="M470.419,48.106h-5c-5.438,0-9.891,4.451-9.891,9.892v96.776c0,5.436,4.452,9.889,9.891,9.889h5 c5.439,0,9.889-4.453,9.889-9.889V57.998C480.308,52.558,475.857,48.106,470.419,48.106z"></path> <path fill="currentcolor" class="ambita-logo__svg__path" d="M433.659,106.385c-0.124-31.832-25.25-58.278-56.643-58.278c-11.422,0-22.608,3.731-31.234,9.792 l-0.008-46.522c0-5.437-4.448-9.889-9.888-9.889h-0.003h-4.998h-0.001c-5.439,0-9.889,4.452-9.889,9.889v143.398 c0,5.436,4.449,9.889,9.889,9.889h0.001h4.998h0.003c5.382,0,9.792-4.359,9.884-9.717c8.785,5.886,19.79,9.717,31.246,9.717 c31.471,0,56.647-26.575,56.647-58.042C433.662,106.541,433.659,106.463,433.659,106.385z M398.928,129.696 c-5.827,6.06-13.52,9.559-21.912,9.559c-8.623,0-16.084-3.499-21.911-9.559c-5.827-5.827-9.323-14.22-9.323-23.075 c0-0.08,0.001-0.158,0.001-0.236c0.059-9.232,3.542-17.532,9.322-23.311c5.827-6.06,13.288-9.559,21.911-9.559 c8.393,0,16.085,3.499,21.912,9.559c5.78,5.778,9.264,14.079,9.323,23.311c0,0.078,0.002,0.156,0.002,0.236 C408.253,115.477,404.758,123.869,398.928,129.696z"></path> <path fill="currentcolor" class="ambita-logo__svg__path" d="M565.793,48.106h-15.241v-36.73c0-5.437-4.45-9.889-9.889-9.889h-5.001 c-5.438,0-9.889,4.452-9.889,9.889v36.73h-15.241c-5.44,0-9.889,4.451-9.889,9.892v4.999c0,5.439,4.449,9.89,9.889,9.89h15.241 v81.888c0,5.436,4.451,9.889,9.889,9.889h5.001c5.438,0,9.889-4.453,9.889-9.889V72.887h15.241c5.44,0,9.889-4.45,9.889-9.89 v-4.999C575.682,52.558,571.233,48.106,565.793,48.106z"></path> <circle fill="currentcolor" class="ambita-logo__svg__path" cx="467.919" cy="13.877" r="13.878"></circle> </svg>
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+  xml:space="preserve" preserveAspectRatio="xMinYMid meet" x="0px" y="0px"
+  viewBox="0 0 694.11 164.663" style="enable-background:new 0 0 694.11 164.663;" role="img"
+  aria-labelledby="ambita-logo-title"> <title id="ambita-logo-title">Ambita</title> <path fill="currentcolor" class="ambita-logo__svg__path" d="M101.071,48.106h-5.002c-5.439,0-9.889,4.451-9.889,9.892v0.155 c-8.794-6.17-19.177-10.047-30.702-10.047c-15.85,0-29.602,6.764-39.627,17.485C5.876,76.03,0.058,90.393,0.002,106.385 c0,0.078-0.002,0.156-0.002,0.236c0,15.848,5.827,30.302,15.85,41.022c10.025,10.493,23.778,17.02,39.627,17.02 c11.525,0,21.909-3.648,30.705-9.814c0.04,5.403,4.472,9.814,9.886,9.814h5.002c5.437,0,9.887-4.453,9.887-9.889V57.998 C110.958,52.558,106.507,48.106,101.071,48.106z M86.18,108.901c-0.508,8.609-3.876,16.153-9.021,21.729 c-5.595,5.826-13.522,9.089-21.681,9.089c-8.389,0-16.316-3.263-21.677-9.089c-5.595-6.063-8.859-14.453-8.859-24.009 c0-0.08,0.003-0.158,0.003-0.236c0.051-9.691,3.305-17.993,8.856-23.777c5.36-6.293,13.288-9.556,21.677-9.556 c8.159,0,16.086,3.263,21.681,9.556c5.145,5.36,8.513,12.888,9.021,21.68v2.098V108.901z"></path> <path fill="currentcolor" class="ambita-logo__svg__path" d="M281.806,48.106H150.147l0,0c-5.439,0-9.891,4.451-9.891,9.892v96.776 c0,5.436,4.451,9.889,9.891,9.889h4.999c5.439,0,9.89-4.453,9.89-9.889V72.887h38.551v81.888c0,5.436,4.451,9.889,9.89,9.889h4.999 c5.439,0,9.889-4.453,9.889-9.889V72.887h38.551v81.888c0,5.436,4.452,9.889,9.889,9.889h5.001c5.44,0,9.889-4.453,9.889-9.889 V57.998C291.695,52.558,287.247,48.106,281.806,48.106z"></path> <path fill="currentcolor" class="ambita-logo__svg__path" d="M684.222,48.106h-5.001c-5.44,0-9.889,4.451-9.889,9.892v0.155 c-8.794-6.17-19.178-10.047-30.702-10.047c-15.85,0-29.601,6.764-39.626,17.485c-9.976,10.438-15.791,24.801-15.848,40.793 c0,0.078-0.003,0.156-0.003,0.236c0,15.848,5.827,30.302,15.851,41.022c10.025,10.493,23.776,17.02,39.626,17.02 c11.525,0,21.908-3.648,30.702-9.814c0.041,5.403,4.475,9.814,9.889,9.814h5.001c5.438,0,9.889-4.453,9.889-9.889V57.998 C694.11,52.558,689.659,48.106,684.222,48.106z M669.332,108.907c-0.511,8.608-3.878,16.147-9.023,21.723 c-5.595,5.826-13.519,9.089-21.68,9.089c-8.391,0-16.315-3.263-21.679-9.089c-5.594-6.063-8.855-14.453-8.855-24.009 c0-0.08,0-0.158,0.003-0.236c0.051-9.691,3.305-17.993,8.852-23.777c5.363-6.293,13.288-9.556,21.679-9.556 c8.16,0,16.085,3.263,21.68,9.556c5.145,5.357,8.512,12.886,9.023,21.672v2.106V108.907z"></path> <path fill="currentcolor" class="ambita-logo__svg__path" d="M470.419,48.106h-5c-5.438,0-9.891,4.451-9.891,9.892v96.776c0,5.436,4.452,9.889,9.891,9.889h5 c5.439,0,9.889-4.453,9.889-9.889V57.998C480.308,52.558,475.857,48.106,470.419,48.106z"></path> <path fill="currentcolor" class="ambita-logo__svg__path" d="M433.659,106.385c-0.124-31.832-25.25-58.278-56.643-58.278c-11.422,0-22.608,3.731-31.234,9.792 l-0.008-46.522c0-5.437-4.448-9.889-9.888-9.889h-0.003h-4.998h-0.001c-5.439,0-9.889,4.452-9.889,9.889v143.398 c0,5.436,4.449,9.889,9.889,9.889h0.001h4.998h0.003c5.382,0,9.792-4.359,9.884-9.717c8.785,5.886,19.79,9.717,31.246,9.717 c31.471,0,56.647-26.575,56.647-58.042C433.662,106.541,433.659,106.463,433.659,106.385z M398.928,129.696 c-5.827,6.06-13.52,9.559-21.912,9.559c-8.623,0-16.084-3.499-21.911-9.559c-5.827-5.827-9.323-14.22-9.323-23.075 c0-0.08,0.001-0.158,0.001-0.236c0.059-9.232,3.542-17.532,9.322-23.311c5.827-6.06,13.288-9.559,21.911-9.559 c8.393,0,16.085,3.499,21.912,9.559c5.78,5.778,9.264,14.079,9.323,23.311c0,0.078,0.002,0.156,0.002,0.236 C408.253,115.477,404.758,123.869,398.928,129.696z"></path> <path fill="currentcolor" class="ambita-logo__svg__path" d="M565.793,48.106h-15.241v-36.73c0-5.437-4.45-9.889-9.889-9.889h-5.001 c-5.438,0-9.889,4.452-9.889,9.889v36.73h-15.241c-5.44,0-9.889,4.451-9.889,9.892v4.999c0,5.439,4.449,9.89,9.889,9.89h15.241 v81.888c0,5.436,4.451,9.889,9.889,9.889h5.001c5.438,0,9.889-4.453,9.889-9.889V72.887h15.241c5.44,0,9.889-4.45,9.889-9.89 v-4.999C575.682,52.558,571.233,48.106,565.793,48.106z"></path> <circle fill="currentcolor" class="ambita-logo__svg__path" cx="467.919" cy="13.877" r="13.878"></circle> </svg>

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) */