@marioschmidt/design-system-tokens 1.0.78 → 1.1.0

package/dist/scss/brands/sportbild/semantic/breakpoints/breakpoint-xs-320px.scss

@@ -1,9 +1,9 @@
 // Do not edit directly, this file was auto-generated.
 //
-// BILD Design System Tokens v1.0.78
+// BILD Design System Tokens v1.1.0
 // Generated by Style Dictionary v4.2.0
 //
-// Copyright (c) 2025 Axel Springer Deutschland GmbH
+// Copyright (c) 2026 Axel Springer Deutschland GmbH
 // Proprietary and confidential. All rights reserved.
 //
 // Documentation: https://github.com/UXWizard25/vv-token-test-v3/blob/main/packages/tokens/docs/css.md
@@ -100,8 +100,6 @@ $label-3-font-size: 12px;
 $label-2-font-size: 15px;
 // This token is used in the label1 text style font size parameter. Its value remains constant at 17 across device sizes.
 $label-1-font-size: 17px;
-// 10 - 10 - 15 - 17 Use this label font size when you want your label's font size to change across device sizes.
-$label-1-font-size-responsive: 10px;
 
 // Semantic - Typography - FontSize - Callout
 // This token is used for the font size parameter of the callout text style. 18 - 18 - 22 - 22
@@ -142,7 +140,7 @@ $kicker-font-family: AntennaExtraCond;
 $subheadline-font-family: AntennaCond;
 $title-font-family: AntennaCond;
 $quote-font-family: AntennaCond;
-$display-font-family: AntennaCond;
+$display-font-family: AntennaExtraCond;
 
 // Semantic - Typography - FontWeight - Callout
 $callout-font-weight: 800;
@@ -150,6 +148,8 @@ $callout-font-weight: 800;
 // Semantic - Typography - FontWeight - Label
 $label-font-weight-bold: 700;
 $label-font-weight-book: 400;
+$label-font-weight-bold-st: BoldItalic;
+$label-font-weight-book-st: LightItalic;
 
 // Semantic - Typography - FontWeight - Body
 $body-font-weight-book: 400;
@@ -157,7 +157,7 @@ $body-font-weight-bold: 700;
 
 // Semantic - Typography - FontWeight - Kicker
 $kicker-font-weight: 700;
-$kicker-font-weight-st: Black Italic;
+$kicker-font-weight-st: BoldItalic;
 
 // Semantic - Typography - FontWeight - Subheadline
 $subheadline-font-weight: 700;
@@ -168,13 +168,20 @@ $headline-2-font-weight: 700;
 $headline-3-font-weight: 700;
 $headline-4-font-weight: 700;
 // This variable is a string type variable for controlling not only headline font weight but also the italic style for Sport Bild headlines.
-$headline-1-font-weight-st: Bold Italic;
+$headline-1-font-weight-st: BoldItalic;
+// This variable is a string type variable for controlling not only headline font weight but also the italic style for Sport Bild headlines.
+$headline-2-font-weight-st: BoldItalic;
+// This variable is a string type variable for controlling not only headline font weight but also the italic style for Sport Bild headlines.
+$headline-3-font-weight-st: BoldItalic;
+// This variable is a string type variable for controlling not only headline font weight but also the italic style for Sport Bild headlines.
+$headline-4-font-weight-st: BoldItalic;
 
 // Semantic - Typography - FontWeight - Title
 $title-font-weight: 800;
 
 // Semantic - Typography - FontWeight - Display
-$display-font-weight: 800;
+$display-font-weight: 700;
+$display-font-weight-st: BoldItalic;
 
 // Semantic - Typography - FontWeight - Quote
 $quote-font-weight: 800;
@@ -197,7 +204,6 @@ $kicker-1-line-height: 22px;
 $label-3-line-height: 14.4px;
 // This variable is used in the label1 text style's line height parameter. It references branding variables for brand specific line heights.
 $label-1-line-height: 20.4px;
-$label-1-responsive-line-height: 12px;
 $label-2-line-height: 19.2px;
 
 // Semantic - Typography - LineHeight - Display
@@ -230,33 +236,33 @@ $callout-line-height: 23.4px;
 // Semantic - Typography - LineHeight - Subheadline
 $subheadline-1-line-height: 23.4px;
 
-// Semantic - Typography - LetterSpacing
+// Semantic - Typography - LetterSpace
 // 0.5 | 0.5 | 0.5 | 0.5 | This variable takes primitive letter spacing variables and creates this semantic variable for use on designs that change across device sizes.
-$letter-spacing-positive-sm: 0.5px;
+$letter-space-positive-sm: 0.5px;
 // 2 | 2 | 2 | 3 | This variable takes primitive letter spacing variables and creates this semantic variable for use on designs that change across device sizes.
-$letter-spacing-positive-lg: 2px;
+$letter-space-positive-lg: 2px;
 // 1 | 1 | 1 | 1 | This variable takes primitive letter spacing variables and creates this semantic variable for use on designs that change across device sizes.
-$letter-spacing-positive-md: 1px;
+$letter-space-positive-md: 1px;
 // 0 | 0 | 0 | 0 | This variable takes primitive letter spacing variables and creates this semantic variable for use on designs that change across device sizes.
-$letter-spacing-none: 0px;
+$letter-space-none: 0px;
 // -0.5 | -0.5 | -0.25 | -0.25 | This variable takes primitive letter spacing variables and creates this semantic variable for use on designs that change across device sizes.
