@ambita/design-system 5.7.1-21.0 → 5.7.1-2571.0

package/README.md

@@ -11,14 +11,10 @@ Generate NPM token (try `npm whoami` to check if configured). If no response, fo
 To get the project up and running locally:
 
 ```sh
-npm i
-npm run build:storybook:prepare
-npm run storybook
+npm i && npm run storybook
 ```
 
-This will install dependencies, build the required theme assets, and start Storybook on port 6006.
-
-> **Note:** The `build:storybook:prepare` step is required because Storybook needs the compiled theme CSS files in `dist/themes/`. If you see an error about missing `./dist/themes` directory, run this build step first.
+This will install dependencies and start Storybook on port 6006.
 
 ### Architecture
 
@@ -31,11 +27,8 @@ 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
@@ -46,6 +39,41 @@ Key guides for contributors:
 
 Recommended front-end template for new Ambita projects, pre-configured with this design system.
 
+### Contribution
+
+New features must be developed on separate feature branches and merged into dev through pull requests. A GitHub workflow will then automatically publish a new npm package to @ambita/design-system.
+It will have a dev tag and can be installed like this:
+
+```sh
+npm i @ambita/design-system@dev
+```
+
+To be able to commit, the code must pass a lint-check and all unit tests must run successfully.
+The code will be automatically formatted, but can also be run manually with a script shown below.
+
+After testing the @dev package, a PR to main from dev can be created.
+Post-merge, another workflow will be run, publishing a @latest package to npm which can be installed like this.
+
+```sh
+npm i @ambita/design-system
+```
+
+#### How to merge branches
+
+**IMPORTANT!** Branches merged to `dev` can be squash merged for a prettier history tree, but DON'T squash merge `dev` to `main`.
+Instead, chose "Create a merge commit".
+
+<img alt="create a merge commit in GitHub" src="docs/merge-commit.png" width="400">
+
+#### New Components
+
+Every new component must have:
+
+- ✅ Storybook documentation
+- ✅ Unit tests (Vitest)
+- ✅ Export in `./src/index.ts`
+- ✅ Follow Neo patterns if using Reka UI (see [NEO_COMPONENT_PATTERNS.md](docs/NEO_COMPONENT_PATTERNS.md))
+
 ### Scripts
 
 #### Compile and Hot-Reload for Development
@@ -106,7 +134,5 @@ npm run type-check
 
 ## Links
 
