@marioschmidt/design-system-tokens 1.0.36 → 1.0.37

package/dist/bundles/components/sportbild-avatar.css

@@ -1,300 +1,227 @@
-[data-brand="sportbild"][data-breakpoint="xs"] .appavatar {
-  font-family: AntennaCond;
-  font-weight: 800;
-  font-size: 12px;
-  letter-spacing: 0px;
-  text-transform: upper;
-}
-
-[data-brand="sportbild"][data-breakpoint="xs"] .avatardefault {
-  font-family: Inter;
-  font-weight: 700;
-  font-size: 13px;
-  line-height: 21px;
-  letter-spacing: 0px;
-}
-
-[data-brand="sportbild"][data-breakpoint="xs"] .avatarhover {
-  font-family: Inter;
-  font-weight: 700;
-  font-size: 13px;
-  line-height: 21px;
-  letter-spacing: 0px;
-  text-decoration: underline;
-}
-
-[data-brand="sportbild"][data-breakpoint="xs"] .avatarsecondaryinfo {
-  font-family: Inter;
-  font-weight: 400;
-  font-size: 13px;
-  line-height: 21px;
-  letter-spacing: 0px;
-}
-
-[data-brand="sportbild"][data-breakpoint="xs"] .avatarsecondaryinfohover {
-  font-family: Inter;
-  font-weight: 400;
-  font-size: 13px;
-  line-height: 21px;
-  letter-spacing: 0px;
-  text-decoration: underline;
-}
-
-[data-brand="sportbild"][data-breakpoint="sm"] .appavatar {
-  font-family: AntennaCond;
-  font-weight: 800;
-  font-size: 12px;
-  letter-spacing: 0px;
-  text-transform: upper;
-}
-
-[data-brand="sportbild"][data-breakpoint="sm"] .avatardefault {
-  font-family: Inter;
-  font-weight: 700;
-  font-size: 13px;
-  line-height: 21px;
-  letter-spacing: 0px;
-}
-
-[data-brand="sportbild"][data-breakpoint="sm"] .avatarhover {
-  font-family: Inter;
-  font-weight: 700;
-  font-size: 13px;
-  line-height: 21px;
-  letter-spacing: 0px;
-  text-decoration: underline;
-}
-
-[data-brand="sportbild"][data-breakpoint="sm"] .avatarsecondaryinfo {
-  font-family: Inter;
-  font-weight: 400;
-  font-size: 13px;
-  line-height: 21px;
-  letter-spacing: 0px;
-}
-
-[data-brand="sportbild"][data-breakpoint="sm"] .avatarsecondaryinfohover {
-  font-family: Inter;
-  font-weight: 400;
-  font-size: 13px;
-  line-height: 21px;
-  letter-spacing: 0px;
-  text-decoration: underline;
-}
-
-[data-brand="sportbild"][data-breakpoint="md"] .appavatar {
-  font-family: AntennaCond;
-  font-weight: 800;
-  font-size: 14px;
-  letter-spacing: 0px;
-  text-transform: upper;
-}
-
-[data-brand="sportbild"][data-breakpoint="md"] .avatardefault {
-  font-family: Inter;
-  font-weight: 700;
-  font-size: 13px;
-  line-height: 21px;
-  letter-spacing: 0px;
-}
-
-[data-brand="sportbild"][data-breakpoint="md"] .avatarhover {
-  font-family: Inter;
-  font-weight: 700;
-  font-size: 13px;
-  line-height: 21px;
-  letter-spacing: 0px;
-  text-decoration: underline;
-}
-
-[data-brand="sportbild"][data-breakpoint="md"] .avatarsecondaryinfo {
-  font-family: Inter;
-  font-weight: 400;
-  font-size: 13px;
-  line-height: 21px;
-  letter-spacing: 0px;
-}
-
-[data-brand="sportbild"][data-breakpoint="md"] .avatarsecondaryinfohover {
-  font-family: Inter;
-  font-weight: 400;
-  font-size: 13px;
-  line-height: 21px;
-  letter-spacing: 0px;
-  text-decoration: underline;
-}
-
-[data-brand="sportbild"][data-breakpoint="lg"] .appavatar {
-  font-family: AntennaCond;
-  font-weight: 800;
-  font-size: 16px;
-  letter-spacing: 0px;
-  text-transform: upper;
-}
-
-[data-brand="sportbild"][data-breakpoint="lg"] .avatardefault {
-  font-family: Inter;
-  font-weight: 700;
-  font-size: 15px;
-  line-height: 23px;
-  letter-spacing: 0px;
-}
-
-[data-brand="sportbild"][data-breakpoint="lg"] .avatarhover {
-  font-family: Inter;
-  font-weight: 700;
-  font-size: 15px;
-  line-height: 23px;
-  letter-spacing: 0px;
-  text-decoration: underline;
-}
-
-[data-brand="sportbild"][data-breakpoint="lg"] .avatarsecondaryinfo {
-  font-family: Inter;
-  font-weight: 400;
-  font-size: 15px;
-  line-height: 23px;
-  letter-spacing: 0px;
-}
-
-[data-brand="sportbild"][data-breakpoint="lg"] .avatarsecondaryinfohover {
-  font-family: Inter;
-  font-weight: 400;
-  font-size: 15px;
-  line-height: 23px;
-  letter-spacing: 0px;
-  text-decoration: underline;
-}
-
-[data-brand="sportbild"] {
-  
-
-  
-  
-  --avatar-font-family: Inter;
-  
-  --avatar-font-size-sm: 13px;
-  
-  --avatar-font-size-lg: 15px;
-
-}
+/**
+ * ============================================================================
+ * Sportbild Design System - Component Bundle - Component-specific tokens
+ * ============================================================================
+ *
+ * Brand: Sportbild
+ * Version: 1.0.37
+ * Generated: 2025-11-26
+ *
+ * Theme Switching: Use data-brand, data-theme, data-breakpoint, data-density
+ *
+ * Usage:
+ *   <html data-brand="sportbild" data-theme="light" data-breakpoint="lg">
+ *
+ * Copyright (c) 2024 Axel Springer Deutschland GmbH
+ * Proprietary and confidential. All rights reserved.
+ * ============================================================================
+ */
+
+/* === COLOR TOKENS (LIGHT MODE) === */
 
 [data-brand="sportbild"][data-theme="light"] {
-  
-
-  
   --avatar-label-color: #666B70;
-  
   --avatar-label-color-hover: #174482;
-
-  
-
-  
-  
   --avatar-avatar-label-color: #666B70;
-  
   --avatar-label-color-dark: #E9ECEF;
-  
   --avatar-avatar-label-color-hover: #174482;
-
 }
 
