@ambita/design-system 5.6.1-2551.0 → 5.7.1-101.0

package/README.md

@@ -1,52 +1,50 @@
-# Design System
+# Ambita Design System
 
-Written in Vue 3 using Vite and TypeScript.
+Vue 3 component library built with TypeScript, Vite, Reka UI, and SCSS.
 
-## Getting started
+## Getting Started
 
-### First run
+### First Run
 
-Generate NPM token (try the 'npm whoami' command to see if you get any response). If no response, complete the following guide: https://ambita.atlassian.net/wiki/spaces/AI/pages/3060006975/Generate+NPM_TOKEN
+Generate NPM token (try `npm whoami` to check if configured). If no response, follow this guide: https://ambita.atlassian.net/wiki/spaces/AI/pages/3060006975/Generate+NPM_TOKEN
 
-To get the project up and running locally, install npm packages and start vite:
+To get the project up and running locally:
 
 ```sh
-npm i && npm run storybook
+npm i
+npm run build:storybook:prepare
+npm run storybook
 ```
 
-### [Vivid Blueprint](https://github.com/Ambita/vivid-blueprint)
-
-We also have an optional front-end template which we highly recommend using for new Ambita front-end projects. It is based on the create-vue project and comes pre-installed with this design system along with other goodies.
+This will install dependencies, build the required theme assets, and start Storybook on port 6006.
 
-### Contribution
+> **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.
 
