@marioschmidt/design-system-tokens 1.0.64 → 1.0.65

package/dist/js/brands/index.d.ts

@@ -0,0 +1,8 @@
+/**
+ * TypeScript definitions for BILD Design System Tokens
+ * Auto-generated - Do not edit directly
+ */
+
+export * as bild from './bild';
+export * as sportbild from './sportbild';
+export * as advertorial from './advertorial';

package/dist/js/brands/index.js

@@ -0,0 +1,15 @@
+/**
+ * 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.
+ */
+
+// Brand exports
+
+export * as bild from './bild/index.js';
+export * as sportbild from './sportbild/index.js';
+export * as advertorial from './advertorial/index.js';

package/dist/js/brands/sportbild/colors.d.ts

@@ -0,0 +1,103 @@
+/**
+ * TypeScript definitions for BILD Design System Tokens
+ * Auto-generated - Do not edit directly
+ */
+
+import type { ColorValue } from '../../types';
+
+export interface ColorTokens {
+  light: Record<string, ColorValue>;
+  dark: Record<string, ColorValue>;
+}
+
+export declare const colors: ColorTokens;
+export declare const light: ColorTokens['light'];
+export declare const dark: ColorTokens['dark'];
+
+// Flat exports (light mode)
+export declare const textColorAccentConstant: ColorValue;
+export declare const textColorPrimary: ColorValue;
+export declare const textColorMuted: ColorValue;
+export declare const textColorPrimaryInverse: ColorValue;
+export declare const textColorPrimaryConstant: ColorValue;
+export declare const textColorSuccessConstant: ColorValue;
+export declare const textColorPrimaryInverseConstant: ColorValue;
+export declare const textColorSecondary: ColorValue;
+export declare const textColorAttentionHigh: ColorValue;
+export declare const textColorAccent: ColorValue;
+export declare const textColorAttentionMedium: ColorValue;
+export declare const textColorOnDarkSurface: ColorValue;
+export declare const surfaceColorPrimary: ColorValue;
+export declare const surfaceColorSecondary: ColorValue;
+export declare const surfaceColorPrimaryInverse: ColorValue;
+export declare const surfaceColorPrimaryConstantLight: ColorValue;
+export declare const surfaceColorPrimaryConstantDark: ColorValue;
+export declare const surfaceColorQuartenary: ColorValue;
+export declare const surfaceColorSuccess: ColorValue;
+export declare const surfaceColorTertiary: ColorValue;
+export declare const surfaceColorTertiaryGradientStop: ColorValue;
+export declare const surfaceColorTertiaryInverse: ColorValue;
+export declare const surfaceColorPrimaryGradientStop: ColorValue;
+export declare const surfaceColorSecondaryGradientStop: ColorValue;
+export declare const surfaceColorQuartenaryInverse: ColorValue;
+export declare const kickerTextColorOnSurface: ColorValue;
+export declare const headlineColorPrimary: ColorValue;
+export declare const headlineColorWhiteConst: ColorValue;
+export declare const kickerTextColorOnRed: ColorValue;
+export declare const kickerTextColorOnDarkBg: ColorValue;
+export declare const kickerTextColorOnBrightBg: ColorValue;
+export declare const colorSecondaryActive: ColorValue;
+export declare const colorPrimaryActive: ColorValue;
+export declare const colorSecondaryDisabled: ColorValue;
+export declare const colorPrimaryDisabled: ColorValue;
+export declare const colorSecondaryActiveInverse: ColorValue;
+export declare const colorTertiaryActive: ColorValue;
+export declare const colorTertiaryDisabled: ColorValue;
+export declare const borderColorMediumContrast: ColorValue;
+export declare const borderColorLowContrast: ColorValue;
+export declare const borderColorHighContrast: ColorValue;
+export declare const borderColorLowContrastConstant: ColorValue;
+export declare const borderColorSuccess: ColorValue;
+export declare const borderColorWarning: ColorValue;
+export declare const borderColorPrimaryDisabled: ColorValue;
+export declare const borderColorSecondaryDisabled: ColorValue;
+export declare const coreColorPrimary: ColorValue;
+export declare const coreColorSecondary: ColorValue;
+export declare const coreColorTertiary: ColorValue;
+export declare const coreColorSecondaryConstant: ColorValue;
+export declare const coreColorTertiaryConstant: ColorValue;
+export declare const iconColorPrimary: ColorValue;
+export declare const iconColorInverse: ColorValue;
+export declare const iconColorSecondaryConstant: ColorValue;
+export declare const iconColorConstantOnDark: ColorValue;
+export declare const iconColorPrimaryConstant: ColorValue;
+export declare const iconColorSuccess: ColorValue;
+export declare const labelColorPrimary: ColorValue;
+export declare const labelColorSecondary: ColorValue;
+export declare const labelColorDisabled: ColorValue;
+export declare const labelColorPrimaryConstant: ColorValue;
+export declare const labelColorPrimaryInverseConstant: ColorValue;
+export declare const labelColorTertiary: ColorValue;
+export declare const labelColorPrimaryInverse: ColorValue;
+export declare const attentionColorHigh: ColorValue;
+export declare const accentColorPrimary: ColorValue;
+export declare const attentionColorMedium: ColorValue;
+export declare const attentionColorLow: ColorValue;
+export declare const accentColorPrimaryConstant: ColorValue;
+export declare const attentionColorSuccessPrimary: ColorValue;
+export declare const attentionColorExtraLow: ColorValue;
+export declare const attentionColorSuccessSecondary: ColorValue;
+export declare const overlayScrimBlack: ColorValue;
+export declare const overlayScrimWhite: ColorValue;
+export declare const layerOpacity05: ColorValue;
+export declare const layerOpacity10: ColorValue;
+export declare const layerOpacity20: ColorValue;
+export declare const layerOpacity30: ColorValue;
+export declare const layerOpacity40: ColorValue;
+export declare const layerOpacity50: ColorValue;
+export declare const layerOpacity60: ColorValue;
+export declare const layerOpacity70: ColorValue;
+export declare const layerOpacity80: ColorValue;
+export declare const layerOpacity90: ColorValue;
+export declare const layerOpacity100: ColorValue;
+export declare const layerOpacity00: ColorValue;

