@marioschmidt/design-system-tokens 1.0.64 → 1.0.66

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

@@ -1,198 +0,0 @@
-/**
- * Do not edit directly, this file was auto-generated.
- * 
- * BILD Design System Tokens v1.0.64
- * Generated by Style Dictionary v4.0.0
- * 
- * Copyright (c) 2024 Axel Springer Deutschland GmbH
- * Proprietary and confidential. All rights reserved.
- * 
- * Documentation: https://github.com/UXWizard25/vv-token-test-v3#readme
- */
-
-// ============================================
-// 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. */
-export const textColorAccentConstant = "#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. */
-export const textColorPrimary = "#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. */
-export const textColorMuted = "#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. */
-export const textColorPrimaryInverse = "#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. */
-export const textColorPrimaryConstant = "#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. */
-export const textColorSuccessConstant = "#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. */
-export const textColorPrimaryInverseConstant = "#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. */
-export const textColorSecondary = "#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. */
-export const textColorAttentionHigh = "#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. */
-export const textColorAccent = "#FFFFFF";
-/** Represents medium attention states, often used in warnings or pending states. Behavior: Constant — same orange tone across Light and Dark mode. */
-export const textColorAttentionMedium = "#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. */
-export const textColorOnDarkSurface = "#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. */
-export const surfaceColorPrimary = "#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. */
-export const surfaceColorSecondary = "#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. */
-export const surfaceColorPrimaryInverse = "#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. */
-export const surfaceColorPrimaryConstantLight = "#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. */
-export const surfaceColorPrimaryConstantDark = "#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. */
-export const surfaceColorQuartenary = "#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. */
-export const surfaceColorSuccess = "#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. */
-export const surfaceColorTertiary = "#343C41";
-/** Represents tertiary-level gradient background. Currently used on skeletons. */
-export const surfaceColorTertiaryGradientStop = "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. */
-export const surfaceColorTertiaryInverse = "#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. */
-export const surfaceColorPrimaryGradientStop = "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. */
-export const surfaceColorSecondaryGradientStop = "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. */
-export const surfaceColorQuartenaryInverse = "#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. */
-export const kickerTextColorOnSurface = "#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. */
-export const headlineColorPrimary = "#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. */
-export const headlineColorWhiteConst = "#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. */
-export const kickerTextColorOnRed = "#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. */
-export const kickerTextColorOnDarkBg = "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. */
-export const kickerTextColorOnBrightBg = "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. */
-export const colorSecondaryActive = "#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. */
-export const colorPrimaryActive = "#DD0000";
-/** Used for disabled secondary elements, ensuring reduced visual prominence while maintaining legibility. Behavior: Dynamic - adapts neutral tones based on theme brightness. */
-export const colorSecondaryDisabled = "#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. */
-export const colorPrimaryDisabled = "#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. */
-export const colorSecondaryActiveInverse = "#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. */
-export const colorTertiaryActive = "#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. */
-export const colorTertiaryDisabled = "#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. */
-export const borderColorMediumContrast = "#666B70";
-/** 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. */
-export const borderColorLowContrast = "#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. */
-export const borderColorHighContrast = "#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. */
-export const borderColorLowContrastConstant = "#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. */
-export const borderColorSuccess = "#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. */
-export const borderColorWarning = "#DD0000";
-/** Applied to disabled states of primary elements (e.g., buttons, inputs) to visually reduce emphasis and indicate inactivity. */
-export const borderColorPrimaryDisabled = "#343C41";
-/** Used for secondary component borders in a disabled state (e.g., secondary buttons, inactive input outlines). */
-export const borderColorSecondaryDisabled = "#4B525A";
-
-// Semantic - Core
-/** Used as the main brand color for key interactive elements such as primary buttons, active states, and prominent highlights. It remains constant across Light and Dark Mode. */
-export const coreColorPrimary = "#DD0000";
-/** Defines the secondary brand tone. This variable changes across Light and Dark Mode. */
-export const coreColorSecondary = "#232629";
-/** Represents tertiary brand accents. This variable changes across Light and Dark Mode. */
-export const coreColorTertiary = "#FFFFFF";
-/** Use this on elements that must maintain the white color even in dark mode. */
-export const coreColorSecondaryConstant = "#FFFFFF";
-/** Use this on elements that need to maintain the dark color across themes and color modes. */
-export const coreColorTertiaryConstant = "#232629";
-
-// Semantic - Icon
-/** Primary icon color on primary surfaces. */
-export const iconColorPrimary = "#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. */
-export const iconColorInverse = "#4B525A";
-/** Secondary icon tone for less prominent actions or supportive iconography (e.g., secondary buttons, tool icons). Remains unchanged across modes. */
-export const iconColorSecondaryConstant = "#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. */
-export const iconColorConstantOnDark = "#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. */
-export const iconColorPrimaryConstant = "#4B525A";
-/** Represents success or confirmation icons (e.g., checkmarks, completion indicators). Behavior: Constant - same success green tone across Light and Dark mode. */
-export const iconColorSuccess = "#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. */
-export const labelColorPrimary = "#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. */
-export const labelColorSecondary = "#CED4DA";
-/** Disabled label tone indicating inactive or unavailable states in UI elements. Behavior: Dynamic — lighter gray in Light mode, darker neutral in Dark mode. */
-export const labelColorDisabled = "#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. */
-export const labelColorPrimaryConstant = "#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. */
-export const labelColorPrimaryInverseConstant = "#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. */
-export const labelColorTertiary = "#8C9196";
-/** Inverse version of the primary label color, used on dark or colored backgrounds. Behavior: Dynamic — switches between light and dark. */
-export const labelColorPrimaryInverse = "#232629";
-
-// Semantic - Attention
-/** High-level attention color used for errors, destructive actions, and critical alerts (e.g., delete actions, error states). Remains red in both Light and Dark mode for immediate recognition. */
-export const attentionColorHigh = "#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. */
-export const accentColorPrimary = "#FFFFFF";
-/** Medium-level attention tone representing stronger caution or intermediate alert states. Commonly applied in warning messages. Constant — identical in both modes. */
-export const attentionColorMedium = "#FD8227";
-/** Low-level warning or attention tone, typically used for informational or cautionary messages. Same yellow tone across Light and Dark to maintain recognition. */
-export const attentionColorLow = "#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. */
-export const accentColorPrimaryConstant = "#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. */
-export const attentionColorSuccessPrimary = "#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. */
-export const attentionColorExtraLow = "#343C41";
-/** Secondary success tone used for secondary states. Maintains the same color in both Light and Dark mode for clarity. */
-export const attentionColorSuccessSecondary = "#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. */
-export const overlayScrimBlack = "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. */
-export const overlayScrimWhite = "rgba(255, 255, 255, 0.7)";
-
-// Semantic - LayerOpacity
-export const layerOpacity05 = "0.05";
-export const layerOpacity10 = "0.1";
-export const layerOpacity20 = "0.2";
-export const layerOpacity30 = "0.3";
-export const layerOpacity40 = "0.4";
-export const layerOpacity50 = "0.5";
-export const layerOpacity60 = "0.6";
-export const layerOpacity70 = "0.7";
-export const layerOpacity80 = "0.8";
-export const layerOpacity90 = "0.9";
-export const layerOpacity100 = "1";
-export const layerOpacity00 = "0";
-

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