-$letter-spacing-negative-sm: -0.5px;
+$letter-space-negative-sm: -0.5px;
 // -1 | -1 | -1 | -1 | This variable takes primitive letter spacing variables and creates this semantic variable for use on designs that change across device sizes.
-$letter-spacing-negative-md: -1px;
+$letter-space-negative-md: -1px;
 // -2 | -2 | -2 | -3 | This variable takes primitive letter spacing variables and creates this semantic variable for use on designs that change across device sizes.
-$letter-spacing-negative-lg: -2px;
+$letter-space-negative-lg: -2px;
 // -0.25 | -0.25 | -0.25 | -0.25 | This variable takes primitive letter spacing variables and creates this semantic variable for use on designs that change across device sizes. This letter spacing was only found in large titles on iOS mobile app large title component.
-$letter-spacing-negative-xs: -0.25px;
+$letter-space-negative-xs: -0.25px;
 // 0.25 | 0.25 | 0.25 | 0.25 | This variable takes primitive letter spacing variables and creates this semantic variable for use on designs that change across device sizes.
-$letter-spacing-positive-xs: 0.25px;
+$letter-space-positive-xs: 0.25px;
 
-// Semantic - Typography - LetterSpacing - display
+// Semantic - Typography - LetterSpace - display
 // -0.5 | -0.5 | -1 | -2 | This variable is used for the letter spacing parameter of the display1 text style. On smaller devices the value is smaller than on larger devices. On desktop devices the letter spacing is further reduced for making the text style more compact.
-$display-1-letter-spacing: -0.5px;
+$display-1-letter-space: -0.5px;
 // -0.5 | -0.5 | -1 | -1 | This variable is used for the letter spacing parameter of the display2 text style. On smaller devices the value is smaller than on larger devices.
-$display-2-letter-spacing: -0.5px;
+$display-2-letter-space: -0.5px;
 // -0.5 | -0.5 | -1 | -1 | This variable is used for the letter spacing parameter of the display3 text style. On smaller devices the value is smaller than on larger devices.
-$display-3-letter-spacing: -0.5px;
+$display-3-letter-space: -0.5px;
 
 // Semantic - Border - BorderRadius
 // 2-2-2-2 use for corner rounding on very small UI elements such as tooltips and badges.
@@ -321,33 +327,33 @@ $inline-space-const-2-xs: 4px;
 
 // Semantic - Space - Stack - Responsive
 // 12-12-16-24 – use for vertical (top/bottom) padding of UI elements that scales across breakpoints
-$stack-space-resp-md: 12px;
+$stack-space-resp-md: 8px;
 // 16-16-24-32 – use for vertical (top/bottom) padding of UI elements that scales across breakpoints
-$stack-space-resp-lg: 16px;
+$stack-space-resp-lg: 12px;
 // 32-32-48-64 – use for vertical (top/bottom) padding of UI elements that scales across breakpoints
-$stack-space-resp-2-xl: 32px;
+$stack-space-resp-2-xl: 24px;
 // 8-8-12-16 – use for vertical (top/bottom) padding of UI elements that scales across breakpoints
-$stack-space-resp-sm: 8px;
+$stack-space-resp-sm: 6px;
 // 24-24-32-40 – use for vertical (top/bottom) padding of UI elements that scales across breakpoints
-$stack-space-resp-xl: 24px;
+$stack-space-resp-xl: 16px;
 
 // Semantic - Space - Stack - Constant
 // 8-8-8-8 – Use for fixed vertical (top/bottom) padding of UI elements
-$stack-space-const-sm: 8px;
+$stack-space-const-sm: 6px;
 // 12-12-12-12 – Use for fixed vertical (top/bottom) padding of UI elements
-$stack-space-const-md: 12px;
+$stack-space-const-md: 8px;
 // 16-16-16-16 – Use for fixed vertical (top/bottom) padding of UI elements
-$stack-space-const-lg: 16px;
+$stack-space-const-lg: 12px;
 // 32-32-32-32 – Use for fixed vertical (top/bottom) padding of UI elements
-$stack-space-const-2-xl: 32px;
+$stack-space-const-2-xl: 24px;
 // 24-24-24-24 – Use for fixed vertical (top/bottom) padding of UI elements
-$stack-space-const-xl: 24px;
+$stack-space-const-xl: 16px;
 // 6-6-6-6 – Use for fixed vertical (top/bottom) padding of UI elements
-$stack-space-const-xs: 6px;
+$stack-space-const-xs: 2px;
 // 2-2-2-2 – Use for fixed vertical (top/bottom) padding of UI elements
 $stack-space-const-3-xs: 2px;
 // 4-4-4-4 – Use for fixed vertical (top/bottom) padding of UI elements
-$stack-space-const-2-xs: 4px;
+$stack-space-const-2-xs: 2px;
 
 // Semantic - Space - Gap - Responsive
 // 4-4-6-8 – Use for gaps between items inside of UI elements that scale across breakpoints

package/dist/scss/brands/sportbild/semantic/color/colormode-dark.scss

@@ -1,9 +1,9 @@
 // Do not edit directly, this file was auto-generated.
 //
-// BILD Design System Tokens v1.0.78
+// BILD Design System Tokens v1.1.0
 // Generated by Style Dictionary v4.2.0
 //
