@marioschmidt/design-system-tokens 1.0.9

package/dist/css/semantic/sportbild/color/color-sportbild-light.css

@@ -0,0 +1,425 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root[data-color="light"] {
+  --semantic-core-core-color-primary: #0a264f; /** 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. */
+  --semantic-core-core-color-secondary: #ffffff; /** Defines the secondary brand tone. This variable changes across Light and Dark Mode. */
+  --semantic-core-core-color-tertiary: #081729; /** Represents tertiary brand accents. This variable changes across Light and Dark Mode. */
+  --semantic-core-core-color-secondary-constant: #ffffff; /** Use this on elements that must maintain the white color even in dark mode. */
+  --semantic-core-core-color-tertiary-constant: #081729; /** Use this on elements that need to maintain the dark color across themes and color modes. */
+  --semantic-core-core-color-tertiary-vv-pipe-test: #476e94; /** this is a test for the token pipeline */
+  --semantic-core-leo-test-color: #476e94; /** this is a test for the token pipeline */
+  --semantic-attention-accent-color-primary: #174582; /** 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. */
+  --semantic-attention-accent-color-primary-constant: #174582; /** 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. */
+  --semantic-attention-attention-color-success-primary: #00c273; /** 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. */
+  --semantic-attention-attention-color-success-secondary: #006e3d; /** Secondary success tone used for secondary states. Maintains the same color in both Light and Dark mode for clarity. */
+  --semantic-attention-attention-color-extra-low: #ffffff; /** 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. */
+  --semantic-attention-attention-color-low: #ffbf00; /** Low-level warning or attention tone, typically used for informational or cautionary messages. Same yellow tone across Light and Dark to maintain recognition. */
+  --semantic-attention-attention-color-medium: #fc8226; /** Medium-level attention tone representing stronger caution or intermediate alert states. Commonly applied in warning messages. Constant — identical in both modes. */
+  --semantic-attention-attention-color-high: #de0000; /** 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. */
+  /**
+   * 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.
+   */
+  --semantic-border-border-color-low-contrast: #e8edf0;
+  --semantic-border-border-color-low-contrast-constant: #e8edf0; /** 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. */
+  /**
+   * 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.
+   */
+  --semantic-border-border-color-medium-contrast: #cfd4d9;
+  /**
+   * 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.
+   */
+  --semantic-border-border-color-high-contrast: #242629;
+  /**
+   * 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.
+   */
+  --semantic-border-border-color-success: #00c273;
+  /**
+   * 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.
+   */
+  --semantic-border-border-color-warning: #de0000;
+  --semantic-border-border-color-primary-disabled: #f2f5f5; /** Applied to disabled states of primary elements (e.g., buttons, inputs) to visually reduce emphasis and indicate inactivity. */
+  --semantic-border-border-color-secondary-disabled: #e8edf0; /** Used for secondary component borders in a disabled state (e.g., secondary buttons, inactive input outlines). */
+  --semantic-icon-icon-color-primary: #4a5259; /** Primary icon color on primary surfaces. */
+  /**
+   * 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.
+   */
+  --semantic-icon-icon-color-primary-constant: #4a5259;
+  /**
+   * 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.
+   */
+  --semantic-icon-icon-color-inverse: #cfd4d9;
+  --semantic-icon-icon-color-secondary-constant: #8c9196; /** Secondary icon tone for less prominent actions or supportive iconography (e.g., secondary buttons, tool icons). Remains unchanged across modes. */
+  /**
+   * 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.
+   */
+  --semantic-icon-icon-color-constant-on-dark: #f2f5f5;
+  /**
+   * Represents success or confirmation icons (e.g., checkmarks, completion indicators).
+   * Behavior: Constant — same success green tone across Light and Dark mode.
+   */
+  --semantic-icon-icon-color-success: #00c273;
+  --semantic-overlay-overlay-scrim-black: rgba(0, 0, 0, 0.7); /** 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. */
+  /**
+   * 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.
+   */
+  --semantic-overlay-overlay-scrim-white: rgba(255, 255, 255, 0.7);
+  /**
+   * 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.
+   */
+  --semantic-state-color-primary-active: #174582;
+  /**
+   * 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.
+   */
+  --semantic-state-color-secondary-active: #242629;
+  /**
+   * 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.
+   */
+  --semantic-state-color-secondary-active-inverse: #f2f5f5;
+  /**
+   * 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.
+   */
+  --semantic-state-color-tertiary-active: #00c273;
+  /**
+   * 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.
+   */
+  --semantic-state-color-primary-disabled: #f2f5f5;
+  /**
+   * Used for disabled secondary elements, ensuring reduced visual prominence while maintaining legibility.
+   * Behavior: Dynamic — adapts neutral tones based on theme brightness.
+   */
+  --semantic-state-color-secondary-disabled: #e8edf0;
+  /**
+   * Represents disabled states for tertiary levels, maintaining subtle visibility without drawing attention.
+   * Behavior: Dynamic — adjusts between gray tones for Light and Dark mode consistency.
+   */
+  --semantic-state-color-tertiary-disabled: #8c9196;
+  /**
+   * 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.
+   */
+  --semantic-surface-surface-color-primary: #ffffff;
+  /**
+   * 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.
+   */
+  --semantic-surface-surface-color-primary-inverse: #081729;
+  /**
+   * 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.
+   */
+  --semantic-surface-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.
+   */
+  --semantic-surface-surface-color-primary-constant-dark: #081729;
+  /**
+   * 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.
+   */
+  --semantic-surface-surface-color-secondary: #f7fafc;
+  /**
+   * 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.
+   */
+  --semantic-surface-surface-color-tertiary: #bdc9db;
+  /**
+   * 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.
+   */
+  --semantic-surface-surface-color-tertiary-inverse: #174582;
+  --semantic-surface-surface-color-quartenary: #cfd4d9; /** 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. */
+  /**
+   * Inverse of the quartenary surface, used for background reversals in mixed-layout areas.
+   * Behavior: Dynamic — inverts between dark and light tones depending on mode.
+   */
+  --semantic-surface-surface-color-quartenary-inverse: #4a5259;
+  /**
+   * 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.
+   */
+  --semantic-surface-surface-color-success: #cff5e3;
+  --semantic-surface-surface-color-primary-gradient-stop: rgba(255, 255, 255, 0); /** Defines the end stops for primary surface gradients, creating visual depth or elevation. Used next to sliders buttons and slider container edges for fading out content. Behavior: Dynamic — light gradients in Light mode, dark gradients in Dark mode. */
+  /**
+   * Used for secondary surface gradients or subtle depth layers across backgrounds.
+   * Behavior: Dynamic — adapts to mode brightness for smooth gradient transitions.
+   */
+  --semantic-surface-surface-color-secondary-gradient-stop: rgba(242, 245, 245, 0);
+  /**
+   * Represents tertiary-level gradient background.
+   * Currently used on skeletons.
+   */
+  --semantic-surface-surface-color-tertiary-gradient-stop: rgba(232, 237, 240, 0);
+  /**
+   * 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.
+   */
+  --semantic-heading-headline-color-primary: #0a264f;
+  /**
+   * 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.
+   */
+  --semantic-heading-headline-color-white-const: #ffffff;
+  /**
+   * 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.
+   */
+  --semantic-heading-kicker-text-color-on-surface: #8c9196;
+  /**
+   * 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.
+   */
+  --semantic-heading-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.
+   */
+  --semantic-heading-kicker-text-color-on-dark-bg: rgba(255, 255, 255, 0.8);
+  /**
+   * Used for kicker text placed on bright or light colored backgrounds. Ensures balanced contrast without harsh visual dominance.
+   * Behavior: Constant — remains semi-transparent black across both modes.
+   */
+  --semantic-heading-kicker-text-color-on-bright-bg: rgba(0, 0, 0, 0.7);
+  /**
+   * 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.
+   */
+  --semantic-text-text-color-primary: #242629;
+  /**
+   * 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.
+   */
+  --semantic-text-text-color-primary-constant: #242629;
+  /**
+   * Inverse text color used on opposing surfaces (e.g., white text on red or dark backgrounds).
+   * Behavior: Dynamic — alternates between light and dark mode.
+   */
+  --semantic-text-text-color-primary-inverse: #e8edf0;
+  /**
+   * Fixed inverse tone for text that always appears on dark surfaces (e.g., hero headlines or persistent dark cards).
+   * Behavior: Constant — unchanged across modes.
+   */
+  --semantic-text-text-color-primary-inverse-constant: #e8edf0;
+  /**
+   * 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.
+   */
+  --semantic-text-text-color-secondary: #8c9196;
+  /**
+   * 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.
+   */
+  --semantic-text-text-color-muted: #666b70;
+  /**
+   * Used for text displayed on dark surfaces to ensure maximum legibility and contrast.
+   * Behavior: Constant — always light neutral to guarantee accessibility on dark backgrounds.
+   */
+  --semantic-text-text-color-on-dark-surface: #ffffff;
+  --semantic-text-text-color-accent: #174582; /** 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. */
+  /**
+   * 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.
+   */
+  --semantic-text-text-color-accent-constant: #174582;
+  /**
+   * 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.
+   */
+  --semantic-text-text-color-success-constant: #006e3d;
+  /**
+   * Used for strong warnings, errors, or destructive action labels.
+   * Behavior: Constant — red color remains unchanged between Light and Dark mode for visibility and recognition.
+   */
+  --semantic-text-text-color-attention-high: #de0000;
+  /**
+   * Represents medium attention states, often used in warnings or pending states.
+   * Behavior: Constant — same orange tone across Light and Dark mode.
+   */
+  --semantic-text-text-color-attention-medium: #fc8226;
+  /**
+   * 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.
+   */
+  --semantic-label-label-color-primary: #242629;
+  /**
+   * Inverse version of the primary label color, used on dark or colored backgrounds.
+   * Behavior: Dynamic — switches between light and dark.
+   */
+  --semantic-label-label-color-primary-inverse: #e8edf0;
+  /**
+   * Used when primary label color should remain unchanged across modes in static UI areas.
+   * Behavior: Constant — identical tone in both Light and Dark mode.
+   */
+  --semantic-label-label-color-primary-constant: #242629;
+  /**
+   * 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.
+   */
+  --semantic-label-label-color-primary-inverse-constant: #e8edf0;
+  /**
+   * 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.
+   */
+  --semantic-label-label-color-secondary: #4a5259;
+  /**
+   * 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.
+   */
+  --semantic-label-label-color-tertiary: #8c9196;
+  /**
+   * Disabled label tone indicating inactive or unavailable states in UI elements.
+   * Behavior: Dynamic — lighter gray in Light mode, darker neutral in Dark mode.
+   */
+  --semantic-label-label-color-disabled: #cfd4d9;
+  --semantic-layer-opacity-layer-opacity00: 0;
+  --semantic-layer-opacity-layer-opacity05: 5;
+  --semantic-layer-opacity-layer-opacity10: 10;
+  --semantic-layer-opacity-layer-opacity20: 20;
+  --semantic-layer-opacity-layer-opacity30: 30;
+  --semantic-layer-opacity-layer-opacity40: 40;
+  --semantic-layer-opacity-layer-opacity50: 50;
+  --semantic-layer-opacity-layer-opacity60: 60;
+  --semantic-layer-opacity-layer-opacity70: 70;
+  --semantic-layer-opacity-layer-opacity80: 80;
+  --semantic-layer-opacity-layer-opacity90: 90;
+  --semantic-layer-opacity-layer-opacity100: 100;
+  --component-avatar-avatar-label-color: #666b70; /** 09-2025 css --article-author-name-color */
+  --component-avatar-avatar-label-color-hover: #174582; /** 09-2025 css --article-author-name-color */
+  --component-alert-alert-surface-color: #ffffff; /** On marketing offer surfaces this variable is usually not used. The alertSurfaceConstant variables should be used. This token changes color between light and dark modes. L:100 / D:025 */
+  --component-alert-alert-surface-color-constant: #ffffff; /** On marketing offer surfaces this variable is  used. */
+  --component-breadcrumb-breadcrumb-text-color-idle: #4a5259; /** Use this token on breadcrumbs that are in their default idle state. This token changes color between light and dark modes. L:035 / D:096 */
+  --component-breadcrumb-breadcrumb-text-color-hover: #242629; /** Use this token on breadcrumbs that the user's pointer is hovering on or clicked on. This token changes color between light and dark modes. L:015 / D:100 */
+  --component-breaking-news-breaking-news-top-title-text-color: #ffbf00;
+  --component-breaking-news-breaking-news-bottom-title-text-color: #ffffff;
+  --component-breaking-news-breaking-news-title-surface-color: #0a264f;
+  --component-breaking-news-breaking-news-surface-color: #ffbf00;
+  --component-breaking-news-breaking-news-text-content-color: #242629;
+  --component-button-primary-button-primary-label-color: #ffffff;
+  --component-button-primary-button-primary-neutral-bg-color-idle: #242629; /** Use this variable on the neutral color primary button. Tone changes between light and dark mode. Light mode Bild & SpoBi: Tone 015 ; Dark mode Bild & SpoBi: Tone 100 */
+  --component-button-primary-button-primary-neutral-bg-color-hover: #4a5259;
+  --component-button-primary-button-primary-brand-bg-color-idle: #174582;
+  --component-button-primary-button-primary-brand-bg-color-hover: #0a264f;
+  --component-button-primary-button-primary-success-color-idle: #17995c;
+  --component-button-primary-button-primary-success-color-hover: #006e3d;
+  --component-button-secondary-button-secondary-label-color: #4a5259;
+  --component-button-secondary-button-secondary-bg-color-idle: #e8edf0;
+  --component-button-secondary-button-secondary-bg-color-hover: #cfd4d9;
+  --component-button-tertiary-button-tertiary-label-color: #4a5259;
+  --component-button-tertiary-button-tertiary-border-color-idle: #cfd4d9;
+  --component-button-tertiary-button-tertiary-border-color-hover: #4a5259;
+  --component-button-tertiary-button-tertiary-success-bg-color-hover: #cff5e3;
+  --component-button-tertiary-button-tertiary-success-border-color: #17995c;
+  --component-button-ghost-button-ghost-bg-color-hover: #cfd4d9;
+  --component-button-button-live-ticker-load-new-surface-color: #ffffff;
+  --component-button-button-live-ticker-load-new-label-color: #8c9196;
+  --component-card-card-surface-bg-color: #ffffff;
+  --component-chips-chips-bg-color-idle: #e8edf0;
+  --component-chips-chips-bg-color-active: #174582;
+  --component-chips-chips-bg-color-hover: #b00003;
+  --component-chips-chips-label-color-idle: #242629;
+  --component-chips-chips-label-color-hover: #ffffff;
+  --component-dropdown-dropdown-bg-color-idle: #ffffff;
+  --component-dropdown-dropdown-bg-color-hover: #f7fafc;
+  --component-empties-empties-logo-color: #cfd4d9;
+  --component-empties-empties-bg-color: #f7fafc;
+  --component-foldout-foldout-label-color-idle: #4a5259;
+  --component-foldout-foldout-label-color-active: #174582;
+  --component-gallery-app-image-lightbox-gallery-bg-color: #000000;
+  --component-hey-hey-drawer-surface-color: #f7fafc;
+  --component-hey-hey-fav-input-field-surface-color: #e8edf0;
+  --component-hey-hey-icon-util-color: #4a5259;
+  --component-hey-hey-separator-color: #cfd4d9; /** This is the most used color for separators across Bild products. */
+  --component-hey-hey-text-color: #4a5259;
+  --component-input-field-input-field-border-color-idle: #cfd4d9;
+  --component-input-field-input-field-border-color-active: #4a5259;
+  --component-input-field-input-field-border-color-dark: #8c9196;
+  --component-input-field-input-field-border-color-dark-active: #242629;
+  --component-input-field-input-field-bg-color-dark-low-contrast: #333d40;
+  --component-input-field-input-field-bg-color-dark-medium-contrast: #4a5259;
+  --component-input-field-input-field-bg-color-dark-high-contrast: #e8edf0;
+  --component-kicker-standard-kicker-bg-color-on-surface: #174582;
+  --component-kicker-partner-kicker-bz-bg-color: #e3001c;
+  --component-kicker-partner-kicker-fitbook-bg-color: #ff96b8;
+  --component-kicker-partner-kicker-petbook-bg-color: #badb91;
+  --component-kicker-partner-kicker-myhomebook-bg-color: #66cccc;
+  --component-kicker-partner-kicker-travelbook-bg-color: #8ff0ed;
+  --component-kicker-partner-kicker-techbook-bg-color: #94e3ff;
+  --component-kicker-partner-kicker-kaufberater-bg-color: #54476e;
+  --component-kicker-partner-kicker-cobi-bg-color: #db241c;
+  --component-kicker-partner-kicker-aubi-bg-color: #f00000;
+  --component-kicker-partner-kicker-spobi-bg-color: #174582;
+  --component-mediaplayer-vid-player-controls-autoplay-button-bg-color: rgba(0, 0, 0, 0.2);
+  --component-mediaplayer-vid-player-control-buttons-bg-hover-color: rgba(222, 0, 0, 0.8); /** This variable is used for hover states of video player control buttons. */
+  --component-mediaplayer-vid-player-control-buttons-bg-color-hover: rgba(0, 0, 0, 0.2);
+  --component-mediaplayer-vid-player-control-buttons-bg-color-pressed: rgba(0, 0, 0, 0.05);
+  --component-mediaplayer-vid-player-overlay-scrim-color: rgba(0, 0, 0, 0.5);
+  --component-mediaplayer-audio-player-play-button-bg-color: rgba(255, 255, 255, 0.3);
+  --component-mediaplayer-vid-player-tooltip-bg-color: rgba(0, 0, 0, 0.7);
+  --component-mediaplayer-vid-player-progress-bar-preload-bg-color: rgba(255, 255, 255, 0.3);
+  --component-mediaplayer-vid-player-unmute-button-bg-color: rgba(0, 0, 0, 0.2);
+  --component-mediaplayer-vid-player-unmute-button-bg-color-hover: rgba(0, 0, 0, 0.35);
+  --component-menu-menu-surface-color: #ffffff;
+  --component-menu-menu-scrolled-surface-gradient-color: rgba(255, 255, 255, 0.95); /** Used on a thin part at the top of header in navigation menu. */
+  --component-menu-menu-link-lane-surface-color: #0a264f;
+  --component-menu-menu-link-lane-label-color: #cfd4d9;
+  --component-menu-menu-link-lane-label-color-active: #ffffff;
+  --component-menu-app-top-bar-surface-color: #0a264f;
+  --component-menu-app-top-bar-icon-color: #8c9196;
+  --component-menu-app-top-bar-text-color-primary: #e8edf0;
+  --component-menu-app-tob-bar-tab-nav-bottom-border: #174582;
+  --component-menu-app-tob-bar-tab-nav-bottom-border-active: #cfd4d9;
+  --component-menu-item-menu-item-label-color-primary: #4a5259;
+  --component-menu-item-menu-item-label-color-primary-active: #242629;
+  --component-menu-item-menu-item-label-color-secondary: #ffffff; /** The variable can be used on secondary menus that many times show up on dedicated home pages specific to a topic. The menu labels are often times using the color white across color modes. */
+  --component-menu-item-menu-item-border-color-active: #0a264f;
+  --component-partner-links-partner-links-bg-color-idle: #ffffff; /** !do not use! these variables have been deprecated and multitext link buttons are now classified as partner buttons. */
+  --component-partner-links-partner-links-bg-color-active: #e8edf0; /** !do not use! these variables have been deprecated and multitext link buttons are now classified as partner buttons. */
+  --component-partner-links-partner-links-border-color-idle: #cfd4d9; /** !do not use! these variables have been deprecated and multitext link buttons are now classified as partner buttons. */
+  --component-partner-links-partner-links-border-color-active: #242629; /** !do not use! these variables have been deprecated and multitext link buttons are now classified as partner buttons. */
+  --component-partner-links-partner-links-container-border-color: #cfd4d9; /** !do not use! these variables have been deprecated and multitext link buttons are now classified as partner buttons. */
+  --component-newsticker-news-ticker-timestamp-color: #8c9196;
+  --component-newsticker-news-ticker-badge-icons-color: #8c9196;
+  --component-pagination-pagination-element-color-default: #cfd4d9;
+  --component-pagination-pagination-element-color-active: #174582;
+  --component-pagination-gallery-pagination-element-active-opacity: 100; /** Use this on gallery slider pagination elements. This can also be applied to hover states of those elements. */
+  --component-pagination-scroll-bar-track-bg-color: rgba(0, 0, 0, 0.1); /** Used as the background surface color scroll bars. Found on components that vertically or horizontally stack elements. */
+  --component-pagination-scroll-bar-thumb-bg-color: #8c9196; /** Use on the scroll bar interactive element which shows where the scroll view is positioned inside the full extent of the scrolling space. */
+  --component-selection-selection-border-color: #4a5259; /** Checkboxes and Radio buttons use this variable for their border. */
+  --component-slider-slider-button-opacity: 90; /** When users hover on gallery slider buttons the opacity changes to 90%. */
+  --component-slider-slider-track-bg-color: rgba(255, 255, 255, 0.35); /** This variable is used on audio player slider bars. It references a pure white with 35% opacity. */
+  --component-social-share-button-social-share-button-label-color-default: #ffffff;
+  --component-social-share-button-social-share-button-label-color-active: #ffffff;
+  --component-social-share-button-social-share-button-bg-color-default: #4a5259;
+  --component-social-share-button-social-share-button-bg-color-active: #333d40;
+  --component-subheader-subheaders-color: #242629;
+  --component-tab-tab-bg-color-hover: #e8edf0;
+  --component-tab-tab-label-color-active: #333d40;
+  --component-tab-tab-label-color-default: #4a5259;
+  --component-tab-app-bottom-tab-bar-bg-color: #ffffff;
+  --component-teaser-teaser-hover-opacity: 80; /** When users hover over graphical teasers the image reduces opacity to 80%. */
+  --component-teaser-teaser-title-background-gradient-start: rgba(10, 38, 79, 0.7);
+  --component-teaser-teaser-title-background-gradient-stop: rgba(10, 38, 79, 0);
+  --component-text-link-text-link-color-primary: #242629;
+  --component-text-link-text-link-color-secondary: #8c9196;
+  --component-text-link-text-link-color-secondary-active: #242629;
+  --component-d-sys-doc-ds-doc-spacing-item-bg-color: rgba(222, 0, 0, 0.1);
+  --component-d-sys-doc-ds-doc-spacing-item-border-color: rgba(222, 0, 0, 0.5);
+  --component-d-sys-doc-d-sys-docs-label-text-surface-color-primary-primitive-name: BILD100; /** This variable is only for use in Figma's Design System File. It is automating some of the content in documentation pages. */
+  --component-d-sys-doc-d-sys-docs-label-text-color-mode: (Light Mode); /** This is currently for use in this design system's documentation texts. It is a text string made for being used in light and dark mode documentation texts. */
+}

