@ambita/design-system 5.7.1-2771.0 → 5.7.1-2781.0

package/dist/css/neo-tokens.scss

@@ -67,10 +67,17 @@ $button-padding-x-icon: 12px;
 $button-icon-size: 18px;
 $button-icon-gap: 8px;
 
+// Button sizing & Spacing - Small
+$button-small-padding-x: 13px;
+$button-small-padding-y: 6px;
+$button-small-icon-size: 18px;
+
 // Button Typography
-$button-font-size: var(--font-size-xs);
-$button-font-weight: var(--font-weight-regular);
+$button-font-size: var(--font-size-s);
+$button-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-small: var(--font-line-height-xxs);
 
 // Button Border
 $button-border-radius: var(--corner-radius-l);
@@ -389,3 +396,61 @@ $banner-link-color-hover: var(--text-link-active);
 // Seperator Styling
 $seperator-background-color: var(--border-color-input);
 $seperator-height: 2px;
+
+/* ============================================================================
+   TABS COMPONENT TOKENS
+   ============================================================================ */
+
+// Tabs List
+$tabs-list-gap: var(--tabs-list-gap);
+$tabs-list-border-bottom-width: var(--tabs-list-border-bottom-width);
+$tabs-list-border-bottom-color: var(--tabs-list-border-bottom-color);
+
+// Tabs Trigger - Default State
+$tabs-trigger-padding-x: var(--tabs-trigger-padding-x);
+$tabs-trigger-padding-y: var(--tabs-trigger-padding-y);
+$tabs-trigger-font-size: var(--tabs-trigger-font-size);
+$tabs-trigger-font-weight: var(--tabs-trigger-font-weight);
+$tabs-trigger-line-height: var(--tabs-trigger-line-height);
+$tabs-trigger-color: var(--tabs-trigger-color);
+$tabs-trigger-boxed-color: var(--tabs-trigger-boxed-color);
+$tabs-trigger-bg: var(--tabs-trigger-bg);
+$tabs-trigger-border-radius: var(--tabs-trigger-border-radius);
+
+// Tabs Trigger - Hover State
+$tabs-trigger-color-hover: var(--tabs-trigger-color-hover);
+$tabs-trigger-bg-hover: var(--tabs-trigger-bg-hover);
+
+// Tabs Trigger - Active State
+$tabs-trigger-color-active: var(--tabs-trigger-color-active);
+$tabs-trigger-bg-active: var(--tabs-trigger-bg-active);
+$tabs-trigger-font-weight-active: var(--tabs-trigger-font-weight-active);
+
+// Tabs Trigger - Disabled State
+$tabs-trigger-opacity-disabled: var(--tabs-trigger-opacity-disabled);
+
+// Tabs Indicator (Line variant)
+$tabs-indicator-bg: var(--tabs-indicator-bg);
+$tabs-indicator-thickness: var(--tabs-indicator-thickness);
+$tabs-indicator-radius: var(--tabs-indicator-radius);
+
+// Tabs Trigger - Boxed Variant
+$tabs-trigger-boxed-bg: var(--tabs-trigger-boxed-bg);
+$tabs-trigger-boxed-bg-hover: var(--tabs-trigger-boxed-bg-hover);
+$tabs-trigger-boxed-bg-active: var(--tabs-trigger-boxed-bg-active);
+$tabs-trigger-boxed-color-active: var(--tabs-trigger-boxed-color-active);
+$tabs-trigger-boxed-border-width: var(--tabs-trigger-boxed-border-width);
+$tabs-trigger-boxed-border-color: var(--tabs-trigger-boxed-border-color);
+$tabs-trigger-boxed-border-radius: var(--tabs-trigger-boxed-border-radius);
+
+// Tabs Content
+$tabs-content-padding-y: var(--tabs-content-padding-y);
+$tabs-content-padding-x: var(--tabs-content-padding-x);
+
+// Tabs Vertical Orientation
+$tabs-vertical-list-gap: var(--tabs-vertical-list-gap);
+$tabs-vertical-trigger-border-left-width: var(--tabs-vertical-trigger-border-left-width);
+$tabs-vertical-trigger-border-left-color: var(--tabs-vertical-trigger-border-left-color);
+$tabs-vertical-trigger-border-left-color-active: var(
+  --tabs-vertical-trigger-border-left-color-active
+);

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

@@ -68,5 +68,61 @@
   --tags-button-radius: var(--corner-radius-xxs);
 
   --input-placeholder-opacity: 0.8;