-[data-brand="sportbild"][data-theme="dark"] {
-  
+/* === COLOR TOKENS (DARK MODE) === */
 
-  
+[data-brand="sportbild"][data-theme="dark"] {
   --avatar-label-color: #E9ECEF;
-  
   --avatar-label-color-hover: #174482;
-
-  
-
-  
-  
   --avatar-avatar-label-color: #666B70;
-  
   --avatar-label-color-dark: #E9ECEF;
-  
   --avatar-avatar-label-color-hover: #174482;
-
-}
-
-[data-brand="sportbild"][data-breakpoint="xs"] {
-  
-
-  
-  --avatar-label-font-size: 13px;
-  
-  --avatar-article-size: 48px;
-  
-  --avatar-author-page-size: 96px;
-  
-  --avatar-font-family: Inter;
-  
-  --avatar-label-line-height: 21px;
-  
-  --avatar-lane-gap-space: 16px;
-  
-  --app-avatar-font-family: AntennaCond;
-
-}
-
-[data-brand="sportbild"][data-breakpoint="sm"] {
-  
-
-  
-  --avatar-label-font-size: 13px;
-  
-  --avatar-article-size: 48px;
-  
-  --avatar-author-page-size: 96px;
-  
-  --avatar-font-family: Inter;
-  
-  --avatar-label-line-height: 21px;
-  
-  --avatar-lane-gap-space: 16px;
-  
-  --app-avatar-font-family: AntennaCond;
-
 }
 
-[data-brand="sportbild"][data-breakpoint="md"] {
-  
+/* === COMPONENT TOKENS & EFFECTS === */
 
-  
-  --avatar-label-font-size: 13px;
-  
-  --avatar-article-size: 48px;
-  
-  --avatar-author-page-size: 130px;
-  
+[data-brand="sportbild"] {
   --avatar-font-family: Inter;
-  
-  --avatar-label-line-height: 21px;
-  
-  --avatar-lane-gap-space: 24px;
-  
-  --app-avatar-font-family: AntennaCond;
-
+  --avatar-font-size-sm: 13px;
+  --avatar-font-size-lg: 15px;
 }
+/* === RESPONSIVE TOKENS & TYPOGRAPHY === */
 
-[data-brand="sportbild"][data-breakpoint="lg"] {
-  
-
-  
-  --avatar-label-font-size: 15px;
-  
-  --avatar-article-size: 48px;
-  
-  --avatar-author-page-size: 130px;
-  
-  --avatar-font-family: Inter;
-  
-  --avatar-label-line-height: 23px;
-  
-  --avatar-lane-gap-space: 24px;
-  
-  --app-avatar-font-family: AntennaCond;
+[data-brand="sportbild"] {
+  .appavatar {
+    font-family: AntennaCond;
+    font-weight: 800;
+    font-size: 12px;
+    letter-spacing: 0px;
+    text-transform: upper;
+  }
+
+  .avatardefault {
+    font-family: Inter;
+    font-weight: 700;
+    font-size: 13px;
+    line-height: 21px;
+    letter-spacing: 0px;
+  }
+
+  .avatarhover {
+    font-family: Inter;
+    font-weight: 700;
+    font-size: 13px;
+    line-height: 21px;
+    letter-spacing: 0px;
+    text-decoration: underline;
+  }
+
+  .avatarsecondaryinfo {
+    font-family: Inter;
+    font-weight: 400;
+    font-size: 13px;
+    line-height: 21px;
+    letter-spacing: 0px;
+  }
+
+  .avatarsecondaryinfohover {
+    font-family: Inter;
+    font-weight: 400;
+    font-size: 13px;
+    line-height: 21px;
+    letter-spacing: 0px;
+    text-decoration: underline;
+  }
+
+  @media (min-width: 390px) {
+    .appavatar {
+      font-family: AntennaCond;
+      font-weight: 800;
+      font-size: 12px;
+      letter-spacing: 0px;
+      text-transform: upper;
+    }
+
+    .avatardefault {
+      font-family: Inter;
+      font-weight: 700;
+      font-size: 13px;
+      line-height: 21px;
+      letter-spacing: 0px;
+    }
+
+    .avatarhover {
+      font-family: Inter;
+      font-weight: 700;
+      font-size: 13px;
+      line-height: 21px;
+      letter-spacing: 0px;
+      text-decoration: underline;
+    }
+
+    .avatarsecondaryinfo {
+      font-family: Inter;
+      font-weight: 400;
+      font-size: 13px;
+      line-height: 21px;
+      letter-spacing: 0px;
+    }
+
+    .avatarsecondaryinfohover {
+      font-family: Inter;
+      font-weight: 400;
+      font-size: 13px;
+      line-height: 21px;
+      letter-spacing: 0px;
+      text-decoration: underline;
+    }
+
+  }
+
+  @media (min-width: 600px) {
+    .appavatar {
+      font-family: AntennaCond;
+      font-weight: 800;
+      font-size: 14px;
+      letter-spacing: 0px;
+      text-transform: upper;
+    }
+
+    .avatardefault {
+      font-family: Inter;
+      font-weight: 700;
+      font-size: 13px;
+      line-height: 21px;
+      letter-spacing: 0px;
+    }
+
+    .avatarhover {
+      font-family: Inter;
+      font-weight: 700;
+      font-size: 13px;
+      line-height: 21px;
+      letter-spacing: 0px;
+      text-decoration: underline;
+    }
+
+    .avatarsecondaryinfo {
+      font-family: Inter;
+      font-weight: 400;
+      font-size: 13px;
+      line-height: 21px;
+      letter-spacing: 0px;
+    }
+
+    .avatarsecondaryinfohover {
+      font-family: Inter;
+      font-weight: 400;
+      font-size: 13px;
+      line-height: 21px;
+      letter-spacing: 0px;
+      text-decoration: underline;
+    }
+
+  }
+
+  @media (min-width: 1024px) {
+    .appavatar {
+      font-family: AntennaCond;
+      font-weight: 800;
+      font-size: 16px;
+      letter-spacing: 0px;
+      text-transform: upper;
+    }
+
+    .avatardefault {
+      font-family: Inter;
+      font-weight: 700;
+      font-size: 15px;
+      line-height: 23px;
+      letter-spacing: 0px;
+    }
+
+    .avatarhover {
+      font-family: Inter;
+      font-weight: 700;
+      font-size: 15px;
+      line-height: 23px;
+      letter-spacing: 0px;
+      text-decoration: underline;
+    }
+
+    .avatarsecondaryinfo {
+      font-family: Inter;
+      font-weight: 400;
+      font-size: 15px;
+      line-height: 23px;
+      letter-spacing: 0px;
+    }
+
+    .avatarsecondaryinfohover {
+      font-family: Inter;
+      font-weight: 400;
+      font-size: 15px;
+      line-height: 23px;
+      letter-spacing: 0px;
+      text-decoration: underline;
+    }
+
+  }
 
 }

package/dist/bundles/components/sportbild-badge.css

@@ -1,47 +1,19 @@
-[data-brand="sportbild"][data-breakpoint="xs"] {
-  
+/**
+ * ============================================================================
+ * Sportbild Design System - Component Bundle - Component-specific tokens
+ * ============================================================================
+ *
+ * Brand: Sportbild
+ * Version: 1.0.37
+ * Generated: 2025-11-26
+ *
+ * Theme Switching: Use data-brand, data-theme, data-breakpoint, data-density
+ *
+ * Usage:
+ *   <html data-brand="sportbild" data-theme="light" data-breakpoint="lg">
+ *
+ * Copyright (c) 2024 Axel Springer Deutschland GmbH
+ * Proprietary and confidential. All rights reserved.
+ * ============================================================================
+ */
 
-  
-  --badges-inner-stack-space: 2px;
-  
-  --badges-inner-inline-space: 4px;
-  
-  --ad-label-badge-height-size: 30px;
-
-}
-
-[data-brand="sportbild"][data-breakpoint="sm"] {
-  
-
-  
-  --badges-inner-stack-space: 2px;
-  
-  --badges-inner-inline-space: 4px;
-  
-  --ad-label-badge-height-size: 30px;
-
-}
-
-[data-brand="sportbild"][data-breakpoint="md"] {
-  
-
-  
-  --badges-inner-stack-space: 2px;
-  
-  --badges-inner-inline-space: 4px;
-  
-  --ad-label-badge-height-size: 30px;
-
-}
-
-[data-brand="sportbild"][data-breakpoint="lg"] {
-  
-
-  
-  --badges-inner-stack-space: 2px;
-  
-  --badges-inner-inline-space: 4px;
-  
-  --ad-label-badge-height-size: 30px;
-
-}

package/dist/bundles/components/sportbild-badges.css

@@ -1,55 +1,89 @@
-[data-brand="sportbild"][data-breakpoint="xs"] .videoadbadge {
-  font-family: Gotham XNarrow;
-  font-weight: 400;
-  font-size: 14px;
-  text-transform: upper;
-}
-
-[data-brand="sportbild"][data-breakpoint="xs"] .videotimebadge {
-  font-family: Inter;
-  font-weight: 400;
-  font-size: 16px;
-  line-height: 21px;
-}
-
-[data-brand="sportbild"][data-breakpoint="sm"] .videoadbadge {
-  font-family: Gotham XNarrow;
-  font-weight: 400;
-  font-size: 14px;
-  text-transform: upper;
-}
-
-[data-brand="sportbild"][data-breakpoint="sm"] .videotimebadge {
-  font-family: Inter;
-  font-weight: 400;
-  font-size: 16px;
-  line-height: 21px;
-}
-
-[data-brand="sportbild"][data-breakpoint="md"] .videoadbadge {
-  font-family: Gotham XNarrow;
-  font-weight: 400;
-  font-size: 16px;
-  text-transform: upper;
-}
-
-[data-brand="sportbild"][data-breakpoint="md"] .videotimebadge {
-  font-family: Inter;
-  font-weight: 400;
-  font-size: 18px;
-  line-height: 23.799999237060547px;
-}
-
-[data-brand="sportbild"][data-breakpoint="lg"] .videoadbadge {
-  font-family: Gotham XNarrow;
-  font-weight: 400;
-  font-size: 16px;
-  text-transform: upper;
-}
-
-[data-brand="sportbild"][data-breakpoint="lg"] .videotimebadge {
-  font-family: Inter;
-  font-weight: 400;
-  font-size: 18px;
-  line-height: 23.799999237060547px;
+/**
+ * ============================================================================
+ * Sportbild Design System - Component Bundle - Component-specific tokens
+ * ============================================================================
+ *
+ * Brand: Sportbild
+ * Version: 1.0.37
+ * Generated: 2025-11-26
+ *
+ * Theme Switching: Use data-brand, data-theme, data-breakpoint, data-density
+ *
+ * Usage:
+ *   <html data-brand="sportbild" data-theme="light" data-breakpoint="lg">
+ *
+ * Copyright (c) 2024 Axel Springer Deutschland GmbH
+ * Proprietary and confidential. All rights reserved.
+ * ============================================================================
+ */
+
+
+/* === RESPONSIVE TOKENS & TYPOGRAPHY === */
+
+[data-brand="sportbild"] {
+  .videoadbadge {
+    font-family: Gotham XNarrow;
+    font-weight: 400;
+    font-size: 14px;
+    text-transform: upper;
+  }
+
+  .videotimebadge {
+    font-family: Inter;
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 21px;
+  }
+
+  @media (min-width: 390px) {
+    .videoadbadge {
+      font-family: Gotham XNarrow;
+      font-weight: 400;
+      font-size: 14px;
+      text-transform: upper;
+    }
+
+    .videotimebadge {
+      font-family: Inter;
+      font-weight: 400;
+      font-size: 16px;
+      line-height: 21px;
+    }
+
+  }
+
+  @media (min-width: 600px) {
+    .videoadbadge {
+      font-family: Gotham XNarrow;
+      font-weight: 400;
+      font-size: 16px;
+      text-transform: upper;
+    }
+
+    .videotimebadge {
+      font-family: Inter;
+      font-weight: 400;
+      font-size: 18px;
+      line-height: 23.799999237060547px;
+    }
+
+  }
+
+  @media (min-width: 1024px) {
+    .videoadbadge {
+      font-family: Gotham XNarrow;
+      font-weight: 400;
+      font-size: 16px;
+      text-transform: upper;
+    }
+
+    .videotimebadge {
+      font-family: Inter;
+      font-weight: 400;
+      font-size: 18px;
+      line-height: 23.799999237060547px;
+    }
+
+  }
+
 }