-// Copyright (c) 2025 Axel Springer Deutschland GmbH
+// Copyright (c) 2026 Axel Springer Deutschland GmbH
 // Proprietary and confidential. All rights reserved.
 //
 // Documentation: https://github.com/UXWizard25/vv-token-test-v3/blob/main/packages/tokens/docs/css.md
@@ -11,185 +11,258 @@
 // SEMANTIC
 // ============================================
 
-// Semantic - Text
+// Semantic - Text - Brand
 // Applies to text elements requiring fixed brand color usage (e.g., permanent links, brand slogans on constant backgrounds). Behavior: Constant — maintains identical red tone across Light and Dark mode.
-$text-color-accent-constant: #174482;
+$text-color-brand: #6A91CF;
+// Accent text color used for links, interactive text, or highlighted key words. Changes from a red in light mode to a white in dark mode.
+$text-color-brand-light-only: #FFFFFF;
+
+// Semantic - Text - Standard
 // Main text color used for body copy and all primary textual content. Ensures optimal readability and contrast on standard surfaces. Behavior: Dynamic — switches between dark text on light backgrounds and light text on dark backgrounds.
-$text-color-primary: #E9ECEF;
+$text-color-primary: #D6E1F2;
 // Muted text tone for subtle information, timestamps, or inactive text elements. Behavior: Dynamic — adjusts between mid-gray in Light mode and lighter gray in Dark mode.
-$text-color-muted: #CED4DA;
-// Inverse text color used on opposing surfaces (e.g., white text on red or dark backgrounds). Behavior: Dynamic — alternates between light and dark mode.
-$text-color-primary-inverse: #232629;
+$text-color-secondary: #8FACDB;
+// Secondary text color used for supportive information, subtitles, and less prominent text. Behavior: Dynamic — adapts between neutral tones to maintain proper contrast per theme. In 2025 css it is called figure meta.
+$text-color-tertiary: #6A91CF;
+
+// Semantic - Text - Heading
+// Used for kicker text and category labels placed directly on standard surface backgrounds. Behavior: Dynamic — adjusts between red for Light and a neutral tone in Dark modes.
+$kicker-text-color: #6A91CF;
+// Primary color for headings and display typography. Ensures clear hierarchy and optimal readability on main surfaces. Adapds it´s color based on the brand mode for brand recognition. Behavior: Dynamic — dark text in Light mode, light text in Dark mode.
+$headline-text-color: #FFFFFF;
+
+// Semantic - Text - OnSolid
+// Fixed white heading color used on dark or colored backgrounds (e.g., hero sections, banners) that remain constant across modes. Behavior: Constant — remains white in both Light and Dark mode.
+$text-color-on-image: #FFFFFF;
+// Fixed inverse label tone applied where white or bright text must always appear, regardless of theme. Behavior: Constant — remains bright neutral in both Light and Dark mode. L&D:093
+$text-color-secondary-on-dark: #DDE1E2;
 // Used when primary text color must remain fixed regardless of mode (e.g., on light constant backgrounds). Behavior: Constant — same tone across Light and Dark mode.
-$text-color-primary-constant: #232629;
+$text-color-primary-on-light: #222628;
+// Applied to kicker or meta text on dark colored backgrounds to maintain high legibility. Behavior: Constant — always uses semi-transparent white for consistent readability.
+$kicker-text-color-on-dark: rgba(255, 255, 255, 0.8);
+// Used for kicker text placed on bright or light colored backgrounds. Ensures balanced contrast without harsh visual dominance. Behavior: Constant — remains semi-transparent black across both modes.
+$kicker-text-color-on-light: rgba(0, 0, 0, 0.7);
+// Used for text displayed on dark surfaces to ensure maximum legibility and contrast. Behavior: Constant — always light neutral to guarantee accessibility on dark backgrounds.
+$text-color-primary-on-dark: #FFFFFF;
+
+// Semantic - Text - Interactive
+// Primary label color used for labels, badges, or tag text on light backgrounds. Ensures strong readability and visual hierarchy. Behavior: Dynamic — dark neutral in Light mode, light neutral in Dark mode. L: 015 D:093
+$text-color-idle: #8FACDB;
+// Disabled label tone indicating inactive or unavailable states in UI elements. Behavior: Dynamic — lighter gray in Light mode, darker neutral in Dark mode. L:085 D:035
+$text-color-disabled: #345EA0;
+$text-color-hover: #EFF1F5;
+$text-color-active: #EFF1F5;
+
+// Semantic - Text - Inverse
+// Inverse text color used on opposing surfaces (e.g., white text on red or dark backgrounds). Behavior: Dynamic — alternates between light and dark mode.
+$text-color-primary-inverse: #222628;
+$text-color-secondary-inverse: #565A5F;
+$text-color-inverse-high-contrast: #222628;
+
+// Semantic - Text - Feedback
 // Used for positive or success-related messages (e.g., “Saved”, “Success”, or confirmation text) on success surface colors. Behavior: Constant — green tone remains consistent across both modes.
-$text-color-success-constant: #006E3E;
-// Fixed inverse tone for text that always appears on dark surfaces (e.g., hero headlines or persistent dark cards). Behavior: Constant — unchanged across modes.
-$text-color-primary-inverse-constant: #E9ECEF;
-// Secondary text color used for supportive information, subtitles, and less prominent text. Behavior: Dynamic — adapts between neutral tones to maintain proper contrast per theme. In 2025 css it is called figure meta.
-$text-color-secondary: #8C9196;
+$text-color-success: #00C373;
 // Used for strong warnings, errors, or destructive action labels. Behavior: Constant — red color remains unchanged between Light and Dark mode for visibility and recognition.