-  --input-placeholder-color: var(--);
+  --input-placeholder-color: var(--selected-text-color);
+
+  /* ========================================================================
+     TABS COMPONENT TOKENS
+     Design tokens for the NeoTabs component
+     ======================================================================== */
+
+  /* Tabs List */
+  --tabs-list-gap: 0px;
+  --tabs-list-border-bottom-width: 1px;
+  --tabs-list-border-bottom-color: var(--border-color-separator);
+
+  /* Tabs Trigger - Default State */
+  --tabs-trigger-padding-x: 16px;
+  --tabs-trigger-padding-y: 12px;
+  --tabs-trigger-font-size: 18px;
+  --tabs-trigger-font-weight: 500;
+  --tabs-trigger-line-height: 22px;
+  --tabs-trigger-color: var(--text-default);
+  --tabs-trigger-bg: transparent;
+  --tabs-trigger-border-radius: 0px;
+
+  /* Tabs Trigger - Hover State */
+  --tabs-trigger-color-hover: var(--text-heading-strong);
+  --tabs-trigger-bg-hover: var(--fill-hover-default);
+
+  /* Tabs Trigger - Active State */
+  --tabs-trigger-color-active: var(--text-heading-strong);
+  --tabs-trigger-bg-active: transparent;
+  --tabs-trigger-font-weight-active: 500;
+
+  /* Tabs Trigger - Disabled State */
+  --tabs-trigger-opacity-disabled: 0.5;
+
+  /* Tabs Indicator (Line variant) */
+  --tabs-indicator-bg: var(--fill-button-primary-default);
+  --tabs-indicator-thickness: 3px;
+  --tabs-indicator-radius: 2px;
+
+  /* Tabs Trigger - Boxed Variant */
+  --tabs-trigger-boxed-bg: var(--fill-card-default);
+  --tabs-trigger-boxed-bg-hover: var(--fill-hover-default);
+  --tabs-trigger-boxed-bg-active: var(--fill-button-primary-default);
+  --tabs-trigger-boxed-color-active: var(--text-button-primary);
+  --tabs-trigger-boxed-border-width: 1px;
+  --tabs-trigger-boxed-border-color: var(--border-color-input);
+  --tabs-trigger-boxed-border-radius: var(--corner-radius-xs);
+
+  /* Tabs Content */
+  --tabs-content-padding-y: 16px; /* Horizontal orientation: top padding */
+  --tabs-content-padding-x: 16px; /* Vertical orientation: left padding */
+
+  /* Tabs Vertical Orientation */
+  --tabs-vertical-list-gap: 8px;
+  --tabs-vertical-trigger-border-left-width: 3px;
+  --tabs-vertical-trigger-border-left-color: transparent;
+  --tabs-vertical-trigger-border-left-color-active: var(--fill-button-primary-default);
 }

package/dist/css/themes/ambita-dark/component-tokens.css

@@ -56,4 +56,61 @@
   --tags-button-size: 24px;
   --tags-button-icon-size: 12px;
   --tags-button-radius: var(--corner-radius-xxs);
+
+  /* ========================================================================
+     TABS COMPONENT TOKENS
+     Design tokens for the NeoTabs component
+     ======================================================================== */
+
+  /* Tabs List */
+  --tabs-list-gap: 0px;
+  --tabs-list-border-bottom-width: 1px;
+  --tabs-list-border-bottom-color: var(--border-color-separator);
+
+  /* Tabs Trigger - Default State */
+  --tabs-trigger-padding-x: 16px;
+  --tabs-trigger-padding-y: 12px;
+  --tabs-trigger-font-size: 18px;
+  --tabs-trigger-font-weight: 500;
+  --tabs-trigger-line-height: 22px;
+  --tabs-trigger-color: var(--text-default);
+  --tabs-trigger-bg: transparent;
+  --tabs-trigger-border-radius: 0px;
+
+  /* Tabs Trigger - Hover State */
+  --tabs-trigger-color-hover: var(--text-heading-strong);
+  --tabs-trigger-bg-hover: var(--fill-hover-default);
+
+  /* Tabs Trigger - Active State */
+  --tabs-trigger-color-active: var(--text-heading-strong);
+  --tabs-trigger-bg-active: transparent;
+  --tabs-trigger-font-weight-active: 500;
+
+  /* Tabs Trigger - Disabled State */
+  --tabs-trigger-opacity-disabled: 0.5;
+
+  /* Tabs Indicator (Line variant) */
+  --tabs-indicator-bg: var(--fill-button-primary-default);
+  --tabs-indicator-thickness: 3px;
+  --tabs-indicator-radius: 2px;
+
+  /* Tabs Trigger - Boxed Variant */
+  --tabs-trigger-boxed-bg: var(--fill-card-default);
+  --tabs-trigger-boxed-bg-hover: var(--fill-hover-default);
+  --tabs-trigger-boxed-bg-active: var(--fill-button-primary-default);
+  --tabs-trigger-boxed-color: var(--text-default);
+  --tabs-trigger-boxed-color-active: var(--text-button-primary);
+  --tabs-trigger-boxed-border-width: 1px;
+  --tabs-trigger-boxed-border-color: var(--border-color-input);
+  --tabs-trigger-boxed-border-radius: var(--corner-radius-l);
+
+  /* Tabs Content */
+  --tabs-content-padding-y: 16px;
+  --tabs-content-padding-x: 16px;
+
+  /* Tabs Vertical Orientation */
+  --tabs-vertical-list-gap: 8px;
+  --tabs-vertical-trigger-border-left-width: 3px;
+  --tabs-vertical-trigger-border-left-color: transparent;
+  --tabs-vertical-trigger-border-left-color-active: var(--fill-button-primary-default);
 }