package/dist/css/semantic/sportbild/color/index.css

@@ -0,0 +1,6 @@
+/**
+ * COLOR - CSS Index
+ */
+
+@import './color-sportbild-dark.css';
+@import './color-sportbild-light.css';

package/dist/js/base/index.js

@@ -0,0 +1,15 @@
+/**
+ * BASE - JavaScript Index
+ */
+
+import primitive_color_value from './primitive-color-value.js';
+import primitive_font_value from './primitive-font-value.js';
+import primitive_size_value from './primitive-size-value.js';
+import primitive_space_value from './primitive-space-value.js';
+
+export {
+  primitive_color_value,
+  primitive_font_value,
+  primitive_size_value,
+  primitive_space_value,
+};

package/dist/js/base/primitive-color-value.js

@@ -0,0 +1,98 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+export const bildAlphaAlphablack0 = "rgba(0, 0, 0, 0)";
+export const bildAlphaAlphablack05 = "rgba(0, 0, 0, 0.05)";
+export const bildAlphaAlphablack10 = "rgba(0, 0, 0, 0.1)";
+export const bildAlphaAlphablack20 = "rgba(0, 0, 0, 0.2)";
+export const bildAlphaAlphablack30 = "rgba(0, 0, 0, 0.3)";
+export const bildAlphaAlphablack35 = "rgba(0, 0, 0, 0.35)";
+export const bildAlphaAlphablack50 = "rgba(0, 0, 0, 0.5)";
+export const bildAlphaAlphablack60 = "rgba(0, 0, 0, 0.6)"; // Used on elevation effects.
+export const bildAlphaAlphablack70 = "rgba(0, 0, 0, 0.7)"; // Used on elevation effects.
+export const bildAlphaAlphablack80 = "rgba(0, 0, 0, 0.8)"; // Used on elevation effects.
+export const bildAlphaAlphawhite10 = "rgba(255, 255, 255, 0.1)";
+export const bildAlphaAlphawhite20 = "rgba(255, 255, 255, 0.2)";
+export const bildAlphaAlphawhite30 = "rgba(255, 255, 255, 0.3)";
+export const bildAlphaAlphawhite35 = "rgba(255, 255, 255, 0.35)";
+export const bildAlphaAlphawhite60 = "rgba(255, 255, 255, 0.6)"; // Used on elevation effects.
+export const bildAlphaAlphawhite70 = "rgba(255, 255, 255, 0.7)"; // Used on elevation effects.
+export const bildAlphaAlphawhite80 = "rgba(255, 255, 255, 0.8)"; // Used on elevation effects.
+export const bildAlphaAlphabildred80 = "rgba(222, 0, 0, 0.8)"; // Used on elevation effects.
+export const bildBlueBildblue = "#00b0ff"; // This Blue color was taken from the Weather 2024 project. Tone: 069
+export const bildGrayBild096 = "#f2f5f5";
+export const bildGrayBild093 = "#e8edf0";
+export const bildGrayBild085 = "#cfd4d9";
+export const bildGrayBild08550 = "rgba(207, 212, 217, 0.5)"; // The 50% opacity on this color makes it equivalent to BILD093.
+export const bildGrayBild073 = "#adb5ba";
+export const bildGrayBild060 = "#8c9196";
+export const bildGrayBild045 = "#666b70";
+export const bildGrayBild035 = "#4a5259";
+export const bildGrayBild025 = "#333d40";
+export const bildGrayBild020 = "#2b3038";
+export const bildGrayBild015 = "#242629";
+export const bildGrayBild010 = "#1c1c1c";
+export const bildGreenBildgreen09350 = "rgba(207, 245, 227, 0.5)";
+export const bildGreenBildgreen093 = "#cff5e3";
+export const bildGreenBildgreen070 = "#00c273";
+export const bildGreenBildgreen063 = "#00b066";
+export const bildGreenBildgreen05650 = "rgba(0, 156, 89, 0.5)";
+export const bildGreenBildgreen056 = "#17995c";
+export const bildGreenBildgreen040 = "#006e3d"; // This value of green was found in a text field's text color.
+export const bildNeutralBild100 = "#ffffff";
+export const bildNeutralBildblack = "#000000";
+export const bildRedBildred053 = "#f52e2e";
+export const bildRedBildred = "#de0000"; // Tone 046
+export const bildRedBildred035 = "#b00003";
+export const bildOrangeBildorange = "#fc8226"; // Tone: 067
+export const bildPurpleBildberry = "#541a38"; // Tone: 020
+export const bildYellowBildyellow = "#ffbf00"; // Tone: 081
+export const bildTextlabelsBildred = "BILDRed"; // This is a variable used only for documentation purposes in the design system Figma Foundations pages.
+export const bildTextlabelsBild100 = "BILD100"; // This is a variable used only for documentation purposes in the design system Figma Foundations pages.
+export const bildTextlabelsBild096 = "BILD096"; // This is a variable used only for documentation purposes in the design system Figma Foundations pages.
+export const bildTextlabelsBild093 = "BILD093"; // This is a variable used only for documentation purposes in the design system Figma Foundations pages.
+export const bildTextlabelsBild085 = "BILD085"; // This is a variable used only for documentation purposes in the design system Figma Foundations pages.
+export const bildTextlabelsBild073 = "BILD073"; // This is a variable used only for documentation purposes in the design system Figma Foundations pages.
+export const bildTextlabelsBild060 = "BILD060"; // This is a variable used only for documentation purposes in the design system Figma Foundations pages.
+export const bildTextlabelsBild045 = "BILD045"; // This is a variable used only for documentation purposes in the design system Figma Foundations pages.
+export const bildTextlabelsBild035 = "BILD035"; // This is a variable used only for documentation purposes in the design system Figma Foundations pages.
+export const bildTextlabelsBild025 = "BILD025"; // This is a variable used only for documentation purposes in the design system Figma Foundations pages.
+export const bildTextlabelsBild015 = "BILD015"; // This is a variable used only for documentation purposes in the design system Figma Foundations pages.
+export const bildTextlabelsBildyellow = "BILDYellow"; // This is a variable used only for documentation purposes in the design system Figma Foundations pages.
+export const bildTextlabelsBildorange = "BILDOrange"; // This is a variable used only for documentation purposes in the design system Figma Foundations pages.
+export const bildTextlabelsBildred053 = "BILDRed053"; // This is a variable used only for documentation purposes in the design system Figma Foundations pages.
+export const bildTextlabelsBildred035 = "BILDRed035"; // This is a variable used only for documentation purposes in the design system Figma Foundations pages.
+export const bildTextlabelsBildgreen093 = "BILDGreen093"; // This is a variable used only for documentation purposes in the design system Figma Foundations pages.
+export const bildTextlabelsBildgreen070 = "BILDGreen070"; // This is a variable used only for documentation purposes in the design system Figma Foundations pages.
+export const bildTextlabelsBildgreen063 = "BILDGreen063"; // This is a variable used only for documentation purposes in the design system Figma Foundations pages.
+export const sportbildAlphaSpobiblue0160 = "rgba(10, 38, 79, 0)";
+export const sportbildAlphaSpobiblue01670 = "rgba(10, 38, 79, 0.7)";
+export const sportbildBlueSpobiblue098 = "#f7fafc";
+export const sportbildBlueSpobiblue081 = "#bdc9db";
+export const sportbildBlueSpobiblue038 = "#305999";
+export const sportbildBlueSpobiblue029 = "#174582"; // This variable in the current online CSS is called secondary-tenant-color
+export const sportbildBlueSpobiblue016 = "#0a264f"; // This variable in the current online CSS is called main-tenant-color for the spobi tenant.
+export const sportbildBlueSpobiblue010 = "#081729";
+export const sportbildRedSpobired = "#e62629";
+export const partnerAubiAubicore = "#f00000";
+export const partnerBzBzcore = "#e3001c";
+export const partnerTravelbookTravelbookcore = "#8ff0ed";
+export const partnerTechbookTechbookcore = "#94e3ff";
+export const partnerKaufberaterKaufberatercore = "#54476e";
+export const partnerComputerbildCobicore = "#db241c";
+export const partnerFitbookFitbookcore = "#ff96b8";
+export const partnerPetbookPetbookcore = "#badb91";
+export const partnerMyhomeMyhomecore = "#66cccc";
+export const opacityOpacity00 = 0;
+export const opacityOpacity05 = 5;
+export const opacityOpacity10 = 10;
+export const opacityOpacity20 = 20;
+export const opacityOpacity30 = 30;
+export const opacityOpacity40 = 40;
+export const opacityOpacity50 = 50;
+export const opacityOpacity60 = 60;
+export const opacityOpacity70 = 70;
+export const opacityOpacity80 = 80;
+export const opacityOpacity90 = 90;
+export const opacityOpacity100 = 100;

