@marioschmidt/design-system-tokens 1.0.64 → 1.0.66

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

@@ -0,0 +1,234 @@
+/**
+ * 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: Button
+// Brand: sportbild
+
+export const Button = {
+  "colors": {
+    "dark": {
+      "buttonPrimaryBrandBgColorIdle": "#315998",
+      "buttonPrimaryBrandBgColorHover": "#174482",
+      "buttonPrimaryLabelColor": "#FFFFFF",
+      "buttonPrimarySuccessColorIdle": "#18995C",
+      "buttonPrimarySuccessColorHover": "#006E3E",
+      "buttonPrimaryNeutralBgColorIdle": "#FFFFFF",
+      "buttonPrimaryNeutralBgColorHover": "#BDCADB",
+      "buttonTertiaryLabelColor": "#F2F4F5",
+      "buttonTertiaryBorderColorIdle": "#4B525A",
+      "buttonTertiaryBorderColorHover": "#FFFFFF",
+      "buttonTertiarySuccessBgColorHover": "rgba(0, 155, 90, 0.5)",
+      "buttonTertiarySuccessBorderColor": "#18995C",
+      "buttonSecondaryBgColorHover": "rgba(206, 212, 218, 0.5)",
+      "buttonSecondaryLabelColor": "#E9ECEF",
+      "buttonSecondaryBgColorIdle": "#4B525A",
+      "buttonLiveTickerLoadNewSurfaceColor": "#081828",
+      "buttonLiveTickerLoadNewLabelColor": "#F2F4F5",
+      "buttonGhostBgColorHover": "rgba(206, 212, 218, 0.5)"
+    },
+    "light": {
+      "buttonPrimaryBrandBgColorIdle": "#174482",
+      "buttonPrimaryBrandBgColorHover": "#0A2750",
+      "buttonPrimaryLabelColor": "#FFFFFF",
+      "buttonPrimarySuccessColorIdle": "#18995C",
+      "buttonPrimarySuccessColorHover": "#006E3E",
+      "buttonPrimaryNeutralBgColorIdle": "#232629",
+      "buttonPrimaryNeutralBgColorHover": "#4B525A",
+      "buttonTertiaryLabelColor": "#4B525A",
+      "buttonTertiaryBorderColorIdle": "#CED4DA",
+      "buttonTertiaryBorderColorHover": "#4B525A",
+      "buttonTertiarySuccessBgColorHover": "#CEF4E4",
+      "buttonTertiarySuccessBorderColor": "#18995C",
+      "buttonSecondaryBgColorHover": "#CED4DA",
+      "buttonSecondaryLabelColor": "#4B525A",
+      "buttonSecondaryBgColorIdle": "#E9ECEF",
+      "buttonLiveTickerLoadNewSurfaceColor": "#FFFFFF",
+      "buttonLiveTickerLoadNewLabelColor": "#8C9196",
+      "buttonGhostBgColorHover": "#CED4DA"
+    }
+  },
+  "sizing": {
+    "lg": {
+      "buttonLabelFontSize": "15px",
+      "buttonInlineSpace": "16px",
+      "partnerLinkButtonLabelFontSize": "18px",
+      "partnerLinkButtonLabelHeightSize": "48px",
+      "buttonBorderWidthSize": "2px",
+      "buttonContentMinHeightSize": "24px",
+      "partnerLinkButtonInlineSpace": "8px",
+      "buttonLabelLineHeight": "15px",
+      "buttonContentGapSpace": "6px",
+      "buttonStackSpace": "6px",
+      "buttonBorderRadius": "8px"
+    },
+    "md": {
+      "buttonLabelFontSize": "15px",
+      "buttonInlineSpace": "16px",
+      "partnerLinkButtonLabelFontSize": "16px",
+      "partnerLinkButtonLabelHeightSize": "48px",
+      "buttonBorderWidthSize": "2px",
+      "buttonContentMinHeightSize": "24px",
+      "partnerLinkButtonInlineSpace": "8px",
+      "buttonLabelLineHeight": "15px",
+      "buttonContentGapSpace": "6px",
+      "buttonStackSpace": "6px",
+      "buttonBorderRadius": "8px"
+    },
+    "sm": {
+      "buttonLabelFontSize": "15px",
+      "buttonInlineSpace": "16px",
+      "partnerLinkButtonLabelFontSize": "16px",
+      "partnerLinkButtonLabelHeightSize": "48px",
+      "buttonBorderWidthSize": "2px",
+      "buttonContentMinHeightSize": "24px",
+      "partnerLinkButtonInlineSpace": "8px",
+      "buttonLabelLineHeight": "15px",
+      "buttonContentGapSpace": "6px",
+      "buttonStackSpace": "6px",
+      "buttonBorderRadius": "8px"
+    },
+    "xs": {
+      "buttonLabelFontSize": "15px",
+      "buttonInlineSpace": "16px",
+      "partnerLinkButtonLabelFontSize": "16px",
+      "partnerLinkButtonLabelHeightSize": "48px",
+      "buttonBorderWidthSize": "2px",
+      "buttonContentMinHeightSize": "24px",
+      "partnerLinkButtonInlineSpace": "8px",
+      "buttonLabelLineHeight": "15px",
+      "buttonContentGapSpace": "6px",
+      "buttonStackSpace": "6px",
+      "buttonBorderRadius": "8px"
+    }
+  },
+  "density": {
+    "default": {
+      "densityButtonContentGapSpace": "8px",
+      "densityButtonStackSpace": "8px",
+      "densityButtonLabelFontSize": "17px",
+      "densityButtonInlineSpace": "20px"
+    },
+    "dense": {
+      "densityButtonContentGapSpace": "6px",
+      "densityButtonStackSpace": "6px",
+      "densityButtonLabelFontSize": "15px",
+      "densityButtonInlineSpace": "16px"
+    },
+    "spacious": {
+      "densityButtonContentGapSpace": "8px",
+      "densityButtonStackSpace": "12px",
+      "densityButtonLabelFontSize": "19px",
+      "densityButtonInlineSpace": "24px"
+    }
+  },
+  "typography": {
+    "lg": {
+      "buttonLabel": {
+        "fontFamily": "AntennaExtraCond",
+        "fontWeight": 700,
+        "fontSize": "15px",
+        "lineHeight": "15px"
+      },
+      "partnerLinkButtonLabel": {
+        "fontFamily": "AntennaExtraCond",
+        "fontWeight": 400,
+        "fontSize": "18px",
+        "lineHeight": "18px"
+      }
+    },
+    "md": {
+      "buttonLabel": {
+        "fontFamily": "AntennaExtraCond",
+        "fontWeight": 700,
+        "fontSize": "15px",
+        "lineHeight": "15px"
+      },
+      "partnerLinkButtonLabel": {
+        "fontFamily": "AntennaExtraCond",
+        "fontWeight": 400,
+        "fontSize": "16px",
+        "lineHeight": "16px"
+      }
+    },
+    "sm": {
+      "buttonLabel": {
+        "fontFamily": "AntennaExtraCond",
+        "fontWeight": 700,
+        "fontSize": "15px",
+        "lineHeight": "15px"
+      },
+      "partnerLinkButtonLabel": {
+        "fontFamily": "AntennaExtraCond",
+        "fontWeight": 400,
+        "fontSize": "16px",
+        "lineHeight": "16px"
+      }
+    },
+    "xs": {
+      "buttonLabel": {
+        "fontFamily": "AntennaExtraCond",
+        "fontWeight": 700,
+        "fontSize": "15px",
+        "lineHeight": "15px"
+      },
+      "partnerLinkButtonLabel": {
+        "fontFamily": "AntennaExtraCond",
+        "fontWeight": 400,
+        "fontSize": "16px",
+        "lineHeight": "16px"
+      }
+    }
+  }
+};
+
+export const getButtonTokens = (colorMode = 'light', breakpoint = 'md', density = 'default') => ({
+  ...Button.colors?.[colorMode],
+  ...Button.sizing?.[breakpoint],
+  ...Button.density?.[density],
+  ...Button.typography?.[breakpoint],
+  ...Button.effects?.[colorMode]
+});
+
+// Flat exports for tree-shaking
+export const buttonPrimaryBrandBgColorIdle = "#174482";
+export const buttonPrimaryBrandBgColorHover = "#0A2750";
+export const buttonPrimaryLabelColor = "#FFFFFF";
+export const buttonPrimarySuccessColorIdle = "#18995C";
+export const buttonPrimarySuccessColorHover = "#006E3E";
+export const buttonPrimaryNeutralBgColorIdle = "#232629";
+export const buttonPrimaryNeutralBgColorHover = "#4B525A";
+export const buttonTertiaryLabelColor = "#4B525A";
+export const buttonTertiaryBorderColorIdle = "#CED4DA";
+export const buttonTertiaryBorderColorHover = "#4B525A";
+export const buttonTertiarySuccessBgColorHover = "#CEF4E4";
+export const buttonTertiarySuccessBorderColor = "#18995C";
+export const buttonSecondaryBgColorHover = "#CED4DA";
+export const buttonSecondaryLabelColor = "#4B525A";
+export const buttonSecondaryBgColorIdle = "#E9ECEF";
+export const buttonLiveTickerLoadNewSurfaceColor = "#FFFFFF";
+export const buttonLiveTickerLoadNewLabelColor = "#8C9196";
+export const buttonGhostBgColorHover = "#CED4DA";
+export const buttonLabelFontSize = "15px";
+export const buttonInlineSpace = "16px";
+export const partnerLinkButtonLabelFontSize = "16px";
+export const partnerLinkButtonLabelHeightSize = "48px";
+export const buttonBorderWidthSize = "2px";
+export const buttonContentMinHeightSize = "24px";
+export const partnerLinkButtonInlineSpace = "8px";
+export const buttonLabelLineHeight = "15px";
+export const buttonContentGapSpace = "6px";
+export const buttonStackSpace = "6px";
+export const buttonBorderRadius = "8px";
+export const densityButtonContentGapSpace = "8px";
+export const densityButtonStackSpace = "8px";
+export const densityButtonLabelFontSize = "17px";
+export const densityButtonInlineSpace = "20px";
+
+export default Button;

package/dist/js/brands/sportbild/components/Card.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 CardTokens {
+  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 Card: CardTokens;
+export declare function getCardTokens(colorMode?: 'light' | 'dark', breakpoint?: 'xs' | 'sm' | 'md' | 'lg', density?: 'default' | 'dense' | 'spacious'): Record<string, any>;
+
+// Flat exports
+export declare const searchResultCardImageWidthSize: string | number;
+export declare const searchResultCardImageHeightSizeStacked: string | number;
+export declare const newstickerImageCardWidthSize: string | number;
+export declare const cardSurfaceBgColor: string | number;
+
+export default Card;

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

@@ -0,0 +1,61 @@
+/**
+ * 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: Card
+// Brand: sportbild
+
+export const Card = {
+  "colors": {
+    "dark": {
+      "cardSurfaceBgColor": "#0A2750"
+    },
+    "light": {
+      "cardSurfaceBgColor": "#FFFFFF"
+    }
+  },
+  "sizing": {
+    "lg": {
+      "searchResultCardImageWidthSize": "260px",
+      "searchResultCardImageHeightSizeStacked": "189px",
+      "newstickerImageCardWidthSize": "206px"
+    },
+    "md": {
+      "searchResultCardImageWidthSize": "216px",
+      "searchResultCardImageHeightSizeStacked": "189px",
+      "newstickerImageCardWidthSize": "206px"
+    },
+    "sm": {
+      "searchResultCardImageWidthSize": "216px",
+      "searchResultCardImageHeightSizeStacked": "189px",
+      "newstickerImageCardWidthSize": "206px"
+    },
+    "xs": {
+      "searchResultCardImageWidthSize": "216px",
+      "searchResultCardImageHeightSizeStacked": "189px",
+      "newstickerImageCardWidthSize": "206px"
+    }
+  }
+};
+
+export const getCardTokens = (colorMode = 'light', breakpoint = 'md', density = 'default') => ({
+  ...Card.colors?.[colorMode],
+  ...Card.sizing?.[breakpoint],
+  ...Card.density?.[density],
+  ...Card.typography?.[breakpoint],
+  ...Card.effects?.[colorMode]
+});
+
+// Flat exports for tree-shaking
+export const cardSurfaceBgColor = "#FFFFFF";
+export const searchResultCardImageWidthSize = "216px";
+export const searchResultCardImageHeightSizeStacked = "189px";
+export const newstickerImageCardWidthSize = "206px";
+
+export default Card;

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

@@ -0,0 +1,28 @@
+/**
+ * TypeScript definitions for BILD Design System Tokens
+ * Auto-generated - Do not edit directly
+ */
+
+import type { ColorValue, SpacingValue, TypographyStyle, ShadowLayer } from '../../../types';
+
+export interface CarouselTokens {
+  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 Carousel: CarouselTokens;
+export declare function getCarouselTokens(colorMode?: 'light' | 'dark', breakpoint?: 'xs' | 'sm' | 'md' | 'lg', density?: 'default' | 'dense' | 'spacious'): Record<string, any>;
+
+// Flat exports
+export declare const galleryTeaserTitleBottomSpace: string | number;
+export declare const galleryTeaserAppGapSpace: string | number;
+export declare const appEpaperCarouselItemFocusWidth: string | number;
+export declare const appEpaperCarouselItemDefaultWidth: string | number;
+export declare const appEpaperCarouseBeilageItemWidth: string | number;
+export declare const standardTeaserGalleryTeaserWidthWeb: string | number;
+export declare const standardTeaserGalleryTeaserWidthApp: string | number;
+
+export default Carousel;

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

@@ -0,0 +1,72 @@
+/**
+ * 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: Carousel
+// Brand: sportbild
+
+export const Carousel = {
+  "sizing": {
+    "lg": {
+      "galleryTeaserTitleBottomSpace": "36px",
+      "galleryTeaserAppGapSpace": "8px",
+      "appEpaperCarouselItemFocusWidth": "240px",
+      "appEpaperCarouselItemDefaultWidth": "172px",
+      "appEpaperCarouseBeilageItemWidth": "172px",
+      "standardTeaserGalleryTeaserWidthWeb": "300px",
+      "standardTeaserGalleryTeaserWidthApp": "464px"
+    },
+    "md": {
+      "galleryTeaserTitleBottomSpace": "36px",
+      "galleryTeaserAppGapSpace": "8px",
+      "appEpaperCarouselItemFocusWidth": "240px",
+      "appEpaperCarouselItemDefaultWidth": "172px",
+      "appEpaperCarouseBeilageItemWidth": "172px",
+      "standardTeaserGalleryTeaserWidthWeb": "260px",
+      "standardTeaserGalleryTeaserWidthApp": "280px"
+    },
+    "sm": {
+      "galleryTeaserTitleBottomSpace": "28px",
+      "galleryTeaserAppGapSpace": "0px",
+      "appEpaperCarouselItemFocusWidth": "182px",
+      "appEpaperCarouselItemDefaultWidth": "144px",
+      "appEpaperCarouseBeilageItemWidth": "110px",
+      "standardTeaserGalleryTeaserWidthWeb": "145px",
+      "standardTeaserGalleryTeaserWidthApp": "280px"
+    },
+    "xs": {
+      "galleryTeaserTitleBottomSpace": "28px",
+      "galleryTeaserAppGapSpace": "0px",
+      "appEpaperCarouselItemFocusWidth": "182px",
+      "appEpaperCarouselItemDefaultWidth": "144px",
+      "appEpaperCarouseBeilageItemWidth": "110px",
+      "standardTeaserGalleryTeaserWidthWeb": "145px",
+      "standardTeaserGalleryTeaserWidthApp": "280px"
+    }
+  }
+};
+
+export const getCarouselTokens = (colorMode = 'light', breakpoint = 'md', density = 'default') => ({
+  ...Carousel.colors?.[colorMode],
+  ...Carousel.sizing?.[breakpoint],
+  ...Carousel.density?.[density],
+  ...Carousel.typography?.[breakpoint],
+  ...Carousel.effects?.[colorMode]
+});
+
+// Flat exports for tree-shaking
+export const galleryTeaserTitleBottomSpace = "28px";
+export const galleryTeaserAppGapSpace = "0px";
+export const appEpaperCarouselItemFocusWidth = "182px";
+export const appEpaperCarouselItemDefaultWidth = "144px";
+export const appEpaperCarouseBeilageItemWidth = "110px";
+export const standardTeaserGalleryTeaserWidthWeb = "145px";
+export const standardTeaserGalleryTeaserWidthApp = "280px";
+
+export default Carousel;

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

@@ -0,0 +1,29 @@
+/**
+ * TypeScript definitions for BILD Design System Tokens
+ * Auto-generated - Do not edit directly
+ */
+
+import type { ColorValue, SpacingValue, TypographyStyle, ShadowLayer } from '../../../types';
+
+export interface ChipTokens {
+  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 Chip: ChipTokens;
+export declare function getChipTokens(colorMode?: 'light' | 'dark', breakpoint?: 'xs' | 'sm' | 'md' | 'lg', density?: 'default' | 'dense' | 'spacious'): Record<string, any>;
+
+// Flat exports
+export declare const chipFontSize: string | number;
+export declare const chipInlineSpace: string | number;
+export declare const chipStackSpace: string | number;
+export declare const chipBgColorHover: string | number;
+export declare const chipLabelColorHover: string | number;
+export declare const chipBgColorActive: string | number;
+export declare const chipBgColorIdle: string | number;
+export declare const chipLabelColorIdle: string | number;
+
+export default Chip;

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

@@ -0,0 +1,107 @@
+/**
+ * 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: Chip
+// Brand: sportbild
+
+export const Chip = {
+  "colors": {
+    "dark": {
+      "chipBgColorHover": "#CED4DA",
+      "chipLabelColorHover": "#081828",
+      "chipBgColorActive": "#315998",
+      "chipBgColorIdle": "#4B525A",
+      "chipLabelColorIdle": "#FFFFFF"
+    },
+    "light": {
+      "chipBgColorHover": "#AF0002",
+      "chipLabelColorHover": "#FFFFFF",
+      "chipBgColorActive": "#174482",
+      "chipBgColorIdle": "#E9ECEF",
+      "chipLabelColorIdle": "#232629"
+    }
+  },
+  "sizing": {
+    "lg": {
+      "chipFontSize": "18px",
+      "chipInlineSpace": "12px",
+      "chipStackSpace": "8px"
+    },
+    "md": {
+      "chipFontSize": "16px",
+      "chipInlineSpace": "12px",
+      "chipStackSpace": "8px"
+    },
+    "sm": {
+      "chipFontSize": "16px",
+      "chipInlineSpace": "12px",
+      "chipStackSpace": "8px"
+    },
+    "xs": {
+      "chipFontSize": "16px",
+      "chipInlineSpace": "12px",
+      "chipStackSpace": "8px"
+    }
+  },
+  "typography": {
+    "lg": {
+      "chipLabel": {
+        "fontFamily": "Inter",
+        "fontWeight": 700,
+        "fontSize": "18px",
+        "lineHeight": "null"
+      }
+    },
+    "md": {
+      "chipLabel": {
+        "fontFamily": "Inter",
+        "fontWeight": 700,
+        "fontSize": "16px",
+        "lineHeight": "null"
+      }
+    },
+    "sm": {
+      "chipLabel": {
+        "fontFamily": "Inter",
+        "fontWeight": 700,
+        "fontSize": "16px",
+        "lineHeight": "null"
+      }
+    },
+    "xs": {
+      "chipLabel": {
+        "fontFamily": "Inter",
+        "fontWeight": 700,
+        "fontSize": "16px",
+        "lineHeight": "null"
+      }
+    }
+  }
+};
+
+export const getChipTokens = (colorMode = 'light', breakpoint = 'md', density = 'default') => ({
+  ...Chip.colors?.[colorMode],
+  ...Chip.sizing?.[breakpoint],
+  ...Chip.density?.[density],
+  ...Chip.typography?.[breakpoint],
+  ...Chip.effects?.[colorMode]
+});
+
+// Flat exports for tree-shaking
+export const chipBgColorHover = "#AF0002";
+export const chipLabelColorHover = "#FFFFFF";
+export const chipBgColorActive = "#174482";
+export const chipBgColorIdle = "#E9ECEF";
+export const chipLabelColorIdle = "#232629";
+export const chipFontSize = "16px";
+export const chipInlineSpace = "12px";
+export const chipStackSpace = "8px";
+
+export default Chip;

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

@@ -0,0 +1,24 @@
+/**
+ * TypeScript definitions for BILD Design System Tokens
+ * Auto-generated - Do not edit directly
+ */
+
+import type { ColorValue, SpacingValue, TypographyStyle, ShadowLayer } from '../../../types';
+
+export interface DatepickerTokens {
+  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 Datepicker: DatepickerTokens;
+export declare function getDatepickerTokens(colorMode?: 'light' | 'dark', breakpoint?: 'xs' | 'sm' | 'md' | 'lg', density?: 'default' | 'dense' | 'spacious'): Record<string, any>;
+
+// Flat exports
+export declare const datepickerItemDayWidthSize: string | number;
+export declare const datepickerItemHeightSize: string | number;
+export declare const datepickerItemYearWidthSize: string | number;
+
+export default Datepicker;

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

@@ -0,0 +1,52 @@
+/**
+ * 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: Datepicker
+// Brand: sportbild
+
+export const Datepicker = {
+  "sizing": {
+    "lg": {
+      "datepickerItemDayWidthSize": "44px",
+      "datepickerItemHeightSize": "44px",
+      "datepickerItemYearWidthSize": "77px"
+    },
+    "md": {
+      "datepickerItemDayWidthSize": "44px",
+      "datepickerItemHeightSize": "44px",
+      "datepickerItemYearWidthSize": "77px"
+    },
+    "sm": {
+      "datepickerItemDayWidthSize": "44px",
+      "datepickerItemHeightSize": "44px",
+      "datepickerItemYearWidthSize": "77px"
+    },
+    "xs": {
+      "datepickerItemDayWidthSize": "44px",
+      "datepickerItemHeightSize": "44px",
+      "datepickerItemYearWidthSize": "77px"
+    }
+  }
+};
+
+export const getDatepickerTokens = (colorMode = 'light', breakpoint = 'md', density = 'default') => ({
+  ...Datepicker.colors?.[colorMode],
+  ...Datepicker.sizing?.[breakpoint],
+  ...Datepicker.density?.[density],
+  ...Datepicker.typography?.[breakpoint],
+  ...Datepicker.effects?.[colorMode]
+});
+
+// Flat exports for tree-shaking
+export const datepickerItemDayWidthSize = "44px";
+export const datepickerItemHeightSize = "44px";
+export const datepickerItemYearWidthSize = "77px";
+
+export default Datepicker;

package/dist/js/brands/sportbild/components/Drawers.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 DrawersTokens {
+  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 Drawers: DrawersTokens;
+export declare function getDrawersTokens(colorMode?: 'light' | 'dark', breakpoint?: 'xs' | 'sm' | 'md' | 'lg', density?: 'default' | 'dense' | 'spacious'): Record<string, any>;
+
+// Flat exports
+export declare const mobileMenuDrawerStackSpace: string | number;
+export declare const mobileMenuDrawerLeftInlineSpace: string | number;
+export declare const mobileMenuDrawerRightInlineSpace: string | number;
+export declare const mobileMenuDrawerMaxWidthSize: string | number;
+
+export default Drawers;