@ambita/design-system 6.0.2-431.0 → 6.1.0

package/README.md

@@ -107,13 +107,13 @@ npm run test:unit
 npm run test:coverage
 ```
 
-#### Lint with [ESLint](https://eslint.org/)
+#### Lint code
 
 ```sh
 npm run lint
 ```
 
-#### Format with [Prettier](https://prettier.io/)
+#### Format code with [oxfmt](https://oxc.rs/docs/guide/usage/formatter.html)
 
 ```sh
 npm run format

package/dist/css/ambita-dark.scss

@@ -13,6 +13,7 @@
 
 /* Layer 0: Legacy SCSS Variables (for legacy Aux components) */
 @use './colors-css-variables.scss';
+@use './utilities.scss' as *;
 
 /* Layer 1: Semantic Tokens (primitives + theme-specific) */
 @import url('./themes/ambita-dark/semantic-tokens.css');

package/dist/css/ambita-light.scss

@@ -15,6 +15,7 @@
 
 /* Layer 0: Legacy SCSS Variables (for legacy Aux components) */
 @use './colors-css-variables.scss';
+@use './utilities.scss' as *;
 
 /* Layer 1: Semantic Tokens (primitives + theme-specific) */
 @import url('./themes/ambita-light/semantic-tokens.css');

package/dist/css/ambita-old.scss

@@ -15,6 +15,7 @@
 
 /* Layer 0: Legacy SCSS Variables (for legacy Aux components) */
 @use './colors-css-variables.scss';
+@use './utilities.scss' as *;
 
 /* Layer 1: Semantic Tokens (primitives + theme-specific) */
 @import url('./themes/ambita-old/semantic-tokens.css');

package/dist/css/base.scss

@@ -11,6 +11,7 @@
 
 /* Layer 0: Legacy SCSS Variables (for legacy Aux components) */
 @use './colors-css-variables.scss';
+@use './utilities.scss' as *;
 
 /* Layer 1: Semantic Tokens - Using Ambita Light as default */
 @import url('./themes/ambita-light/semantic-tokens.css');

package/dist/css/byggesoknaden.scss

@@ -13,6 +13,7 @@
 
 /* Layer 0: Legacy SCSS Variables (for legacy Aux components) */
 @use './colors-css-variables.scss';
+@use './utilities.scss' as *;
 
 /* Layer 1: Semantic Tokens (primitives + theme-specific) */
 @import url('./themes/byggesoknaden/semantic-tokens.css');

package/dist/css/neo-tokens.scss

@@ -53,12 +53,6 @@ $border-color-error: var(--border-color-error);
 /* ============================================================================
    BUTTON COMPONENT TOKENS
    ============================================================================ */
-/*
-Font sizes:
-  - 14px (default)
-  - 16px (large)
-  - 12px (small)
- */
 
 $default-transition-duration: 200ms;
 
@@ -88,10 +82,16 @@ $button-secondary-border: var(--border-color-secondary-default);
 $button-secondary-border-hover: var(--border-color-secondary-hover);
 $button-secondary-border-width: var(--border-weight-button);
 
+// Tertiary Button
+$button-tertiary-bg: transparent;
+$button-tertiary-bg-disabled: transparent;
+$button-tertiary-text: var(--text-link-default);
+
 // Button Sizing & Spacing
 $button-padding-x: 24px;
-$button-padding-y: 11px;
+$button-padding-y: 10px;
 $button-padding-x-icon: 12px;
+$button-icon-only-padding: var(--number-spacing-spacing-s);
 $button-icon-size: 18px;
 $button-icon-gap: 8px;
 
@@ -102,13 +102,15 @@ $button-small-icon-size: 18px;
 
 // Button Typography
 $button-font-size: var(--font-size-s);
-$button-font-size-small: var(--font-size-xxs);
+$button-font-size-small: var(--font-size-xs);
+$button-tertiary-font-size-small: var(--font-size-xxs);
 $button-font-weight: var(--font-weight-medium);
-$button-line-height: var(--font-line-height-s);
+$button-line-height: var(--font-line-height-xs);
 $button-line-height-small: var(--font-line-height-xxs);
 
 // Button Border
 $button-border-radius: var(--corner-radius-l);
