@marioschmidt/design-system-tokens 1.0.79 → 1.2.0

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

@@ -1,9 +1,9 @@
 // Do not edit directly, this file was auto-generated.
 //
-// BILD Design System Tokens v1.0.79
+// BILD Design System Tokens v1.2.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,287 @@
 // SEMANTIC
 // ============================================
 
-// 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.
-$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.
-$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.
-$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.
-$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.
-$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.
-$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;
-// 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.
-$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;
-
-// 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.
-$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.
-$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.
-$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.
-$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.
-$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.
-$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.
-$surface-color-tertiary: #E9ECEF;
-// 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.
-$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.
-$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.
-$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.
-$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.
-$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.
-$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;
+// Semantic - Text - Brand
+// Brand-colored text for emphasis and highlights (e.g., highlighted keywords, brand callouts, promotional text). Behavior: Dynamic — adapts between light and dark mode. Brand-specific.
+$text-color-brand: #DD0000;
+// Brand text color in light mode, neutral white in dark mode (e.g., subtle brand accents that shouldn't be vibrant in dark). Behavior: Dynamic — adapts between light and dark mode. Brand-specific.
+$text-color-brand-light-only: #DD0000;
+
+// Semantic - Text - Standard
+// Primary text color for static content like body copy and labels (e.g., article text, titles, form labels). Behavior: Dynamic — adapts between light and dark mode. Brand-specific.
+$text-color-primary: #222628;
+// Secondary text color for static supporting content (e.g., captions, timestamps, meta information, descriptions). Behavior: Dynamic — adapts between light and dark mode. Brand-specific.
+$text-color-secondary: #565A5F;
+// Tertiary text color for static de-emphasized content (e.g., placeholder text, helper text, footnotes). Behavior: Dynamic — adapts between light and dark mode. Brand-specific.
+$text-color-tertiary: #6E787C;
+
+// Semantic - Text - Heading
+// Kicker text color for category labels above headlines on standard surface backgrounds. Behavior: Dynamic — adapts between light and dark mode. Brand-specific.
+$kicker-text-color: #DD0000;
+// Headline text color for article titles and major headings. Behavior: Dynamic — adapts between light and dark mode. Brand-specific.
+$headline-text-color: #222628;
+
+// Semantic - Text - OnSolid
+// Text color for content overlaid on images, mode-independent (e.g., image captions, teaser headlines on photos). Behavior: Static — same value in light and dark mode.
+$text-color-on-image: #FFFFFF;
+// Secondary text on dark solid surfaces, mode-independent. Behavior: Static — same value in light and dark mode.
+$text-color-secondary-on-dark: #DDE1E2;
+// Primary text on light solid surfaces, mode-independent (e.g., text on light colored backgrounds). Behavior: Static — same value in light and dark mode.
+$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-bg: rgba(255, 255, 255, 0.8);
+$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-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: #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.
-$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.
-$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.
-$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.
-$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.
-$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: #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.
-$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 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.
-$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.
-$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;
-// Applied to disabled states of primary elements (e.g., buttons, inputs) to visually reduce emphasis and indicate inactivity.
-$border-color-primary-disabled: #F2F4F5;
-// Used for secondary component borders in a disabled state (e.g., secondary buttons, inactive input outlines).
-$border-color-secondary-disabled: #E9ECEF;
-
-// 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: #DD0000;
-// Defines the secondary brand tone. This variable changes across Light and Dark Mode.
-$core-color-secondary: #FFFFFF;
-// Represents tertiary brand accents. This variable changes across Light and Dark Mode.
-$core-color-tertiary: #232629;
-// 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: #232629;
-
-// 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.
-$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.
-$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.
-$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.
-$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.
-$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.
-$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.
-$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.
-$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: #E9ECEF;
-
-// 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: #DD0000;
-// 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: #DD0000;
-// 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: #FFFFFF;
-// 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
+$kicker-text-color-on-light: rgba(0, 0, 0, 0.7);
+// Primary text on dark solid surfaces, mode-independent (e.g., button labels on dark buttons). Behavior: Static — same value in light and dark mode.
+$text-color-primary-on-dark: #FFFFFF;
+
+// Semantic - Text - Interactive
+// Default text color for interactive/clickable elements in idle state (e.g., text links, navigation items, clickable labels). Behavior: Dynamic — adapts between light and dark mode. Brand-specific.
+$text-color-idle: #565A5F;
+// Text color for disabled elements (e.g., inactive button labels, disabled input text/links). Behavior: Dynamic — adapts between light and dark mode. Brand-specific.
+$text-color-disabled: #A6ABB0;
+// Text color for interactive/clickable elements on hover (e.g., link hover, navigation item hover). Behavior: Dynamic — adapts between light and dark mode. Brand-specific.
+$text-color-hover: #222628;
+// Text color for interactive/clickable elements in active or visited state (e.g., visited links, active navigation item, current page). Behavior: Dynamic — adapts between light and dark mode. Brand-specific.
+$text-color-active: #222628;
+
+// Semantic - Text - Inverse
+// Primary static text on inverted/contrast backgrounds (e.g., body text in dark sections, footer copy). Not for interactive elements. Behavior: Inverted — swaps light and dark values. Brand-specific.
+$text-color-primary-inverse: #DDE1E2;
+// Secondary static text on inverted/contrast backgrounds (e.g., meta info in dark sections). Not for interactive elements. Behavior: Inverted — swaps light and dark values. Brand-specific.
+$text-color-secondary-inverse: #A6ABB0;
+// High contrast inverse text for maximum readability on inverted surfaces (e.g., white text on dark buttons). Behavior: Inverted — swaps light and dark values.
+$text-color-inverse-high-contrast: #FFFFFF;
+
+// Semantic - Text - Feedback
+// Success text color for confirmation messages and positive feedback. Behavior: Dynamic — adapts between light and dark mode.
+$text-color-success: #006E3E;
+// Error text color for error messages and validation feedback. Behavior: Dynamic — adapts between light and dark mode.
+$text-color-error: #C10000;
+// Warning text color for caution messages and alerts. Behavior: Dynamic — adapts between light and dark mode.
+$text-color-warning: #9E4401;
+
+// Semantic - Background - Standard
+// Primary background color for main surfaces and page backgrounds (e.g., page background, primary containers). Behavior: Dynamic — adapts between light and dark mode. Brand-specific in dark mode.
+$bg-color-primary: #FFFFFF;
+// Background color for disabled interactive elements (e.g., inactive buttons, disabled inputs). Behavior: Dynamic — adapts between light and dark mode. Brand-specific.
+$bg-color-disabled: #F2F4F5;
+// Secondary background for elevated containers (e.g., cards on primary background, sidebar panels). Behavior: Dynamic — adapts between light and dark mode. Brand-specific.
+$bg-color-secondary: #F2F4F5;
+// Dark background that remains constant regardless of color mode (e.g. media containers). Behavior: Static — same value in light and dark mode. Brand-specific.
+$bg-color-primary-const-dark: #222628;
+// Quaternary background for fourth-level elements (e.g., pressed states, nested backgrounds). Behavior: Dynamic — adapts between light and dark mode. Brand-specific.
+$bg-color-quaternary: #C4C9CF;
+// Tertiary background for third-level containers (e.g., input fields, nested cards, hover states). Behavior: Dynamic — adapts between light and dark mode. Brand-specific.
+$bg-color-tertiary: #DDE1E2;
+// Light background that remains constant regardless of color mode (e.g., fixed white elements). Behavior: Static — same value in light and dark mode. Brand-specific.
+$bg-color-primary-const-light: #FFFFFF;
+// Quintenary background for fifth-level elements and high-contrast utility surfaces. Behavior: Dynamic — adapts between light and dark mode. Brand-specific.
+$bg-color-quintenary: #8C9196;
+
+// Semantic - Background - Brand
+// Brand background in light mode, neutral white in dark mode (e.g., accent elements that shouldn't be vibrant in dark). Behavior: Dynamic — adapts between light and dark mode. Brand-specific.
+$bg-color-brand-light-only: #DD0000;
+// Solid brand background for primary CTAs and brand-emphasized elements (e.g., primary buttons, badges). Behavior: Static — same value in light and dark mode. Brand-specific.
+$bg-color-brand-solid: #DD0000;
+// Solid brand background for hover interactions (e.g., CTA button hover). Behavior: Static — same value in light and dark mode. Brand-specific.
+$bg-color-brand-solid-hover: #C10000;
+// Solid brand background for active/pressed state (e.g., CTA button pressed). Behavior: Static — same value in light and dark mode. Brand-specific.
+$bg-color-brand-solid-active: #930000;
+// Subtle brand tint background for soft brand presence (e.g., notification backgrounds, selected list items). Behavior: Dynamic — adapts between light and dark mode. Brand-specific.
+$bg-color-brand-tint: #FFDADA;
+// Subtle brand tint background for hover state (e.g., secondary button hover). Behavior: Dynamic — adapts between light and dark mode. Brand-specific.
+$bg-color-brand-tint-hover: #FFB2B2;
+
+// Semantic - Background - Inverse
+// nverted primary background for contrast sections (e.g., dark header on light page, footer). Behavior: Inverted — swaps light and dark values. Brand-specific.
+$bg-color-primary-inverse: #222628;
+// Inverted tertiary background for nested contrast elements (e.g., code blocks, nested menus). Behavior: Inverted — swaps light and dark values. Brand-specific.
+$bg-color-tertiary-inverse: #343C41;
+// Inverted quaternary background for subtle contrast distinctions. Behavior: Inverted — swaps light and dark values. Brand-specific.
+$bg-color-quaternary-inverse: #40464D;
+// Inverted secondary background for elevated contrast elements (e.g., tooltips, popovers). Behavior: Inverted — swaps light and dark values. Brand-specific.
+$bg-color-secondary-inverse: #2C3133;
+// Inverted quintenary background for high-contrast inverse elements. Behavior: Inverted — swaps light and dark values. Brand-specific.
+$bg-color-quintenary-inverse: #8C9196;
+
+// Semantic - Background - Success
+// Success feedback background for positive states (e.g., success message background, validated field). Behavior: Dynamic — adapts between light and dark mode.
+$bg-color-success-tint: #DEF7E6;
+// Solid success background for positive actions (e.g., confirm button, success badge). Behavior: Static — same value in light and dark mode.
+$bg-color-success-solid: #158751;
+// Solid success background for hover state (e.g., confirm button hover). Behavior: Static — same value in light and dark mode.
+$bg-color-success-solid-hover: #006E3E;
+// Success feedback background for hover state (e.g., success notification hover). Behavior: Dynamic — adapts between light and dark mode.
+$bg-color-success-tint-hover: #B9EFCD;
+// Solid success background for active/pressed state (e.g., confirm button pressed). Behavior: Static — same value in light and dark mode.
+$bg-color-success-solid-active: #0D5232;
+
+// Semantic - Background - GradientStops
+// Gradient stop color for tertiary background transitions. Behavior: Dynamic — adapts between light and dark mode. Brand-specific.
+$bg-color-tertiary-gradient-stop: rgba(221, 225, 226, 0);
+// Gradient stop color for primary background fade effects (e.g., scroll shadows, content fade-outs). Behavior: Dynamic — adapts between light and dark mode.
+$bg-color-primary-gradient-stop: rgba(255, 255, 255, 0);
+// Gradient stop color for secondary background transitions. Behavior: Dynamic — adapts between light and dark mode. Brand-specific.
+$bg-color-secondary-gradient-stop: rgba(242, 244, 245, 0);
+
+// 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: rgba(0, 0, 0, 0.7);
+$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: rgba(255, 255, 255, 0.7);
+$overlay-scrim-white-const: rgba(255, 255, 255, 0.7);
+
+// Semantic - Background - Error
+// Error feedback background for error states (e.g., error message background, invalid field highlight). Behavior: Dynamic — adapts between light and dark mode.
+$bg-color-error-tint: #FFECEC;
+// Error feedback background for hover state (e.g., error notification hover). Behavior: Dynamic — adapts between light and dark mode.
+$bg-color-error-tint-hover: #FFDADA;
+// Solid error background for critical actions (e.g., delete button, error badge). Behavior: Static — same value in light and dark mode.
+$bg-color-error-solid: #C10000;
+// Solid error background for hover state (e.g., destructive button hover). Behavior: Static — same value in light and dark mode.
+$bg-color-error-solid-hover: #930000;
+
+// Semantic - Background - Warning
+// Warning feedback background for caution states (e.g., warning banner, attention indicators). Behavior: Dynamic — adapts between light and dark mode.
+$bg-color-warning-tint: #FFEDDF;
+// Warning feedback background for hover state. Behavior: Dynamic — adapts between light and dark mode.
+$bg-color-warning-tint-hover: #FEDBC1;
+// Solid warning background for caution indicators (e.g., warning badge, alert background). Behavior: Static — same value in light and dark mode.
+$bg-color-warning-solid: #FD8227;
+// Solid warning background for hover state. Behavior: Static — same value in light and dark mode.
+$bg-color-warning-solid-hover: #EF6702;
+
+// Semantic - Border - Standard
+// Default border color for static containers and separators (e.g., card borders, section dividers). Behavior: Dynamic — adapts between light and dark mode. Brand-specific.
+$border-color-default: #C4C9CF;
+// Subtle low-contrast border for soft static separations (e.g., list separators, subtle dividers). Behavior: Dynamic — adapts between light and dark mode. Brand-specific.
+$border-color-subtle: #DDE1E2;
+// Extra strong border for maximum static contrast (e.g., critical sections, strong separations). Behavior: Dynamic — adapts between light and dark mode. Brand-specific.
+$border-color-extra-strong: #222628;
+// Strong border for static emphasis (e.g., highlighted sections, important containers). Behavior: Dynamic — adapts between light and dark mode. Brand-specific.
+$border-color-strong: #6E787C;
+
+// Semantic - Border - OnSolid
+// Subtle border on dark solid backgrounds (e.g., subtle dividers on dark UI). Behavior: Static — same value in light and dark mode. Brand-specific.
+$border-color-subtle-on-dark: #343C41;
+// Default border on dark solid backgrounds. Behavior: Static — same value in light and dark mode. Brand-specific.
+$border-color-default-on-dark: #565A5F;
+// Subtle border on light solid backgrounds. Behavior: Static — same value in light and dark mode. Brand-specific.
+$border-color-subtle-on-light: #DDE1E2;
+// Default border on light solid backgrounds. Behavior: Static — same value in light and dark mode. Brand-specific.
+$border-color-default-on-light: #C4C9CF;
+
+// Semantic - Border - Feedback
+// Success border for valid states (e.g., validated input, successful upload). Behavior: Dynamic — adapts between light and dark mode.
+$border-color-success: #006E3E;
+// Error border for invalid states (e.g., form validation error, required field indicator). Behavior: Dynamic — adapts between light and dark mode.
+$border-color-error: #DD0000;
+// Warning border for caution states (e.g., field warning, attention required). Behavior: Dynamic — adapts between light and dark mode.
+$border-color-warning: #C65502;
+
+// Semantic - Border - Interactive
+// Border color for disabled elements (e.g., disabled input borders, inactive containers). Behavior: Dynamic — adapts between light and dark mode. Brand-specific.
+$border-color-disabled: #DDE1E2;
+// Border for selected elements (e.g., selected checkbox, active tab indicator). Behavior: Dynamic — adapts between light and dark mode. Brand-specific.
+$border-color-selected: #40464D;
+// Border for active elements (e.g., active tab indicator). Behavior: Dynamic — adapts between light and dark mode. Brand-specific.
+$border-color-active: #DD0000;
+// Default border color for interactive elements in idle state (e.g., input fields, buttons, selectable items). Behavior: Dynamic — adapts between light and dark mode. Brand-specific.
+$border-color-idle: #8C9196;
+
+// Semantic - Border - Inverse
+// Default border on inverted surfaces. Behavior: Inverted — swaps light and dark values. Brand-specific.
+$border-color-default-inverse: #565A5F;
+// Subtle border on inverted surfaces (e.g., subtle separators in dark sections). Behavior: Inverted — swaps light and dark values. Brand-specific.
+$border-color-subtle-inverse: #343C41;
+
+// Semantic - Border - Brand
+// Brand-colored border for emphasis (e.g., active tabs, selected items, brand highlights). Behavior: Dynamic — adapts between light and dark mode. Brand-specific.
+$border-color-brand: #DD0000;
+// Brand border in light mode, neutral white in dark mode (e.g., accent borders that shouldn't be vibrant in dark). Behavior: Dynamic — adapts between light and dark mode. Brand-specific.
+$border-color-brand-light-only: #DD0000;
+// Brand border that remains constant regardless of color mode. Behavior: Static — same value in light and dark mode. Brand-specific.
+$border-color-brand-const: #DD0000;
+
+// Semantic - Border - Utilities
+// Zero-contrast border matching surface color (e.g., invisible borders for layout, spacing helpers). Behavior: Dynamic — adapts between light and dark mode. Brand-specific.
+$border-color-no-contrast: #FFFFFF;
+
+// Semantic - Icon - Interactive
+// Default icon color for interactive/clickable icons in idle state (e.g., icon buttons, navigation icons, action icons). Behavior: Dynamic — adapts between light and dark mode. Brand-specific.
+$icon-color-idle: #565A5F;
+// Icon color for disabled elements (e.g., inactive button icons, disabled controls). Behavior: Dynamic — adapts between light and dark mode. Brand-specific.
+$icon-color-disabled: #A6ABB0;
+// Icon color for interactive/clickable icons on hover (e.g., icon button hover, navigation icon hover). Behavior: Dynamic — adapts between light and dark mode. Brand-specific.
+$icon-color-hover: #222628;
+// Icon color for interactive/clickable icons in active or selected state (e.g., active navigation, selected action). Behavior: Dynamic — adapts between light and dark mode. Brand-specific.
+$icon-color-active: #222628;
+
+// Semantic - Icon - OnSolid
+// Secondary icon on light solid surfaces. Behavior: Static — same value in light and dark mode.
+$icon-color-secondary-on-light: #565A5F;
+// Primary icon on dark solid surfaces (e.g., icons on dark buttons, player controls). Behavior: Static — same value in light and dark mode.
+$icon-color-primary-on-dark: #FFFFFF;
+// Secondary icon on dark solid surfaces. Behavior: Static — same value in light and dark mode.
+$icon-color-secondary-on-dark: #DDE1E2;
+// Primary icon on light solid surfaces. Behavior: Static — same value in light and dark mode.
+$icon-color-primary-on-light: #222628;
+// Icon color for elements overlaid on images (e.g., play button on video thumbnail). Mode-independent. Behavior: Static — same value in light and dark mode.
+$icon-color-const-on-image: #FFFFFF;
+
+// Semantic - Icon - Feedback
+// Success icon color for success indicators (e.g., checkmark icon, completion indicator). Behavior: Dynamic — adapts between light and dark mode.
+$icon-color-success: #006E3E;
+// Error icon color for error indicators (e.g., error badge icon, validation error icon). Behavior: Dynamic — adapts between light and dark mode.
+$icon-color-error: #C10000;
+// Warning icon color for caution indicators (e.g., warning triangle, alert icon). Behavior: Dynamic — adapts between light and dark mode.
+$icon-color-warning: #9E4401;
+
+// Semantic - Icon - Brand
+// Brand-colored icon for emphasis (e.g., featured icons, brand indicators). Behavior: Dynamic — adapts between light and dark mode. Brand-specific.
+$icon-color-brand: #DD0000;
+// Brand icon color in light mode, neutral white in dark mode. Behavior: Dynamic — adapts between light and dark mode. Brand-specific.
+$icon-color-brand-light-only: #DD0000;
+
+// Semantic - Icon - Standard
+// Primary icon color for static/decorative icons (e.g., section icons, illustrative icons, status indicators). Behavior: Dynamic — adapts between light and dark mode. Brand-specific.
+$icon-color-primary: #222628;
+// Secondary icon color for static supporting icons (e.g., metadata icons, decorative icons, list markers). Behavior: Dynamic — adapts between light and dark mode. Brand-specific.
+$icon-color-secondary: #565A5F;
+// Tertiary icon color for static de-emphasized icons (e.g., subtle indicators, background icons).  Behavior: Dynamic — adapts between light and dark mode. Brand-specific.
+$icon-color-tertiary: #6E787C;
+
+// Semantic - Icon - Inverse
+// Primary icon on inverted/contrast backgrounds. Behavior: Inverted — swaps light and dark values. Brand-specific.
+$icon-color-primary-inverse: #DDE1E2;
+// Secondary icon on inverted/contrast backgrounds. Behavior: Inverted — swaps light and dark values. Brand-specific.
+$icon-color-secondary-inverse: #A6ABB0;
+// High contrast inverse icon for maximum visibility on inverted surfaces. Behavior: Inverted — swaps light and dark values.
+$icon-color-inverse-high-contrast: #FFFFFF;
 
 // 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;
 

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