-- [Vivid Blueprint](https://github.com/Ambita/vivid-blueprint)
-- [Icons](https://github.com/Ambita/design-system-icons)
-- [Reka UI](https://reka-ui.com)
-
+- https://github.com/Ambita/vivid-blueprint
+- https://github.com/Ambita/design-system-icons

package/dist/ambita-logo.svg

@@ -1,4 +1 @@
-<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>
+<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>

package/dist/css/_tokens/_byggesoknaden.scss

@@ -1,7 +1,7 @@
 // Do not edit directly, this file was auto-generated.
 
-$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-family-display-serif: PT Serif;
+$amb-font-family-sans-serif: Inter;
 $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', Arial, Helvetica, sans-serif;
+$bs-font-family-bs-font: Source Sans pro;
 $bs-font-line-height-14: 14px;
 $bs-font-line-height-16: 16px;
 $bs-font-line-height-18: 18px;
@@ -138,7 +138,7 @@ $bg-page-subtle: $bs-color-grey-1; // Alternativ bakgrunnsfarge for å bruke på
 $border-color-card: $bs-color-grey-4; // Fyllfarge brukt på en ramme i "card"-komponent
 $border-color-disabled: $bs-color-grey-6; // Fyllfarge for å bruke på en ramme i komponenter som er i deaktivert tilstand.
 $border-color-error: $bs-color-red-3; // Fyllfarge for å bruke på en ramme for å indikere en feil.
-$border-color-focus: $bs-color-blue-5; // Fyllfarge for å bruke på en ramme i interaktive komponenter som er i fokusert tilstand.
+$border-color-focus: $bs-color-blue-3; // Fyllfarge for å bruke på en ramme i interaktive komponenter som er i fokusert tilstand.
 $border-color-input: $bs-color-grey-5; // Fyllfarge for å bruke på en ramme i alle input-komponenter.
 $border-color-secondary-default: $bs-color-blue-3; // Fyllfarge brukt på en ramme i sekundære knapper.
 $border-color-secondary-hover: $bs-color-blue-2; // Fyllfarge for å bruke på en ramme i sekundær knapp, kun i Ambita OLD theme.
@@ -164,7 +164,7 @@ $fill-disabled: $bs-color-grey-3; // Fyllfarge for elementer i deaktivert tilsta
 $fill-disabled-stronger: $bs-color-grey-4; // Fyllfarge for høykontrast elementer i deaktivert tilstand.
 $fill-error: $bs-color-red-1; // Dempet fyllfarge som indikerer feilmelding.
 $fill-error-stronger: $bs-color-red-2; // Sterk fyllfarge som indikerer feilmelding.
-$fill-hover-default: $bs-color-blue-1; // Fyllfarge for interaktive elementer
+$fill-hover-default: $bs-color-blue-2; // Fyllfarge for interaktive elementer
 $fill-info: $bs-color-blue-1; // Dempet fyllfarge som indikerer nøytral informasjon.
 $fill-info-stronger: $bs-color-blue-2; // Sterk fyllfarge som indikerer nøytral informasjon.
 $fill-input: $bs-color-white; // Fyllfarge for input-elementer.

package/dist/css/_tokens/byggesoknaden.css

@@ -3,8 +3,8 @@
  */
 
 :root {
-  --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-family-display-serif: PT Serif;
+  --amb-font-family-sans-serif: Inter;
   --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', Arial, Helvetica, sans-serif;
+  --bs-font-family-bs-font: Source Sans pro;
   --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-5
+    --bs-color-blue-3
   ); /** 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-1); /** Fyllfarge for interaktive elementer */
+  --fill-hover-default: var(--bs-color-blue-2); /** 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,14 +28,7 @@
      TYPOGRAPHY TOKENS
      Global font settings that can be overridden per theme
      ======================================================================== */
-  --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
-  );
+  --font-family-base: 'ff-din-round-web', sans-serif;
   /* ------------------------------------------------------------------------
     SHADOW TOKENS
     ------------------------------------------------------------------------ */
@@ -44,7 +37,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: 240px;
+  --tags-dropdown-max-height: 15rem;
   --tags-dropdown-separator-margin: 5px;
   --tags-dropdown-separator-height: 1px;
   /* TagsInput Dropdown Label */

package/dist/css/ambita-dark.css

@@ -3,8 +3,8 @@
  */
 
 :root {
-  --amb-font-family-display-serif: 'PT Serif', Georgia, 'Times New Roman', serif;
-  --amb-font-family-sans-serif: 'Inter', Arial, Helvetica, sans-serif;
+  --amb-font-family-display-serif: PT Serif;
+  --amb-font-family-sans-serif: Inter;
   --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', Arial, Helvetica, sans-serif;
+  --bs-font-family-bs-font: Source Sans pro;
   --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,9 +6,6 @@
  *
  * 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', Georgia, 'Times New Roman', serif;
-  --amb-font-family-sans-serif: 'Inter', Arial, Helvetica, sans-serif;
+  --amb-font-family-display-serif: PT Serif;
+  --amb-font-family-sans-serif: Inter;
   --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', Arial, Helvetica, sans-serif;
+  --bs-font-family-bs-font: Source Sans pro;
   --bs-font-line-height-14: 14px;
   --bs-font-line-height-16: 16px;
   --bs-font-line-height-18: 18px;
@@ -229,7 +229,7 @@
   --text-feedback-inverse: var(--color-primary-ambita-purple-600); /** Tekstfarge i komponenter som f.eks. banner, toast, status-badge og tags. */
   --text-heading-moderate: var(--color-secondary-ambita-purple-500); /** Tekstfarge for store titler, headings og display tekster. */
   --text-heading-strong: var(--color-primary-ambita-purple-600); /** Tekstfarge for store titler, headings og display tekster. */
-  --text-input: var(--color-primary-ambita-purple-600); /** Tekstfarge for text-input, f.eks. inputfelt, søkefelt, select. */
+  --text-input: var(--color-neutral-ambita-grey-400); /** Tekstfarge for text-input, f.eks. inputfelt, søkefelt, select. */
   --text-label: var(--color-primary-ambita-purple-600); /** Tekstfarge for label, f.eks. i komponenter som søkefelt, input, radio og sjekkboks. */
   --text-label-hover: var(--color-secondary-ambita-purple-500); /** Tekstfarge for label i hover state, f.eks. radio og sjekkboks. */
   --text-label-on-success: var(--color-primary-ambita-purple-600); /** Tekstfarge for label som står på "success" fyllfarge. F.eks. radios og sjekkboks. Fargen forblir den samme i lys og mørk modus. */

package/dist/css/ambita-light.scss

@@ -7,9 +7,6 @@
  * 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', Georgia, 'Times New Roman', serif;
-  --amb-font-family-sans-serif: 'Inter', Arial, Helvetica, sans-serif;
+  --amb-font-family-display-serif: PT Serif;
+  --amb-font-family-sans-serif: Inter;
   --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', Arial, Helvetica, sans-serif;
+  --bs-font-family-bs-font: Source Sans pro;
   --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,9 +7,6 @@
  * 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/byggesoknaden.css

@@ -3,8 +3,8 @@
  */
 
 :root {
-  --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-family-display-serif: PT Serif;
+  --amb-font-family-sans-serif: Inter;
   --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', Arial, Helvetica, sans-serif;
+  --bs-font-family-bs-font: Source Sans pro;
   --bs-font-line-height-14: 14px;
   --bs-font-line-height-16: 16px;
   --bs-font-line-height-18: 18px;
@@ -141,7 +141,7 @@
   --border-color-card: var(--bs-color-grey-4); /** Fyllfarge brukt på en ramme i "card"-komponent */
   --border-color-disabled: var(--bs-color-grey-6); /** Fyllfarge for å bruke på en ramme i komponenter som er i deaktivert tilstand. */
   --border-color-error: var(--bs-color-red-3); /** Fyllfarge for å bruke på en ramme for å indikere en feil. */
-  --border-color-focus: var(--bs-color-blue-5); /** Fyllfarge for å bruke på en ramme i interaktive komponenter som er i fokusert tilstand. */
+  --border-color-focus: var(--bs-color-blue-3); /** Fyllfarge for å bruke på en ramme i interaktive komponenter som er i fokusert tilstand. */
   --border-color-input: var(--bs-color-grey-5); /** Fyllfarge for å bruke på en ramme i alle input-komponenter. */
   --border-color-secondary-default: var(--bs-color-blue-3); /** Fyllfarge brukt på en ramme i sekundære knapper. */
   --border-color-secondary-hover: var(--bs-color-blue-2); /** Fyllfarge for å bruke på en ramme i sekundær knapp, kun i Ambita OLD theme. */
@@ -167,7 +167,7 @@
   --fill-disabled-stronger: var(--bs-color-grey-4); /** 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-1); /** Fyllfarge for interaktive elementer */
+  --fill-hover-default: var(--bs-color-blue-2); /** 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); /** Sterk fyllfarge som indikerer nøytral informasjon. */
   --fill-input: var(--bs-color-white); /** Fyllfarge for input-elementer. */

package/dist/css/byggesoknaden.scss

@@ -6,9 +6,6 @@
  *
  * 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

@@ -135,7 +135,6 @@
 
   padding: $dropdown-item-padding-y $dropdown-item-padding-x;
 
-  font-family: $font-family-sans-serif;
   color: $dropdown-item-text;
   font-size: $dropdown-item-font-size;
   line-height: 1;
@@ -185,7 +184,7 @@
  * Dropdown item with icon indicator (for multi-select)
  * Adds padding-left to accommodate the indicator
  */
-@mixin dropdown-item-with-indicator($indicator-width: 40px) {
+@mixin dropdown-item-with-indicator($indicator-width: 2.5rem) {
   @include dropdown-item-base;
   padding-left: $indicator-width;
   display: flex;
@@ -196,7 +195,7 @@
  * Dropdown empty state
  * Shown when no items match search/filter
  */
-@mixin dropdown-empty($padding-y: 8px, $padding-x: 8px) {
+@mixin dropdown-empty($padding-y: 0.5rem, $padding-x: 0.5rem) {
   padding: $padding-y $padding-x;
   text-align: center;
   font-size: 16px;
@@ -207,7 +206,7 @@
  * Dropdown separator
  * Divides groups of items
  */
-@mixin dropdown-separator($margin-y: 0px) {
+@mixin dropdown-separator($margin-y: 0rem) {
   margin-top: $margin-y;
   margin-bottom: $margin-y;
   height: 1px;
@@ -218,7 +217,7 @@
  * Dropdown group label
  * Labels for grouped items
  */
-@mixin dropdown-label($padding-y: 8px, $padding-x: 12px) {
+@mixin dropdown-label($padding-y: 0.5rem, $padding-x: 0.75rem) {
   padding: $padding-y $padding-x;
   font-size: 14px;
   font-weight: 600;
@@ -246,7 +245,6 @@
 
   padding: $input-padding-y $input-padding-x;
 
-  font-family: $font-family-sans-serif;
   font-size: $input-font-size;
   font-weight: $input-font-weight;
   line-height: $input-line-height;
@@ -382,7 +380,7 @@
 
   @keyframes slideInFromTop {
     from {
-      transform: translateY(-8px);
+      transform: translateY(-0.5rem);
     }
     to {
       transform: translateY(0);
@@ -391,7 +389,7 @@
 
   @keyframes slideInFromBottom {
     from {
-      transform: translateY(8px);
+      transform: translateY(0.5rem);
     }
     to {
       transform: translateY(0);
@@ -400,7 +398,7 @@
 
   @keyframes slideInFromLeft {
     from {
-      transform: translateX(-8px);
+      transform: translateX(-0.5rem);
     }
     to {
       transform: translateX(0);
@@ -409,135 +407,10 @@
 
   @keyframes slideInFromRight {
     from {
-      transform: translateX(8px);
+      transform: translateX(0.5rem);
     }
     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);
-}