package/dist/css/themes/ambita-light/component-tokens.css

@@ -71,4 +71,60 @@
 
   /* Accordion Component Tokens */
   --accordion-item-border-width: 0px;
+
+  /* ========================================================================
+     TABS COMPONENT TOKENS
+     Design tokens for the NeoTabs component
+     ======================================================================== */
+
+  /* Tabs List */
+  --tabs-list-gap: 0px;
+  --tabs-list-border-bottom-width: 1px;
+  --tabs-list-border-bottom-color: var(--border-color-separator);
+
+  /* Tabs Trigger - Default State */
+  --tabs-trigger-padding-x: 16px;
+  --tabs-trigger-padding-y: 12px;
+  --tabs-trigger-font-size: 18px;
+  --tabs-trigger-font-weight: 500;
+  --tabs-trigger-line-height: 22px;
+  --tabs-trigger-color: var(--text-default);
+  --tabs-trigger-bg: transparent;
+  --tabs-trigger-border-radius: 0px;
+
+  /* Tabs Trigger - Hover State */
+  --tabs-trigger-color-hover: var(--text-heading-strong);
+  --tabs-trigger-bg-hover: var(--fill-hover-default);
+
+  /* Tabs Trigger - Active State */
+  --tabs-trigger-color-active: var(--text-heading-strong);
+  --tabs-trigger-bg-active: transparent;
+  --tabs-trigger-font-weight-active: 500;
+
+  /* Tabs Trigger - Disabled State */
+  --tabs-trigger-opacity-disabled: 0.5;
+
+  /* Tabs Indicator (Line variant) */
+  --tabs-indicator-bg: var(--fill-button-primary-default);
+  --tabs-indicator-thickness: 3px;
+  --tabs-indicator-radius: 2px;
+
+  /* Tabs Trigger - Boxed Variant */
+  --tabs-trigger-boxed-bg: var(--fill-card-default);
+  --tabs-trigger-boxed-bg-hover: var(--fill-hover-default);
+  --tabs-trigger-boxed-bg-active: var(--fill-button-primary-default);
+  --tabs-trigger-boxed-color-active: var(--text-button-primary);
+  --tabs-trigger-boxed-border-width: 1px;
+  --tabs-trigger-boxed-border-color: var(--border-color-input);
+  --tabs-trigger-boxed-border-radius: var(--corner-radius-m);
+
+  /* Tabs Content */
+  --tabs-content-padding-y: 16px;
+  --tabs-content-padding-x: 16px;
+
+  /* Tabs Vertical Orientation */
+  --tabs-vertical-list-gap: 8px;
+  --tabs-vertical-trigger-border-left-width: 3px;
+  --tabs-vertical-trigger-border-left-color: transparent;
+  --tabs-vertical-trigger-border-left-color-active: var(--fill-button-primary-default);
 }

package/dist/css/themes/ambita-old/component-tokens.css

@@ -58,4 +58,60 @@
   --tags-button-size: 24px;
   --tags-button-icon-size: 12px;
   --tags-button-radius: var(--corner-radius-xxs);