-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
-```
+### Architecture
 
-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.
+The design system features:
 
-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.
+- **Two Component Types:** Legacy Aux components and modern Neo components (built with Reka UI)
+- **Streamlined Token System:** 93 CSS custom properties (down from 157)
+- **Shared Dropdown Tokens:** All dropdown components use common tokens
+- **SCSS Mixins:** Reusable patterns in `src/css/neo-mixins.scss`
 
-```sh
-npm i @ambita/design-system
-```
+### Documentation
 
-#### How to merge branches
+- **[Ambita Style Guide](https://design.ambita.com)** - Brand guidelines, colors, typography, and visual standards
 
-**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".
+Key guides for contributors:
 
-<img alt="create a merge commit in GitHub" src="docs/merge-commit.png" width="400">
+- **[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
+- **[docs/INTERACTION_TESTING_GUIDE.md](docs/INTERACTION_TESTING_GUIDE.md)** - Storybook interaction tests
+- **[.claude/CLAUDE.md](.claude/CLAUDE.md)** - Project instructions for Claude Code
 
-#### New Components
+### [Vivid Blueprint](https://github.com/Ambita/vivid-blueprint)
 
-Every new component and helper should have a storybook document associated with it and preferably unit tests as well. Remember to export it in `./src/index.ts`.
+Recommended front-end template for new Ambita projects, pre-configured with this design system.
 
 ### Scripts
 
@@ -108,5 +106,7 @@ npm run type-check
 
 ## Links
 
-- https://github.com/Ambita/vivid-blueprint
-- https://github.com/Ambita/design-system-icons
+- [Vivid Blueprint](https://github.com/Ambita/vivid-blueprint)
+- [Icons](https://github.com/Ambita/design-system-icons)
+- [Reka UI](https://reka-ui.com)
+

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

@@ -0,0 +1,238 @@
+// 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-weight-bold: 700;
+$amb-font-weight-medium: 500;
+$amb-font-weight-regular: 400;
+$amb-font-weight-semi-bold: 600;
+$bs-color-black: #293540; // For marketing and UI
+$bs-color-blue-1: #dde9f2; // For UI
+$bs-color-blue-2: #4b9bd0; // For UI
+$bs-color-blue-3: #2d74a2; // For UI
+$bs-color-blue-4: #1b5981; // For UI
+$bs-color-blue-5: #3a2ea3; // For UI
+$bs-color-green-1: #c1eecb; // For UI
+$bs-color-green-2: #31b298; // For UI
+$bs-color-green-3: #218376; // For UI
+$bs-color-grey-1: #f6f8fb; // For marketing and UI
+$bs-color-grey-2: #eef0f3; // For marketing and UI
+$bs-color-grey-3: #e1e1e1; // For marketing and UI
+$bs-color-grey-4: #bebebe; // For marketing and UI
+$bs-color-grey-5: #83979f; // For marketing and UI
+$bs-color-grey-6: #555555; // For marketing and UI
+$bs-color-orange: #e19d2f; // For UI
+$bs-color-primary-blue: #3d5567; // For marketing and UI
+$bs-color-primary-green: #3db08e; // For marketing and UI
+$bs-color-purple-1: #9d68b2; // For UI
+$bs-color-purple-2: #7e558e; // For UI
+$bs-color-red-1: #ffe8d9; // For UI
+$bs-color-red-2: #da5f52; // For UI
+$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-line-height-14: 14px;
+$bs-font-line-height-16: 16px;
+$bs-font-line-height-18: 18px;
+$bs-font-line-height-20: 20px;
+$bs-font-line-height-22: 22px;
+$bs-font-line-height-24: 24px;
+$bs-font-line-height-28: 28px;
+$bs-font-line-height-34: 34px;
+$bs-font-line-height-54: 54px;
+$bs-font-size-12: 12px;
+$bs-font-size-14: 14px;
+$bs-font-size-16: 16px;
+$bs-font-size-18: 18px;
+$bs-font-size-20: 20px;
+$bs-font-size-24: 24px;
+$bs-font-size-30: 30px;
+$bs-font-size-50: 50px;
+$bs-font-weight-bold: 700;
+$bs-font-weight-regular: 400;
+$bs-font-weight-semi-bold: 600;
+$color-error-ambita-red-100: #ffe8d9;
+$color-error-ambita-red-200: #ffd5b9;
+$color-error-ambita-red-300: #ff7a5d;
+$color-error-ambita-red-400: #f69bb9;
+$color-error-ambita-red-500: #c10000;
+$color-info-ambita-blue-100: #e0f3ff;
+$color-info-ambita-blue-200: #c0e7ff;
+$color-info-ambita-blue-300: #32a6f6;
+$color-neutral-ambita-dark-blue: #201e38; // Used in dark mode
+$color-neutral-ambita-focus: #3a2ea3;
+$color-neutral-ambita-grey-100: #f5f5f5;
+$color-neutral-ambita-grey-200: #e1e1e1;
+$color-neutral-ambita-grey-300: #bebebe;
+$color-neutral-ambita-grey-400: #555555;
+$color-neutral-ambita-white: #ffffff;
+$color-primary-ambita-purple-300: #deb9f9;
+$color-primary-ambita-purple-600: #0d0a27;
+$color-secondary-ambita-peach-100: #fff4e7;
+$color-secondary-ambita-peach-200: #ffe9d0;
+$color-secondary-ambita-peach-300: #f8c087;
+$color-secondary-ambita-purple-100: #f3edf7;
+$color-secondary-ambita-purple-200: #e9d7ff;
+$color-secondary-ambita-purple-400: #ad83cc;
+$color-secondary-ambita-purple-500: #381c4d;
+$color-success-ambita-green-100: #eff8f0;
+$color-success-ambita-green-200: #bee5e3;
+$color-success-ambita-green-250: #d5ffda;
+$color-success-ambita-green-300: #04d900;
+$color-success-ambita-green-400: #216443;
+$color-warning-ambita-yellow-100: #ffffe0;
+$color-warning-ambita-yellow-200: #ffe9d0; // Brukes på tag
+$color-warning-ambita-yellow-300: #ffffb7; // Brukes på tag
+$color-warning-ambita-yellow-400: #ffd50d;
+$font-line-height-12: 12px;
+$font-line-height-16: 16px;
+$font-line-height-18: 18px;
+$font-line-height-19: 19px;
+$font-line-height-22: 22px;
+$font-line-height-24: 24px;
+$font-line-height-26: 26px;
+$font-line-height-34: 34px;
+$font-line-height-54: 54px;
+$font-size-12: 12px;
+$font-size-14: 14px;
+$font-size-16: 16px;
+$font-size-18: 18px;
+$font-size-20: 20px;
+$font-size-22: 22px;
+$font-size-30: 30px;
+$font-size-50: 50px;
+$number-border-border-radius-10: 10px;
+$number-border-border-radius-2: 2px;
+$number-border-border-radius-20: 20px;
+$number-border-border-radius-3: 3px;
+$number-border-border-radius-30: 30px;
+$number-border-border-radius-5: 5px;
+$number-border-border-weight-1: 1px;
+$number-border-border-weight-2: 2px;
+$number-border-border-weight-3: 3px;
+$number-number-count: 1;
+$number-spacing-spacing-2-xl: 30px;
+$number-spacing-spacing-l: 20px;
+$number-spacing-spacing-m: 15px;
+$number-spacing-spacing-s: 10px;
+$number-spacing-spacing-xl: 25px;
+$number-spacing-spacing-xs: 5px;
+$border-weight-checkbox-error: 3px;
+$border-weight-input-error: 2px;
+$corner-radius-s: 2px;
+$corner-radius-xs: 2px;
+$corner-radius-xxs: 2px;
+$bg-brand-1: $bs-color-green-1; // Bakgrunn/fyllfarge som formidler merkevaren. Kan brukes til å skille elementer på en side eller dekorative elementer.
+$bg-brand-2: $bs-color-blue-4; // Bakgrunn/fyllfarge som formidler merkevaren. Kan brukes til å skille elementer på en side eller dekorative elementer.
+$bg-brand-3: $bs-color-blue-3; // Bakgrunn/fyllfarge som formidler merkevaren. Kan brukes til å skille elementer på en side eller dekorative elementer.
+$bg-brand-4: $bs-color-blue-2; // Bakgrunn/fyllfarge som formidler merkevaren. Kan brukes til å skille elementer på en side eller dekorative elementer.
+$bg-brand-5: $bs-color-primary-green; // Bakgrunn/fyllfarge som formidler merkevaren. Kan brukes til å skille elementer på en side eller dekorative elementer.
+$bg-brand-6: $bs-color-primary-blue; // Bakgrunn/fyllfarge som formidler merkevaren. Kan brukes til å skille elementer på en side eller dekorative elementer.
+$bg-neutral-1: $bs-color-grey-1; // Neutral bakgrunnsfarge for å skille elementer på en side eller til dekorative elementer.
+$bg-neutral-2: $bs-color-grey-2; // Neutral bakgrunnsfarge for å skille elementer på en side eller til dekorative elementer.
+$bg-page-brand: $bs-color-blue-1; // Dempet bakgrunnsfarge som formidler merkevaren. For å bruke på en side.
+$bg-page-default: $bs-color-white; // Default bakgrunnsfarge for å bruke på en side.
+$bg-page-subtle: $bs-color-grey-1; // Alternativ bakgrunnsfarge for å bruke på en side.
+$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-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.
+$border-color-selected: $bs-color-green-3; // Fyllfarge på en ramme for å indikere at et element er markert/valgt. F.eks. radio eller sjekkboks i kort.
+$border-color-separator: $bs-color-grey-5; // Fyllfarge for å bruke til separator/divider.
+$border-color-spinner-dark: $bs-color-blue-4; // Fyllfarge brukt på ramme i en spinner.
+$border-color-spinner-darker: $bs-color-blue-4; // Fyllfarge brukt på ramme i en spinner.
+$border-color-spinner-light: $bs-color-blue-2; // Fyllfarge brukt på ramme i en spinner.
+$border-color-spinner-lighter: $bs-color-blue-1; // Fyllfarge brukt på ramme i en spinner.
+$border-weight-button: $number-border-border-weight-1;
+$border-weight-input: $number-border-border-weight-1;
+$corner-radius-l: $number-border-border-radius-2;
+$corner-radius-m: $number-border-border-radius-2;
+$corner-radius-xl: $number-border-border-radius-2;
+$fill-button-active: $bs-color-blue-2; // Fillfarge for interaktive elementer i aktiv tilstand.
+$fill-button-primary-default: $bs-color-blue-3; // Fyllfarge for primære knapper
+$fill-button-primary-hover: $bs-color-blue-2; // Fyllfarge for primære knapper i hover tilstand.
+$fill-button-secondary-default: $bs-color-white; // Fyllfarge for sekundære knapper
+$fill-button-secondary-hover: $bs-color-blue-2; // Fyllfarge for sekundære knapper i hover tilstand.
+$fill-card-default: $bs-color-white; // Nøytral fyllfarge for Card-komponent.
+$fill-card-raised: $bs-color-grey-2; // Litt hevet fyllfarge for å skille elementer fra bakgrunn. Brukes på Card-komponent.
+$fill-disabled: $bs-color-grey-3; // Fyllfarge for elementer i deaktivert tilstand.
+$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-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.
+$fill-on-focus: $bs-color-white; // Fyllfarge for interaktive elementer som er i fokusert tilstand.
+$fill-select-hover: $bs-color-green-1; // Dempet fyllfarge for å bruke på hover i elementer som  f.eks. radio og sjekkboks.
+$fill-selected: $bs-color-green-1; // Dempet fyllfarge som indikerer at et element er valgt. F.eks. radio og sjekkboks.
+$fill-selected-stronger: $bs-color-green-3; // Sterk fyllfarge som indikerer at et element er valgt. F.eks. radio og sjekkboks.
+$fill-success: $bs-color-green-1; // Dempet fyllfarge som indikerer positiv informasjon.
+$fill-success-stronger: $bs-color-green-2; // Sterk fyllfarge som indikerer positiv informasjon.
+$fill-tag-blue: $bs-color-blue-1; // Fyllfarge for tag-komponent. Fargen betyr ikke noe.
+$fill-tag-green: $bs-color-green-1; // Fyllfarge for tag-komponent. Fargen betyr ikke noe.
+$fill-tag-grey: $bs-color-grey-2; // Fyllfarge for tag-komponent. Fargen betyr ikke noe.
+$fill-tag-red: $bs-color-red-1; // Fyllfarge for tag-komponent. Fargen betyr ikke noe.
+$fill-tag-yellow: $bs-color-yellow-2; // Fyllfarge for tag-komponent. Fargen betyr ikke noe.
+$fill-warning: $bs-color-yellow-1; // Dempet fyllfarge som indikerer advarsel.
+$fill-warning-stronger: $bs-color-orange; // Sterk fyllfarge som indikerer advarsel.
+$fill-white: $bs-color-white; // Nøytral fyllfarge. Brukt i f.eks. accordion, sjekkboks, radios.
+$font-family-display-serif: $bs-font-family-bs-font; // Display serif font for å brukes til store titler og til markedsføringsflater.
+$font-family-sans-serif: $bs-font-family-bs-font; // Sans-serif font for å brukes   på både nettsider, grensesnitt og andre markedsføringsflater.
+$font-line-height-l: $bs-font-line-height-28;
+$font-line-height-m: $bs-font-line-height-22;
+$font-line-height-s: $bs-font-line-height-20;
+$font-line-height-xl: $bs-font-line-height-28;
+$font-line-height-xs: $bs-font-line-height-18;
+$font-line-height-xxl: $bs-font-line-height-34; // Til store overskrifter
+$font-line-height-xxs: $bs-font-line-height-16;
+$font-line-height-xxxl: $bs-font-line-height-54; // Til store overskrifter
+$font-line-height-xxxs: $bs-font-line-height-14; // For mindre tekster i grensesnittet. F.eks. caption.
+$font-size-l: $bs-font-size-24;
+$font-size-m: $bs-font-size-20;
+$font-size-s: $bs-font-size-18;
+$font-size-xl: $bs-font-size-30; // Til store overskrifter
+$font-size-xs: $bs-font-size-16;
+$font-size-xxl: $bs-font-size-50; // Til store overskrifter
+$font-size-xxs: $bs-font-size-14; // For mindre tekster i grensesnittet, f.eks. status badge.
+$font-size-xxxs: $bs-font-size-12; // For veldig små tekster i grensesnittet, f.eks. tags.
+$font-weight-bold: $bs-font-weight-bold;
+$font-weight-medium: $bs-font-weight-semi-bold;
+$font-weight-regular: $bs-font-weight-regular;
+$font-weight-semi-bold: $bs-font-weight-semi-bold;
+$icon-fill-action-active: $bs-color-primary-blue; // Fyllfarge for å bruke på ikoner som står sammen med interaktive elementer i aktiv tilstand.
+$icon-fill-action-dark: $bs-color-white; // Fyllfarge for å bruke på ikoner som står sammen med interaktive elementer, men fargen forblir den samme i lys og mørk modus. F.eks. i hover og aktiv tilstand.
+$icon-fill-action-default: $bs-color-blue-3; // Fyllfarge for å bruke på ikoner som står sammen med interaktive elementer.
+$icon-fill-action-light: $bs-color-white; // Fyllfarge for å bruke på ikoner som står sammen med interaktive elementer på en mørk bakgrunn.
+$icon-fill-dark: $bs-color-black; // Mørk fyllfarge for å bruke på ikoner. Fargen forblir den samme i lys og mørk modus.
+$icon-fill-disabled: $bs-color-grey-6; // Fyllfarge for å bruke på ikoner som står sammen med interaktive elementer i deaktivert tilstand.
+$icon-fill-error: $bs-color-red-3; // Sterk fyllfarge for å bruke på ikoner som indikerer en feil. Brukes i sammenheng med feilmelding tekst.
+$icon-fill-icon-on-light: $bs-color-primary-blue; // Fyllfarge for å bruke på ikoner som står sammen med interaktive elementer, men fargen forblir den samme i lys og mørk modus. Tilpasset flere themes.
+$icon-fill-selected: $bs-color-green-3; // Fyllfarge for å bruke på ikoner for å indikere at et element er markert/valgt.
+$icon-fill-white: $bs-color-white; // Hvit fyllfarge for å bruke på ikoner. Fargen forblir den samme i lys og mørk modus. Brukt f.eks. på en sjekkboks i deaktivert tilstand.
+$text-action-active: $bs-color-white; // Tekstfarge i interaktive elementer, som f.eks. knapper, i hover og aktiv tilstand. Fargen forblir den samme i lys og mørk modus.
+$text-action-disabled: $bs-color-grey-6; // Tekstfarge i interaktive elementer, som f.eks. knapper, i deaktivert tilstand.
+$text-action-on-light: $bs-color-blue-3; // Tekstfarge for interaktive elementer, som f.eks. Accordion Title. Fargen forblir den samme i lys og mørk modus.
+$text-button-primary: $bs-color-white; // Tekstfargen som brukes over en primær komponent.
+$text-button-secondary: $bs-color-blue-3; // Tekstfargen som brukes over en sekundær komponent.
+$text-default: $bs-color-black; // Default tekstfarge for f.eks. body, hjelpetekst.
+$text-error: $bs-color-red-3; // Sterk tekstfarge som indikerer en feilmelding.
+$text-feedback: $bs-color-black; // Tekstfarge i komponenter som f.eks. banner, toast, status-badge og tags. Fargen forblir den samme i lys og mørk modus.
+$text-feedback-inverse: $bs-color-black; // Tekstfarge i komponenter som f.eks. banner, toast, status-badge og tags.
+$text-heading-moderate: $bs-color-primary-blue; // Tekstfarge for store titler, headings og display tekster.
+$text-heading-strong: $bs-color-black; // Tekstfarge for store titler, headings og display tekster.
+$text-input: $bs-color-black; // Tekstfarge for text-input, f.eks. inputfelt, søkefelt, select.
+$text-label: $bs-color-black; // Tekstfarge for label, f.eks. i komponenter som søkefelt, input, radio og sjekkboks.
+$text-label-hover: $bs-color-black; // Tekstfarge for label i hover state, f.eks. radio og sjekkboks.
+$text-label-on-success: $bs-color-black; // Tekstfarge for label som står på "success" fyllfarge. F.eks. radios og sjekkboks. Fargen forblir den samme i lys og mørk modus.
+$text-link-active: $bs-color-primary-blue; // Farge for å bruke på lenker i aktiv tilstand.
+$text-link-default: $bs-color-blue-3; // Default farge for å bruke på lenker
+$text-link-on-dark: $bs-color-white; // Farge for å bruke på lenker som står på en mørk bakgrunn. Fargen forblir den samme i lys og mørk modus.
+$text-link-on-dark-active: $bs-color-blue-1; // Farge for å bruke på lenker som står på en mørk bakgrunn (ikke dark mode) og er i aktiv tilstand.
+$text-link-on-light: $bs-color-primary-blue; // Farge for å bruke på lenker som står på en lys bakgrunn. Fargen forblir den samme i lys og mørk modus. F.eks. lenke som er i fokusert tilstand.
+$text-price: $bs-color-black; // Tekstfarge for å fremheve pris i brukergrensesnitt.