@marioschmidt/design-system-tokens 1.0.63 → 1.0.65

package/dist/js/brands/sportbild/components/MediaPlayer.js

@@ -0,0 +1,205 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ *
+ * BILD Design System Tokens v1.0.0
+ * Generated by Style Dictionary v4.0.0
+ *
+ * Copyright (c) 2024 Axel Springer Deutschland GmbH
+ * Proprietary and confidential. All rights reserved.
+ */
+
+// Component: MediaPlayer
+// Brand: sportbild
+
+export const MediaPlayer = {
+  "colors": {
+    "dark": {
+      "vidPlayerControlsAutoplayButtonBgColor": "rgba(0, 0, 0, 0.2)",
+      "vidPlayerControlButtonsBgHoverColor": "rgba(221, 0, 0, 0.8)",
+      "vidPlayerControlButtonsBgColorHover": "rgba(0, 0, 0, 0.2)",
+      "vidPlayerOverlayScrimColor": "rgba(0, 0, 0, 0.5)",
+      "audioPlayerPlayButtonBgColor": "rgba(255, 255, 255, 0.3)",
+      "vidPlayerTooltipBgColor": "rgba(0, 0, 0, 0.7)",
+      "vidPlayerControlButtonsBgColorPressed": "rgba(0, 0, 0, 0.05)",
+      "vidPlayerProgressBarPreloadBgColor": "rgba(255, 255, 255, 0.3)",
+      "vidPlayerUnmuteButtonBgColor": "rgba(0, 0, 0, 0.2)",
+      "vidPlayerUnmuteButtonBgColorHover": "rgba(0, 0, 0, 0.35)"
+    },
+    "light": {
+      "vidPlayerControlsAutoplayButtonBgColor": "rgba(0, 0, 0, 0.2)",
+      "vidPlayerControlButtonsBgHoverColor": "rgba(221, 0, 0, 0.8)",
+      "vidPlayerControlButtonsBgColorHover": "rgba(0, 0, 0, 0.2)",
+      "vidPlayerOverlayScrimColor": "rgba(0, 0, 0, 0.5)",
+      "audioPlayerPlayButtonBgColor": "rgba(255, 255, 255, 0.3)",
+      "vidPlayerTooltipBgColor": "rgba(0, 0, 0, 0.7)",
+      "vidPlayerControlButtonsBgColorPressed": "rgba(0, 0, 0, 0.05)",
+      "vidPlayerProgressBarPreloadBgColor": "rgba(255, 255, 255, 0.3)",
+      "vidPlayerUnmuteButtonBgColor": "rgba(0, 0, 0, 0.2)",
+      "vidPlayerUnmuteButtonBgColorHover": "rgba(0, 0, 0, 0.35)"
+    }
+  },
+  "sizing": {
+    "lg": {
+      "podcastPlayButtonSize": "48px",
+      "vidPlayerBottomBarGapSpace": "16px",
+      "audioPlayerHeaderStackSpace": "56px",
+      "videoTimeBadgeFontFamily": "Inter",
+      "vidPlayerControlButtonSize": "42px",
+      "vidPlayerControlButtonIconSizeHover": "28px",
+      "vidPlayerTimecodeFontSize": "18px",
+      "vidPlayerTimecodeContainerMinWidthSize": "58px",
+      "vidPlayerProgressBarContainerHeightSize": "42px",
+      "vidPlayerUnmuteButtonWidthSize": 220
+    },
+    "md": {
+      "podcastPlayButtonSize": "48px",
+      "vidPlayerBottomBarGapSpace": "0px",
+      "audioPlayerHeaderStackSpace": "56px",
+      "videoTimeBadgeFontFamily": "Inter",
+      "vidPlayerControlButtonSize": "42px",
+      "vidPlayerControlButtonIconSizeHover": "28px",
+      "vidPlayerTimecodeFontSize": "16px",
+      "vidPlayerTimecodeContainerMinWidthSize": "58px",
+      "vidPlayerProgressBarContainerHeightSize": "24px",
+      "vidPlayerUnmuteButtonWidthSize": 220
+    },
+    "sm": {
+      "podcastPlayButtonSize": "48px",
+      "vidPlayerBottomBarGapSpace": "0px",
+      "audioPlayerHeaderStackSpace": "56px",
+      "videoTimeBadgeFontFamily": "Inter",
+      "vidPlayerControlButtonSize": "42px",
+      "vidPlayerControlButtonIconSizeHover": "28px",
+      "vidPlayerTimecodeFontSize": "14px",
+      "vidPlayerTimecodeContainerMinWidthSize": "45px",
+      "vidPlayerProgressBarContainerHeightSize": "24px",
+      "vidPlayerUnmuteButtonWidthSize": 220
+    },
+    "xs": {
+      "podcastPlayButtonSize": "48px",
+      "vidPlayerBottomBarGapSpace": "0px",
+      "audioPlayerHeaderStackSpace": "56px",
+      "videoTimeBadgeFontFamily": "Inter",
+      "vidPlayerControlButtonSize": "42px",
+      "vidPlayerControlButtonIconSizeHover": "28px",
+      "vidPlayerTimecodeFontSize": "14px",
+      "vidPlayerTimecodeContainerMinWidthSize": "45px",
+      "vidPlayerProgressBarContainerHeightSize": "24px",
+      "vidPlayerUnmuteButtonWidthSize": 220
+    }
+  },
+  "typography": {
+    "lg": {
+      "podcastPlayerLabel": {
+        "fontFamily": "AntennaExtraCond",
+        "fontWeight": 400,
+        "fontSize": "18px",
+        "lineHeight": "18px"
+      },
+      "videoAdTime": {
+        "fontFamily": "Gotham",
+        "fontWeight": 800,
+        "fontSize": "16px",
+        "lineHeight": "null"
+      },
+      "videoPlayerTime": {
+        "fontFamily": "AntennaCond",
+        "fontWeight": 800,
+        "fontSize": "18px",
+        "lineHeight": "null"
+      }
+    },
+    "md": {
+      "podcastPlayerLabel": {
+        "fontFamily": "AntennaExtraCond",
+        "fontWeight": 400,
+        "fontSize": "16px",
+        "lineHeight": "16px"
+      },
+      "videoAdTime": {
+        "fontFamily": "Gotham",
+        "fontWeight": 800,
+        "fontSize": "16px",
+        "lineHeight": "null"
+      },
+      "videoPlayerTime": {
+        "fontFamily": "AntennaCond",
+        "fontWeight": 800,
+        "fontSize": "16px",
+        "lineHeight": "null"
+      }
+    },
+    "sm": {
+      "podcastPlayerLabel": {
+        "fontFamily": "AntennaExtraCond",
+        "fontWeight": 400,
+        "fontSize": "16px",
+        "lineHeight": "16px"
+      },
+      "videoAdTime": {
+        "fontFamily": "Gotham",
+        "fontWeight": 800,
+        "fontSize": "14px",
+        "lineHeight": "null"
+      },
+      "videoPlayerTime": {
+        "fontFamily": "AntennaCond",
+        "fontWeight": 800,
+        "fontSize": "14px",
+        "lineHeight": "null"
+      }
+    },
+    "xs": {
+      "podcastPlayerLabel": {
+        "fontFamily": "AntennaExtraCond",
+        "fontWeight": 400,
+        "fontSize": "16px",
+        "lineHeight": "16px"
+      },
+      "videoAdTime": {
+        "fontFamily": "Gotham",
+        "fontWeight": 800,
+        "fontSize": "14px",
+        "lineHeight": "null"
+      },
+      "videoPlayerTime": {
+        "fontFamily": "AntennaCond",
+        "fontWeight": 800,
+        "fontSize": "14px",
+        "lineHeight": "null"
+      }
+    }
+  }
+};
+
+export const getMediaPlayerTokens = (colorMode = 'light', breakpoint = 'md', density = 'default') => ({
+  ...MediaPlayer.colors?.[colorMode],
+  ...MediaPlayer.sizing?.[breakpoint],
+  ...MediaPlayer.density?.[density],
+  ...MediaPlayer.typography?.[breakpoint],
+  ...MediaPlayer.effects?.[colorMode]
+});
+
+// Flat exports for tree-shaking
+export const vidPlayerControlsAutoplayButtonBgColor = "rgba(0, 0, 0, 0.2)";
+export const vidPlayerControlButtonsBgHoverColor = "rgba(221, 0, 0, 0.8)";
+export const vidPlayerControlButtonsBgColorHover = "rgba(0, 0, 0, 0.2)";
+export const vidPlayerOverlayScrimColor = "rgba(0, 0, 0, 0.5)";
+export const audioPlayerPlayButtonBgColor = "rgba(255, 255, 255, 0.3)";
+export const vidPlayerTooltipBgColor = "rgba(0, 0, 0, 0.7)";
+export const vidPlayerControlButtonsBgColorPressed = "rgba(0, 0, 0, 0.05)";
+export const vidPlayerProgressBarPreloadBgColor = "rgba(255, 255, 255, 0.3)";
+export const vidPlayerUnmuteButtonBgColor = "rgba(0, 0, 0, 0.2)";
+export const vidPlayerUnmuteButtonBgColorHover = "rgba(0, 0, 0, 0.35)";
+export const podcastPlayButtonSize = "48px";
+export const vidPlayerBottomBarGapSpace = "0px";
+export const audioPlayerHeaderStackSpace = "56px";
+export const videoTimeBadgeFontFamily = "Inter";
+export const vidPlayerControlButtonSize = "42px";
+export const vidPlayerControlButtonIconSizeHover = "28px";
+export const vidPlayerTimecodeFontSize = "14px";
+export const vidPlayerTimecodeContainerMinWidthSize = "45px";
+export const vidPlayerProgressBarContainerHeightSize = "24px";
+export const vidPlayerUnmuteButtonWidthSize = 220;
+
+export default MediaPlayer;

