@marioschmidt/design-system-tokens 1.0.68 → 1.0.70

package/dist/stencil/www/css/sportbild/theme.css

@@ -1,369 +0,0 @@
-/**
- * Do not edit directly, this file was auto-generated.
- *
- * SPORTBILD Design System Tokens v1.0.68
- * Generated by Style Dictionary v4.0.0
- *
- * Brand: Sportbild | Bundle: Theme (Color tokens + Effects for light/dark mode)
- *
- * Copyright (c) 2024 Axel Springer Deutschland GmbH
- * Proprietary and confidential. All rights reserved.
- *
- * Documentation: https://github.com/UXWizard25/vv-token-test-v3#readme
- */
-
-/* === LIGHT MODE === */
-
-[data-color-brand="sportbild"][data-theme="light"],
-:host([data-color-brand="sportbild"][data-theme="light"]) {
-  /* ============================================
-     SEMANTIC
-     ============================================ */
-
-  /* Semantic - Text */
-  --text-color-accent-constant: var(--color-spobi-blue-29, #174482);
-  --text-color-primary: var(--color-neutral-15, #232629);
-  --text-color-muted: var(--color-neutral-45, #666B70);
-  --text-color-primary-inverse: var(--color-neutral-93, #E9ECEF);
-  --text-color-primary-constant: var(--color-neutral-15, #232629);
-  --text-color-success-constant: var(--color-green-40, #006E3E);
-  --text-color-primary-inverse-constant: var(--color-neutral-93, #E9ECEF);
-  --text-color-secondary: var(--color-neutral-60, #8C9196);
-  --text-color-attention-high: var(--color-bild-red-50, #DD0000);
-  --text-color-accent: var(--color-spobi-blue-29, #174482);
-  --text-color-attention-medium: var(--color-orange-67, #FD8227);
-  --text-color-on-dark-surface: var(--color-neutral-100, #FFFFFF);
-
-  /* Semantic - Surface */
-  --surface-color-primary: var(--color-neutral-100, #FFFFFF);
-  --surface-color-secondary: var(--color-spobi-blue-98, #F7F9FD);
-  --surface-color-primary-inverse: var(--color-spobi-blue-10, #081828);
-  --surface-color-primary-constant-light: var(--color-neutral-100, #FFFFFF);
-  --surface-color-primary-constant-dark: var(--color-spobi-blue-10, #081828);
-  --surface-color-quartenary: var(--color-neutral-85, #CED4DA);
-  --surface-color-success: var(--color-green-93, #CEF4E4);
-  --surface-color-tertiary: var(--color-spobi-blue-81, #BDCADB);
-  --surface-color-tertiary-gradient-stop: rgba(233, 236, 239, 0);
-  --surface-color-tertiary-inverse: var(--color-spobi-blue-29, #174482);
-  --surface-color-primary-gradient-stop: rgba(255, 255, 255, 0);
-  --surface-color-secondary-gradient-stop: rgba(242, 244, 245, 0);
-  --surface-color-quartenary-inverse: var(--color-neutral-35, #4B525A);
-
-  /* Semantic - Heading */
-  --kicker-text-color-on-surface: var(--color-neutral-60, #8C9196);
-  --headline-color-primary: var(--color-spobi-blue-16, #0A2750);
-  --headline-color-white-const: var(--color-neutral-100, #FFFFFF);
-  --kicker-text-color-on-red: var(--color-neutral-100, #FFFFFF);
-  --kicker-text-color-on-dark-bg: var(--alpha-white-80, rgba(255, 255, 255, 0.8));
-  --kicker-text-color-on-bright-bg: var(--alpha-black-70, rgba(0, 0, 0, 0.7));
-
-  /* Semantic - State */
-  --color-secondary-active: var(--color-neutral-15, #232629);
-  --color-primary-active: var(--color-spobi-blue-29, #174482);
-  --color-secondary-disabled: var(--color-neutral-93, #E9ECEF);
-  --color-primary-disabled: var(--color-neutral-96, #F2F4F5);
-  --color-secondary-active-inverse: var(--color-neutral-96, #F2F4F5);
-  --color-tertiary-active: var(--color-green-70, #00C373);
-  --color-tertiary-disabled: var(--color-neutral-60, #8C9196);
-
-  /* Semantic - Border */
-  --border-color-medium-contrast: var(--color-neutral-85, #CED4DA);
-  --border-color-low-contrast: var(--color-neutral-93, #E9ECEF);
-  --border-color-high-contrast: var(--color-neutral-15, #232629);
-  --border-color-low-contrast-constant: var(--color-neutral-93, #E9ECEF);
-  --border-color-success: var(--color-green-70, #00C373);
-  --border-color-warning: var(--color-bild-red-50, #DD0000);
-  --border-color-primary-disabled: var(--color-neutral-96, #F2F4F5);
-  --border-color-secondary-disabled: var(--color-neutral-93, #E9ECEF);
-
-  /* Semantic - Core */
-  --core-color-primary: var(--color-spobi-blue-16, #0A2750);
-  --core-color-secondary: var(--color-neutral-100, #FFFFFF);
-  --core-color-tertiary: var(--color-spobi-blue-10, #081828);
-  --core-color-secondary-constant: var(--color-neutral-100, #FFFFFF);
-  --core-color-tertiary-constant: var(--color-spobi-blue-10, #081828);
-  --show-and-share-test: #026FDB;
-
-  /* Semantic - Icon */
-  --icon-color-primary: var(--color-neutral-35, #4B525A);
-  --icon-color-inverse: var(--color-neutral-85, #CED4DA);
-  --icon-color-secondary-constant: var(--color-neutral-60, #8C9196);
-  --icon-color-constant-on-dark: var(--color-neutral-96, #F2F4F5);
-  --icon-color-primary-constant: var(--color-neutral-35, #4B525A);
-  --icon-color-success: var(--color-green-70, #00C373);
-
-  /* Semantic - Label */
-  --label-color-primary: var(--color-neutral-15, #232629);
-  --label-color-secondary: var(--color-neutral-35, #4B525A);
-  --label-color-disabled: var(--color-neutral-85, #CED4DA);
-  --label-color-primary-constant: var(--color-neutral-15, #232629);
-  --label-color-primary-inverse-constant: var(--color-neutral-93, #E9ECEF);
-  --label-color-tertiary: var(--color-neutral-60, #8C9196);
-  --label-color-primary-inverse: var(--color-neutral-93, #E9ECEF);
-
-  /* Semantic - Attention */
-  --attention-color-high: var(--color-bild-red-50, #DD0000);
-  --accent-color-primary: var(--color-spobi-blue-29, #174482);
-  --attention-color-medium: var(--color-orange-67, #FD8227);
-  --attention-color-low: var(--color-yellow-80, #FFBF00);
-  --accent-color-primary-constant: var(--color-spobi-blue-29, #174482);
-  --attention-color-success-primary: var(--color-green-70, #00C373);
-  --attention-color-extra-low: var(--color-neutral-100, #FFFFFF);
-  --attention-color-success-secondary: var(--color-green-40, #006E3E);
-
-  /* Semantic - Overlay */
-  --overlay-scrim-black: var(--alpha-black-70, rgba(0, 0, 0, 0.7));
-  --overlay-scrim-white: var(--alpha-white-70, rgba(255, 255, 255, 0.7));
-
-  /* Semantic - LayerOpacity */
-  --layer-opacity-05: var(--opacity-05, 0.05);
-  --layer-opacity-10: var(--opacity-10, 0.1);
-  --layer-opacity-20: var(--opacity-20, 0.2);
-  --layer-opacity-30: var(--opacity-30, 0.3);
-  --layer-opacity-40: var(--opacity-40, 0.4);
-  --layer-opacity-50: var(--opacity-50, 0.5);
-  --layer-opacity-60: var(--opacity-60, 0.6);
-  --layer-opacity-70: var(--opacity-70, 0.7);
-  --layer-opacity-80: var(--opacity-80, 0.8);
-  --layer-opacity-90: var(--opacity-90, 0.9);
-  --layer-opacity-100: var(--opacity-100, 1);
-  --layer-opacity-00: var(--opacity-00, 0);
-
-}
-
-/* === DARK MODE === */
-
-[data-color-brand="sportbild"][data-theme="dark"],
-:host([data-color-brand="sportbild"][data-theme="dark"]) {
-  /* ============================================
-     SEMANTIC
-     ============================================ */
-
-  /* Semantic - Text */
-  --text-color-accent-constant: var(--color-spobi-blue-29, #174482);
-  --text-color-primary: var(--color-neutral-93, #E9ECEF);
-  --text-color-muted: var(--color-neutral-85, #CED4DA);
-  --text-color-primary-inverse: var(--color-neutral-15, #232629);
-  --text-color-primary-constant: var(--color-neutral-15, #232629);
-  --text-color-success-constant: var(--color-green-40, #006E3E);
-  --text-color-primary-inverse-constant: var(--color-neutral-93, #E9ECEF);
-  --text-color-secondary: var(--color-neutral-60, #8C9196);
-  --text-color-attention-high: var(--color-bild-red-50, #DD0000);
-  --text-color-accent: var(--color-spobi-blue-98, #F7F9FD);
-  --text-color-attention-medium: var(--color-orange-67, #FD8227);
-  --text-color-on-dark-surface: var(--color-neutral-100, #FFFFFF);
-
-  /* Semantic - Surface */
-  --surface-color-primary: var(--color-spobi-blue-10, #081828);
-  --surface-color-secondary: var(--color-spobi-blue-16, #0A2750);
-  --surface-color-primary-inverse: var(--color-neutral-100, #FFFFFF);
-  --surface-color-primary-constant-light: var(--color-neutral-100, #FFFFFF);
-  --surface-color-primary-constant-dark: var(--color-spobi-blue-10, #081828);
-  --surface-color-quartenary: var(--color-neutral-35, #4B525A);
-  --surface-color-success: var(--color-green-93, #CEF4E4);
-  --surface-color-tertiary: var(--color-spobi-blue-29, #174482);
-  --surface-color-tertiary-gradient-stop: rgba(52, 60, 65, 0);
-  --surface-color-tertiary-inverse: var(--color-spobi-blue-81, #BDCADB);
-  --surface-color-primary-gradient-stop: rgba(35, 38, 41, 0);
-  --surface-color-secondary-gradient-stop: rgba(44, 49, 56, 0);
-  --surface-color-quartenary-inverse: var(--color-neutral-85, #CED4DA);
-
-  /* Semantic - Heading */
-  --kicker-text-color-on-surface: var(--color-neutral-60, #8C9196);
-  --headline-color-primary: var(--color-neutral-100, #FFFFFF);
-  --headline-color-white-const: var(--color-neutral-100, #FFFFFF);
-  --kicker-text-color-on-red: var(--color-neutral-100, #FFFFFF);
-  --kicker-text-color-on-dark-bg: var(--alpha-white-80, rgba(255, 255, 255, 0.8));
-  --kicker-text-color-on-bright-bg: var(--alpha-black-70, rgba(0, 0, 0, 0.7));
-
-  /* Semantic - State */
-  --color-secondary-active: var(--color-neutral-96, #F2F4F5);
-  --color-primary-active: var(--color-spobi-blue-29, #174482);
-  --color-secondary-disabled: var(--color-neutral-35, #4B525A);
-  --color-primary-disabled: var(--color-neutral-25, #343C41);
-  --color-secondary-active-inverse: var(--color-neutral-15, #232629);
-  --color-tertiary-active: var(--color-green-70, #00C373);
-  --color-tertiary-disabled: var(--color-neutral-45, #666B70);
-
-  /* Semantic - Border */
-  --border-color-medium-contrast: var(--color-neutral-45, #666B70);
-  --border-color-low-contrast: var(--color-neutral-35, #4B525A);
-  --border-color-high-contrast: var(--color-neutral-100, #FFFFFF);
-  --border-color-low-contrast-constant: var(--color-neutral-93, #E9ECEF);
-  --border-color-success: var(--color-green-70, #00C373);
-  --border-color-warning: var(--color-bild-red-50, #DD0000);
-  --border-color-primary-disabled: var(--color-neutral-25, #343C41);
-  --border-color-secondary-disabled: var(--color-neutral-35, #4B525A);
-
-  /* Semantic - Core */
-  --core-color-primary: var(--color-spobi-blue-16, #0A2750);
-  --core-color-secondary: var(--color-spobi-blue-10, #081828);
-  --core-color-tertiary: var(--color-neutral-100, #FFFFFF);
-  --core-color-secondary-constant: var(--color-neutral-100, #FFFFFF);
-  --core-color-tertiary-constant: var(--color-spobi-blue-10, #081828);
-  --show-and-share-test: #FF00FB;
-
-  /* Semantic - Icon */
-  --icon-color-primary: var(--color-neutral-60, #8C9196);
-  --icon-color-inverse: var(--color-neutral-35, #4B525A);
-  --icon-color-secondary-constant: var(--color-neutral-60, #8C9196);
-  --icon-color-constant-on-dark: var(--color-neutral-96, #F2F4F5);
-  --icon-color-primary-constant: var(--color-neutral-35, #4B525A);
-  --icon-color-success: var(--color-green-70, #00C373);
-
-  /* Semantic - Label */
-  --label-color-primary: var(--color-neutral-93, #E9ECEF);
-  --label-color-secondary: var(--color-neutral-85, #CED4DA);
-  --label-color-disabled: var(--color-neutral-35, #4B525A);
-  --label-color-primary-constant: var(--color-neutral-15, #232629);
-  --label-color-primary-inverse-constant: var(--color-neutral-93, #E9ECEF);
-  --label-color-tertiary: var(--color-neutral-60, #8C9196);
-  --label-color-primary-inverse: var(--color-neutral-15, #232629);
-
-  /* Semantic - Attention */
-  --attention-color-high: var(--color-bild-red-50, #DD0000);
-  --accent-color-primary: var(--color-spobi-blue-98, #F7F9FD);
-  --attention-color-medium: var(--color-orange-67, #FD8227);
-  --attention-color-low: var(--color-yellow-80, #FFBF00);
-  --accent-color-primary-constant: var(--color-spobi-blue-29, #174482);
-  --attention-color-success-primary: var(--color-green-70, #00C373);
-  --attention-color-extra-low: var(--color-neutral-25, #343C41);
-  --attention-color-success-secondary: var(--color-green-40, #006E3E);
-
-  /* Semantic - Overlay */
-  --overlay-scrim-black: var(--alpha-black-70, rgba(0, 0, 0, 0.7));
-  --overlay-scrim-white: var(--alpha-white-70, rgba(255, 255, 255, 0.7));
-
-  /* Semantic - LayerOpacity */
-  --layer-opacity-05: var(--opacity-05, 0.05);
-  --layer-opacity-10: var(--opacity-10, 0.1);
-  --layer-opacity-20: var(--opacity-20, 0.2);
-  --layer-opacity-30: var(--opacity-30, 0.3);
-  --layer-opacity-40: var(--opacity-40, 0.4);
-  --layer-opacity-50: var(--opacity-50, 0.5);
-  --layer-opacity-60: var(--opacity-60, 0.6);
-  --layer-opacity-70: var(--opacity-70, 0.7);
-  --layer-opacity-80: var(--opacity-80, 0.8);
-  --layer-opacity-90: var(--opacity-90, 0.9);
-  --layer-opacity-100: var(--opacity-100, 1);
-  --layer-opacity-00: var(--opacity-00, 0);
-
-}
-
-/* === EFFECTS === */
-
-/* Effects - Light */
-/* ============================================
-   DROPSHADOWSOFT
-   ============================================ */
-
-/* Broad and soft shadows with low contrast. Best for cards, sheets, or subtle surface separation. */
-[data-color-brand="sportbild"][data-theme="light"] .shadow-soft-sm,
-:host([data-color-brand="sportbild"][data-theme="light"]) .shadow-soft-sm {
-  box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.04), 0px 2px 6px 0px rgba(0, 0, 0, 0.08);
-}
-
-/* Broad and soft shadows with low contrast. Best for cards, sheets, or subtle surface separation. */
-[data-color-brand="sportbild"][data-theme="light"] .shadow-soft-md,
-:host([data-color-brand="sportbild"][data-theme="light"]) .shadow-soft-md {
-  box-shadow: 0px 2px 16px 0px rgba(0, 0, 0, 0.03), 0px 4px 12px 0px rgba(0, 0, 0, 0.07);
-}
-
-/* Broad and soft shadows with low contrast. Best for cards, sheets, or subtle surface separation. */
-[data-color-brand="sportbild"][data-theme="light"] .shadow-soft-lg,
-:host([data-color-brand="sportbild"][data-theme="light"]) .shadow-soft-lg {
-  box-shadow: 0px 8px 24px 0px rgba(0, 0, 0, 0.03), 0px 8px 16px 0px rgba(0, 0, 0, 0.07);
-}
-
-/* Broad and soft shadows with low contrast. Best for cards, sheets, or subtle surface separation. */
-[data-color-brand="sportbild"][data-theme="light"] .shadow-soft-xl,
-:host([data-color-brand="sportbild"][data-theme="light"]) .shadow-soft-xl {
-  box-shadow: 0px 0px 64px 0px rgba(0, 0, 0, 0.05), 0px 16px 32px 0px rgba(0, 0, 0, 0.1);
-}
-
-
-/* ============================================
-   DROPSHADOWHARD
-   ============================================ */
-
-/* Sharper, higher-contrast shadows. Best for dialogs, modals, dropdowns and overlays that require stronger focus. */
-[data-color-brand="sportbild"][data-theme="light"] .shadow-hard-sm,
-:host([data-color-brand="sportbild"][data-theme="light"]) .shadow-hard-sm {
-  box-shadow: 0px 1px 2px 0px var(--alpha-black-20, rgba(0, 0, 0, 0.2)), 0px 1px 3px 1px var(--alpha-black-10, rgba(0, 0, 0, 0.1));
-}
-
-/* Sharper, higher-contrast shadows. Best for dialogs, modals, dropdowns and overlays that require stronger focus. */
-[data-color-brand="sportbild"][data-theme="light"] .shadow-hard-md,
-:host([data-color-brand="sportbild"][data-theme="light"]) .shadow-hard-md {
-  box-shadow: 0px 4px 8px 0px var(--alpha-black-10, rgba(0, 0, 0, 0.1)), 0px 2px 4px 0px rgba(0, 0, 0, 0.16);
-}
-
-/* Sharper, higher-contrast shadows. Best for dialogs, modals, dropdowns and overlays that require stronger focus. */
-[data-color-brand="sportbild"][data-theme="light"] .shadow-hard-lg,
-:host([data-color-brand="sportbild"][data-theme="light"]) .shadow-hard-lg {
-  box-shadow: 0px 2px 3px 0px var(--alpha-black-20, rgba(0, 0, 0, 0.2)), 0px 6px 10px 4px var(--alpha-black-10, rgba(0, 0, 0, 0.1));
-}
-
-/* Sharper, higher-contrast shadows. Best for dialogs, modals, dropdowns and overlays that require stronger focus. */
-[data-color-brand="sportbild"][data-theme="light"] .shadow-hard-xl,
-:host([data-color-brand="sportbild"][data-theme="light"]) .shadow-hard-xl {
-  box-shadow: 0px 4px 4px 0px var(--alpha-black-20, rgba(0, 0, 0, 0.2)), 0px 8px 12px 6px var(--alpha-black-10, rgba(0, 0, 0, 0.1));
-}
-
-/* Effects - Dark */
-/* ============================================
-   DROPSHADOWSOFT
-   ============================================ */
-
-/* Broad and soft shadows with low contrast. Best for cards, sheets, or subtle surface separation. */
-[data-color-brand="sportbild"][data-theme="dark"] .shadow-soft-sm,
-:host([data-color-brand="sportbild"][data-theme="dark"]) .shadow-soft-sm {
-  box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.04), 0px 2px 6px 0px rgba(0, 0, 0, 0.08);
-}
-
-/* Broad and soft shadows with low contrast. Best for cards, sheets, or subtle surface separation. */
-[data-color-brand="sportbild"][data-theme="dark"] .shadow-soft-md,
-:host([data-color-brand="sportbild"][data-theme="dark"]) .shadow-soft-md {
-  box-shadow: 0px 2px 16px 0px rgba(0, 0, 0, 0.03), 0px 4px 12px 0px rgba(0, 0, 0, 0.07);
-}
-
-/* Broad and soft shadows with low contrast. Best for cards, sheets, or subtle surface separation. */
-[data-color-brand="sportbild"][data-theme="dark"] .shadow-soft-lg,
-:host([data-color-brand="sportbild"][data-theme="dark"]) .shadow-soft-lg {
-  box-shadow: 0px 8px 24px 0px rgba(0, 0, 0, 0.03), 0px 8px 16px 0px rgba(0, 0, 0, 0.07);
-}
-
-/* Broad and soft shadows with low contrast. Best for cards, sheets, or subtle surface separation. */
-[data-color-brand="sportbild"][data-theme="dark"] .shadow-soft-xl,
-:host([data-color-brand="sportbild"][data-theme="dark"]) .shadow-soft-xl {
-  box-shadow: 0px 0px 64px 0px rgba(0, 0, 0, 0.05), 0px 16px 32px 0px rgba(0, 0, 0, 0.1);
-}
-
-
-/* ============================================
-   DROPSHADOWHARD
-   ============================================ */
-
-/* Sharper, higher-contrast shadows. Best for dialogs, modals, dropdowns and overlays that require stronger focus. */
-[data-color-brand="sportbild"][data-theme="dark"] .shadow-hard-sm,
-:host([data-color-brand="sportbild"][data-theme="dark"]) .shadow-hard-sm {
-  box-shadow: 0px 1px 2px 0px var(--alpha-black-20, rgba(0, 0, 0, 0.2)), 0px 1px 3px 1px var(--alpha-black-10, rgba(0, 0, 0, 0.1));
-}
-
-/* Sharper, higher-contrast shadows. Best for dialogs, modals, dropdowns and overlays that require stronger focus. */
-[data-color-brand="sportbild"][data-theme="dark"] .shadow-hard-md,
-:host([data-color-brand="sportbild"][data-theme="dark"]) .shadow-hard-md {
-  box-shadow: 0px 4px 8px 0px var(--alpha-black-10, rgba(0, 0, 0, 0.1)), 0px 2px 4px 0px rgba(0, 0, 0, 0.16);
-}
-
-/* Sharper, higher-contrast shadows. Best for dialogs, modals, dropdowns and overlays that require stronger focus. */
-[data-color-brand="sportbild"][data-theme="dark"] .shadow-hard-lg,
-:host([data-color-brand="sportbild"][data-theme="dark"]) .shadow-hard-lg {
-  box-shadow: 0px 2px 3px 0px var(--alpha-black-20, rgba(0, 0, 0, 0.2)), 0px 6px 10px 4px var(--alpha-black-10, rgba(0, 0, 0, 0.1));
-}
-
-/* Sharper, higher-contrast shadows. Best for dialogs, modals, dropdowns and overlays that require stronger focus. */
-[data-color-brand="sportbild"][data-theme="dark"] .shadow-hard-xl,
-:host([data-color-brand="sportbild"][data-theme="dark"]) .shadow-hard-xl {
-  box-shadow: 0px 4px 4px 0px var(--alpha-black-20, rgba(0, 0, 0, 0.2)), 0px 8px 12px 6px var(--alpha-black-10, rgba(0, 0, 0, 0.1));
-}