@@ -1,198 +0,0 @@
-/**
- * Do not edit directly, this file was auto-generated.
- * 
- * BILD Design System Tokens v1.0.64
- * Generated by Style Dictionary v4.0.0
- * 
- * Copyright (c) 2024 Axel Springer Deutschland GmbH
- * Proprietary and confidential. All rights reserved.
- * 
- * Documentation: https://github.com/UXWizard25/vv-token-test-v3#readme
- */
-
-// ============================================
-// 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. */
-export const textColorAccentConstant = "#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. */
-export const textColorPrimary = "#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. */
-export const textColorMuted = "#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. */
-export const textColorPrimaryInverse = "#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. */
-export const textColorPrimaryConstant = "#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. */
-export const textColorSuccessConstant = "#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. */
-export const textColorPrimaryInverseConstant = "#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. */
-export const textColorSecondary = "#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. */
-export const textColorAttentionHigh = "#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. */
-export const textColorAccent = "#DD0000";
-/** Represents medium attention states, often used in warnings or pending states. Behavior: Constant — same orange tone across Light and Dark mode. */
-export const textColorAttentionMedium = "#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. */
-export const textColorOnDarkSurface = "#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. */
-export const surfaceColorPrimary = "#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. */
-export const surfaceColorSecondary = "#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. */
-export const surfaceColorPrimaryInverse = "#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. */
-export const surfaceColorPrimaryConstantLight = "#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. */
-export const surfaceColorPrimaryConstantDark = "#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. */
-export const surfaceColorQuartenary = "#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. */
-export const surfaceColorSuccess = "#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. */
-export const surfaceColorTertiary = "#E9ECEF";
-/** Represents tertiary-level gradient background. Currently used on skeletons. */
-export const surfaceColorTertiaryGradientStop = "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. */
-export const surfaceColorTertiaryInverse = "#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. */
-export const surfaceColorPrimaryGradientStop = "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. */
-export const surfaceColorSecondaryGradientStop = "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. */
-export const surfaceColorQuartenaryInverse = "#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. */
-export const kickerTextColorOnSurface = "#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. */
-export const headlineColorPrimary = "#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. */
-export const headlineColorWhiteConst = "#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. */
-export const kickerTextColorOnRed = "#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. */
-export const kickerTextColorOnDarkBg = "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. */
-export const kickerTextColorOnBrightBg = "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. */
-export const colorSecondaryActive = "#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. */
-export const colorPrimaryActive = "#DD0000";
-/** Used for disabled secondary elements, ensuring reduced visual prominence while maintaining legibility. Behavior: Dynamic - adapts neutral tones based on theme brightness. */
-export const colorSecondaryDisabled = "#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. */
-export const colorPrimaryDisabled = "#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. */
-export const colorSecondaryActiveInverse = "#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. */
-export const colorTertiaryActive = "#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. */
-export const colorTertiaryDisabled = "#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. */
-export const borderColorMediumContrast = "#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. */
-export const borderColorLowContrast = "#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. */
-export const borderColorHighContrast = "#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. */
-export const borderColorLowContrastConstant = "#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. */
-export const borderColorSuccess = "#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. */
-export const borderColorWarning = "#DD0000";
-/** Applied to disabled states of primary elements (e.g., buttons, inputs) to visually reduce emphasis and indicate inactivity. */
-export const borderColorPrimaryDisabled = "#F2F4F5";
-/** Used for secondary component borders in a disabled state (e.g., secondary buttons, inactive input outlines). */
-export const borderColorSecondaryDisabled = "#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. */
-export const coreColorPrimary = "#DD0000";
-/** Defines the secondary brand tone. This variable changes across Light and Dark Mode. */
-export const coreColorSecondary = "#FFFFFF";
-/** Represents tertiary brand accents. This variable changes across Light and Dark Mode. */
-export const coreColorTertiary = "#232629";
-/** Use this on elements that must maintain the white color even in dark mode. */
-export const coreColorSecondaryConstant = "#FFFFFF";
-/** Use this on elements that need to maintain the dark color across themes and color modes. */
-export const coreColorTertiaryConstant = "#232629";
-
-// Semantic - Icon
-/** Primary icon color on primary surfaces. */
-export const iconColorPrimary = "#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. */
-export const iconColorInverse = "#CED4DA";
-/** Secondary icon tone for less prominent actions or supportive iconography (e.g., secondary buttons, tool icons). Remains unchanged across modes. */
-export const iconColorSecondaryConstant = "#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. */
-export const iconColorConstantOnDark = "#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. */
-export const iconColorPrimaryConstant = "#4B525A";
-/** Represents success or confirmation icons (e.g., checkmarks, completion indicators). Behavior: Constant - same success green tone across Light and Dark mode. */
-export const iconColorSuccess = "#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. */
-export const labelColorPrimary = "#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. */
-export const labelColorSecondary = "#4B525A";
-/** Disabled label tone indicating inactive or unavailable states in UI elements. Behavior: Dynamic — lighter gray in Light mode, darker neutral in Dark mode. */
-export const labelColorDisabled = "#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. */
-export const labelColorPrimaryConstant = "#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. */
-export const labelColorPrimaryInverseConstant = "#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. */
-export const labelColorTertiary = "#8C9196";
-/** Inverse version of the primary label color, used on dark or colored backgrounds. Behavior: Dynamic — switches between light and dark. */
-export const labelColorPrimaryInverse = "#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. */
-export const attentionColorHigh = "#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. */
-export const accentColorPrimary = "#DD0000";
-/** Medium-level attention tone representing stronger caution or intermediate alert states. Commonly applied in warning messages. Constant — identical in both modes. */
-export const attentionColorMedium = "#FD8227";
-/** Low-level warning or attention tone, typically used for informational or cautionary messages. Same yellow tone across Light and Dark to maintain recognition. */
-export const attentionColorLow = "#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. */
-export const accentColorPrimaryConstant = "#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. */
-export const attentionColorSuccessPrimary = "#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. */
-export const attentionColorExtraLow = "#FFFFFF";
-/** Secondary success tone used for secondary states. Maintains the same color in both Light and Dark mode for clarity. */
-export const attentionColorSuccessSecondary = "#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. */
-export const overlayScrimBlack = "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. */
-export const overlayScrimWhite = "rgba(255, 255, 255, 0.7)";
-
-// Semantic - LayerOpacity
-export const layerOpacity05 = "0.05";
-export const layerOpacity10 = "0.1";
-export const layerOpacity20 = "0.2";
-export const layerOpacity30 = "0.3";
-export const layerOpacity40 = "0.4";
-export const layerOpacity50 = "0.5";
-export const layerOpacity60 = "0.6";
-export const layerOpacity70 = "0.7";
-export const layerOpacity80 = "0.8";
-export const layerOpacity90 = "0.9";
-export const layerOpacity100 = "1";
-export const layerOpacity00 = "0";
-

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