package/dist/js/brands/sportbild/components/Menu.d.ts

@@ -0,0 +1,56 @@
+/**
+ * TypeScript definitions for BILD Design System Tokens
+ * Auto-generated - Do not edit directly
+ */
+
+import type { ColorValue, SpacingValue, TypographyStyle, ShadowLayer } from '../../../types';
+
+export interface MenuTokens {
+  colors?: { light?: Record<string, ColorValue>; dark?: Record<string, ColorValue>; };
+  sizing?: { xs?: Record<string, SpacingValue>; sm?: Record<string, SpacingValue>; md?: Record<string, SpacingValue>; lg?: Record<string, SpacingValue>; };
+  density?: { default?: Record<string, SpacingValue>; dense?: Record<string, SpacingValue>; spacious?: Record<string, SpacingValue>; };
+  typography?: { xs?: Record<string, TypographyStyle>; sm?: Record<string, TypographyStyle>; md?: Record<string, TypographyStyle>; lg?: Record<string, TypographyStyle>; };
+  effects?: { light?: Record<string, ShadowLayer[]>; dark?: Record<string, ShadowLayer[]>; };
+}
+
+export declare const Menu: MenuTokens;
+export declare function getMenuTokens(colorMode?: 'light' | 'dark', breakpoint?: 'xs' | 'sm' | 'md' | 'lg', density?: 'default' | 'dense' | 'spacious'): Record<string, any>;
+
+// Flat exports
+export declare const menuItemSpace: string | number;
+export declare const menuItemFontSize: string | number;
+export declare const menuItemUtilFontSize: string | number;
+export declare const menuItemUtilStackSpace: string | number;
+export declare const menuLinkLaneHeightSize: string | number;
+export declare const menuUtillinkItemHeightSize: string | number;
+export declare const menuLinkItemInlineSpace: string | number;
+export declare const menuLogoDefaultSize: string | number;
+export declare const menuLogoScrolledSize: string | number;
+export declare const menuSpecialNaviItemHeightSize: string | number;
+export declare const subNavBarHeightSize: string | number;
+export declare const menuUtilityLinksContainerHeightSize: string | number;
+export declare const menuTopStackSpace: string | number;
+export declare const menuLeftInlineSpace: string | number;
+export declare const menuUtilityLinksGapSpace: string | number;
+export declare const menuRightInlineSpace: string | number;
+export declare const menuBottomStackSpace: string | number;
+export declare const menuUtilityLinksDividerHeightSize: string | number;
+export declare const menuShadowVisibility: string | number;
+export declare const heyInputShadowVisibility: string | number;
+export declare const appTopbarTitleFontSize: string | number;
+export declare const appTopbarStageTitleHeight: string | number;
+export declare const iOSappTopBarHeightSize: string | number;
+export declare const iOSappTopBarLeftInlineSpace: string | number;
+export declare const iOSappTopBarRightInlineSpace: string | number;
+export declare const menuSurfaceColor: string | number;
+export declare const menuScrolledSurfaceGradientColor: string | number;
+export declare const menuLinkLaneSurfaceColor: string | number;
+export declare const menuLinkLaneLabelColor: string | number;
+export declare const menuLinkLaneLabelColorActive: string | number;
+export declare const appTopBarSurfaceColor: string | number;
+export declare const appTopBarIconColor: string | number;
+export declare const appTopBarTextColorPrimary: string | number;
+export declare const appTobBarTabNavBottomBorder: string | number;
+export declare const appTobBarTabNavBottomBorderActive: string | number;
+
+export default Menu;

