@marioschmidt/design-system-tokens 1.0.64 → 1.0.65

package/dist/js/brands/bild/components/Quote.js

@@ -0,0 +1,57 @@
+/**
+ * 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: Quote
+// Brand: bild
+
+export const Quote = {
+  "sizing": {
+    "lg": {
+      "quoteContainerInlineSpace": "28px",
+      "quoteContainerStackSpace": "32px",
+      "quoteQuotationMarksFontSize": "36px",
+      "quoteContentGapSpace": "48px"
+    },
+    "md": {
+      "quoteContainerInlineSpace": "16px",
+      "quoteContainerStackSpace": "24px",
+      "quoteQuotationMarksFontSize": "32px",
+      "quoteContentGapSpace": "48px"
+    },
+    "sm": {
+      "quoteContainerInlineSpace": "16px",
+      "quoteContainerStackSpace": "16px",
+      "quoteQuotationMarksFontSize": "28px",
+      "quoteContentGapSpace": "16px"
+    },
+    "xs": {
+      "quoteContainerInlineSpace": "16px",
+      "quoteContainerStackSpace": "16px",
+      "quoteQuotationMarksFontSize": "28px",
+      "quoteContentGapSpace": "16px"
+    }
+  }
+};
+
+export const getQuoteTokens = (colorMode = 'light', breakpoint = 'md', density = 'default') => ({
+  ...Quote.colors?.[colorMode],
+  ...Quote.sizing?.[breakpoint],
+  ...Quote.density?.[density],
+  ...Quote.typography?.[breakpoint],
+  ...Quote.effects?.[colorMode]
+});
+
+// Flat exports for tree-shaking
+export const quoteContainerInlineSpace = "16px";
+export const quoteContainerStackSpace = "16px";
+export const quoteQuotationMarksFontSize = "28px";
+export const quoteContentGapSpace = "16px";
+
+export default Quote;

package/dist/js/brands/bild/components/RadioButton.d.ts

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

package/dist/js/brands/bild/components/RadioButton.js

@@ -0,0 +1,47 @@
+/**
+ * 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: RadioButton
+// Brand: bild
+
+export const RadioButton = {
+  "sizing": {
+    "lg": {
+      "radioSelectorSize": "20px",
+      "radioSelectorDotActiveSize": "12px"
+    },
+    "md": {
+      "radioSelectorSize": "20px",
+      "radioSelectorDotActiveSize": "12px"
+    },
+    "sm": {
+      "radioSelectorSize": "20px",
+      "radioSelectorDotActiveSize": "12px"
+    },
+    "xs": {
+      "radioSelectorSize": "20px",
+      "radioSelectorDotActiveSize": "12px"
+    }
+  }
+};
+
+export const getRadioButtonTokens = (colorMode = 'light', breakpoint = 'md', density = 'default') => ({
+  ...RadioButton.colors?.[colorMode],
+  ...RadioButton.sizing?.[breakpoint],
+  ...RadioButton.density?.[density],
+  ...RadioButton.typography?.[breakpoint],
+  ...RadioButton.effects?.[colorMode]
+});
+
+// Flat exports for tree-shaking
+export const radioSelectorSize = "20px";
+export const radioSelectorDotActiveSize = "12px";
+
+export default RadioButton;

package/dist/js/brands/bild/components/Search.d.ts

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

package/dist/js/brands/bild/components/Search.js

@@ -0,0 +1,42 @@
+/**
+ * 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: Search
+// Brand: bild
+
+export const Search = {
+  "sizing": {
+    "lg": {
+      "searchResultBadgeHeightSize": "18px"
+    },
+    "md": {
+      "searchResultBadgeHeightSize": "18px"
+    },
+    "sm": {
+      "searchResultBadgeHeightSize": "18px"
+    },
+    "xs": {
+      "searchResultBadgeHeightSize": "18px"
+    }
+  }
+};
+
+export const getSearchTokens = (colorMode = 'light', breakpoint = 'md', density = 'default') => ({
+  ...Search.colors?.[colorMode],
+  ...Search.sizing?.[breakpoint],
+  ...Search.density?.[density],
+  ...Search.typography?.[breakpoint],
+  ...Search.effects?.[colorMode]
+});
+
+// Flat exports for tree-shaking
+export const searchResultBadgeHeightSize = "18px";
+
+export default Search;

package/dist/js/brands/bild/components/SectionTitle.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 SectionTitleTokens {
+  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 SectionTitle: SectionTitleTokens;
+export declare function getSectionTitleTokens(colorMode?: 'light' | 'dark', breakpoint?: 'xs' | 'sm' | 'md' | 'lg', density?: 'default' | 'dense' | 'spacious'): Record<string, any>;
+
+// Flat exports
+export declare const sectionTitleInnerStackBottomSpace: string | number;
+export declare const sectionTitleHeightSize: string | number;
+export declare const sectionTitle&ArrowInlineSpace: string | number;
+export declare const sectionTitle&ArrowInlineSpaceActive: string | number;
+
+export default SectionTitle;

package/dist/js/brands/bild/components/SectionTitle.js

@@ -0,0 +1,57 @@
+/**
+ * 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: SectionTitle
+// Brand: bild
+
+export const SectionTitle = {
+  "sizing": {
+    "lg": {
+      "sectionTitleInnerStackBottomSpace": "12px",
+      "sectionTitleHeightSize": "40px",
+      "sectionTitle&ArrowInlineSpace": "5px",
+      "sectionTitle&ArrowInlineSpaceActive": "8px"
+    },
+    "md": {
+      "sectionTitleInnerStackBottomSpace": "12px",
+      "sectionTitleHeightSize": "32px",
+      "sectionTitle&ArrowInlineSpace": "5px",
+      "sectionTitle&ArrowInlineSpaceActive": "5px"
+    },
+    "sm": {
+      "sectionTitleInnerStackBottomSpace": "12px",
+      "sectionTitleHeightSize": "32px",
+      "sectionTitle&ArrowInlineSpace": "5px",
+      "sectionTitle&ArrowInlineSpaceActive": "5px"
+    },
+    "xs": {
+      "sectionTitleInnerStackBottomSpace": "12px",
+      "sectionTitleHeightSize": "32px",
+      "sectionTitle&ArrowInlineSpace": "5px",
+      "sectionTitle&ArrowInlineSpaceActive": "5px"
+    }
+  }
+};
+
+export const getSectionTitleTokens = (colorMode = 'light', breakpoint = 'md', density = 'default') => ({
+  ...SectionTitle.colors?.[colorMode],
+  ...SectionTitle.sizing?.[breakpoint],
+  ...SectionTitle.density?.[density],
+  ...SectionTitle.typography?.[breakpoint],
+  ...SectionTitle.effects?.[colorMode]
+});
+
+// Flat exports for tree-shaking
+export const sectionTitleInnerStackBottomSpace = "12px";
+export const sectionTitleHeightSize = "32px";
+export const sectionTitle&ArrowInlineSpace = "5px";
+export const sectionTitle&ArrowInlineSpaceActive = "5px";
+
+export default SectionTitle;

package/dist/js/brands/bild/components/Selection.d.ts

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

package/dist/js/brands/bild/components/Selection.js

@@ -0,0 +1,36 @@
+/**
+ * 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: Selection
+// Brand: bild
+
+export const Selection = {
+  "colors": {
+    "dark": {
+      "selectionBorderColor": "#8C9196"
+    },
+    "light": {
+      "selectionBorderColor": "#4B525A"
+    }
+  }
+};
+
+export const getSelectionTokens = (colorMode = 'light', breakpoint = 'md', density = 'default') => ({
+  ...Selection.colors?.[colorMode],
+  ...Selection.sizing?.[breakpoint],
+  ...Selection.density?.[density],
+  ...Selection.typography?.[breakpoint],
+  ...Selection.effects?.[colorMode]
+});
+
+// Flat exports for tree-shaking
+export const selectionBorderColor = "#4B525A";
+
+export default Selection;

package/dist/js/brands/bild/components/Separator.d.ts

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

package/dist/js/brands/bild/components/Separator.js

@@ -0,0 +1,42 @@
+/**
+ * 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: Separator
+// Brand: bild
+
+export const Separator = {
+  "sizing": {
+    "lg": {
+      "separatorThicknessSize": "2px"
+    },
+    "md": {
+      "separatorThicknessSize": "2px"
+    },
+    "sm": {
+      "separatorThicknessSize": "2px"
+    },
+    "xs": {
+      "separatorThicknessSize": "2px"
+    }
+  }
+};
+
+export const getSeparatorTokens = (colorMode = 'light', breakpoint = 'md', density = 'default') => ({
+  ...Separator.colors?.[colorMode],
+  ...Separator.sizing?.[breakpoint],
+  ...Separator.density?.[density],
+  ...Separator.typography?.[breakpoint],
+  ...Separator.effects?.[colorMode]
+});
+
+// Flat exports for tree-shaking
+export const separatorThicknessSize = "2px";
+
+export default Separator;

package/dist/js/brands/bild/components/Skeletons.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 SkeletonsTokens {
+  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 Skeletons: SkeletonsTokens;
+export declare function getSkeletonsTokens(colorMode?: 'light' | 'dark', breakpoint?: 'xs' | 'sm' | 'md' | 'lg', density?: 'default' | 'dense' | 'spacious'): Record<string, any>;
+
+// Flat exports
+export declare const headlinesSkeletonImagePlaceholderMaxWidth: string | number;
+export declare const articleSkeletonImageInlineSpace: string | number;
+export declare const articleSkeletonTextInlineSpace: string | number;
+export declare const articleTextSkeletonHeightSize: string | number;
+
+export default Skeletons;

package/dist/js/brands/bild/components/Skeletons.js

@@ -0,0 +1,57 @@
+/**
+ * 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: Skeletons
+// Brand: bild
+
+export const Skeletons = {
+  "sizing": {
+    "lg": {
+      "headlinesSkeletonImagePlaceholderMaxWidth": "160px",
+      "articleSkeletonImageInlineSpace": "48px",
+      "articleSkeletonTextInlineSpace": "48px",
+      "articleTextSkeletonHeightSize": "720px"
+    },
+    "md": {
+      "headlinesSkeletonImagePlaceholderMaxWidth": "160px",
+      "articleSkeletonImageInlineSpace": "48px",
+      "articleSkeletonTextInlineSpace": "48px",
+      "articleTextSkeletonHeightSize": "720px"
+    },
+    "sm": {
+      "headlinesSkeletonImagePlaceholderMaxWidth": "282px",
+      "articleSkeletonImageInlineSpace": "12px",
+      "articleSkeletonTextInlineSpace": "0px",
+      "articleTextSkeletonHeightSize": "270px"
+    },
+    "xs": {
+      "headlinesSkeletonImagePlaceholderMaxWidth": "282px",
+      "articleSkeletonImageInlineSpace": "12px",
+      "articleSkeletonTextInlineSpace": "0px",
+      "articleTextSkeletonHeightSize": "270px"
+    }
+  }
+};
+
+export const getSkeletonsTokens = (colorMode = 'light', breakpoint = 'md', density = 'default') => ({
+  ...Skeletons.colors?.[colorMode],
+  ...Skeletons.sizing?.[breakpoint],
+  ...Skeletons.density?.[density],
+  ...Skeletons.typography?.[breakpoint],
+  ...Skeletons.effects?.[colorMode]
+});
+
+// Flat exports for tree-shaking
+export const headlinesSkeletonImagePlaceholderMaxWidth = "282px";
+export const articleSkeletonImageInlineSpace = "12px";
+export const articleSkeletonTextInlineSpace = "0px";
+export const articleTextSkeletonHeightSize = "270px";
+
+export default Skeletons;

package/dist/js/brands/bild/components/Slider.d.ts

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

package/dist/js/brands/bild/components/Slider.js

@@ -0,0 +1,69 @@
+/**
+ * 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: Slider
+// Brand: bild
+
+export const Slider = {
+  "colors": {
+    "dark": {
+      "sliderButtonOpacity": 90,
+      "sliderTrackBgColor": "rgba(255, 255, 255, 0.35)"
+    },
+    "light": {
+      "sliderButtonOpacity": 90,
+      "sliderTrackBgColor": "rgba(255, 255, 255, 0.35)"
+    }
+  },
+  "sizing": {
+    "lg": {
+      "sliderProgressBarIdleHeightSize": "4px",
+      "sliderProgressBarHoverHeightSize": "8px",
+      "sliderProgressInactiveHeightSize": "2px",
+      "vidPlayerProgressBarHeightSize": "12px"
+    },
+    "md": {
+      "sliderProgressBarIdleHeightSize": "4px",
+      "sliderProgressBarHoverHeightSize": "8px",
+      "sliderProgressInactiveHeightSize": "2px",
+      "vidPlayerProgressBarHeightSize": "12px"
+    },
+    "sm": {
+      "sliderProgressBarIdleHeightSize": "4px",
+      "sliderProgressBarHoverHeightSize": "8px",
+      "sliderProgressInactiveHeightSize": "2px",
+      "vidPlayerProgressBarHeightSize": "12px"
+    },
+    "xs": {
+      "sliderProgressBarIdleHeightSize": "4px",
+      "sliderProgressBarHoverHeightSize": "8px",
+      "sliderProgressInactiveHeightSize": "2px",
+      "vidPlayerProgressBarHeightSize": "12px"
+    }
+  }
+};
+
+export const getSliderTokens = (colorMode = 'light', breakpoint = 'md', density = 'default') => ({
+  ...Slider.colors?.[colorMode],
+  ...Slider.sizing?.[breakpoint],
+  ...Slider.density?.[density],
+  ...Slider.typography?.[breakpoint],
+  ...Slider.effects?.[colorMode]
+});
+
+// Flat exports for tree-shaking
+export const sliderButtonOpacity = 90;
+export const sliderTrackBgColor = "rgba(255, 255, 255, 0.35)";
+export const sliderProgressBarIdleHeightSize = "4px";
+export const sliderProgressBarHoverHeightSize = "8px";
+export const sliderProgressInactiveHeightSize = "2px";
+export const vidPlayerProgressBarHeightSize = "12px";
+
+export default Slider;

package/dist/js/brands/bild/components/SocialShareButton.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 SocialShareButtonTokens {
+  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 SocialShareButton: SocialShareButtonTokens;
+export declare function getSocialShareButtonTokens(colorMode?: 'light' | 'dark', breakpoint?: 'xs' | 'sm' | 'md' | 'lg', density?: 'default' | 'dense' | 'spacious'): Record<string, any>;
+
+// Flat exports
+export declare const socialShareButtonLabelColorDefault: string | number;
+export declare const socialShareButtonLabelColorActive: string | number;
+export declare const socialShareButtonBgColorActive: string | number;
+export declare const socialShareButtonBgColorDefault: string | number;
+
+export default SocialShareButton;

package/dist/js/brands/bild/components/SocialShareButton.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: SocialShareButton
+// Brand: bild
+
+export const SocialShareButton = {
+  "colors": {
+    "dark": {
+      "socialShareButtonLabelColorDefault": "#FFFFFF",
+      "socialShareButtonLabelColorActive": "#FFFFFF",
+      "socialShareButtonBgColorActive": "#343C41",
+      "socialShareButtonBgColorDefault": "#4B525A"
+    },
+    "light": {
+      "socialShareButtonLabelColorDefault": "#FFFFFF",
+      "socialShareButtonLabelColorActive": "#FFFFFF",
+      "socialShareButtonBgColorActive": "#343C41",
+      "socialShareButtonBgColorDefault": "#4B525A"
+    }
+  }
+};
+
+export const getSocialShareButtonTokens = (colorMode = 'light', breakpoint = 'md', density = 'default') => ({
+  ...SocialShareButton.colors?.[colorMode],
+  ...SocialShareButton.sizing?.[breakpoint],
+  ...SocialShareButton.density?.[density],
+  ...SocialShareButton.typography?.[breakpoint],
+  ...SocialShareButton.effects?.[colorMode]
+});
+
+// Flat exports for tree-shaking
+export const socialShareButtonLabelColorDefault = "#FFFFFF";
+export const socialShareButtonLabelColorActive = "#FFFFFF";
+export const socialShareButtonBgColorActive = "#343C41";
+export const socialShareButtonBgColorDefault = "#4B525A";
+
+export default SocialShareButton;