package/dist/js/base/primitive-font-value.js

@@ -0,0 +1,47 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+export const fontfamilyBildFontfamilygothamcond = "Gotham Condensed";
+export const fontfamilyBildFontfamilygothamxnarrow = "Gotham XNarrow";
+export const fontfamilyBildFontfamilygotham = "Gotham";
+export const fontfamilySportbildFontfamilyantennaextracond = "AntennaExtraCond";
+export const fontfamilySportbildFontfamilyantennacond = "AntennaCond";
+export const fontfamilySportbildFontfamilyinter = "Inter";
+export const fontfamilyAdvertorialFontfamilylucidagrande = "Lucida Grande";
+export const fontweight1000ultrafontweight = 1000;
+export const fontweight900extrablackfontweight = 900;
+export const fontweight800blackfontweight = 800;
+export const fontweight700blackfontweight = 700; // 700 is considered black weight because Gotham Condensed is the primary font family (most used in headlines). In other font families 700 is not black weight but bold.
+export const fontweightBolditalicfontweightst = "Bold Italic";
+export const fontweightBlackfontweightst = "Black";
+export const fontweight600boldfontweight = 600;
+export const fontweight500mediumfontweight = 500;
+export const fontweight400bookfontweight = 400;
+export const fontweight350bookfontweight = 350;
+export const fontweight300lightfontweight = 300;
+export const fontweight200extralightfontweight = 200;
+export const fontweight100thinfontweight = 100;
+export const fontweightstring1000ultrafontweight = "1000";
+export const fontweightstring900extrablackfontweight = "900";
+export const fontweightstring800blackfontweight = "800";
+export const fontweightstring700blackitalicfontweight = "Black Italic";
+export const fontweightstring700blackfontweight = "700";
+export const fontweightstring600bolditalicfontweight = "Bold Italic";
+export const fontweightstring600boldfontweight = "600";
+export const fontweightstring500mediumfontweight = "500";
+export const fontweightstring400bookfontweight = "400";
+export const fontweightstring350bookfontweight = "350";
+export const fontweightstring200extralightfontweight = "200";
+export const fontweightstring100thinfontweight = "100";
+export const letterspacingLetterspace3 = 3; // This variable is a primitive for use in creating semantic text styles that need to use a much larger letter spacing value of 3. Text styles that have smaller font sizes should use increasingly positive values for their letter spacings on smaller device sizes.
+export const letterspacingLetterspace2 = 2; // This variable is a primitive for use in creating semantic text styles that need to use a large letter spacing value of 2.
+export const letterspacingLetterspace1 = 1; // This variable is a primitive for use in creating semantic text styles that need to use a positive letter spacing value of 1.
+export const letterspacingLetterspace05 = 0.5; // This variable is a primitive for use in creating semantic text styles that need to use a slight positive letter spacing value of 0.5.
+export const letterspacingLetterspace025 = 0.25; // This variable is a primitive for use in creating semantic text styles that need to use a subtle positive letter spacing value of 0.25.
+export const letterspacingLetterspace0 = 0; // This variable is a primitive for use in creating semantic text styles that need to use a default letter spacing value of 0.
+export const letterspacingLetterspace025 = -0.25; // This variable is a primitive for use in creating semantic text styles that need to use a subtle small letter spacing value of -0.25.
+export const letterspacingLetterspace05 = -0.5; // This variable is a primitive for use in creating semantic variables that need to use a subtle negative letter spacing value of -0.5.
+export const letterspacingLetterspace1 = -1; // This variable is a primitive for use in creating semantic variables that need to use a negative letter spacing value of -1.
+export const letterspacingLetterspace2 = -2; // This variable is a primitive for use in creating semantic text styles that need to use a large negative letter spacing value of -2. This is usually reserved for large texts styles that are used on titles or headlines.
+export const letterspacingLetterspace3 = -3; // This variable is a primitive for use in creating semantic text styles that need to use a large negative letter spacing value of -3. Text styles that have larger font sizes should use increasingly negative values for their letter spacings on larger device sizes.