package/dist/js/brands/sportbild/components/Menu.js

@@ -0,0 +1,346 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ *
+ * BILD Design System Tokens v1.0.0
+ * Generated by Style Dictionary v4.0.0
+ *
+ * Copyright (c) 2024 Axel Springer Deutschland GmbH
+ * Proprietary and confidential. All rights reserved.
+ */
+
+// Component: Menu
+// Brand: sportbild
+
+export const Menu = {
+  "colors": {
+    "dark": {
+      "menuSurfaceColor": "#081828",
+      "menuScrolledSurfaceGradientColor": "rgba(35, 38, 41, 0.95)",
+      "menuLinkLaneSurfaceColor": "#0A2750",
+      "menuLinkLaneLabelColor": "#AEB4B9",
+      "menuLinkLaneLabelColorActive": "#F7F9FD",
+      "appTopBarSurfaceColor": "#0A2750",
+      "appTopBarIconColor": "#8C9196",
+      "appTopBarTextColorPrimary": "#E9ECEF",
+      "appTobBarTabNavBottomBorder": "#174482",
+      "appTobBarTabNavBottomBorderActive": "#FFFFFF"
+    },
+    "light": {
+      "menuSurfaceColor": "#FFFFFF",
+      "menuScrolledSurfaceGradientColor": "rgba(255, 255, 255, 0.95)",
+      "menuLinkLaneSurfaceColor": "#0A2750",
+      "menuLinkLaneLabelColor": "#CED4DA",
+      "menuLinkLaneLabelColorActive": "#FFFFFF",
+      "appTopBarSurfaceColor": "#0A2750",
+      "appTopBarIconColor": "#8C9196",
+      "appTopBarTextColorPrimary": "#E9ECEF",
+      "appTobBarTabNavBottomBorder": "#174482",
+      "appTobBarTabNavBottomBorderActive": "#CED4DA"
+    }
+  },
+  "sizing": {
+    "lg": {
+      "menuItemSpace": "8px",
+      "menuItemFontSize": "18px",
+      "menuItemUtilFontSize": "12px",
+      "menuItemUtilStackSpace": "10px",
+      "menuLinkLaneHeightSize": "48px",
+      "menuUtillinkItemHeightSize": "48px",
+      "menuLinkItemInlineSpace": "4px",
+      "menuLogoDefaultSize": "148px",
+      "menuLogoScrolledSize": "56px",
+      "menuSpecialNaviItemHeightSize": "56px",
+      "subNavBarHeightSize": "42px",
+      "menuUtilityLinksContainerHeightSize": "100px",
+      "menuTopStackSpace": "12px",
+      "menuLeftInlineSpace": "16px",
+      "menuUtilityLinksGapSpace": "32px",
+      "menuRightInlineSpace": "16px",
+      "menuBottomStackSpace": "0px",
+      "menuUtilityLinksDividerHeightSize": "48px",
+      "menuShadowVisibility": "rgba(0, 0, 0, 0)",
+      "heyInputShadowVisibility": "rgba(0, 0, 0, 0.1)",
+      "appTopbarTitleFontSize": "13px",
+      "appTopbarStageTitleHeight": "17px",
+      "iOSappTopBarHeightSize": "48px",
+      "iOSappTopBarLeftInlineSpace": "19px",
+      "iOSappTopBarRightInlineSpace": "19px"
+    },
+    "md": {
+      "menuItemSpace": "8px",
+      "menuItemFontSize": "18px",
+      "menuItemUtilFontSize": "12px",
+      "menuItemUtilStackSpace": "10px",
+      "menuLinkLaneHeightSize": "48px",
+      "menuUtillinkItemHeightSize": "48px",
+      "menuLinkItemInlineSpace": "4px",
+      "menuLogoDefaultSize": "56px",
+      "menuLogoScrolledSize": "56px",
+      "menuSpecialNaviItemHeightSize": "48px",
+      "subNavBarHeightSize": "42px",
+      "menuUtilityLinksContainerHeightSize": "56px",
+      "menuTopStackSpace": "8px",
+      "menuLeftInlineSpace": "8px",
+      "menuUtilityLinksGapSpace": "24px",
+      "menuRightInlineSpace": "0px",
+      "menuBottomStackSpace": "8px",
+      "menuUtilityLinksDividerHeightSize": "40px",
+      "menuShadowVisibility": "rgba(0, 0, 0, 0.1)",
+      "heyInputShadowVisibility": "rgba(0, 0, 0, 0)",
+      "appTopbarTitleFontSize": "13px",
+      "appTopbarStageTitleHeight": "17px",
+      "iOSappTopBarHeightSize": "48px",
+      "iOSappTopBarLeftInlineSpace": "19px",
+      "iOSappTopBarRightInlineSpace": "19px"
+    },
+    "sm": {
+      "menuItemSpace": "8px",
+      "menuItemFontSize": "18px",
+      "menuItemUtilFontSize": "12px",
+      "menuItemUtilStackSpace": "10px",
+      "menuLinkLaneHeightSize": "48px",
+      "menuUtillinkItemHeightSize": "48px",
+      "menuLinkItemInlineSpace": "4px",
+      "menuLogoDefaultSize": "56px",
+      "menuLogoScrolledSize": "56px",
+      "menuSpecialNaviItemHeightSize": "48px",
+      "subNavBarHeightSize": "42px",
+      "menuUtilityLinksContainerHeightSize": "56px",
+      "menuTopStackSpace": "8px",
+      "menuLeftInlineSpace": "8px",
+      "menuUtilityLinksGapSpace": "24px",
+      "menuRightInlineSpace": "0px",
+      "menuBottomStackSpace": "8px",
+      "menuUtilityLinksDividerHeightSize": "40px",
+      "menuShadowVisibility": "rgba(0, 0, 0, 0.1)",
+      "heyInputShadowVisibility": "rgba(0, 0, 0, 0)",
+      "appTopbarTitleFontSize": "12px",
+      "appTopbarStageTitleHeight": "14px",
+      "iOSappTopBarHeightSize": "44px",
+      "iOSappTopBarLeftInlineSpace": "12px",
+      "iOSappTopBarRightInlineSpace": "16px"
+    },
+    "xs": {
+      "menuItemSpace": "8px",
+      "menuItemFontSize": "18px",
+      "menuItemUtilFontSize": "12px",
+      "menuItemUtilStackSpace": "10px",
+      "menuLinkLaneHeightSize": "48px",
+      "menuUtillinkItemHeightSize": "48px",
+      "menuLinkItemInlineSpace": "4px",
+      "menuLogoDefaultSize": "56px",
+      "menuLogoScrolledSize": "56px",
+      "menuSpecialNaviItemHeightSize": "48px",
+      "subNavBarHeightSize": "42px",
+      "menuUtilityLinksContainerHeightSize": "56px",
+      "menuTopStackSpace": "8px",
+      "menuLeftInlineSpace": "8px",
+      "menuUtilityLinksGapSpace": "24px",
+      "menuRightInlineSpace": "0px",
+      "menuBottomStackSpace": "8px",
+      "menuUtilityLinksDividerHeightSize": "40px",
+      "menuShadowVisibility": "rgba(0, 0, 0, 0.1)",
+      "heyInputShadowVisibility": "rgba(0, 0, 0, 0)",
+      "appTopbarTitleFontSize": "12px",
+      "appTopbarStageTitleHeight": "14px",
+      "iOSappTopBarHeightSize": "44px",
+      "iOSappTopBarLeftInlineSpace": "12px",
+      "iOSappTopBarRightInlineSpace": "16px"
+    }
+  },
+  "typography": {
+    "lg": {
+      "appTopbarStageTitle": {
+        "fontFamily": "AntennaCond",
+        "fontWeight": 800,
+        "fontSize": "13px",
+        "lineHeight": "17px"
+      },
+      "appTopbarTabsTitle": {
+        "fontFamily": "AntennaCond",
+        "fontWeight": 800,
+        "fontSize": "13px",
+        "lineHeight": "17px"
+      },
+      "menuItemLabel": {
+        "fontFamily": "AntennaExtraCond",
+        "fontWeight": 700,
+        "fontSize": "18px",
+        "lineHeight": "18px"
+      },
+      "menuItemUtilLabel": {
+        "fontFamily": "AntennaExtraCond",
+        "fontWeight": 700,
+        "fontSize": "12px",
+        "lineHeight": "12px"
+      }
+    },
+    "md": {
+      "appTopbarStageTitle": {
+        "fontFamily": "AntennaCond",
+        "fontWeight": 800,
+        "fontSize": "13px",
+        "lineHeight": "17px"
+      },
+      "appTopbarTabsTitle": {
+        "fontFamily": "AntennaCond",
+        "fontWeight": 800,
+        "fontSize": "13px",
+        "lineHeight": "17px"
+      },
+      "menuItemLabel": {
+        "fontFamily": "AntennaExtraCond",
+        "fontWeight": 700,
+        "fontSize": "18px",
+        "lineHeight": "18px"
+      },
+      "menuItemUtilLabel": {
+        "fontFamily": "AntennaExtraCond",
+        "fontWeight": 700,
+        "fontSize": "12px",
+        "lineHeight": "12px"
+      }
+    },
+    "sm": {
+      "appTopbarStageTitle": {
+        "fontFamily": "AntennaCond",
+        "fontWeight": 800,
+        "fontSize": "12px",
+        "lineHeight": "14px"
+      },
+      "appTopbarTabsTitle": {
+        "fontFamily": "AntennaCond",
+        "fontWeight": 800,
+        "fontSize": "12px",
+        "lineHeight": "14px"
+      },
+      "menuItemLabel": {
+        "fontFamily": "AntennaExtraCond",
+        "fontWeight": 700,
+        "fontSize": "18px",
+        "lineHeight": "18px"
+      },
+      "menuItemUtilLabel": {
+        "fontFamily": "AntennaExtraCond",
+        "fontWeight": 700,
+        "fontSize": "12px",
+        "lineHeight": "12px"
+      }
+    },
+    "xs": {
+      "appTopbarStageTitle": {
+        "fontFamily": "AntennaCond",
+        "fontWeight": 800,
+        "fontSize": "12px",
+        "lineHeight": "14px"
+      },
+      "appTopbarTabsTitle": {
+        "fontFamily": "AntennaCond",
+        "fontWeight": 800,
+        "fontSize": "12px",
+        "lineHeight": "14px"
+      },
+      "menuItemLabel": {
+        "fontFamily": "AntennaExtraCond",
+        "fontWeight": 700,
+        "fontSize": "18px",
+        "lineHeight": "18px"
+      },
+      "menuItemUtilLabel": {
+        "fontFamily": "AntennaExtraCond",
+        "fontWeight": 700,
+        "fontSize": "12px",
+        "lineHeight": "12px"
+      }
+    }
+  },
+  "effects": {
+    "dark": {
+      "menuShadow": [
+        {
+          "offsetX": 0,
+          "offsetY": 8,
+          "radius": 10,
+          "spread": -8,
+          "color": "rgba(0, 0, 0, 0.1)"
+        }
+      ],
+      "heyInputShadow": [
+        {
+          "offsetX": 0,
+          "offsetY": 8,
+          "radius": 10,
+          "spread": -8,
+          "color": "rgba(0, 0, 0, 0)"
+        }
+      ]
+    },
+    "light": {
+      "menuShadow": [
+        {
+          "offsetX": 0,
+          "offsetY": 8,
+          "radius": 10,
+          "spread": -8,
+          "color": "rgba(0, 0, 0, 0.1)"
+        }
+      ],
+      "heyInputShadow": [
+        {
+          "offsetX": 0,
+          "offsetY": 8,
+          "radius": 10,
+          "spread": -8,
+          "color": "rgba(0, 0, 0, 0)"
+        }
+      ]
+    }
+  }
+};
+
+export const getMenuTokens = (colorMode = 'light', breakpoint = 'md', density = 'default') => ({
+  ...Menu.colors?.[colorMode],
+  ...Menu.sizing?.[breakpoint],
+  ...Menu.density?.[density],
+  ...Menu.typography?.[breakpoint],
+  ...Menu.effects?.[colorMode]
+});
+
+// Flat exports for tree-shaking
+export const menuSurfaceColor = "#FFFFFF";
+export const menuScrolledSurfaceGradientColor = "rgba(255, 255, 255, 0.95)";
+export const menuLinkLaneSurfaceColor = "#0A2750";
+export const menuLinkLaneLabelColor = "#CED4DA";
+export const menuLinkLaneLabelColorActive = "#FFFFFF";
+export const appTopBarSurfaceColor = "#0A2750";
+export const appTopBarIconColor = "#8C9196";
+export const appTopBarTextColorPrimary = "#E9ECEF";
+export const appTobBarTabNavBottomBorder = "#174482";
+export const appTobBarTabNavBottomBorderActive = "#CED4DA";
+export const menuItemSpace = "8px";
+export const menuItemFontSize = "18px";
+export const menuItemUtilFontSize = "12px";
+export const menuItemUtilStackSpace = "10px";
+export const menuLinkLaneHeightSize = "48px";
+export const menuUtillinkItemHeightSize = "48px";
+export const menuLinkItemInlineSpace = "4px";
+export const menuLogoDefaultSize = "56px";
+export const menuLogoScrolledSize = "56px";
+export const menuSpecialNaviItemHeightSize = "48px";
+export const subNavBarHeightSize = "42px";
+export const menuUtilityLinksContainerHeightSize = "56px";
+export const menuTopStackSpace = "8px";
+export const menuLeftInlineSpace = "8px";
+export const menuUtilityLinksGapSpace = "24px";
+export const menuRightInlineSpace = "0px";
+export const menuBottomStackSpace = "8px";
+export const menuUtilityLinksDividerHeightSize = "40px";
+export const menuShadowVisibility = "rgba(0, 0, 0, 0.1)";
+export const heyInputShadowVisibility = "rgba(0, 0, 0, 0)";
+export const appTopbarTitleFontSize = "12px";
+export const appTopbarStageTitleHeight = "14px";
+export const iOSappTopBarHeightSize = "44px";
+export const iOSappTopBarLeftInlineSpace = "12px";
+export const iOSappTopBarRightInlineSpace = "16px";
+
+export default Menu;