-$text-color-attention-high: #DD0000;
-// Accent text color used for links, interactive text, or highlighted key words. Changes from a red in light mode to a white in dark mode.
-$text-color-accent: #F7F9FD;
+$text-color-error: #FF8989;
 // Represents medium attention states, often used in warnings or pending states. Behavior: Constant — same orange tone across Light and Dark mode.
-$text-color-attention-medium: #FD8227;
-// Used for text displayed on dark surfaces to ensure maximum legibility and contrast. Behavior: Constant — always light neutral to guarantee accessibility on dark backgrounds.
-$text-color-on-dark-surface: #FFFFFF;
+$text-color-warning: #FD8227;
 
-// Semantic - Surface
+// Semantic - Background - Standard
 // Primary surface color used for main backgrounds and large layout areas (e.g., page background, primary containers). Behavior: Dynamic — adapts between light and dark surface tokens to maintain legibility and hierarchy.
-$surface-color-primary: #081828;
+$bg-color-primary: #0B2647;
+// Defines the disabled color for primary components (e.g., disabled primary buttons, inputs). Reduces emphasis and contrast to signal inactivity. Behavior: Dynamic - slightly lighter in Light mode and darker in Dark mode to remain visually accessible.
+$bg-color-disabled: #0C2F61;
 // Used for secondary surface layers such as cards, panels, or nested containers that need to differentiate themselves from the primary surface.  Behavior: Dynamic — adapts brightness level based on mode for appropriate depth contrast.
-$surface-color-secondary: #0A2750;
-// Inverse of the primary surface, used when Light and Dark surfaces are swapped (e.g., inverse cards or elevated sections). Behavior: Dynamic — switches between dark and light values depending on mode.
-$surface-color-primary-inverse: #FFFFFF;
-// A fixed light surface tone used when a consistent light background is required (e.g., light panels within dark layouts). Behavior: Constant — remains the same in both modes.
-$surface-color-primary-constant-light: #FFFFFF;
+$bg-color-secondary: #0C2F61;
 // A fixed dark surface tone used for dark overlays or nested dark sections inside light layouts. Behavior: Constant — identical across Light and Dark mode.
-$surface-color-primary-constant-dark: #081828;
+$bg-color-primary-const-dark: #0B2647;
 // HIghtest elevation surface color, typically used for grouping or background accents to differentiate themselves from all previous surface color options. Uses corresponding light/dark tones for consistent layering.
-$surface-color-quartenary: #4B525A;
-// Success-related background used for positive notifications, confirmation surfaces, or success banners. Behavior: Constant — remains the same across Light and Dark mode to ensure brand alignment.
-$surface-color-success: #CEF4E4;
+$bg-color-quaternary: #174482;
 // Tertiary background layer for inner containers, grouped content, or subtle elevation steps  that need to differentiate themselves from the primary and secondary surfaces. Behavior: Dynamic — switches between light and dark tertiary tones.
-$surface-color-tertiary: #174482;
-// Represents tertiary-level gradient background. Currently used on skeletons.
-$surface-color-tertiary-gradient-stop: rgba(52, 60, 65, 0);
+$bg-color-tertiary: #113B72;
+// Use this on elements that must maintain the white color even in dark mode.
+$bg-color-primary-const-light: #FFFFFF;
+$bg-color-quintenary: #6A91CF;
+
+// Semantic - Background - Brand
+// Primary accent color used to emphasize interactive or highlight elements such as links, selection states, or focus indicators. Adapts in Darkmode to a fully white tone.
+$bg-color-brand-light-only: #FFFFFF;
+// Used for accent highlights that must remain visually consistent across themes (e.g., brand identifiers, logos, or fixed emphasis areas). Color value does not change between Light and Dark mode.
+$bg-color-brand-solid: #174482;
+$bg-color-brand-solid-hover: #0C2F61;
+$bg-color-brand-solid-active: #091C2E;
+$bg-color-brand-tint: #0C2F61;
+$bg-color-brand-tint-hover: #174482;
+
+// Semantic - Background - Inverse
+// Inverse of the primary surface, used when Light and Dark surfaces are swapped (e.g., inverse cards or elevated sections). Behavior: Dynamic — switches between dark and light values depending on mode.
+$bg-color-primary-inverse: #FFFFFF;
 // Inverse tertiary background, applied when Light and Dark surfaces are reversed (e.g., dark-on-light cards). Behavior: Dynamic — swaps values between modes for contrast preservation.