+$button-icon-only-border-radius: var(--corner-radius-m);
 
 /* ============================================================================
    LINK BUTTON TOKENS
@@ -329,7 +331,7 @@ $pagination-button-shadow: none;
 $banner-padding-x: 15px;
 $banner-padding-y: 10px;
 $banner-icon-margin-right: 12px;
-$banner-content-max-width: 691px;
+$banner-max-width: 700px;
 $banner-gap: 12px;
 
 // Banner Border & Radius
@@ -367,22 +369,18 @@ $banner-list-item-margin-bottom: 4px;
 $banner-error-bg: var(--fill-error);
 $banner-error-border: var(--fill-error-stronger);
 $banner-error-icon-color: var(--icon-fill-error);
-$banner-error-text: var(--text-default);
 
 $banner-warning-bg: var(--fill-warning);
 $banner-warning-border: var(--fill-warning-stronger);
 $banner-warning-icon-color: var(--fill-warning-stronger);
-$banner-warning-text: var(--text-default);
 
 $banner-info-bg: var(--fill-info);
 $banner-info-border: var(--fill-info-stronger);
 $banner-info-icon-color: var(--fill-info-stronger);
-$banner-info-text: var(--text-default);
 
 $banner-success-bg: var(--fill-success);
 $banner-success-border: var(--fill-success-stronger);
 $banner-success-icon-color: var(--fill-success-stronger);
-$banner-success-text: var(--text-default);
 
 // Banner Interactive States
 $banner-focus-shadow: var(--Shadow-Focus);
@@ -393,9 +391,9 @@ $banner-close-btn-color: var(--icon-fill-dark);
 $banner-link-color: var(--text-link-default);
 $banner-link-color-hover: var(--text-link-active);
 
-// Seperator Styling
-$seperator-background-color: var(--border-color-input);
-$seperator-height: 2px;
+// Separator Styling
+$separator-background-color: var(--border-color-input);
+$separator-height: 2px;
 
 /* ============================================================================
    TABS COMPONENT TOKENS
@@ -535,3 +533,30 @@ $datepicker-footer-font-size: var(--font-size-xxs, 12px);
 // Datepicker Animation
 $datepicker-animation-duration-in: 150ms;
 $datepicker-animation-duration-out: 100ms;
+
+/* ============================================================================
+   SPINNER COMPONENT TOKENS
+   ============================================================================ */
+
+// Spinner colors
+// spinner-lighter/lighter = track (background ring)
+$spinner-color-track: var(--border-color-spinner-light);
+// spinner-dark/darker = indicator (moving arc)
+$spinner-color-indicator: var(--border-color-spinner-dark);
+
+// Spinner sizes (width/height of the circle)
+$spinner-size-small: 28px;
+$spinner-size-medium: 48px;
+$spinner-size-large: 96px;
+
+// Spinner border widths
+$spinner-border-small: 3px;
+$spinner-border-medium: 5px;
+$spinner-border-large: 10px;
+
+// Spinner label font sizes
+$spinner-label-font-size-medium: 12px;
+$spinner-label-font-size-large: 24px;
+
+// Spinner label margin (space between indicator and label)
+$spinner-label-margin-top: 10px;

package/dist/css/utilities.scss

@@ -0,0 +1,59 @@
+/**
+ * Utility Classes
+ *
+ * Single-purpose utility classes for common patterns.
+ * All utilities are prefixed with 'aux-' to avoid collision with consuming projects.
+ */
+
+/*
+ * Hide only visually, but have it available for screen readers:
+ * https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
+ *
+ * 1. For long content, line feeds are not interpreted as spaces and small width
+ *    causes content to wrap 1 word per line:
+ *    https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
+ */
+
+.aux-visually-hidden,
+.aux-sr-only {
+  border: 0;
+  clip: rect(0, 0, 0, 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+  /* 1 */
+}
+
+/*
+ * Extends the .aux-visually-hidden class to allow the element
+ * to be focusable when navigated to via the keyboard:
+ */
+
+.aux-visually-hidden.focusable:active,
+.aux-visually-hidden.focusable:focus,
+.aux-sr-only.focusable:active,
+.aux-sr-only.focusable:focus {
+  clip: auto;
+  height: auto;
+  margin: 0;
+  overflow: visible;
+  position: static;
+  white-space: inherit;
+  width: auto;
+}
+
+/**
+ * Truncates text with ellipsis when it overflows its container.
+ * Requires a defined width or max-width on the element or its parent.
+ *
+ * Example: Long labels in dropdowns, tag text, button text
+ */
+.aux-truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}