package/dist/js/brands/sportbild/components/MenuItem.d.ts

@@ -0,0 +1,25 @@
+/**
+ * TypeScript definitions for BILD Design System Tokens
+ * Auto-generated - Do not edit directly
+ */
+
+import type { ColorValue, SpacingValue, TypographyStyle, ShadowLayer } from '../../../types';
+
+export interface MenuItemTokens {
+  colors?: { light?: Record<string, ColorValue>; dark?: Record<string, ColorValue>; };
+  sizing?: { xs?: Record<string, SpacingValue>; sm?: Record<string, SpacingValue>; md?: Record<string, SpacingValue>; lg?: Record<string, SpacingValue>; };
+  density?: { default?: Record<string, SpacingValue>; dense?: Record<string, SpacingValue>; spacious?: Record<string, SpacingValue>; };
+  typography?: { xs?: Record<string, TypographyStyle>; sm?: Record<string, TypographyStyle>; md?: Record<string, TypographyStyle>; lg?: Record<string, TypographyStyle>; };
+  effects?: { light?: Record<string, ShadowLayer[]>; dark?: Record<string, ShadowLayer[]>; };
+}
+
+export declare const MenuItem: MenuItemTokens;
+export declare function getMenuItemTokens(colorMode?: 'light' | 'dark', breakpoint?: 'xs' | 'sm' | 'md' | 'lg', density?: 'default' | 'dense' | 'spacious'): Record<string, any>;
+
+// Flat exports
+export declare const menuItemBorderColorActive: string | number;
+export declare const menuItemLabelColorPrimary: string | number;
+export declare const menuItemLabelColorPrimaryActive: string | number;
+export declare const menuItemLabelColorSecondary: string | number;
+
+export default MenuItem;