-$surface-color-tertiary-inverse: #BDCADB;
+$bg-color-tertiary-inverse: #D6E1F2;
+// Inverse of the quartenary surface, used for background reversals in mixed-layout areas. Behavior: Dynamic — inverts between dark and light tones depending on mode.
+$bg-color-quaternary-inverse: #C3C9DB;
+// Inverse of the primary surface, used when Light and Dark surfaces are swapped (e.g., inverse cards or elevated sections). Behavior: Dynamic — switches between dark and light values depending on mode.
+$bg-color-secondary-inverse: #EFF1F5;
+// Inverse of the quartenary surface, used for background reversals in mixed-layout areas. Behavior: Dynamic — inverts between dark and light tones depending on mode.
+$bg-color-quintenary-inverse: #6A91CF;
+
+// Semantic - Background - Success
+// Success-related background used for positive notifications, confirmation surfaces, or success banners. Behavior: Constant — remains the same across Light and Dark mode to ensure brand alignment.
+$bg-color-success-tint: #052013;
+// Primary success color used to indicate positive states, confirmations, or completed actions (e.g., success banners, icons, or badges). Remains the same across modes to ensure recognizability and consistency. L&D:070
+$bg-color-success-solid: #158751;
+// Secondary success tone used for secondary states. Maintains the same color in both Light and Dark mode for clarity. L&D: green40
+$bg-color-success-solid-hover: #006E3E;
+// Success-related background used for positive notifications, confirmation surfaces, or success banners. Behavior: Constant — remains the same across Light and Dark mode to ensure brand alignment.
+$bg-color-success-tint-hover: #093822;
+// Secondary success tone used for secondary states. Maintains the same color in both Light and Dark mode for clarity. L&D: green40
+$bg-color-success-solid-active: #0D5232;
+
+// Semantic - Background - GradientStops
+// Represents tertiary-level gradient background. Currently used on skeletons.
+$bg-color-tertiary-gradient-stop: rgba(17, 59, 114, 0);
 // Defines the end stops for primary surface gradients, creating visual depth or elevation. Used next to sliders buttons and slider container edges for fading out content. Behavior: Dynamic — light gradients in Light mode, dark gradients in Dark mode.
-$surface-color-primary-gradient-stop: rgba(35, 38, 41, 0);
+$bg-color-primary-gradient-stop: rgba(11, 38, 71, 0);
 // Used for secondary surface gradients or subtle depth layers across backgrounds. Behavior: Dynamic — adapts to mode brightness for smooth gradient transitions.
-$surface-color-secondary-gradient-stop: rgba(44, 49, 56, 0);
-// Inverse of the quartenary surface, used for background reversals in mixed-layout areas. Behavior: Dynamic — inverts between dark and light tones depending on mode.
-$surface-color-quartenary-inverse: #CED4DA;
+$bg-color-secondary-gradient-stop: rgba(12, 47, 97, 0);
 
-// Semantic - Heading
-// Used for kicker text and category labels placed directly on standard surface backgrounds. Behavior: Dynamic — adjusts between red for Light and a neutral tone in Dark modes.
-$kicker-text-color-on-surface: #8C9196;
-// Primary color for headings and display typography. Ensures clear hierarchy and optimal readability on main surfaces. Adapds it´s color based on the brand mode for brand recognition. Behavior: Dynamic — dark text in Light mode, light text in Dark mode.
-$headline-color-primary: #FFFFFF;
-// Fixed white heading color used on dark or colored backgrounds (e.g., hero sections, banners) that remain constant across modes. Behavior: Constant — remains white in both Light and Dark mode.
-$headline-color-white-const: #FFFFFF;
-// Specialized kicker color for use on red or brand-colored backgrounds (e.g., red kicker bg within teaser cards). Behavior: Constant — remains consistent across light and darkmode.
-$kicker-text-color-on-red: #FFFFFF;
-// Applied to kicker or meta text on dark colored backgrounds to maintain high legibility. Behavior: Constant — always uses semi-transparent white for consistent readability.
-$kicker-text-color-on-dark-bg: rgba(255, 255, 255, 0.8);
-// Used for kicker text placed on bright or light colored backgrounds. Ensures balanced contrast without harsh visual dominance. Behavior: Constant — remains semi-transparent black across both modes.
-$kicker-text-color-on-bright-bg: rgba(0, 0, 0, 0.7);
-
-// Semantic - State
-// Defines the active state color for secondary actions (e.g., secondary buttons, tabs, or toggles). Behavior: Dynamic - light gray in Light mode and bright gray in Dark mode to maintain perceptual balance.
-$color-secondary-active: #F2F4F5;
-// Used to represent the active or pressed state of primary actions such as tabs or links. Behavior: Constant - identical value across modes for consistent interaction feedback.
-$color-primary-active: #174482;
-// Used for disabled secondary elements, ensuring reduced visual prominence while maintaining legibility. Behavior: Dynamic - adapts neutral tones based on theme brightness.
-$color-secondary-disabled: #4B525A;
-// Defines the disabled color for primary components (e.g., disabled primary buttons, inputs). Reduces emphasis and contrast to signal inactivity. Behavior: Dynamic - slightly lighter in Light mode and darker in Dark mode to remain visually accessible.
-$color-primary-disabled: #343C41;
-// Inverse variant of the secondary active state, applied on dark backgrounds or inverse layouts. Behavior: Dynamic - switches between bright and dark tones depending on the background.
-$color-secondary-active-inverse: #232629;
-// Represents active or pressed states for tertiary elements (e.g., link highlights, icons, or subtle interactive surfaces). Behavior: Constant - uses the same green success tone across Light and Dark mode.
-$color-tertiary-active: #00C373;
-// Represents disabled states for tertiary levels, maintaining subtle visibility without drawing attention. Behavior: Dynamic - adjusts between gray tones for Light and Dark mode consistency.
-$color-tertiary-disabled: #666B70;
-
-// Semantic - Border
-// Medium-emphasis border color for standard outlines, input fields, or separators that require visible yet non-dominant contrast. Behavior: Dynamic - adjusts to maintain legibility in Light and Dark themes.
-$border-color-medium-contrast: #666B70;
+// Semantic - Background - Overlay
+// A semi-transparent black overlay used to dim background content when modals, drawers, or dialogs are active. Identical opacity and tone in both Light and Dark mode to ensure consistent overlay depth.
+$overlay-scrim-black-const: rgba(0, 0, 0, 0.7);
+// A semi-transparent white overlay used to brighten or fade background layers, often applied behind bottom sheets or temporary panels. Behavior: Constant — same opacity level across modes to preserve uniform layering behavior.
+$overlay-scrim-white-const: rgba(255, 255, 255, 0.7);
+
+// Semantic - Background - Error
+$bg-color-error-tint: #410000;
+$bg-color-error-tint-hover: #680000;
+$bg-color-error-solid: #C10000;
+$bg-color-error-solid-hover: #930000;
+
+// Semantic - Background - Warning
+$bg-color-warning-tint: #2F1400;
+$bg-color-warning-tint-hover: #522301;
+$bg-color-warning-solid: #FD8227;
+$bg-color-warning-solid-hover: #EF6702;
+
+// Semantic - Border - Standard
+// Medium-emphasis border color for standard outlines, input fields, or separators that require visible yet non-dominant contrast. Behavior: Dynamic - adjusts to maintain legibility in Light and Dark themes. L:085 D:045
+$border-color-default: #345EA0;
 // Used for subtle dividers and low-emphasis borders in neutral areas (e.g., card outlines, input containers). Dynamic - light gray 093 in Light mode, dark gray 035 in Dark mode.
