@marioschmidt/design-system-components 1.0.70

package/dist/www/css/bild/theme.css

@@ -0,0 +1,369 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ *
+ * BILD Design System Tokens v1.0.70
+ * Generated by Style Dictionary v4.0.0
+ *
+ * Brand: Bild | 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="bild"][data-theme="light"],
+:host([data-color-brand="bild"][data-theme="light"]) {
+  /* ============================================
+     SEMANTIC
+     ============================================ */
+
+  /* Semantic - Text */
+  --text-color-accent-constant: var(--color-bild-red-50, #DD0000);
+  --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-bild-red-50, #DD0000);
+  --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-neutral-96, #F2F4F5);
+  --surface-color-primary-inverse: var(--color-neutral-15, #232629);
+  --surface-color-primary-constant-light: var(--color-neutral-100, #FFFFFF);
+  --surface-color-primary-constant-dark: var(--color-neutral-15, #232629);
+  --surface-color-quartenary: var(--color-neutral-85, #CED4DA);
+  --surface-color-success: var(--color-green-93, #CEF4E4);
+  --surface-color-tertiary: var(--color-neutral-93, #E9ECEF);
+  --surface-color-tertiary-gradient-stop: rgba(233, 236, 239, 0);
+  --surface-color-tertiary-inverse: var(--color-neutral-25, #343C41);
+  --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-bild-red-50, #DD0000);
+  --headline-color-primary: var(--color-neutral-15, #232629);
+  --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-bild-red-50, #DD0000);
+  --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-bild-red-50, #DD0000);
+  --core-color-secondary: var(--color-neutral-100, #FFFFFF);
+  --core-color-tertiary: var(--color-neutral-15, #232629);
+  --core-color-secondary-constant: var(--color-neutral-100, #FFFFFF);
+  --core-color-tertiary-constant: var(--color-neutral-15, #232629);
+  --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-bild-red-50, #DD0000);
+  --attention-color-medium: var(--color-orange-67, #FD8227);
+  --attention-color-low: var(--color-yellow-80, #FFBF00);
+  --accent-color-primary-constant: var(--color-bild-red-50, #DD0000);
+  --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="bild"][data-theme="dark"],
+:host([data-color-brand="bild"][data-theme="dark"]) {
+  /* ============================================
+     SEMANTIC
+     ============================================ */
+
+  /* Semantic - Text */
+  --text-color-accent-constant: var(--color-bild-red-50, #DD0000);
+  --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-neutral-100, #FFFFFF);
+  --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-15, #232629);
+  --surface-color-secondary: var(--color-neutral-20, #2C3138);
+  --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-neutral-15, #232629);
+  --surface-color-quartenary: var(--color-neutral-35, #4B525A);
+  --surface-color-success: var(--color-green-93, #CEF4E4);
+  --surface-color-tertiary: var(--color-neutral-25, #343C41);
+  --surface-color-tertiary-gradient-stop: rgba(52, 60, 65, 0);
+  --surface-color-tertiary-inverse: var(--color-neutral-93, #E9ECEF);
+  --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-bild-red-50, #DD0000);
+  --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-bild-red-50, #DD0000);
+  --core-color-secondary: var(--color-neutral-15, #232629);
+  --core-color-tertiary: var(--color-neutral-100, #FFFFFF);
+  --core-color-secondary-constant: var(--color-neutral-100, #FFFFFF);
+  --core-color-tertiary-constant: var(--color-neutral-15, #232629);
+  --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-neutral-100, #FFFFFF);
+  --attention-color-medium: var(--color-orange-67, #FD8227);
+  --attention-color-low: var(--color-yellow-80, #FFBF00);
+  --accent-color-primary-constant: var(--color-bild-red-50, #DD0000);
+  --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="bild"][data-theme="light"] .shadow-soft-sm,
+:host([data-color-brand="bild"][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="bild"][data-theme="light"] .shadow-soft-md,
+:host([data-color-brand="bild"][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="bild"][data-theme="light"] .shadow-soft-lg,
+:host([data-color-brand="bild"][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="bild"][data-theme="light"] .shadow-soft-xl,
+:host([data-color-brand="bild"][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="bild"][data-theme="light"] .shadow-hard-sm,
+:host([data-color-brand="bild"][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="bild"][data-theme="light"] .shadow-hard-md,
+:host([data-color-brand="bild"][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="bild"][data-theme="light"] .shadow-hard-lg,
+:host([data-color-brand="bild"][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="bild"][data-theme="light"] .shadow-hard-xl,
+:host([data-color-brand="bild"][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="bild"][data-theme="dark"] .shadow-soft-sm,
+:host([data-color-brand="bild"][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="bild"][data-theme="dark"] .shadow-soft-md,
+:host([data-color-brand="bild"][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="bild"][data-theme="dark"] .shadow-soft-lg,
+:host([data-color-brand="bild"][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="bild"][data-theme="dark"] .shadow-soft-xl,
+:host([data-color-brand="bild"][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="bild"][data-theme="dark"] .shadow-hard-sm,
+:host([data-color-brand="bild"][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="bild"][data-theme="dark"] .shadow-hard-md,
+:host([data-color-brand="bild"][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="bild"][data-theme="dark"] .shadow-hard-lg,
+:host([data-color-brand="bild"][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="bild"][data-theme="dark"] .shadow-hard-xl,
+:host([data-color-brand="bild"][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));
+}