@marioschmidt/design-system-tokens 1.0.64 → 1.0.65

package/dist/js/brands/advertorial/components/BreakingNews.js

@@ -0,0 +1,164 @@
+/**
+ * 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: BreakingNews
+// Brand: advertorial
+
+export const BreakingNews = {
+  "sizing": {
+    "lg": {
+      "breakingNewsContainerHeightSize": "56px",
+      "breakingNewsBadgeUpperTitleFontSize": "17px",
+      "breakingNewsBadgeLowerTitleFontSize": "30px",
+      "breakingNewsBadgeUpperTitleLineHeight": "12px",
+      "breakingNewsBadgeLowerTitleLineHeight": "21px",
+      "breakingNewsBadgeTitelsStackSpace": "4px",
+      "breakingNewsScrollingTextFontSize": "21px",
+      "breakingNewsScrollingTextLineHeight": "24px",
+      "breakingNewsBadgeInlineSpace": "26px"
+    },
+    "md": {
+      "breakingNewsContainerHeightSize": "56px",
+      "breakingNewsBadgeUpperTitleFontSize": "17px",
+      "breakingNewsBadgeLowerTitleFontSize": "30px",
+      "breakingNewsBadgeUpperTitleLineHeight": "12px",
+      "breakingNewsBadgeLowerTitleLineHeight": "21px",
+      "breakingNewsBadgeTitelsStackSpace": "4px",
+      "breakingNewsScrollingTextFontSize": "21px",
+      "breakingNewsScrollingTextLineHeight": "24px",
+      "breakingNewsBadgeInlineSpace": "12px"
+    },
+    "sm": {
+      "breakingNewsContainerHeightSize": "56px",
+      "breakingNewsBadgeUpperTitleFontSize": "13px",
+      "breakingNewsBadgeLowerTitleFontSize": "23px",
+      "breakingNewsBadgeUpperTitleLineHeight": "13px",
+      "breakingNewsBadgeLowerTitleLineHeight": "21px",
+      "breakingNewsBadgeTitelsStackSpace": "0px",
+      "breakingNewsScrollingTextFontSize": "21px",
+      "breakingNewsScrollingTextLineHeight": "24px",
+      "breakingNewsBadgeInlineSpace": "6px"
+    },
+    "xs": {
+      "breakingNewsContainerHeightSize": "56px",
+      "breakingNewsBadgeUpperTitleFontSize": "13px",
+      "breakingNewsBadgeLowerTitleFontSize": "23px",
+      "breakingNewsBadgeUpperTitleLineHeight": "13px",
+      "breakingNewsBadgeLowerTitleLineHeight": "21px",
+      "breakingNewsBadgeTitelsStackSpace": "0px",
+      "breakingNewsScrollingTextFontSize": "21px",
+      "breakingNewsScrollingTextLineHeight": "24px",
+      "breakingNewsBadgeInlineSpace": "6px"
+    }
+  },
+  "typography": {
+    "lg": {
+      "breakingNewsText": {
+        "fontFamily": "Lucida Grande",
+        "fontWeight": 700,
+        "fontSize": "21px",
+        "lineHeight": "24px"
+      },
+      "breakingNewsUpperTitle": {
+        "fontFamily": "Lucida Grande",
+        "fontWeight": 800,
+        "fontSize": "17px",
+        "lineHeight": "12px"
+      },
+      "breakingNewsLowerTitle": {
+        "fontFamily": "Lucida Grande",
+        "fontWeight": 800,
+        "fontSize": "30px",
+        "lineHeight": "21px"
+      }
+    },
+    "md": {
+      "breakingNewsText": {
+        "fontFamily": "Lucida Grande",
+        "fontWeight": 700,
+        "fontSize": "21px",
+        "lineHeight": "24px"
+      },
+      "breakingNewsUpperTitle": {
+        "fontFamily": "Lucida Grande",
+        "fontWeight": 800,
+        "fontSize": "17px",
+        "lineHeight": "12px"
+      },
+      "breakingNewsLowerTitle": {
+        "fontFamily": "Lucida Grande",
+        "fontWeight": 800,
+        "fontSize": "30px",
+        "lineHeight": "21px"
+      }
+    },
+    "sm": {
+      "breakingNewsText": {
+        "fontFamily": "Lucida Grande",
+        "fontWeight": 700,
+        "fontSize": "21px",
+        "lineHeight": "24px"
+      },
+      "breakingNewsUpperTitle": {
+        "fontFamily": "Lucida Grande",
+        "fontWeight": 800,
+        "fontSize": "13px",
+        "lineHeight": "13px"
+      },
+      "breakingNewsLowerTitle": {
+        "fontFamily": "Lucida Grande",
+        "fontWeight": 800,
+        "fontSize": "23px",
+        "lineHeight": "21px"
+      }
+    },
+    "xs": {
+      "breakingNewsText": {
+        "fontFamily": "Lucida Grande",
+        "fontWeight": 700,
+        "fontSize": "21px",
+        "lineHeight": "24px"
+      },
+      "breakingNewsUpperTitle": {
+        "fontFamily": "Lucida Grande",
+        "fontWeight": 800,
+        "fontSize": "13px",
+        "lineHeight": "13px"
+      },
+      "breakingNewsLowerTitle": {
+        "fontFamily": "Lucida Grande",
+        "fontWeight": 800,
+        "fontSize": "23px",
+        "lineHeight": "21px"
+      }
+    }
+  }
+};
+
+export const getBreakingNewsTokens = (colorMode = 'light', breakpoint = 'md', density = 'default') => ({
+  ...BreakingNews.colors?.[colorMode],
+  ...BreakingNews.sizing?.[breakpoint],
+  ...BreakingNews.density?.[density],
+  ...BreakingNews.typography?.[breakpoint],
+  ...BreakingNews.effects?.[colorMode]
+});
+
+// Flat exports for tree-shaking
+export const breakingNewsContainerHeightSize = "56px";
+export const breakingNewsBadgeUpperTitleFontSize = "13px";
+export const breakingNewsBadgeLowerTitleFontSize = "23px";
+export const breakingNewsBadgeUpperTitleLineHeight = "13px";
+export const breakingNewsBadgeLowerTitleLineHeight = "21px";
+export const breakingNewsBadgeTitelsStackSpace = "0px";
+export const breakingNewsScrollingTextFontSize = "21px";
+export const breakingNewsScrollingTextLineHeight = "24px";
+export const breakingNewsBadgeInlineSpace = "6px";
+
+export default BreakingNews;

package/dist/js/brands/advertorial/components/Button.d.ts

@@ -0,0 +1,36 @@
+/**
+ * TypeScript definitions for BILD Design System Tokens
+ * Auto-generated - Do not edit directly
+ */
+
+import type { ColorValue, SpacingValue, TypographyStyle, ShadowLayer } from '../../../types';
+
+export interface ButtonTokens {
+  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 Button: ButtonTokens;
+export declare function getButtonTokens(colorMode?: 'light' | 'dark', breakpoint?: 'xs' | 'sm' | 'md' | 'lg', density?: 'default' | 'dense' | 'spacious'): Record<string, any>;
+
+// Flat exports
+export declare const buttonLabelFontSize: string | number;
+export declare const buttonInlineSpace: string | number;
+export declare const partnerLinkButtonLabelFontSize: string | number;
+export declare const partnerLinkButtonLabelHeightSize: string | number;
+export declare const buttonBorderWidthSize: string | number;
+export declare const buttonContentMinHeightSize: string | number;
+export declare const partnerLinkButtonInlineSpace: string | number;
+export declare const buttonLabelLineHeight: string | number;
+export declare const buttonContentGapSpace: string | number;
+export declare const buttonStackSpace: string | number;
+export declare const buttonBorderRadius: string | number;
+export declare const densityButtonContentGapSpace: string | number;
+export declare const densityButtonStackSpace: string | number;
+export declare const densityButtonLabelFontSize: string | number;
+export declare const densityButtonInlineSpace: string | number;
+
+export default Button;

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

@@ -0,0 +1,174 @@
+/**
+ * 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: advertorial
+
+export const Button = {
+  "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": "Lucida Grande",
+        "fontWeight": 700,
+        "fontSize": "15px",
+        "lineHeight": "15px"
+      },
+      "partnerLinkButtonLabel": {
+        "fontFamily": "Lucida Grande",
+        "fontWeight": 400,
+        "fontSize": "18px",
+        "lineHeight": "18px"
+      }
+    },
+    "md": {
+      "buttonLabel": {
+        "fontFamily": "Lucida Grande",
+        "fontWeight": 700,
+        "fontSize": "15px",
+        "lineHeight": "15px"
+      },
+      "partnerLinkButtonLabel": {
+        "fontFamily": "Lucida Grande",
+        "fontWeight": 400,
+        "fontSize": "16px",
+        "lineHeight": "16px"
+      }
+    },
+    "sm": {
+      "buttonLabel": {
+        "fontFamily": "Lucida Grande",
+        "fontWeight": 700,
+        "fontSize": "15px",
+        "lineHeight": "15px"
+      },
+      "partnerLinkButtonLabel": {
+        "fontFamily": "Lucida Grande",
+        "fontWeight": 400,
+        "fontSize": "16px",
+        "lineHeight": "16px"
+      }
+    },
+    "xs": {
+      "buttonLabel": {
+        "fontFamily": "Lucida Grande",
+        "fontWeight": 700,
+        "fontSize": "15px",
+        "lineHeight": "15px"
+      },
+      "partnerLinkButtonLabel": {
+        "fontFamily": "Lucida Grande",
+        "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 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/advertorial/components/Card.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 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 default Card;

package/dist/js/brands/advertorial/components/Card.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: Card
+// Brand: advertorial
+
+export const Card = {
+  "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 searchResultCardImageWidthSize = "216px";
+export const searchResultCardImageHeightSizeStacked = "189px";
+export const newstickerImageCardWidthSize = "206px";
+
+export default Card;

package/dist/js/brands/advertorial/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/advertorial/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: advertorial
+
+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/advertorial/components/Chip.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 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 default Chip;

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

@@ -0,0 +1,86 @@
+/**
+ * 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: advertorial
+
+export const Chip = {
+  "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": "Lucida Grande",
+        "fontWeight": 700,
+        "fontSize": "18px",
+        "lineHeight": "null"
+      }
+    },
+    "md": {
+      "chipLabel": {
+        "fontFamily": "Lucida Grande",
+        "fontWeight": 700,
+        "fontSize": "16px",
+        "lineHeight": "null"
+      }
+    },
+    "sm": {
+      "chipLabel": {
+        "fontFamily": "Lucida Grande",
+        "fontWeight": 700,
+        "fontSize": "16px",
+        "lineHeight": "null"
+      }
+    },
+    "xs": {
+      "chipLabel": {
+        "fontFamily": "Lucida Grande",
+        "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 chipFontSize = "16px";
+export const chipInlineSpace = "12px";
+export const chipStackSpace = "8px";
+
+export default Chip;