package/dist/js/brands/sportbild/colors.js

@@ -0,0 +1,281 @@
+/**
+ * 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.
+ */
+
+// Brand: sportbild
+
+export const colors = {
+  "light": {
+    "textColorAccentConstant": "#174482",
+    "textColorPrimary": "#232629",
+    "textColorMuted": "#666B70",
+    "textColorPrimaryInverse": "#E9ECEF",
+    "textColorPrimaryConstant": "#232629",
+    "textColorSuccessConstant": "#006E3E",
+    "textColorPrimaryInverseConstant": "#E9ECEF",
+    "textColorSecondary": "#8C9196",
+    "textColorAttentionHigh": "#DD0000",
+    "textColorAccent": "#174482",
+    "textColorAttentionMedium": "#FD8227",
+    "textColorOnDarkSurface": "#FFFFFF",
+    "surfaceColorPrimary": "#FFFFFF",
+    "surfaceColorSecondary": "#F7F9FD",
+    "surfaceColorPrimaryInverse": "#081828",
+    "surfaceColorPrimaryConstantLight": "#FFFFFF",
+    "surfaceColorPrimaryConstantDark": "#081828",
+    "surfaceColorQuartenary": "#CED4DA",
+    "surfaceColorSuccess": "#CEF4E4",
+    "surfaceColorTertiary": "#BDCADB",
+    "surfaceColorTertiaryGradientStop": "rgba(233, 236, 239, 0)",
+    "surfaceColorTertiaryInverse": "#174482",
+    "surfaceColorPrimaryGradientStop": "rgba(255, 255, 255, 0)",
+    "surfaceColorSecondaryGradientStop": "rgba(242, 244, 245, 0)",
+    "surfaceColorQuartenaryInverse": "#4B525A",
+    "kickerTextColorOnSurface": "#8C9196",
+    "headlineColorPrimary": "#0A2750",
+    "headlineColorWhiteConst": "#FFFFFF",
+    "kickerTextColorOnRed": "#FFFFFF",
+    "kickerTextColorOnDarkBg": "rgba(255, 255, 255, 0.8)",
+    "kickerTextColorOnBrightBg": "rgba(0, 0, 0, 0.7)",
+    "colorSecondaryActive": "#232629",
+    "colorPrimaryActive": "#174482",
+    "colorSecondaryDisabled": "#E9ECEF",
+    "colorPrimaryDisabled": "#F2F4F5",
+    "colorSecondaryActiveInverse": "#F2F4F5",
+    "colorTertiaryActive": "#00C373",
+    "colorTertiaryDisabled": "#8C9196",
+    "borderColorMediumContrast": "#CED4DA",
+    "borderColorLowContrast": "#E9ECEF",
+    "borderColorHighContrast": "#232629",
+    "borderColorLowContrastConstant": "#E9ECEF",
+    "borderColorSuccess": "#00C373",
+    "borderColorWarning": "#DD0000",
+    "borderColorPrimaryDisabled": "#F2F4F5",
+    "borderColorSecondaryDisabled": "#E9ECEF",
+    "coreColorPrimary": "#0A2750",
+    "coreColorSecondary": "#FFFFFF",
+    "coreColorTertiary": "#081828",
+    "coreColorSecondaryConstant": "#FFFFFF",
+    "coreColorTertiaryConstant": "#081828",
+    "iconColorPrimary": "#4B525A",
+    "iconColorInverse": "#CED4DA",
+    "iconColorSecondaryConstant": "#8C9196",
+    "iconColorConstantOnDark": "#F2F4F5",
+    "iconColorPrimaryConstant": "#4B525A",
+    "iconColorSuccess": "#00C373",
+    "labelColorPrimary": "#232629",
+    "labelColorSecondary": "#4B525A",
+    "labelColorDisabled": "#CED4DA",
+    "labelColorPrimaryConstant": "#232629",
+    "labelColorPrimaryInverseConstant": "#E9ECEF",
+    "labelColorTertiary": "#8C9196",
+    "labelColorPrimaryInverse": "#E9ECEF",
+    "attentionColorHigh": "#DD0000",
+    "accentColorPrimary": "#174482",
+    "attentionColorMedium": "#FD8227",
+    "attentionColorLow": "#FFBF00",
+    "accentColorPrimaryConstant": "#174482",
+    "attentionColorSuccessPrimary": "#00C373",
+    "attentionColorExtraLow": "#FFFFFF",
+    "attentionColorSuccessSecondary": "#006E3E",
+    "overlayScrimBlack": "rgba(0, 0, 0, 0.7)",
+    "overlayScrimWhite": "rgba(255, 255, 255, 0.7)",
+    "layerOpacity05": 5,
+    "layerOpacity10": 10,
+    "layerOpacity20": 20,
+    "layerOpacity30": 30,
+    "layerOpacity40": 40,
+    "layerOpacity50": 50,
+    "layerOpacity60": 60,
+    "layerOpacity70": 70,
+    "layerOpacity80": 80,
+    "layerOpacity90": 90,
+    "layerOpacity100": 100,
+    "layerOpacity00": 0
+  },
+  "dark": {
+    "textColorAccentConstant": "#174482",
+    "textColorPrimary": "#E9ECEF",
+    "textColorMuted": "#CED4DA",
+    "textColorPrimaryInverse": "#232629",
+    "textColorPrimaryConstant": "#232629",
+    "textColorSuccessConstant": "#006E3E",
+    "textColorPrimaryInverseConstant": "#E9ECEF",
+    "textColorSecondary": "#8C9196",
+    "textColorAttentionHigh": "#DD0000",
+    "textColorAccent": "#F7F9FD",
+    "textColorAttentionMedium": "#FD8227",
+    "textColorOnDarkSurface": "#FFFFFF",
+    "surfaceColorPrimary": "#081828",
+    "surfaceColorSecondary": "#0A2750",
+    "surfaceColorPrimaryInverse": "#FFFFFF",
+    "surfaceColorPrimaryConstantLight": "#FFFFFF",
+    "surfaceColorPrimaryConstantDark": "#081828",
+    "surfaceColorQuartenary": "#4B525A",
+    "surfaceColorSuccess": "#CEF4E4",
+    "surfaceColorTertiary": "#174482",
+    "surfaceColorTertiaryGradientStop": "rgba(52, 60, 65, 0)",
+    "surfaceColorTertiaryInverse": "#BDCADB",
+    "surfaceColorPrimaryGradientStop": "rgba(35, 38, 41, 0)",
+    "surfaceColorSecondaryGradientStop": "rgba(44, 49, 56, 0)",
+    "surfaceColorQuartenaryInverse": "#CED4DA",
+    "kickerTextColorOnSurface": "#8C9196",
+    "headlineColorPrimary": "#FFFFFF",
+    "headlineColorWhiteConst": "#FFFFFF",
+    "kickerTextColorOnRed": "#FFFFFF",
+    "kickerTextColorOnDarkBg": "rgba(255, 255, 255, 0.8)",
+    "kickerTextColorOnBrightBg": "rgba(0, 0, 0, 0.7)",
+    "colorSecondaryActive": "#F2F4F5",
+    "colorPrimaryActive": "#174482",
+    "colorSecondaryDisabled": "#4B525A",
+    "colorPrimaryDisabled": "#343C41",
+    "colorSecondaryActiveInverse": "#232629",
+    "colorTertiaryActive": "#00C373",
+    "colorTertiaryDisabled": "#666B70",
+    "borderColorMediumContrast": "#666B70",
+    "borderColorLowContrast": "#4B525A",
+    "borderColorHighContrast": "#FFFFFF",
+    "borderColorLowContrastConstant": "#E9ECEF",
+    "borderColorSuccess": "#00C373",
+    "borderColorWarning": "#DD0000",
+    "borderColorPrimaryDisabled": "#343C41",
+    "borderColorSecondaryDisabled": "#4B525A",
+    "coreColorPrimary": "#0A2750",
+    "coreColorSecondary": "#081828",
+    "coreColorTertiary": "#FFFFFF",
+    "coreColorSecondaryConstant": "#FFFFFF",
+    "coreColorTertiaryConstant": "#081828",
+    "iconColorPrimary": "#8C9196",
+    "iconColorInverse": "#4B525A",
+    "iconColorSecondaryConstant": "#8C9196",
+    "iconColorConstantOnDark": "#F2F4F5",
+    "iconColorPrimaryConstant": "#4B525A",
+    "iconColorSuccess": "#00C373",
+    "labelColorPrimary": "#E9ECEF",
+    "labelColorSecondary": "#CED4DA",
+    "labelColorDisabled": "#4B525A",
+    "labelColorPrimaryConstant": "#232629",
+    "labelColorPrimaryInverseConstant": "#E9ECEF",
+    "labelColorTertiary": "#8C9196",
+    "labelColorPrimaryInverse": "#232629",
+    "attentionColorHigh": "#DD0000",
+    "accentColorPrimary": "#F7F9FD",
+    "attentionColorMedium": "#FD8227",
+    "attentionColorLow": "#FFBF00",
+    "accentColorPrimaryConstant": "#174482",
+    "attentionColorSuccessPrimary": "#00C373",
+    "attentionColorExtraLow": "#343C41",
+    "attentionColorSuccessSecondary": "#006E3E",
+    "overlayScrimBlack": "rgba(0, 0, 0, 0.7)",
+    "overlayScrimWhite": "rgba(255, 255, 255, 0.7)",
+    "layerOpacity05": 5,
+    "layerOpacity10": 10,
+    "layerOpacity20": 20,
+    "layerOpacity30": 30,
+    "layerOpacity40": 40,
+    "layerOpacity50": 50,
+    "layerOpacity60": 60,
+    "layerOpacity70": 70,
+    "layerOpacity80": 80,
+    "layerOpacity90": 90,
+    "layerOpacity100": 100,
+    "layerOpacity00": 0
+  }
+};
+
+export const light = colors.light;
+export const dark = colors.dark;
+
+// Flat exports (light mode) for tree-shaking
+export const textColorAccentConstant = "#174482";
+export const textColorPrimary = "#232629";
+export const textColorMuted = "#666B70";
+export const textColorPrimaryInverse = "#E9ECEF";
+export const textColorPrimaryConstant = "#232629";
+export const textColorSuccessConstant = "#006E3E";
+export const textColorPrimaryInverseConstant = "#E9ECEF";
+export const textColorSecondary = "#8C9196";
+export const textColorAttentionHigh = "#DD0000";
+export const textColorAccent = "#174482";
+export const textColorAttentionMedium = "#FD8227";
+export const textColorOnDarkSurface = "#FFFFFF";
+export const surfaceColorPrimary = "#FFFFFF";
+export const surfaceColorSecondary = "#F7F9FD";
+export const surfaceColorPrimaryInverse = "#081828";
+export const surfaceColorPrimaryConstantLight = "#FFFFFF";
+export const surfaceColorPrimaryConstantDark = "#081828";
+export const surfaceColorQuartenary = "#CED4DA";
+export const surfaceColorSuccess = "#CEF4E4";
+export const surfaceColorTertiary = "#BDCADB";
+export const surfaceColorTertiaryGradientStop = "rgba(233, 236, 239, 0)";
+export const surfaceColorTertiaryInverse = "#174482";
+export const surfaceColorPrimaryGradientStop = "rgba(255, 255, 255, 0)";
+export const surfaceColorSecondaryGradientStop = "rgba(242, 244, 245, 0)";
+export const surfaceColorQuartenaryInverse = "#4B525A";
+export const kickerTextColorOnSurface = "#8C9196";
+export const headlineColorPrimary = "#0A2750";
+export const headlineColorWhiteConst = "#FFFFFF";
+export const kickerTextColorOnRed = "#FFFFFF";
+export const kickerTextColorOnDarkBg = "rgba(255, 255, 255, 0.8)";
+export const kickerTextColorOnBrightBg = "rgba(0, 0, 0, 0.7)";
+export const colorSecondaryActive = "#232629";
+export const colorPrimaryActive = "#174482";
+export const colorSecondaryDisabled = "#E9ECEF";
+export const colorPrimaryDisabled = "#F2F4F5";
+export const colorSecondaryActiveInverse = "#F2F4F5";
+export const colorTertiaryActive = "#00C373";
+export const colorTertiaryDisabled = "#8C9196";
+export const borderColorMediumContrast = "#CED4DA";
+export const borderColorLowContrast = "#E9ECEF";
+export const borderColorHighContrast = "#232629";
+export const borderColorLowContrastConstant = "#E9ECEF";
+export const borderColorSuccess = "#00C373";
+export const borderColorWarning = "#DD0000";
+export const borderColorPrimaryDisabled = "#F2F4F5";
+export const borderColorSecondaryDisabled = "#E9ECEF";
+export const coreColorPrimary = "#0A2750";
+export const coreColorSecondary = "#FFFFFF";
+export const coreColorTertiary = "#081828";
+export const coreColorSecondaryConstant = "#FFFFFF";
+export const coreColorTertiaryConstant = "#081828";
+export const iconColorPrimary = "#4B525A";
+export const iconColorInverse = "#CED4DA";
+export const iconColorSecondaryConstant = "#8C9196";
+export const iconColorConstantOnDark = "#F2F4F5";
+export const iconColorPrimaryConstant = "#4B525A";
+export const iconColorSuccess = "#00C373";
+export const labelColorPrimary = "#232629";
+export const labelColorSecondary = "#4B525A";
+export const labelColorDisabled = "#CED4DA";
+export const labelColorPrimaryConstant = "#232629";
+export const labelColorPrimaryInverseConstant = "#E9ECEF";
+export const labelColorTertiary = "#8C9196";
+export const labelColorPrimaryInverse = "#E9ECEF";
+export const attentionColorHigh = "#DD0000";
+export const accentColorPrimary = "#174482";
+export const attentionColorMedium = "#FD8227";
+export const attentionColorLow = "#FFBF00";
+export const accentColorPrimaryConstant = "#174482";
+export const attentionColorSuccessPrimary = "#00C373";
+export const attentionColorExtraLow = "#FFFFFF";
+export const attentionColorSuccessSecondary = "#006E3E";
+export const overlayScrimBlack = "rgba(0, 0, 0, 0.7)";
+export const overlayScrimWhite = "rgba(255, 255, 255, 0.7)";
+export const layerOpacity05 = 5;
+export const layerOpacity10 = 10;
+export const layerOpacity20 = 20;
+export const layerOpacity30 = 30;
+export const layerOpacity40 = 40;
+export const layerOpacity50 = 50;
+export const layerOpacity60 = 60;
+export const layerOpacity70 = 70;
+export const layerOpacity80 = 80;
+export const layerOpacity90 = 90;
+export const layerOpacity100 = 100;
+export const layerOpacity00 = 0;

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

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