-$border-color-low-contrast: #4B525A;
-// High-emphasis border color for clear delineation between surfaces (e.g., focus rings, high-contrast UI zones). Behavior: Dynamic — light surfaces use a darker neutral, dark surfaces a light neutral tone.
-$border-color-high-contrast: #FFFFFF;
-// Applies to UI elements that must visually remain the same regardless of theme (e.g., brand containers, static illustrations). Identical tone across Light and Dark mode.
-$border-color-low-contrast-constant: #E9ECEF;
+$border-color-subtle: #113B72;
+// High-emphasis border color for clear delineation between surfaces (e.g., focus rings, high-contrast UI zones). Behavior: Dynamic — light surfaces use a darker neutral, dark surfaces a light neutral tone. L:015 D:100
+$border-color-extra-strong: #FFFFFF;
+// High-emphasis border color for clear delineation between surfaces (e.g., focus rings, high-contrast UI zones). Behavior: Dynamic — light surfaces use a darker neutral, dark surfaces a light neutral tone. L:015 D:100
+$border-color-strong: #4676C3;
+
+// Semantic - Border - OnSolid
+// Applies to UI elements that must visually remain the same regardless of theme (e.g., brand containers, static illustrations). Identical tone across Light and Dark mode. L&D: 093
+$border-color-subtle-on-dark: #113B72;
+// Medium-emphasis border color for standard outlines, input fields, or separators that require visible yet non-dominant contrast. Behavior: Dynamic - adjusts to maintain legibility in Light and Dark themes. L:085 D:045
+$border-color-default-on-dark: #345EA0;
+// Applies to UI elements that must visually remain the same regardless of theme (e.g., brand containers, static illustrations). Identical tone across Light and Dark mode. L&D: 093
+$border-color-subtle-on-light: #D6E1F2;
+// Medium-emphasis border color for standard outlines, input fields, or separators that require visible yet non-dominant contrast. Behavior: Dynamic - adjusts to maintain legibility in Light and Dark themes. L:085 D:045
+$border-color-default-on-light: #C3C9DB;
+
+// Semantic - Border - Feedback
 // Used for success states and validation borders (e.g., input success outlines or confirmation frames). Behavior: Constant — same success tone across modes for consistent feedback semantics.
 $border-color-success: #00C373;
 // Defines border color for warning and error-related components, typically used for input validation or caution zones. Behavior: Constant — retains the same red warning tone in both Light and Dark modes.
-$border-color-warning: #DD0000;
+$border-color-error: #FF8989;
+$border-color-warning: #FD8227;
+$border-color-info: #565A5F;
+
+// Semantic - Border - Interactive
 // Applied to disabled states of primary elements (e.g., buttons, inputs) to visually reduce emphasis and indicate inactivity.
-$border-color-primary-disabled: #343C41;
-// Used for secondary component borders in a disabled state (e.g., secondary buttons, inactive input outlines).
-$border-color-secondary-disabled: #4B525A;
-
-// Semantic - Core
-// Used as the main brand color for key interactive elements such as primary buttons, active states, and prominent highlights. It remains constant across Light and Dark Mode.
-$core-color-primary: #0A2750;
-// Defines the secondary brand tone. This variable changes across Light and Dark Mode.
-$core-color-secondary: #081828;
-// Represents tertiary brand accents. This variable changes across Light and Dark Mode.
-$core-color-tertiary: #FFFFFF;
-// Use this on elements that must maintain the white color even in dark mode.
-$core-color-secondary-constant: #FFFFFF;
-// Use this on elements that need to maintain the dark color across themes and color modes.
-$core-color-tertiary-constant: #081828;
+$border-color-disabled: #113B72;
+$border-color-focus: #8FACDB;
+$border-color-active: #6A91CF;
+// High-emphasis border color for clear delineation between surfaces (e.g., focus rings, high-contrast UI zones). Behavior: Dynamic — light surfaces use a darker neutral, dark surfaces a light neutral tone. L:015 D:100
+$border-color-idle: #4676C3;
 
