@marioschmidt/design-system-tokens 1.0.64 → 1.0.66

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

@@ -0,0 +1,375 @@
+/**
+ * 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: Teaser
+// Brand: bild
+
+export const Teaser = {
+  "colors": {
+    "dark": {
+      "teaserHoverOpacity": 80,
+      "teaserTitleBackgroundGradientStart": "rgba(0, 0, 0, 0.7)",
+      "teaserTitleBackgroundGradientStop": "rgba(0, 0, 0, 0)"
+    },
+    "light": {
+      "teaserHoverOpacity": 80,
+      "teaserTitleBackgroundGradientStart": "rgba(0, 0, 0, 0.7)",
+      "teaserTitleBackgroundGradientStop": "rgba(0, 0, 0, 0)"
+    }
+  },
+  "sizing": {
+    "lg": {
+      "teaserTitleInlineLeftSpace": "0px",
+      "teaserTitleStackSpace": "6px",
+      "mQteaserHeadlineFontSize": "40px",
+      "mQteaserHeadlineFontWeight": 700,
+      "mQteaserHeadlineLineHeight": "40px",
+      "mqTeaserTitleInlineSpace": "8px",
+      "aTeaserKickerFontSize": "24px",
+      "aTeaserHeadlineFontSize": "64px",
+      "aTeaserKickerLineHeight": "24px",
+      "aTeaserHeadlineLineHeight": "64px",
+      "aTeaserTitleInlineSpace": "12px",
+      "teaserTitleGapSpace": "4px",
+      "stdTeaserImageTitleGapSpace": "6px",
+      "stdTeaserBadgesMarginSpace": "8px",
+      "stdTeaserKickerHeadlineStackSpace": "2px",
+      "teaserKickerBgInlineSpace": "6px",
+      "teaserKickerBgStackSpace": "2px",
+      "quadHeadlineFontSize": "100px",
+      "quadKickerFontSize": "24px",
+      "quadHeadlineLineHeight": "100px",
+      "qTeaserTitleInlineSpace": "12px",
+      "teaserBadgesMarginSpace": "8px",
+      "teaserBadgesHeightSizeLg": "40px",
+      "teaserTitleBottomStackSpace": "16px",
+      "teaserBadgesHeightSizeSm": "32px",
+      "bildPlayTeaserWidthSize": "193px",
+      "teaserLayoutGridSpace": "16px",
+      "superAteaserTitleInlineSpace": "16px",
+      "bTeaserTitleInlineSpace": "8px"
+    },
+    "md": {
+      "teaserTitleInlineLeftSpace": "0px",
+      "teaserTitleStackSpace": "4px",
+      "mQteaserHeadlineFontSize": "36px",
+      "mQteaserHeadlineFontWeight": 700,
+      "mQteaserHeadlineLineHeight": "36px",
+      "mqTeaserTitleInlineSpace": "8px",
+      "aTeaserKickerFontSize": "22px",
+      "aTeaserHeadlineFontSize": "48px",
+      "aTeaserKickerLineHeight": "22px",
+      "aTeaserHeadlineLineHeight": "48px",
+      "aTeaserTitleInlineSpace": "12px",
+      "teaserTitleGapSpace": "4px",
+      "stdTeaserImageTitleGapSpace": "6px",
+      "stdTeaserBadgesMarginSpace": "8px",
+      "stdTeaserKickerHeadlineStackSpace": "2px",
+      "teaserKickerBgInlineSpace": "6px",
+      "teaserKickerBgStackSpace": "2px",
+      "quadHeadlineFontSize": "72px",
+      "quadKickerFontSize": "22px",
+      "quadHeadlineLineHeight": "72px",
+      "qTeaserTitleInlineSpace": "16px",
+      "teaserBadgesMarginSpace": "8px",
+      "teaserBadgesHeightSizeLg": "32px",
+      "teaserTitleBottomStackSpace": "16px",
+      "teaserBadgesHeightSizeSm": "32px",
+      "bildPlayTeaserWidthSize": "169px",
+      "teaserLayoutGridSpace": "12px",
+      "superAteaserTitleInlineSpace": "16px",
+      "bTeaserTitleInlineSpace": "8px"
+    },
+    "sm": {
+      "teaserTitleInlineLeftSpace": "12px",
+      "teaserTitleStackSpace": "4px",
+      "mQteaserHeadlineFontSize": "22px",
+      "mQteaserHeadlineFontWeight": 600,
+      "mQteaserHeadlineLineHeight": "22px",
+      "mqTeaserTitleInlineSpace": "8px",
+      "aTeaserKickerFontSize": "16px",
+      "aTeaserHeadlineFontSize": "28px",
+      "aTeaserKickerLineHeight": "16px",
+      "aTeaserHeadlineLineHeight": "28px",
+      "aTeaserTitleInlineSpace": "8px",
+      "teaserTitleGapSpace": "4px",
+      "stdTeaserImageTitleGapSpace": "4px",
+      "stdTeaserBadgesMarginSpace": "4px",
+      "stdTeaserKickerHeadlineStackSpace": "2px",
+      "teaserKickerBgInlineSpace": "6px",
+      "teaserKickerBgStackSpace": "2px",
+      "quadHeadlineFontSize": "48px",
+      "quadKickerFontSize": "18px",
+      "quadHeadlineLineHeight": "48px",
+      "qTeaserTitleInlineSpace": "8px",
+      "teaserBadgesMarginSpace": "8px",
+      "teaserBadgesHeightSizeLg": "32px",
+      "teaserTitleBottomStackSpace": "12px",
+      "teaserBadgesHeightSizeSm": "24px",
+      "bildPlayTeaserWidthSize": "145px",
+      "teaserLayoutGridSpace": "12px",
+      "superAteaserTitleInlineSpace": "16px",
+      "bTeaserTitleInlineSpace": "8px"
+    },
+    "xs": {
+      "teaserTitleInlineLeftSpace": "12px",
+      "teaserTitleStackSpace": "4px",
+      "mQteaserHeadlineFontSize": "22px",
+      "mQteaserHeadlineFontWeight": 600,
+      "mQteaserHeadlineLineHeight": "22px",
+      "mqTeaserTitleInlineSpace": "8px",
+      "aTeaserKickerFontSize": "16px",
+      "aTeaserHeadlineFontSize": "28px",
+      "aTeaserKickerLineHeight": "16px",
+      "aTeaserHeadlineLineHeight": "28px",
+      "aTeaserTitleInlineSpace": "8px",
+      "teaserTitleGapSpace": "4px",
+      "stdTeaserImageTitleGapSpace": "4px",
+      "stdTeaserBadgesMarginSpace": "4px",
+      "stdTeaserKickerHeadlineStackSpace": "2px",
+      "teaserKickerBgInlineSpace": "6px",
+      "teaserKickerBgStackSpace": "2px",
+      "quadHeadlineFontSize": "48px",
+      "quadKickerFontSize": "18px",
+      "quadHeadlineLineHeight": "48px",
+      "qTeaserTitleInlineSpace": "8px",
+      "teaserBadgesMarginSpace": "8px",
+      "teaserBadgesHeightSizeLg": "32px",
+      "teaserTitleBottomStackSpace": "12px",
+      "teaserBadgesHeightSizeSm": "24px",
+      "bildPlayTeaserWidthSize": "145px",
+      "teaserLayoutGridSpace": "12px",
+      "superAteaserTitleInlineSpace": "16px",
+      "bTeaserTitleInlineSpace": "8px"
+    }
+  },
+  "typography": {
+    "lg": {
+      "aTeaserATeaserKicker": {
+        "fontFamily": "Gotham XNarrow",
+        "fontWeight": 700,
+        "fontSize": "24px",
+        "lineHeight": "24px"
+      },
+      "aTeaserATeaserHeadline": {
+        "fontFamily": "Gotham Condensed",
+        "fontWeight": 900,
+        "fontSize": "64px",
+        "lineHeight": "64px"
+      },
+      "mQteaserMQteaserKicker": {
+        "fontFamily": "Gotham XNarrow",
+        "fontWeight": 700,
+        "fontSize": "16px",
+        "lineHeight": "16px"
+      },
+      "mQteaserMQteaserHeadline": {
+        "fontFamily": "Gotham Condensed",
+        "fontWeight": 900,
+        "fontSize": "40px",
+        "lineHeight": "40px"
+      },
+      "qTeaserQTeaserHeadline": {
+        "fontFamily": "Gotham Condensed",
+        "fontWeight": 900,
+        "fontSize": "100px",
+        "lineHeight": "100px"
+      },
+      "stdTeaserStdTeaserHeadline": {
+        "fontFamily": "Gotham Condensed",
+        "fontWeight": 700,
+        "fontSize": "32px",
+        "lineHeight": "30px"
+      }
+    },
+    "md": {
+      "aTeaserATeaserKicker": {
+        "fontFamily": "Gotham XNarrow",
+        "fontWeight": 700,
+        "fontSize": "22px",
+        "lineHeight": "22px"
+      },
+      "aTeaserATeaserHeadline": {
+        "fontFamily": "Gotham Condensed",
+        "fontWeight": 900,
+        "fontSize": "48px",
+        "lineHeight": "48px"
+      },
+      "mQteaserMQteaserKicker": {
+        "fontFamily": "Gotham XNarrow",
+        "fontWeight": 700,
+        "fontSize": "16px",
+        "lineHeight": "17.6px"
+      },
+      "mQteaserMQteaserHeadline": {
+        "fontFamily": "Gotham Condensed",
+        "fontWeight": 900,
+        "fontSize": "36px",
+        "lineHeight": "36px"
+      },
+      "qTeaserQTeaserHeadline": {
+        "fontFamily": "Gotham Condensed",
+        "fontWeight": 900,
+        "fontSize": "72px",
+        "lineHeight": "72px"
+      },
+      "stdTeaserStdTeaserHeadline": {
+        "fontFamily": "Gotham Condensed",
+        "fontWeight": 700,
+        "fontSize": "26px",
+        "lineHeight": "22px"
+      }
+    },
+    "sm": {
+      "aTeaserATeaserKicker": {
+        "fontFamily": "Gotham XNarrow",
+        "fontWeight": 700,
+        "fontSize": "16px",
+        "lineHeight": "16px"
+      },
+      "aTeaserATeaserHeadline": {
+        "fontFamily": "Gotham Condensed",
+        "fontWeight": 900,
+        "fontSize": "28px",
+        "lineHeight": "28px"
+      },
+      "mQteaserMQteaserKicker": {
+        "fontFamily": "Gotham XNarrow",
+        "fontWeight": 700,
+        "fontSize": "14px",
+        "lineHeight": "15.4px"
+      },
+      "mQteaserMQteaserHeadline": {
+        "fontFamily": "Gotham Condensed",
+        "fontWeight": 900,
+        "fontSize": "22px",
+        "lineHeight": "22px"
+      },
+      "qTeaserQTeaserHeadline": {
+        "fontFamily": "Gotham Condensed",
+        "fontWeight": 900,
+        "fontSize": "48px",
+        "lineHeight": "48px"
+      },
+      "stdTeaserStdTeaserHeadline": {
+        "fontFamily": "Gotham Condensed",
+        "fontWeight": 700,
+        "fontSize": "22px",
+        "lineHeight": "22px"
+      }
+    },
+    "xs": {
+      "aTeaserATeaserKicker": {
+        "fontFamily": "Gotham XNarrow",
+        "fontWeight": 700,
+        "fontSize": "16px",
+        "lineHeight": "16px"
+      },
+      "aTeaserATeaserHeadline": {
+        "fontFamily": "Gotham Condensed",
+        "fontWeight": 900,
+        "fontSize": "28px",
+        "lineHeight": "28px"
+      },
+      "mQteaserMQteaserKicker": {
+        "fontFamily": "Gotham XNarrow",
+        "fontWeight": 700,
+        "fontSize": "14px",
+        "lineHeight": "15.4px"
+      },
+      "mQteaserMQteaserHeadline": {
+        "fontFamily": "Gotham Condensed",
+        "fontWeight": 900,
+        "fontSize": "22px",
+        "lineHeight": "22px"
+      },
+      "qTeaserQTeaserHeadline": {
+        "fontFamily": "Gotham Condensed",
+        "fontWeight": 900,
+        "fontSize": "48px",
+        "lineHeight": "48px"
+      },
+      "stdTeaserStdTeaserHeadline": {
+        "fontFamily": "Gotham Condensed",
+        "fontWeight": 700,
+        "fontSize": "22px",
+        "lineHeight": "22px"
+      }
+    }
+  },
+  "effects": {
+    "dark": {
+      "teaserHeadlinesShadow": [
+        {
+          "offsetX": 0,
+          "offsetY": 2,
+          "radius": 8,
+          "spread": 0,
+          "color": "rgba(0, 0, 0, 0.6)"
+        }
+      ]
+    },
+    "light": {
+      "teaserHeadlinesShadow": [
+        {
+          "offsetX": 0,
+          "offsetY": 2,
+          "radius": 8,
+          "spread": 0,
+          "color": "rgba(0, 0, 0, 0.6)"
+        }
+      ]
+    }
+  }
+};
+
+export const getTeaserTokens = (colorMode = 'light', breakpoint = 'md', density = 'default') => ({
+  ...Teaser.colors?.[colorMode],
+  ...Teaser.sizing?.[breakpoint],
+  ...Teaser.density?.[density],
+  ...Teaser.typography?.[breakpoint],
+  ...Teaser.effects?.[colorMode]
+});
+
+// Flat exports for tree-shaking
+export const teaserHoverOpacity = 80;
+export const teaserTitleBackgroundGradientStart = "rgba(0, 0, 0, 0.7)";
+export const teaserTitleBackgroundGradientStop = "rgba(0, 0, 0, 0)";
+export const teaserTitleInlineLeftSpace = "12px";
+export const teaserTitleStackSpace = "4px";
+export const mQteaserHeadlineFontSize = "22px";
+export const mQteaserHeadlineFontWeight = 600;
+export const mQteaserHeadlineLineHeight = "22px";
+export const mqTeaserTitleInlineSpace = "8px";
+export const aTeaserKickerFontSize = "16px";
+export const aTeaserHeadlineFontSize = "28px";
+export const aTeaserKickerLineHeight = "16px";
+export const aTeaserHeadlineLineHeight = "28px";
+export const aTeaserTitleInlineSpace = "8px";
+export const teaserTitleGapSpace = "4px";
+export const stdTeaserImageTitleGapSpace = "4px";
+export const stdTeaserBadgesMarginSpace = "4px";
+export const stdTeaserKickerHeadlineStackSpace = "2px";
+export const teaserKickerBgInlineSpace = "6px";
+export const teaserKickerBgStackSpace = "2px";
+export const quadHeadlineFontSize = "48px";
+export const quadKickerFontSize = "18px";
+export const quadHeadlineLineHeight = "48px";
+export const qTeaserTitleInlineSpace = "8px";
+export const teaserBadgesMarginSpace = "8px";
+export const teaserBadgesHeightSizeLg = "32px";
+export const teaserTitleBottomStackSpace = "12px";
+export const teaserBadgesHeightSizeSm = "24px";
+export const bildPlayTeaserWidthSize = "145px";
+export const teaserLayoutGridSpace = "12px";
+export const superAteaserTitleInlineSpace = "16px";
+export const bTeaserTitleInlineSpace = "8px";
+
+export default Teaser;

package/dist/js/brands/bild/components/TextLink.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 TextLinkTokens {
+  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 TextLink: TextLinkTokens;
+export declare function getTextLinkTokens(colorMode?: 'light' | 'dark', breakpoint?: 'xs' | 'sm' | 'md' | 'lg', density?: 'default' | 'dense' | 'spacious'): Record<string, any>;
+
+// Flat exports
+export declare const textLinkColorSecondary: string | number;
+export declare const textLinkColorSecondaryActive: string | number;
+export declare const textLinkColorPrimary: string | number;
+
+export default TextLink;

package/dist/js/brands/bild/components/TextLink.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: TextLink
+// Brand: bild
+
+export const TextLink = {
+  "colors": {
+    "dark": {
+      "textLinkColorSecondary": "#CED4DA",
+      "textLinkColorSecondaryActive": "#E9ECEF",
+      "textLinkColorPrimary": "#8C9196"
+    },
+    "light": {
+      "textLinkColorSecondary": "#8C9196",
+      "textLinkColorSecondaryActive": "#232629",
+      "textLinkColorPrimary": "#232629"
+    }
+  }
+};
+
+export const getTextLinkTokens = (colorMode = 'light', breakpoint = 'md', density = 'default') => ({
+  ...TextLink.colors?.[colorMode],
+  ...TextLink.sizing?.[breakpoint],
+  ...TextLink.density?.[density],
+  ...TextLink.typography?.[breakpoint],
+  ...TextLink.effects?.[colorMode]
+});
+
+// Flat exports for tree-shaking
+export const textLinkColorSecondary = "#8C9196";
+export const textLinkColorSecondaryActive = "#232629";
+export const textLinkColorPrimary = "#232629";
+
+export default TextLink;

package/dist/js/brands/bild/components/ToggleSwitch.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 ToggleSwitchTokens {
+  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 ToggleSwitch: ToggleSwitchTokens;
+export declare function getToggleSwitchTokens(colorMode?: 'light' | 'dark', breakpoint?: 'xs' | 'sm' | 'md' | 'lg', density?: 'default' | 'dense' | 'spacious'): Record<string, any>;
+
+// Flat exports
+export declare const appToggleItemLabelFontSize: string | number;
+export declare const appToggleItemLabelLineHeight: string | number;
+
+export default ToggleSwitch;

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

@@ -0,0 +1,81 @@
+/**
+ * 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: ToggleSwitch
+// Brand: bild
+
+export const ToggleSwitch = {
+  "sizing": {
+    "lg": {
+      "appToggleItemLabelFontSize": "18px",
+      "appToggleItemLabelLineHeight": "18.2px"
+    },
+    "md": {
+      "appToggleItemLabelFontSize": "16px",
+      "appToggleItemLabelLineHeight": "16.2px"
+    },
+    "sm": {
+      "appToggleItemLabelFontSize": "14px",
+      "appToggleItemLabelLineHeight": "14.1px"
+    },
+    "xs": {
+      "appToggleItemLabelFontSize": "14px",
+      "appToggleItemLabelLineHeight": "14.1px"
+    }
+  },
+  "typography": {
+    "lg": {
+      "appToogleItemLabel": {
+        "fontFamily": "Gotham",
+        "fontWeight": 800,
+        "fontSize": "18px",
+        "lineHeight": "18.2px"
+      }
+    },
+    "md": {
+      "appToogleItemLabel": {
+        "fontFamily": "Gotham",
+        "fontWeight": 800,
+        "fontSize": "16px",
+        "lineHeight": "16.2px"
+      }
+    },
+    "sm": {
+      "appToogleItemLabel": {
+        "fontFamily": "Gotham",
+        "fontWeight": 800,
+        "fontSize": "14px",
+        "lineHeight": "14.1px"
+      }
+    },
+    "xs": {
+      "appToogleItemLabel": {
+        "fontFamily": "Gotham",
+        "fontWeight": 800,
+        "fontSize": "14px",
+        "lineHeight": "14.1px"
+      }
+    }
+  }
+};
+
+export const getToggleSwitchTokens = (colorMode = 'light', breakpoint = 'md', density = 'default') => ({
+  ...ToggleSwitch.colors?.[colorMode],
+  ...ToggleSwitch.sizing?.[breakpoint],
+  ...ToggleSwitch.density?.[density],
+  ...ToggleSwitch.typography?.[breakpoint],
+  ...ToggleSwitch.effects?.[colorMode]
+});
+
+// Flat exports for tree-shaking
+export const appToggleItemLabelFontSize = "14px";
+export const appToggleItemLabelLineHeight = "14.1px";
+
+export default ToggleSwitch;

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

@@ -0,0 +1,31 @@
+/**
+ * TypeScript definitions for BILD Design System Tokens
+ * Auto-generated - Do not edit directly
+ */
+
+import type { ColorValue, SpacingValue, TypographyStyle, ShadowLayer } from '../../../types';
+
+export interface VideoTokens {
+  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 Video: VideoTokens;
+export declare function getVideoTokens(colorMode?: 'light' | 'dark', breakpoint?: 'xs' | 'sm' | 'md' | 'lg', density?: 'default' | 'dense' | 'spacious'): Record<string, any>;
+
+// Flat exports
+export declare const videoTimeBadgeCornerSize: string | number;
+export declare const videoTimeBadgeFontSize: string | number;
+export declare const videoTimeBadgeSize: string | number;
+export declare const videoRedPlayIconWidthSize: string | number;
+export declare const videoRedPlayIconHeightSize: string | number;
+export declare const videoBadgeTimeLineHeight: string | number;
+export declare const videoSkeletonContainerHeight: string | number;
+export declare const videoFrameInlineSpace: string | number;
+export declare const verticalVideoMockHeadlineFontSize: string | number;
+export declare const videoAdBadgeFontSize: string | number;
+
+export default Video;

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

@@ -0,0 +1,87 @@
+/**
+ * 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: Video
+// Brand: bild
+
+export const Video = {
+  "sizing": {
+    "lg": {
+      "videoTimeBadgeCornerSize": "2px",
+      "videoTimeBadgeFontSize": "18px",
+      "videoTimeBadgeSize": "40px",
+      "videoRedPlayIconWidthSize": "14px",
+      "videoRedPlayIconHeightSize": "18px",
+      "videoBadgeTimeLineHeight": "23.8px",
+      "videoSkeletonContainerHeight": "464px",
+      "videoFrameInlineSpace": "16px",
+      "verticalVideoMockHeadlineFontSize": "32px",
+      "videoAdBadgeFontSize": "16px"
+    },
+    "md": {
+      "videoTimeBadgeCornerSize": "2px",
+      "videoTimeBadgeFontSize": "18px",
+      "videoTimeBadgeSize": "32px",
+      "videoRedPlayIconWidthSize": "12px",
+      "videoRedPlayIconHeightSize": "14px",
+      "videoBadgeTimeLineHeight": "23.8px",
+      "videoSkeletonContainerHeight": "464px",
+      "videoFrameInlineSpace": "12px",
+      "verticalVideoMockHeadlineFontSize": "32px",
+      "videoAdBadgeFontSize": "16px"
+    },
+    "sm": {
+      "videoTimeBadgeCornerSize": "2px",
+      "videoTimeBadgeFontSize": "16px",
+      "videoTimeBadgeSize": "24px",
+      "videoRedPlayIconWidthSize": "8px",
+      "videoRedPlayIconHeightSize": "10px",
+      "videoBadgeTimeLineHeight": "21px",
+      "videoSkeletonContainerHeight": "180px",
+      "videoFrameInlineSpace": "0px",
+      "verticalVideoMockHeadlineFontSize": "22px",
+      "videoAdBadgeFontSize": "14px"
+    },
+    "xs": {
+      "videoTimeBadgeCornerSize": "2px",
+      "videoTimeBadgeFontSize": "16px",
+      "videoTimeBadgeSize": "24px",
+      "videoRedPlayIconWidthSize": "8px",
+      "videoRedPlayIconHeightSize": "10px",
+      "videoBadgeTimeLineHeight": "21px",
+      "videoSkeletonContainerHeight": "180px",
+      "videoFrameInlineSpace": "0px",
+      "verticalVideoMockHeadlineFontSize": "22px",
+      "videoAdBadgeFontSize": "14px"
+    }
+  }
+};
+
+export const getVideoTokens = (colorMode = 'light', breakpoint = 'md', density = 'default') => ({
+  ...Video.colors?.[colorMode],
+  ...Video.sizing?.[breakpoint],
+  ...Video.density?.[density],
+  ...Video.typography?.[breakpoint],
+  ...Video.effects?.[colorMode]
+});
+
+// Flat exports for tree-shaking
+export const videoTimeBadgeCornerSize = "2px";
+export const videoTimeBadgeFontSize = "16px";
+export const videoTimeBadgeSize = "24px";
+export const videoRedPlayIconWidthSize = "8px";
+export const videoRedPlayIconHeightSize = "10px";
+export const videoBadgeTimeLineHeight = "21px";
+export const videoSkeletonContainerHeight = "180px";
+export const videoFrameInlineSpace = "0px";
+export const verticalVideoMockHeadlineFontSize = "22px";
+export const videoAdBadgeFontSize = "14px";
+
+export default Video;