package/dist/js/brands/sportbild/components/MenuItem.js

@@ -0,0 +1,45 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ *
+ * BILD Design System Tokens v1.0.0
+ * Generated by Style Dictionary v4.0.0
+ *
+ * Copyright (c) 2024 Axel Springer Deutschland GmbH
+ * Proprietary and confidential. All rights reserved.
+ */
+
+// Component: MenuItem
+// Brand: sportbild
+
+export const MenuItem = {
+  "colors": {
+    "dark": {
+      "menuItemBorderColorActive": "#F7F9FD",
+      "menuItemLabelColorPrimary": "#8C9196",
+      "menuItemLabelColorPrimaryActive": "#F2F4F5",
+      "menuItemLabelColorSecondary": "#FFFFFF"
+    },
+    "light": {
+      "menuItemBorderColorActive": "#0A2750",
+      "menuItemLabelColorPrimary": "#4B525A",
+      "menuItemLabelColorPrimaryActive": "#232629",
+      "menuItemLabelColorSecondary": "#FFFFFF"
+    }
+  }
+};
+
+export const getMenuItemTokens = (colorMode = 'light', breakpoint = 'md', density = 'default') => ({
+  ...MenuItem.colors?.[colorMode],
+  ...MenuItem.sizing?.[breakpoint],
+  ...MenuItem.density?.[density],
+  ...MenuItem.typography?.[breakpoint],
+  ...MenuItem.effects?.[colorMode]
+});
+
+// Flat exports for tree-shaking
+export const menuItemBorderColorActive = "#0A2750";
+export const menuItemLabelColorPrimary = "#4B525A";
+export const menuItemLabelColorPrimaryActive = "#232629";
+export const menuItemLabelColorSecondary = "#FFFFFF";
+
+export default MenuItem;