-// Semantic - Icon
+// Semantic - Border - Inverse
+$border-color-default-inverse: #C3C9DB;
+$border-color-subtle-inverse: #D6E1F2;
+
+// Semantic - Border - Brand
+$border-color-brand: #6A91CF;
+$border-color-brand-light-only: #FFFFFF;
+$border-color-brand-const: #174482;
+
+// Semantic - Border - Utilities
+$border-color-no-contrast: #0B2647;
+
+// Semantic - Icon - Interactive
 // Primary icon color on primary surfaces.
-$icon-color-primary: #8C9196;
-// Inverse icon color for use on contrasting backgrounds (e.g., light icons on dark surfaces or dark icons on bright surfaces). Behavior: Dynamic - switches between light and dark.
-$icon-color-inverse: #4B525A;
-// Secondary icon tone for less prominent actions or supportive iconography (e.g., secondary buttons, tool icons). Remains unchanged across modes.
-$icon-color-secondary-constant: #8C9196;
-// Used for icons displayed on dark backgrounds that don´t change colors, ensuring sufficient contrast and legibility. Behavior: Constant - always uses a neutral bright value.
-$icon-color-constant-on-dark: #F2F4F5;
+$icon-color-idle: #8FACDB;
+// Disabled label tone indicating inactive or unavailable states in UI elements. Behavior: Dynamic — lighter gray in Light mode, darker neutral in Dark mode. L:085 D:035
+$icon-color-disabled: #345EA0;
+$icon-color-hover: #EFF1F5;
+$icon-color-active: #EFF1F5;
+
+// Semantic - Icon - OnSolid
 // Used for icons that must remain visually consistent regardless of mode (e.g.,  icons that are on surfaces that don't change color). Identical tone in both Light and Dark mode.
-$icon-color-primary-constant: #4B525A;
+$icon-color-secondary-on-light: #565A5F;
+// Used for text displayed on dark surfaces to ensure maximum legibility and contrast. Behavior: Constant — always light neutral to guarantee accessibility on dark backgrounds.
+$icon-color-primary-on-dark: #FFFFFF;
+// Fixed inverse label tone applied where white or bright text must always appear, regardless of theme. Behavior: Constant — remains bright neutral in both Light and Dark mode. L&D:093
+$icon-color-secondary-on-dark: #DDE1E2;
+// Used when primary text color must remain fixed regardless of mode (e.g., on light constant backgrounds). Behavior: Constant — same tone across Light and Dark mode.
+$icon-color-primary-on-light: #222628;
+// Fixed white heading color used on dark or colored backgrounds (e.g., hero sections, banners) that remain constant across modes. Behavior: Constant — remains white in both Light and Dark mode.
+$icon-color-const-on-image: #FFFFFF;
+
+// Semantic - Icon - Feedback
 // Represents success or confirmation icons (e.g., checkmarks, completion indicators). Behavior: Constant - same success green tone across Light and Dark mode.
 $icon-color-success: #00C373;
+// Used for strong warnings, errors, or destructive action labels. Behavior: Constant — red color remains unchanged between Light and Dark mode for visibility and recognition.
+$icon-color-error: #FF8989;
+// Represents medium attention states, often used in warnings or pending states. Behavior: Constant — same orange tone across Light and Dark mode.
+$icon-color-warning: #FD8227;
 