+
+  /* ========================================================================
+     TABS COMPONENT TOKENS
+     Design tokens for the NeoTabs component
+     ======================================================================== */
+
+  /* Tabs List */
+  --tabs-list-gap: 0px;
+  --tabs-list-border-bottom-width: 1px;
+  --tabs-list-border-bottom-color: var(--border-color-separator);
+
+  /* Tabs Trigger - Default State */
+  --tabs-trigger-padding-x: 16px;
+  --tabs-trigger-padding-y: 12px;
+  --tabs-trigger-font-size: 18px;
+  --tabs-trigger-font-weight: 500;
+  --tabs-trigger-line-height: 22px;
+  --tabs-trigger-color: var(--text-default);
+  --tabs-trigger-bg: transparent;
+  --tabs-trigger-border-radius: 0px;
+
+  /* Tabs Trigger - Hover State */
+  --tabs-trigger-color-hover: var(--text-heading-strong);
+  --tabs-trigger-bg-hover: var(--fill-hover-default);
+
+  /* Tabs Trigger - Active State */
+  --tabs-trigger-color-active: var(--text-heading-strong);
+  --tabs-trigger-bg-active: transparent;
+  --tabs-trigger-font-weight-active: 500;
+
+  /* Tabs Trigger - Disabled State */
+  --tabs-trigger-opacity-disabled: 0.5;
+
+  /* Tabs Indicator (Line variant) */
+  --tabs-indicator-bg: var(--fill-button-primary-default);
+  --tabs-indicator-thickness: 3px;
+  --tabs-indicator-radius: 2px;
+
+  /* Tabs Trigger - Boxed Variant */
+  --tabs-trigger-boxed-bg: var(--fill-card-default);
+  --tabs-trigger-boxed-bg-hover: var(--fill-hover-default);
+  --tabs-trigger-boxed-bg-active: var(--fill-button-primary-default);
+  --tabs-trigger-boxed-color-active: var(--text-button-primary);
+  --tabs-trigger-boxed-border-width: 1px;
+  --tabs-trigger-boxed-border-color: var(--border-color-input);
+  --tabs-trigger-boxed-border-radius: var(--corner-radius-xs);
+
+  /* Tabs Content */
+  --tabs-content-padding-y: 16px;
+  --tabs-content-padding-x: 16px;
+
+  /* Tabs Vertical Orientation */
+  --tabs-vertical-list-gap: 8px;
+  --tabs-vertical-trigger-border-left-width: 3px;
+  --tabs-vertical-trigger-border-left-color: transparent;
+  --tabs-vertical-trigger-border-left-color-active: var(--fill-button-primary-default);
 }

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

@@ -70,4 +70,60 @@
   /* Accordion Component Tokens */
   --accordion-item-border-width: 2px;
   --accordion-item-border-color: var(--aux-blue-2);
+
+  /* ========================================================================
+     TABS COMPONENT TOKENS
+     Design tokens for the NeoTabs component
+     ======================================================================== */
+
+  /* Tabs List */
+  --tabs-list-gap: 0px;
+  --tabs-list-border-bottom-width: 1px;
+  --tabs-list-border-bottom-color: var(--border-color-separator);
+
+  /* Tabs Trigger - Default State */
+  --tabs-trigger-padding-x: 16px;
+  --tabs-trigger-padding-y: 12px;
+  --tabs-trigger-font-size: 18px;
+  --tabs-trigger-font-weight: 500;
+  --tabs-trigger-line-height: 22px;
+  --tabs-trigger-color: var(--text-link-default);
+  --tabs-trigger-bg: transparent;
+  --tabs-trigger-border-radius: 0px;
+
+  /* Tabs Trigger - Hover State */
+  --tabs-trigger-color-hover: var(--text-link-default);
+  --tabs-trigger-bg-hover: var(--fill-hover-default);
+
+  /* Tabs Trigger - Active State */
+  --tabs-trigger-color-active: var(--text-link-default);
+  --tabs-trigger-bg-active: transparent;
+  --tabs-trigger-font-weight-active: 500;
+
+  /* Tabs Trigger - Disabled State */
+  --tabs-trigger-opacity-disabled: 0.5;
+
+  /* Tabs Indicator (Line variant) */
+  --tabs-indicator-bg: var(--fill-button-primary-default);
+  --tabs-indicator-thickness: 3px;
+  --tabs-indicator-radius: 2px;
+
+  /* Tabs Trigger - Boxed Variant */
+  --tabs-trigger-boxed-bg: var(--fill-card-default);
+  --tabs-trigger-boxed-bg-hover: var(--fill-hover-default);
+  --tabs-trigger-boxed-bg-active: var(--fill-button-primary-default);
+  --tabs-trigger-boxed-color-active: var(--text-link-on-dark-active);
+  --tabs-trigger-boxed-border-width: 1px;
+  --tabs-trigger-boxed-border-color: var(--border-color-input);
+  --tabs-trigger-boxed-border-radius: var(--corner-radius-l);
+
+  /* Tabs Content */
+  --tabs-content-padding-y: 16px;
+  --tabs-content-padding-x: 16px;
+
+  /* Tabs Vertical Orientation */
+  --tabs-vertical-list-gap: 8px;
+  --tabs-vertical-trigger-border-left-width: 3px;
+  --tabs-vertical-trigger-border-left-color: transparent;
+  --tabs-vertical-trigger-border-left-color-active: var(--fill-button-primary-default);
 }