@marioschmidt/design-system-tokens 1.0.39 → 1.0.41

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

@@ -1,7 +1,7 @@
 //
 // Do not edit directly, this file was auto-generated.
 // 
-// BILD Design System Tokens v1.0.39
+// BILD Design System Tokens v1.0.41
 // Generated by Style Dictionary v4.0.0
 // 
 // Copyright (c) 2024 Axel Springer Deutschland GmbH
@@ -15,141 +15,101 @@
 // ============================================
 
 // Semantic - Text
-// 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.
+// 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: #DD0000;
-// 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.
+// 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;
-// 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.
+// 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.
+// 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;
-// 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.
+// 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;
-// 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.
+// 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.
+// 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.
+// 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;
-// Used for strong warnings, errors, or destructive action labels.
-Behavior: Constant — red color remains unchanged between Light and Dark mode for visibility and recognition.
+// 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: #FFFFFF;
-// Represents medium attention states, often used in warnings or pending states.
-Behavior: Constant — same orange tone across Light and Dark mode.
+// 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.
+// 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;
 
 // Semantic - Surface
-// 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.
+// 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: #232629;
-// 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.
+// 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: #2C3138;
-// 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.
+// 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.
+// 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;
-// A fixed dark surface tone used for dark overlays or nested dark sections inside light layouts.
-Behavior: Constant — identical across Light and Dark mode.
+// 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: #232629;
 // 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.
+// 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;
-// 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.
+// 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: #343C41;
-// Represents tertiary-level gradient background.
-Currently used on skeletons.
+// Represents tertiary-level gradient background. Currently used on skeletons.
 $surface-color-tertiary-gradient-stop: rgba(52, 60, 65, 0);
-// 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.
+// 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: #E9ECEF;
 // 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);
-// Used for secondary surface gradients or subtle depth layers across backgrounds.
-Behavior: Dynamic — adapts to mode brightness for smooth gradient transitions.
+// 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.
+// 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;
 
 // 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.
+// 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.
+// 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.
+// 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.
+// 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.
+// 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.800000011920929);
-// 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.
+// 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.699999988079071);
 
 // 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.
+// 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.
+// 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: #DD0000;
-// Used for disabled secondary elements, ensuring reduced visual prominence while maintaining legibility.
-Behavior: Dynamic — adapts neutral tones based on theme brightness.
+// 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.
+// 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.
+// 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.
+// 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.
+// 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.
+// 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;
-// Used for subtle dividers and low-emphasis borders in neutral areas (e.g., card outlines, input containers).
-Dynamic — light gray in Light mode, dark gray in Dark mode.
+// 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.
+// 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;
-// 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.
+// 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.
+// 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;
 // Applied to disabled states of primary elements (e.g., buttons, inputs) to visually reduce emphasis and indicate inactivity.
 $border-color-primary-disabled: #343C41;
@@ -173,42 +133,31 @@ $pipe-test-renaming: #B0D1F3;
 // Semantic - Icon
 // 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.
+// 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.
+// 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;
-// 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.
+// 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;
-// Represents success or confirmation icons (e.g., checkmarks, completion indicators).
-Behavior: Constant — same success green tone across Light and Dark mode.
+// 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;
 
 // 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.
+// 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.
+// 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.
+// 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.
+// 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.
+// 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.
+// 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.
+// 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
@@ -232,21 +181,20 @@ $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.699999988079071);
-// 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.
+// 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.699999988079071);
 
 // Semantic - LayerOpacity
-$layer-opacity05: 5px;
-$layer-opacity10: 10px;
-$layer-opacity20: 20px;
-$layer-opacity30: 30px;
-$layer-opacity40: 40px;
-$layer-opacity50: 50px;
-$layer-opacity60: 60px;
-$layer-opacity70: 70px;
-$layer-opacity80: 80px;
-$layer-opacity90: 90px;
-$layer-opacity100: 100px;
-$layer-opacity00: 0px;
+$layer-opacity05: 5;
+$layer-opacity10: 10;
+$layer-opacity20: 20;
+$layer-opacity30: 30;
+$layer-opacity40: 40;
+$layer-opacity50: 50;
+$layer-opacity60: 60;
+$layer-opacity70: 70;
+$layer-opacity80: 80;
+$layer-opacity90: 90;
+$layer-opacity100: 100;
+$layer-opacity00: 0;
 

package/dist/scss/brands/bild/semantic/color/colormode-light.scss

@@ -1,7 +1,7 @@
 //
 // Do not edit directly, this file was auto-generated.
 // 
-// BILD Design System Tokens v1.0.39
+// BILD Design System Tokens v1.0.41
 // Generated by Style Dictionary v4.0.0
 // 
 // Copyright (c) 2024 Axel Springer Deutschland GmbH
@@ -15,141 +15,101 @@
 // ============================================
 
 // Semantic - Text
-// 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.
+// 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: #DD0000;
-// 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.
+// 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: #232629;
-// 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.
+// 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: #666B70;
-// Inverse text color used on opposing surfaces (e.g., white text on red or dark backgrounds).
-Behavior: Dynamic — alternates between light and dark mode.
+// 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: #E9ECEF;
-// 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.
+// 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;
-// 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.
+// 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.
+// 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.
+// 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;
-// Used for strong warnings, errors, or destructive action labels.
-Behavior: Constant — red color remains unchanged between Light and Dark mode for visibility and recognition.
+// 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: #DD0000;
-// Represents medium attention states, often used in warnings or pending states.
-Behavior: Constant — same orange tone across Light and Dark mode.
+// 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.
+// 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;
 
 // Semantic - Surface