-// Semantic - Label
-// Primary label color used for labels, badges, or tag text on light backgrounds. Ensures strong readability and visual hierarchy. Behavior: Dynamic — dark neutral in Light mode, light neutral in Dark mode.
-$label-color-primary: #E9ECEF;
-// Secondary label tone used for less prominent text such as secondary badges or supporting labels. Behavior: Dynamic — adapts between mid-grays for Light and Dark surfaces.
-$label-color-secondary: #CED4DA;
-// Disabled label tone indicating inactive or unavailable states in UI elements. Behavior: Dynamic — lighter gray in Light mode, darker neutral in Dark mode.
-$label-color-disabled: #4B525A;
-// Used when primary label color should remain unchanged across modes in static UI areas. Behavior: Constant — identical tone in both Light and Dark mode.
-$label-color-primary-constant: #232629;
-// Fixed inverse label tone applied where white or bright text must always appear, regardless of theme. Behavior: Constant — remains bright neutral in both Light and Dark mode.
-$label-color-primary-inverse-constant: #E9ECEF;
-// Tertiary label tone for subtle, low-emphasis UI text such as placeholder text or tertiary badges. Behavior: Constant — identical tone across both modes for stable hierarchy.
-$label-color-tertiary: #8C9196;
-// Inverse version of the primary label color, used on dark or colored backgrounds. Behavior: Dynamic — switches between light and dark.
-$label-color-primary-inverse: #232629;
-
-// Semantic - Attention
-// High-level attention color used for errors, destructive actions, and critical alerts (e.g., delete actions, error states). Remains red in both Light and Dark mode for immediate recognition.
-$attention-color-high: #DD0000;
-// Primary accent color used to emphasize interactive or highlight elements such as links, selection states, or focus indicators. Adapts in Darkmode to a fully white tone.
-$accent-color-primary: #F7F9FD;
-// Medium-level attention tone representing stronger caution or intermediate alert states. Commonly applied in warning messages. Constant — identical in both modes.
-$attention-color-medium: #FD8227;
-// Low-level warning or attention tone, typically used for informational or cautionary messages. Same yellow tone across Light and Dark to maintain recognition.
-$attention-color-low: #FFBF00;
-// Used for accent highlights that must remain visually consistent across themes (e.g., brand identifiers, logos, or fixed emphasis areas). Color value does not change between Light and Dark mode.
-$accent-color-primary-constant: #174482;
-// Primary success color used to indicate positive states, confirmations, or completed actions (e.g., success banners, icons, or badges). Remains the same across modes to ensure recognizability and consistency.
-$attention-color-success-primary: #00C373;
-// Very low-contrast background tone used for information or system-neutral surfaces, often for tooltips or quiet information highlights. Dynamic — light neutral in Light mode and dark neutral in Dark mode.
-$attention-color-extra-low: #343C41;
-// Secondary success tone used for secondary states. Maintains the same color in both Light and Dark mode for clarity.
-$attention-color-success-secondary: #006E3E;
-
-// Semantic - Overlay
-// A semi-transparent black overlay used to dim background content when modals, drawers, or dialogs are active. Identical opacity and tone in both Light and Dark mode to ensure consistent overlay depth.
-$overlay-scrim-black: rgba(0, 0, 0, 0.7);
-// A semi-transparent white overlay used to brighten or fade background layers, often applied behind bottom sheets or temporary panels. Behavior: Constant — same opacity level across modes to preserve uniform layering behavior.
-$overlay-scrim-white: rgba(255, 255, 255, 0.7);
+// Semantic - Icon - Brand
+// Applies to text elements requiring fixed brand color usage (e.g., permanent links, brand slogans on constant backgrounds). Behavior: Constant — maintains identical red tone across Light and Dark mode.
+$icon-color-brand: #6A91CF;
+// Accent text color used for links, interactive text, or highlighted key words. Changes from a red in light mode to a white in dark mode.
+$icon-color-brand-light-only: #FFFFFF;
+
+// Semantic - Icon - Standard
+// Main text color used for body copy and all primary textual content. Ensures optimal readability and contrast on standard surfaces. Behavior: Dynamic — switches between dark text on light backgrounds and light text on dark backgrounds.
+$icon-color-primary: #D6E1F2;
+// Muted text tone for subtle information, timestamps, or inactive text elements. Behavior: Dynamic — adjusts between mid-gray in Light mode and lighter gray in Dark mode.
+$icon-color-secondary: #8FACDB;
+// Secondary text color used for supportive information, subtitles, and less prominent text. Behavior: Dynamic — adapts between neutral tones to maintain proper contrast per theme. In 2025 css it is called figure meta.
+$icon-color-tertiary: #6A91CF;
+
+// Semantic - Icon - Inverse
+// Inverse text color used on opposing surfaces (e.g., white text on red or dark backgrounds). Behavior: Dynamic — alternates between light and dark mode.
+$icon-color-primary-inverse: #222628;
+$icon-color-secondary-inverse: #565A5F;
+$icon-color-inverse-high-contrast: #222628;
 
 // Semantic - LayerOpacity
+// Layer opacity value at 5% for transparency effects (e.g., overlays, fade effects). Behavior: Static — same value in light and dark mode.
 $layer-opacity-05: 0.05;
+// Layer opacity value at 10% for transparency effects (e.g., overlays, fade effects). Behavior: Static — same value in light and dark mode.
 $layer-opacity-10: 0.1;
+// Layer opacity value at 20% for transparency effects (e.g., overlays, fade effects). Behavior: Static — same value in light and dark mode.
 $layer-opacity-20: 0.2;
+// Layer opacity value at 30% for transparency effects (e.g., overlays, fade effects). Behavior: Static — same value in light and dark mode.
 $layer-opacity-30: 0.3;
+// Layer opacity value at 40% for transparency effects (e.g., overlays, fade effects). Behavior: Static — same value in light and dark mode.
 $layer-opacity-40: 0.4;
+// Layer opacity value at 50% for transparency effects (e.g., overlays, fade effects). Behavior: Static — same value in light and dark mode.
 $layer-opacity-50: 0.5;
+// Layer opacity value at 60% for transparency effects (e.g., overlays, fade effects). Behavior: Static — same value in light and dark mode.
 $layer-opacity-60: 0.6;
+// Layer opacity value at 70% for transparency effects (e.g., overlays, fade effects). Behavior: Static — same value in light and dark mode.
 $layer-opacity-70: 0.7;
+// Layer opacity value at 80% for transparency effects (e.g., overlays, fade effects). Behavior: Static — same value in light and dark mode.
 $layer-opacity-80: 0.8;
+// Layer opacity value at 90% for transparency effects (e.g., overlays, fade effects). Behavior: Static — same value in light and dark mode.
 $layer-opacity-90: 0.9;
+// Layer opacity value at 100% for transparency effects (e.g., overlays, fade effects). Behavior: Static — same value in light and dark mode.
 $layer-opacity-100: 1;
+// Layer opacity value at 00% for transparency effects (e.g., overlays, fade effects). Behavior: Static — same value in light and dark mode.
 $layer-opacity-00: 0;