@@ -0,0 +1,76 @@
+/**
+ * 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: Accordion
+// Brand: sportbild
+
+export const Accordion = {
+  "sizing": {
+    "lg": {
+      "accordionLabelFontFamily": "Inter"
+    },
+    "md": {
+      "accordionLabelFontFamily": "Inter"
+    },
+    "sm": {
+      "accordionLabelFontFamily": "Inter"
+    },
+    "xs": {
+      "accordionLabelFontFamily": "Inter"
+    }
+  },
+  "typography": {
+    "lg": {
+      "accordionLabel": {
+        "fontFamily": "Inter",
+        "fontWeight": 700,
+        "fontSize": "17px",
+        "lineHeight": "null"
+      }
+    },
+    "md": {
+      "accordionLabel": {
+        "fontFamily": "Inter",
+        "fontWeight": 700,
+        "fontSize": "17px",
+        "lineHeight": "null"
+      }
+    },
+    "sm": {
+      "accordionLabel": {
+        "fontFamily": "Inter",
+        "fontWeight": 700,
+        "fontSize": "17px",
+        "lineHeight": "null"
+      }
+    },
+    "xs": {
+      "accordionLabel": {
+        "fontFamily": "Inter",
+        "fontWeight": 700,
+        "fontSize": "17px",
+        "lineHeight": "null"
+      }
+    }
+  }
+};
+
+export const getAccordionTokens = (colorMode = 'light', breakpoint = 'md', density = 'default') => ({
+  ...Accordion.colors?.[colorMode],
+  ...Accordion.sizing?.[breakpoint],
+  ...Accordion.density?.[density],
+  ...Accordion.typography?.[breakpoint],
+  ...Accordion.effects?.[colorMode]
+});
+
+// Flat exports for tree-shaking
+export const accordionLabelFontFamily = "Inter";
+
+export default Accordion;

package/dist/js/brands/sportbild/components/Alert.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 AlertTokens {
+  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 Alert: AlertTokens;
+export declare function getAlertTokens(colorMode?: 'light' | 'dark', breakpoint?: 'xs' | 'sm' | 'md' | 'lg', density?: 'default' | 'dense' | 'spacious'): Record<string, any>;
+
+// Flat exports
+export declare const alertSurfaceColor: string | number;
+export declare const alertSurfaceColorConstant: string | number;
+
+export default Alert;

package/dist/js/brands/sportbild/components/Alert.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: Alert
+// Brand: sportbild
+
+export const Alert = {
+  "colors": {
+    "dark": {
+      "alertSurfaceColor": "#343C41",
+      "alertSurfaceColorConstant": "#FFFFFF"
+    },
+    "light": {
+      "alertSurfaceColor": "#FFFFFF",
+      "alertSurfaceColorConstant": "#FFFFFF"
+    }
+  },
+  "effects": {
+    "dark": {
+      "alertShadowDown": [
+        {
+          "offsetX": 0,
+          "offsetY": 6,
+          "radius": 10,
+          "spread": 0,
+          "color": "rgba(0, 0, 0, 0.2)"
+        }
+      ],
+      "alertShadowUp": [
+        {
+          "offsetX": 0,
+          "offsetY": -2,
+          "radius": 10,
+          "spread": 0,
+          "color": "rgba(0, 0, 0, 0.2)"
+        }
+      ]
+    },
+    "light": {
+      "alertShadowDown": [
+        {
+          "offsetX": 0,
+          "offsetY": 6,
+          "radius": 10,
+          "spread": 0,
+          "color": "rgba(0, 0, 0, 0.2)"
+        }
+      ],
+      "alertShadowUp": [
+        {
+          "offsetX": 0,
+          "offsetY": -2,
+          "radius": 10,
+          "spread": 0,
+          "color": "rgba(0, 0, 0, 0.2)"
+        }
+      ]
+    }
+  }
+};
+
+export const getAlertTokens = (colorMode = 'light', breakpoint = 'md', density = 'default') => ({
+  ...Alert.colors?.[colorMode],
+  ...Alert.sizing?.[breakpoint],
+  ...Alert.density?.[density],
+  ...Alert.typography?.[breakpoint],
+  ...Alert.effects?.[colorMode]
+});
+
+// Flat exports for tree-shaking
+export const alertSurfaceColor = "#FFFFFF";
+export const alertSurfaceColorConstant = "#FFFFFF";
+
+export default Alert;

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

@@ -0,0 +1,41 @@
+/**
+ * TypeScript definitions for BILD Design System Tokens
+ * Auto-generated - Do not edit directly
+ */
+
+import type { ColorValue, SpacingValue, TypographyStyle, ShadowLayer } from '../../../types';
+
+export interface ArticleTokens {
+  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 Article: ArticleTokens;
+export declare function getArticleTokens(colorMode?: 'light' | 'dark', breakpoint?: 'xs' | 'sm' | 'md' | 'lg', density?: 'default' | 'dense' | 'spacious'): Record<string, any>;
+
+// Flat exports
+export declare const aricleMobile1ColGridImageMarginSpace: string | number;
+export declare const articleTopMarginSpace: string | number;
+export declare const articleKickerFontSize: string | number;
+export declare const articleHeadlineFontSize: string | number;
+export declare const articleGalleryATeaserWidth: string | number;
+export declare const articleImageCaptionFontSize: string | number;
+export declare const articleImageSourceFontSize: string | number;
+export declare const articleImageCaptionLineHeight: string | number;
+export declare const articleImageSourceLineHeight: string | number;
+export declare const articleContentStackSpace: string | number;
+export declare const articleHeadingsStackSpace: string | number;
+export declare const articleImageLandscapeInlineSpace: string | number;
+export declare const articleMetaFontFamily: string | number;
+export declare const articleMetaFontSize: string | number;
+export declare const articleContentInlineSpace: string | number;
+export declare const articleHeadingsInlineSpace: string | number;
+export declare const articleImagePortaitInlineSpace: string | number;
+export declare const articleImageContainerStackSpace: string | number;
+export declare const articleInfoboxInlineSpace: string | number;
+export declare const articleInfoboxStackSpace: string | number;
+
+export default Article;