-// 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.
+// 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: #FFFFFF;
-// 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.
+// 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: #F2F4F5;
-// 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.
+// 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: #232629;
-// 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.
+// 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;
-// A fixed dark surface tone used for dark overlays or nested dark sections inside light layouts.
-Behavior: Constant — identical across Light and Dark mode.
+// 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: #232629;
 // 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: #CED4DA;
-// 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.
+// 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;
-// 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.
+// 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: #E9ECEF;
-// Represents tertiary-level gradient background.
-Currently used on skeletons.
+// Represents tertiary-level gradient background. Currently used on skeletons.
 $surface-color-tertiary-gradient-stop: rgba(233, 236, 239, 0);
-// 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.
+// 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: #343C41;
 // 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(255, 255, 255, 0);
-// Used for secondary surface gradients or subtle depth layers across backgrounds.
-Behavior: Dynamic — adapts to mode brightness for smooth gradient transitions.
+// 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(242, 244, 245, 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.
+// 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: #4B525A;
 
 // 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.
+// 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: #DD0000;
-// 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.
+// 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: #232629;
-// 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.
+// 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.
+// 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.
+// 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.800000011920929);
-// 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.
+// 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.699999988079071);
 
 // 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.
+// 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: #232629;
-// 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.
+// 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: #DD0000;
-// Used for disabled secondary elements, ensuring reduced visual prominence while maintaining legibility.
-Behavior: Dynamic — adapts neutral tones based on theme brightness.
+// Used for disabled secondary elements, ensuring reduced visual prominence while maintaining legibility. Behavior: Dynamic - adapts neutral tones based on theme brightness.
 $color-secondary-disabled: #E9ECEF;
-// 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.
+// 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: #F2F4F5;
-// 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.
+// 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: #F2F4F5;
-// 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.
+// 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.
+// 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: #8C9196;
 
 // 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.
+// 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: #CED4DA;
-// Used for subtle dividers and low-emphasis borders in neutral areas (e.g., card outlines, input containers).
-Dynamic — light gray in Light mode, dark gray in Dark mode.
+// 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: #E9ECEF;
-// 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.
+// 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: #232629;
 // 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;
-// 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.
+// 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.
+// 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;
 // Applied to disabled states of primary elements (e.g., buttons, inputs) to visually reduce emphasis and indicate inactivity.
 $border-color-primary-disabled: #F2F4F5;
@@ -173,42 +133,31 @@ $pipe-test-renaming: #476D93;
 // Semantic - Icon
 // Primary icon color on primary surfaces.
 $icon-color-primary: #4B525A;
-// 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.
+// 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: #CED4DA;
 // 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.
+// 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;
-// 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.
+// 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;
-// Represents success or confirmation icons (e.g., checkmarks, completion indicators).
-Behavior: Constant — same success green tone across Light and Dark mode.
+// 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;
 
 // 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.
+// 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: #232629;
-// 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.
+// 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: #4B525A;
-// Disabled label tone indicating inactive or unavailable states in UI elements.
-Behavior: Dynamic — lighter gray in Light mode, darker neutral in Dark mode.
+// 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: #CED4DA;
-// Used when primary label color should remain unchanged across modes in static UI areas.
-Behavior: Constant — identical tone in both Light and Dark mode.
+// 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.
+// 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.
+// 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.
+// Inverse version of the primary label color, used on dark or colored backgrounds. Behavior: Dynamic — switches between light and dark.
 $label-color-primary-inverse: #E9ECEF;
 
 // Semantic - Attention
@@ -232,21 +181,20 @@ $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.699999988079071);
-// 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.
+// 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.699999988079071);
 
 // Semantic - LayerOpacity
-$layer-opacity05: 5px;
-$layer-opacity10: 10px;
-$layer-opacity20: 20px;
-$layer-opacity30: 30px;
-$layer-opacity40: 40px;
-$layer-opacity50: 50px;
-$layer-opacity60: 60px;
-$layer-opacity70: 70px;
-$layer-opacity80: 80px;
-$layer-opacity90: 90px;
-$layer-opacity100: 100px;
-$layer-opacity00: 0px;
+$layer-opacity05: 5;
+$layer-opacity10: 10;
+$layer-opacity20: 20;
+$layer-opacity30: 30;
+$layer-opacity40: 40;
+$layer-opacity50: 50;
+$layer-opacity60: 60;
+$layer-opacity70: 70;
+$layer-opacity80: 80;
+$layer-opacity90: 90;
+$layer-opacity100: 100;
+$layer-opacity00: 0;
 

package/dist/scss/brands/bild/semantic/effects/effects-dark.scss

@@ -1,7 +1,7 @@
 //
 // Do not edit directly, this file was auto-generated.
 // 
-// BILD Design System Tokens v1.0.39
+// BILD Design System Tokens v1.0.41
 // Generated by Style Dictionary v4.0.0
 // 
 // Brand: Bild | Context: Mode: dark

package/dist/scss/brands/bild/semantic/effects/effects-light.scss

@@ -1,7 +1,7 @@
 //
 // Do not edit directly, this file was auto-generated.
 // 
-// BILD Design System Tokens v1.0.39
+// BILD Design System Tokens v1.0.41
 // Generated by Style Dictionary v4.0.0
 // 
 // Brand: Bild | Context: Mode: light