@@ -1,161 +0,0 @@
-/**
- * Do not edit directly, this file was auto-generated.
- * 
- * BILD Design System Tokens v1.0.64
- * Generated by Style Dictionary v4.0.0
- * 
- * Brand: Bild | Context: Mode: dark
- * 
- * Copyright (c) 2024 Axel Springer Deutschland GmbH
- * Proprietary and confidential. All rights reserved.
- * 
- * Documentation: https://github.com/UXWizard25/vv-token-test-v3#readme
- */
-
-// ============================================
-// DROPSHADOWSOFT
-// ============================================
-
-/** Broad and soft shadows with low contrast. Best for cards, sheets, or subtle surface separation. */
-export const shadowSoftSm = [
-  {
-    offsetX: 0,
-    offsetY: 1,
-    radius: 4,
-    spread: 0,
-    color: "rgba(0, 0, 0, 0.04)"
-  },
-  {
-    offsetX: 0,
-    offsetY: 2,
-    radius: 6,
-    spread: 0,
-    color: "rgba(0, 0, 0, 0.08)"
-  }
-];
-/** Broad and soft shadows with low contrast. Best for cards, sheets, or subtle surface separation. */
-export const shadowSoftMd = [
-  {
-    offsetX: 0,
-    offsetY: 2,
-    radius: 16,
-    spread: 0,
-    color: "rgba(0, 0, 0, 0.03)"
-  },
-  {
-    offsetX: 0,
-    offsetY: 4,
-    radius: 12,
-    spread: 0,
-    color: "rgba(0, 0, 0, 0.07)"
-  }
-];
-/** Broad and soft shadows with low contrast. Best for cards, sheets, or subtle surface separation. */
-export const shadowSoftLg = [
-  {
-    offsetX: 0,
-    offsetY: 8,
-    radius: 24,
-    spread: 0,
-    color: "rgba(0, 0, 0, 0.03)"
-  },
-  {
-    offsetX: 0,
-    offsetY: 8,
-    radius: 16,
-    spread: 0,
-    color: "rgba(0, 0, 0, 0.07)"
-  }
-];
-/** Broad and soft shadows with low contrast. Best for cards, sheets, or subtle surface separation. */
-export const shadowSoftXl = [
-  {
-    offsetX: 0,
-    offsetY: 0,
-    radius: 64,
-    spread: 0,
-    color: "rgba(0, 0, 0, 0.05)"
-  },
-  {
-    offsetX: 0,
-    offsetY: 16,
-    radius: 32,
-    spread: 0,
-    color: "rgba(0, 0, 0, 0.1)"
-  }
-];
-
-
-// ============================================
-// DROPSHADOWHARD
-// ============================================
-
-/** Sharper, higher-contrast shadows. Best for dialogs, modals, dropdowns and overlays that require stronger focus. */
-export const shadowHardSm = [
-  {
-    offsetX: 0,
-    offsetY: 1,
-    radius: 2,
-    spread: 0,
-    color: "rgba(0, 0, 0, 0.2)"
-  },
-  {
-    offsetX: 0,
-    offsetY: 1,
-    radius: 3,
-    spread: 1,
-    color: "rgba(0, 0, 0, 0.1)"
-  }
-];
-/** Sharper, higher-contrast shadows. Best for dialogs, modals, dropdowns and overlays that require stronger focus. */
-export const shadowHardMd = [
-  {
-    offsetX: 0,
-    offsetY: 4,
-    radius: 8,
-    spread: 0,
-    color: "rgba(0, 0, 0, 0.1)"
-  },
-  {
-    offsetX: 0,
-    offsetY: 2,
-    radius: 4,
-    spread: 0,
-    color: "rgba(0, 0, 0, 0.16)"
-  }
-];
-/** Sharper, higher-contrast shadows. Best for dialogs, modals, dropdowns and overlays that require stronger focus. */
-export const shadowHardLg = [
-  {
-    offsetX: 0,
-    offsetY: 2,
-    radius: 3,
-    spread: 0,
-    color: "rgba(0, 0, 0, 0.2)"
-  },
-  {
-    offsetX: 0,
-    offsetY: 6,
-    radius: 10,
-    spread: 4,
-    color: "rgba(0, 0, 0, 0.1)"
-  }
-];
-/** Sharper, higher-contrast shadows. Best for dialogs, modals, dropdowns and overlays that require stronger focus. */
-export const shadowHardXl = [
-  {
-    offsetX: 0,
-    offsetY: 4,
-    radius: 4,
-    spread: 0,
-    color: "rgba(0, 0, 0, 0.2)"
-  },
-  {
-    offsetX: 0,
-    offsetY: 8,
-    radius: 12,
-    spread: 6,
-    color: "rgba(0, 0, 0, 0.1)"
-  }
-];
-