@@ -1,11 +1,11 @@
 // Do not edit directly, this file was auto-generated.
 //
-// BILD Design System Tokens v1.0.79
+// BILD Design System Tokens v1.2.0
 // Generated by Style Dictionary v4.2.0
 //
 // Brand: Bild | Context: Mode: dark
 //
-// 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

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

@@ -1,11 +1,11 @@
 // Do not edit directly, this file was auto-generated.
 //
-// BILD Design System Tokens v1.0.79
+// BILD Design System Tokens v1.2.0
 // Generated by Style Dictionary v4.2.0
 //
 // Brand: Bild | Context: Mode: light
 //
-// 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

package/dist/scss/brands/bild/semantic/typography/typography-lg.scss

@@ -1,11 +1,11 @@
 // Do not edit directly, this file was auto-generated.
 //
-// BILD Design System Tokens v1.0.79
+// BILD Design System Tokens v1.2.0
 // Generated by Style Dictionary v4.2.0
 //
 // Brand: Bild | Context: Breakpoint: lg
 //
-// 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
@@ -16,7 +16,7 @@
 /** Display styles are used for large, attention-grabbing text, typically in hero sections, landing pages, or promotional contexts. They emphasize hierarchy and visual impact. Font size: 40 - 40 - 72 - 120 */
 $display-1: (
   font-family: Gotham,
-  font-weight: 800,
+  font-weight: 900,
   font-size: 120px,
   line-height: 120px,
   letter-spacing: -2px,
@@ -24,7 +24,7 @@ $display-1: (
 /** Display styles are used for large, attention-grabbing text, typically in hero sections, landing pages, or promotional contexts. They emphasize hierarchy and visual impact. Font size: 36 - 36 - 42 - 64 */
 $display-2: (
   font-family: Gotham,
-  font-weight: 800,
+  font-weight: 900,
   font-size: 64px,
   line-height: 64px,
   letter-spacing: -1px,
@@ -32,7 +32,7 @@ $display-2: (
 /** Display styles are used for large, attention-grabbing text, typically in hero sections, landing pages, or promotional contexts. They emphasize hierarchy and visual impact. Font size: 28 - 28 - 32 - 40 */
 $display-3: (
   font-family: Gotham,
-  font-weight: 800,
+  font-weight: 900,
   font-size: 40px,
   line-height: 40px,
   letter-spacing: -1px,
@@ -310,14 +310,6 @@ $label-1-bold: (
   line-height: 17px,
   letter-spacing: 0.25px,
 );
-/** Labels identify interface elements such as form fields, buttons, or navigation items. They ensure clarity and usability in functional contexts. This text style should be chosen when shorter small identifier texts in a small font size is needed where as the footnote text style should be used for longer descriptive texts. This text style's font size changes across device sizes: 10 - 10 - 15 - 17 */
-$label-1-bold-resp: (
-  font-family: Gotham XNarrow,
-  font-weight: 700,
-  font-size: 17px,
-  line-height: 17px,
-  letter-spacing: 0.25px,
-);
 /** Labels identify interface elements such as form fields, buttons, or navigation items. They ensure clarity and usability in functional contexts. This text style should be chosen when shorter small identifier texts in a small font size is needed where as the footnote text style should be used for longer descriptive texts. This text style's font size value remains constant at 17 across device sizes. */
 $label-1-uppercase-bold: (
   font-family: Gotham XNarrow,