@vodafone_de/publish-test 0.0.1 → 53.0.0

package/dist/cssVars-DlhepeQC.js

@@ -0,0 +1,769 @@
+import { css } from "styled-components";
+import { l as loadingSpinnerOverlayCssVar, j as loadingSpinnerOverlays } from "./styled-xW6L9_un.js";
+import { b as breakpoint_medium, a as breakpoint_large } from "./index-CG4uiVbZ.js";
+const colorVodafoneRed = "colorVodafoneRed";
+const colorVodafoneRedTint = "colorVodafoneRedTint";
+const colorRed = "colorRed";
+const colorRedTint = "colorRedTint";
+const colorVodafoneDarkRed = "colorVodafoneDarkRed";
+const colorVodafoneDarkRedTint = "colorVodafoneDarkRedTint";
+const colorTurquoise = "colorTurquoise";
+const colorTurquoiseTint = "colorTurquoiseTint";
+const colorFreshOrange = "colorFreshOrange";
+const colorFreshOrangeTint = "colorFreshOrangeTint";
+const colorLemonYellow = "colorLemonYellow";
+const colorLemonYellowTint = "colorLemonYellowTint";
+const colorSpringGreen = "colorSpringGreen";
+const colorSpringGreenTint = "colorSpringGreenTint";
+const colorBlue = "colorBlue";
+const colorBlueTint = "colorBlueTint";
+const colorAquaBlue = "colorAquaBlue";
+const colorAquaBlueTint = "colorAquaBlueTint";
+const colorVodafoneWhite = "colorVodafoneWhite";
+const colorVodafoneWhiteAlpha = "colorVodafoneWhiteAlpha";
+const colorBlack05 = "colorBlack05";
+const colorBlack25 = "colorBlack25";
+const colorBlack50 = "colorBlack50";
+const colorBlack60 = "colorBlack60";
+const colorBlack85 = "colorBlack85";
+const colorBlack95 = "colorBlack95";
+const colorBlack95Alpha = "colorBlack95Alpha";
+const colorVodafoneGradient = "colorVodafoneGradient";
+const baseColors = {
+  colorVodafoneRed: "#e60000",
+  colorVodafoneRedTint: "#ea1a1a",
+  colorRed: "#bd0000",
+  colorRedTint: "#f06666",
+  colorVodafoneDarkRed: "#820000",
+  colorVodafoneDarkRedTint: "#8a0f0f",
+  colorTurquoise: "#00697c",
+  colorTurquoiseTint: "#0096ad",
+  colorAubergine: "#5e2750",
+  colorAubergineTint: "#b04a98",
+  colorFreshOrange: "#eb6100",
+  colorFreshOrangeTint: "#eb9700",
+  colorLemonYellow: "#fecb00",
+  colorLemonYellowTint: "#fecb00",
+  colorSpringGreen: "#008a00",
+  colorSpringGreenTint: "#b7bf10",
+  colorBlue: "#005ea5",
+  colorBlueTint: "#5f9bc8",
+  colorAquaBlue: "#0096ad",
+  colorAquaBlueTint: "#00b0ca",
+  colorVodafoneWhite: "#ffffff",
+  colorVodafoneWhiteAlpha: "#ffffffb3",
+  colorBlack05: "#f2f2f2",
+  colorBlack25: "#bebebe",
+  colorBlack50: "#7e7e7e",
+  colorBlack60: "#666666",
+  colorBlack85: "#262626",
+  colorBlack95: "#0d0d0d",
+  colorBlack95Alpha: "#0d0d0db3",
+  colorVodafoneGradient: "linear-gradient(45deg, #8a0f0f 0%, #e60000 100%)"
+};
+const backgroundColors = {
+  colorBackgroundBrand: {
+    light: colorVodafoneDarkRed,
+    dark: colorVodafoneDarkRedTint
+  },
+  colorBackgroundBrandGradient: {
+    light: colorVodafoneGradient,
+    dark: colorVodafoneGradient
+  },
+  colorBackgroundNeutral: {
+    light: colorVodafoneWhite,
+    dark: colorBlack85
+  },
+  colorBackgroundSubtle: {
+    light: colorBlack05,
+    dark: colorBlack95
+  },
+  colorBackgroundOverlay: {
+    light: colorVodafoneWhiteAlpha,
+    dark: colorBlack95Alpha
+  },
+  colorBackgroundOverlayStatic: {
+    light: colorBlack95Alpha,
+    dark: colorBlack95Alpha
+  }
+};
+const borderColors = {
+  colorBorderBrand: {
+    light: colorVodafoneRed,
+    dark: colorVodafoneRedTint
+  },
+  colorBorderNeutral: {
+    light: colorBlack95,
+    dark: colorVodafoneWhite
+  },
+  colorBorderSubtle: {
+    light: colorBlack25,
+    dark: colorBlack50
+  },
+  colorBorderInverse: {
+    light: colorVodafoneWhite,
+    dark: colorBlack95
+  },
+  colorBorderAccent: {
+    light: colorLemonYellow,
+    dark: colorLemonYellowTint
+  },
+  colorBorderSuccess: {
+    light: colorSpringGreen,
+    dark: colorSpringGreenTint
+  },
+  colorBorderCritical: {
+    light: colorRed,
+    dark: colorRedTint
+  },
+  colorBorderWarning: {
+    light: colorFreshOrange,
+    dark: colorFreshOrangeTint
+  },
+  colorBorderInformation: {
+    light: colorBlue,
+    dark: colorBlueTint
+  },
+  colorBorderSelected: {
+    light: colorTurquoise,
+    dark: colorTurquoiseTint
+  },
+  colorBorderUnselected: {
+    light: colorBlack50,
+    dark: colorBlack25
+  },
+  colorBorderFocus: {
+    light: colorAquaBlue,
+    dark: colorAquaBlueTint
+  }
+};
+const iconColors = {
+  colorIconBrand: {
+    light: colorRed,
+    dark: colorRedTint
+  },
+  colorIconNeutral: {
+    light: colorBlack95,
+    dark: colorVodafoneWhite
+  },
+  colorIconNeutralStatic: {
+    light: colorBlack95,
+    dark: colorBlack95
+  },
+  colorIconInverse: {
+    light: colorVodafoneWhite,
+    dark: colorBlack95
+  },
+  colorIconInverseStatic: {
+    light: colorVodafoneWhite,
+    dark: colorVodafoneWhite
+  },
+  colorIconSuccess: {
+    light: colorSpringGreen,
+    dark: colorSpringGreenTint
+  },
+  colorIconCritical: {
+    light: colorRed,
+    dark: colorRedTint
+  },
+  colorIconWarning: {
+    light: colorFreshOrange,
+    dark: colorFreshOrangeTint
+  },
+  colorIconInformation: {
+    light: colorBlue,
+    dark: colorBlueTint
+  }
+};
+const objectColors = {
+  colorObjectBrand: {
+    light: colorVodafoneRed,
+    dark: colorVodafoneRedTint
+  },
+  colorObjectNeutral: {
+    light: colorBlack95,
+    dark: colorVodafoneWhite
+  },
+  colorObjectSubtle: {
+    light: colorBlack25,
+    dark: colorBlack50
+  },
+  colorObjectInverse: {
+    light: colorVodafoneWhite,
+    dark: colorBlack95
+  },
+  colorObjectAccent: {
+    light: colorLemonYellow,
+    dark: colorLemonYellowTint
+  },
+  colorObjectSuccess: {
+    light: colorSpringGreen,
+    dark: colorSpringGreenTint
+  },
+  colorObjectCritical: {
+    light: colorRed,
+    dark: colorRedTint
+  },
+  colorObjectWarning: {
+    light: colorFreshOrange,
+    dark: colorFreshOrangeTint
+  },
+  colorObjectInformation: {
+    light: colorBlue,
+    dark: colorBlueTint
+  },
+  colorObjectSelected: {
+    light: colorTurquoise,
+    dark: colorTurquoiseTint
+  },
+  colorObjectUnselected: {
+    light: colorBlack50,
+    dark: colorBlack25
+  }
+};
+const textColors = {
+  colorTextBrand: {
+    light: colorRed,
+    dark: colorRedTint
+  },
+  colorTextNeutral: {
+    light: colorBlack95,
+    dark: colorVodafoneWhite
+  },
+  colorTextNeutralStatic: {
+    light: colorBlack95,
+    dark: colorBlack95
+  },
+  colorTextInverse: {
+    light: colorVodafoneWhite,
+    dark: colorBlack95
+  },
+  colorTextInverseStatic: {
+    light: colorVodafoneWhite,
+    dark: colorVodafoneWhite
+  },
+  colorTextCritical: {
+    light: colorRed,
+    dark: colorRedTint
+  },
+  colorTextPlaceholder: {
+    light: colorBlack60,
+    dark: colorBlack25
+  }
+};
+const typographyAndIconSizeCssVars = `
+    :root {
+        --bodyMdFontSize: var(--fontSize16);
+        --bodyMdLineHeight: var(--lineHeight125);
+
+        @media screen and (min-width: ${breakpoint_medium}) {
+            --bodyMdFontSize: var(--fontSize18);
+            --bodyMdLineHeight: var(--lineHeight144);
+        }
+
+        --bodySmFontSize: var(--fontSize14);
+        --bodySmLineHeight: var(--lineHeight128);
+
+        --headingXlFontSize: var(--fontSize32);
+        --headingXlLineHeight: var(--lineHeight125);
+
+        @media screen and (min-width: ${breakpoint_medium}) {
+            --headingXlFontSize: var(--fontSize56);
+            --headingXlLineHeight: var(--lineHeight114);
+        }
+        @media screen and (min-width: ${breakpoint_large}) {
+            --headingXlFontSize: var(--fontSize64);
+            --headingXlLineHeight: var(--lineHeight112);
+        }
+
+        --headingLgFontSize: var(--fontSize28);
+        --headingLgLineHeight: var(--lineHeight128);
+
+        @media screen and (min-width: ${breakpoint_medium}) {
+            --headingLgFontSize: var(--fontSize40);
+            --headingLgLineHeight: var(--lineHeight120);
+        }
+        @media screen and (min-width: ${breakpoint_large}) {
+            --headingLgFontSize: var(--fontSize56);
+            --headingLgLineHeight: var(--lineHeight114);
+        }
+
+        --headingMdFontSize: var(--fontSize24);
+        --headingMdLineHeight: var(--lineHeight133);
+
+        @media screen and (min-width: ${breakpoint_medium}) {
+            --headingMdFontSize: var(--fontSize32);
+            --headingMdLineHeight: var(--lineHeight125);
+        }
+        @media screen and (min-width: ${breakpoint_large}) {
+            --headingMdFontSize: var(--fontSize40);
+            --headingMdLineHeight: var(--lineHeight120);
+        }
+
+        --headingSmFontSize: var(--fontSize20);
+        --headingSmLineHeight: var(--lineHeight140);
+
+        @media screen and (min-width: ${breakpoint_medium}) {
+            --headingSmFontSize: var(--fontSize24);
+            --headingSmLineHeight: var(--lineHeight133);
+        }
+        @media screen and (min-width: ${breakpoint_large}) {
+            --headingSmFontSize: var(--fontSize28);
+            --headingSmLineHeight: var(--lineHeight128);
+        }
+
+        --headingXsFontSize: var(--fontSize18);
+        --headingXsLineHeight: var(--lineHeight144);
+
+        @media screen and (min-width: ${breakpoint_medium}) {
+            --headingXsFontSize: var(--fontSize20);
+            --headingXsLineHeight: var(--lineHeight140);
+        }
+        @media screen and (min-width: ${breakpoint_large}) {
+            --headingXsFontSize: var(--fontSize20);
+            --headingXsLineHeight: var(--lineHeight140);
+        }
+    }
+    :root {
+        --iconSize2xs: 16px;
+        --iconSizeXs: 20px;
+        --iconSizeSm: 20px;
+        --iconSizeMd: 24px;
+        --iconSizeLg: 32px;
+        --iconSizeXl: 36px;
+        --iconSize2xl: 40px;
+        --iconSize3xl: 48px;
+        --iconSize4xl: 56px;
+        --iconSize5xl: 64px;
+        --iconSize6xl: 72px;
+        --iconSize7xl: 84px;
+        --iconSize8xl: 96px;
+        --iconSize9xl: 120px;
+
+        @media screen and (min-width: ${breakpoint_medium}) {
+            --iconSize2xs: 16px;
+            --iconSizeXs: 20px;
+            --iconSizeSm: 24px;
+            --iconSizeMd: 32px;
+            --iconSizeLg: 36px;
+            --iconSizeXl: 40px;
+            --iconSize2xl: 48px;
+            --iconSize3xl: 56px;
+            --iconSize4xl: 64px;
+            --iconSize5xl: 72px;
+            --iconSize6xl: 84px;
+            --iconSize7xl: 96px;
+            --iconSize8xl: 120px;
+            --iconSize9xl: 192px;
+        }
+    }
+`;
+const cssVarsString = `
+    :root {
+
+        --font-family: var(--vodafone-variable-font, "VodafoneVari" , "Arial",  Arial, sans-serif);
+
+        --fontSize14: 14px;
+        --fontSize16: 16px;
+        --fontSize18: 18px;
+        --fontSize20: 20px;
+        --fontSize24: 24px;
+        --fontSize28: 28px;
+        --fontSize32: 32px;
+        --fontSize40: 40px;
+        --fontSize56: 56px;
+        --fontSize64: 64px;
+
+        --lineHeight112: 1.125;
+        --lineHeight114: 1.1428571429;
+        --lineHeight120: 1.2;
+        --lineHeight125: 1.25;
+        --lineHeight128: 1.2857142857;
+        --lineHeight133: 1.3333333333;
+        --lineHeight140: 1.4;
+        --lineHeight144: 1.4444444444;
+
+        --fontWeightLight: 300;
+        --fontWeightRegular: 400;
+        --fontWeightBold: 700;
+
+        --shadow28: 0 2px 8px 0 rgba(0, 0, 0, 0.16);
+
+        --spacing0: 0px;
+        --spacing4: 4px;
+        --spacing8: 8px;
+        --spacing12: 12px;
+        --spacing16: 16px;
+        --spacing20: 20px;
+        --spacing24: 24px;
+        --spacing28: 28px;
+        --spacing32: 32px;
+        --spacing40: 40px;
+        --spacing48: 48px;
+        --spacing56: 56px;
+        --spacing64: 64px;
+        --spacing72: 72px;
+        --spacing80: 80px;
+
+        --spacingNone: var(--spacing0);
+        --spacing2xs: var(--spacing4);
+        --spacingXs: var(--spacing8);
+        --spacingSm: var(--spacing12);
+        --spacingMd: var(--spacing16);
+        --spacingLg: var(--spacing20);
+        --spacingXl: var(--spacing24);
+        --spacing2xl: var(--spacing24);
+        --spacing3xl: var(--spacing32);
+        --spacing4xl: var(--spacing40);
+        --spacing5xl: var(--spacing48);
+        --spacing6xl: var(--spacing48);
+        --spacing7xl: var(--spacing48);
+
+        @media screen and (min-width: ${breakpoint_medium}) {
+            --spacingMd: var(--spacing20);
+            --spacingLg: var(--spacing20);
+            --spacingXl: var(--spacing28);
+            --spacing2xl: var(--spacing32);
+            --spacing3xl: var(--spacing40);
+            --spacing4xl: var(--spacing48);
+            --spacing5xl: var(--spacing56);
+            --spacing6xl: var(--spacing56);
+            --spacing7xl: var(--spacing56);
+        }
+
+        @media screen and (min-width: ${breakpoint_large}) {
+            --spacingSm: var(--spacing16);
+            --spacingLg: var(--spacing24);
+            --spacingXl: var(--spacing32);
+            --spacing2xl: var(--spacing40);
+            --spacing3xl: var(--spacing48);
+            --spacing4xl: var(--spacing56);
+            --spacing5xl: var(--spacing64);
+            --spacing6xl: var(--spacing72);
+            --spacing7xl: var(--spacing80);
+        }
+
+        --borderRadius0: 0px;
+        --borderRadius3: 3px;
+        --borderRadius6: 6px;
+        --borderRadius100: 100px;
+
+        --textDecorationNone: none;
+        --textDecorationUnderline: underline;
+        --textDecorationStrikethrough: line-through;
+
+        --opacity60: 0.6;
+        --opacity38: 0.38;
+
+        --borderWidth0: 0px;
+        --borderWidth1: 1px;
+        --borderWidth2: 2px;
+        --borderWidth4: 4px;
+
+        --colorVodafoneRed: ${baseColors.colorVodafoneRed};
+        --colorVodafoneRedTint: ${baseColors.colorVodafoneRedTint};
+        --colorRed: ${baseColors.colorRed};
+        --colorRedTint: ${baseColors.colorRedTint};
+        --colorVodafoneDarkRed: ${baseColors.colorVodafoneDarkRed};
+        --colorVodafoneDarkRedTint: ${baseColors.colorVodafoneDarkRedTint};
+        --colorTurquoise: ${baseColors.colorTurquoise};
+        --colorTurquoiseTint: ${baseColors.colorTurquoiseTint};
+        --colorAubergine: ${baseColors.colorAubergine};
+        --colorAubergineTint: ${baseColors.colorAubergineTint};
+        --colorFreshOrange: ${baseColors.colorFreshOrange};
+        --colorFreshOrangeTint: ${baseColors.colorFreshOrangeTint};
+        --colorLemonYellow: ${baseColors.colorLemonYellow};
+        --colorLemonYellowTint: ${baseColors.colorLemonYellowTint};
+        --colorSpringGreen: ${baseColors.colorSpringGreen};
+        --colorSpringGreenTint: ${baseColors.colorSpringGreenTint};
+        --colorBlue: ${baseColors.colorBlue};
+        --colorBlueTint: ${baseColors.colorBlueTint};
+        --colorAquaBlue: ${baseColors.colorAquaBlue};
+        --colorAquaBlueTint: ${baseColors.colorAquaBlueTint};
+        --colorVodafoneWhite: ${baseColors.colorVodafoneWhite};
+        --colorVodafoneWhiteAlpha: ${baseColors.colorVodafoneWhiteAlpha};
+        --colorBlack05: ${baseColors.colorBlack05};
+        --colorBlack25: ${baseColors.colorBlack25};
+        --colorBlack50: ${baseColors.colorBlack50};
+        --colorBlack60: ${baseColors.colorBlack60};
+        --colorBlack85: ${baseColors.colorBlack85};
+        --colorBlack95: ${baseColors.colorBlack95};
+        --colorBlack95Alpha: ${baseColors.colorBlack95Alpha};
+        --colorVodafoneGradient: ${baseColors.colorVodafoneGradient};
+
+        --colorObjectBrand: var(--${objectColors.colorObjectBrand.light});
+        --colorObjectNeutral: var(--${objectColors.colorObjectNeutral.light});
+        --colorObjectSubtle: var(--${objectColors.colorObjectSubtle.light});
+        --colorObjectInverse: var(--${objectColors.colorObjectInverse.light});
+        --colorObjectAccent: var(--${objectColors.colorObjectAccent.light});
+        --colorObjectSuccess: var(--${objectColors.colorObjectSuccess.light});
+        --colorObjectCritical: var(--${objectColors.colorObjectCritical.light});
+        --colorObjectWarning: var(--${objectColors.colorObjectWarning.light});
+        --colorObjectInformation: var(--${objectColors.colorObjectInformation.light});
+        --colorObjectSelected: var(--${objectColors.colorObjectSelected.light});
+        --colorObjectUnselected: var(--${objectColors.colorObjectUnselected.light});
+
+        /* Hover for object colors */
+        --colorObjectBrandHover: color-mix(in srgb, var(--colorObjectBrand), #000 8%);
+        --colorObjectNeutralHover: color-mix(in srgb, var(--colorObjectNeutral), #fff 8%);
+        --colorObjectSubtleHover: color-mix(in srgb, var(--colorObjectSubtle), #000 8%);
+        --colorObjectInverseHover: color-mix(in srgb, var(--colorObjectInverse), #000 8%);
+        --colorObjectAccentHover: color-mix(in srgb, var(--colorObjectAccent), #000 8%);
+        --colorObjectSuccessHover: color-mix(in srgb, var(--colorObjectSuccess), #000 8%);
+        --colorObjectCriticalHover: color-mix(in srgb, var(--colorObjectCritical), #000 8%);
+        --colorObjectWarningHover: color-mix(in srgb, var(--colorObjectWarning), #000 8%);
+        --colorObjectInformationHover: color-mix(in srgb, var(--colorObjectInformation), #000 8%);
+        --colorObjectSelectedHover: color-mix(in srgb, var(--colorObjectSelected), #000 8%);
+        --colorObjectUnselectedHover: color-mix(in srgb, var(--colorObjectUnselected), #000 8%);
+
+        /* Press for object colors */
+        --colorObjectBrandPress: color-mix(in srgb, var(--colorObjectBrand), #000 16%);
+        --colorObjectNeutralPress: color-mix(in srgb, var(--colorObjectNeutral), #fff 16%);
+        --colorObjectSubtlePress: color-mix(in srgb, var(--colorObjectSubtle), #000 16%);
+        --colorObjectInversePress: color-mix(in srgb, var(--colorObjectInverse), #000 16%);
+        --colorObjectAccentPress: color-mix(in srgb, var(--colorObjectAccent), #000 16%);
+        --colorObjectSuccessPress: color-mix(in srgb, var(--colorObjectSuccess), #000 16%);
+        --colorObjectCriticalPress: color-mix(in srgb, var(--colorObjectCritical), #000 16%);
+        --colorObjectWarningPress: color-mix(in srgb, var(--colorObjectWarning), #000 16%);
+        --colorObjectInformationPress: color-mix(in srgb, var(--colorObjectInformation), #000 16%);
+        --colorObjectSelectedPress: color-mix(in srgb, var(--colorObjectSelected), #000 16%);
+        --colorObjectUnselectedPress: color-mix(in srgb, var(--colorObjectUnselected), #000 16%);
+
+        --colorBackgroundBrand: var(--${backgroundColors.colorBackgroundBrand.light});
+        --colorBackgroundBrandGradient: var(--${backgroundColors.colorBackgroundBrandGradient.light});
+        --colorBackgroundNeutral: var(--${backgroundColors.colorBackgroundNeutral.light});
+        --colorBackgroundSubtle: var(--${backgroundColors.colorBackgroundSubtle.light});
+        --colorBackgroundOverlay: var(--${backgroundColors.colorBackgroundOverlay.light});
+        --colorBackgroundOverlayStatic: var(--${backgroundColors.colorBackgroundOverlayStatic.light});
+
+        /* Hover for background colors */
+        --colorBackgroundBrandHover: color-mix(in srgb, var(--colorBackgroundBrand), #000 8%);
+        --colorBackgroundNeutralHover: color-mix(in srgb, var(--colorBackgroundNeutral), #000 8%);
+        --colorBackgroundSubtleHover: color-mix(in srgb, var(--colorBackgroundSubtle), #000 8%);
+
+        /* Press for background colors */
+        --colorBackgroundBrandPress: color-mix(in srgb, var(--colorBackgroundBrand), #000 16%);
+        --colorBackgroundNeutralPress: color-mix(in srgb, var(--colorBackgroundNeutral), #000 16%);
+        --colorBackgroundSubtlePress: color-mix(in srgb, var(--colorBackgroundSubtle), #000 16%);
+
+        --colorTextBrand: var(--${textColors.colorTextBrand.light});
+        --colorTextNeutral: var(--${textColors.colorTextNeutral.light});
+        --colorTextNeutralStatic: var(--${textColors.colorTextNeutralStatic.light});
+        --colorTextInverse: var(--${textColors.colorTextInverse.light});
+        --colorTextInverseStatic: var(--${textColors.colorTextInverseStatic.light});
+        --colorTextCritical: var(--${textColors.colorTextCritical.light});
+        --colorTextPlaceholder: var(--${textColors.colorTextPlaceholder.light});
+
+        --colorBorderBrand: var(--${borderColors.colorBorderBrand.light});
+        --colorBorderNeutral: var(--${borderColors.colorBorderNeutral.light});
+        --colorBorderSubtle: var(--${borderColors.colorBorderSubtle.light});
+        --colorBorderInverse: var(--${borderColors.colorBorderInverse.light});
+        --colorBorderAccent: var(--${borderColors.colorBorderAccent.light});
+        --colorBorderSuccess: var(--${borderColors.colorBorderSuccess.light});
+        --colorBorderCritical: var(--${borderColors.colorBorderCritical.light});
+        --colorBorderWarning: var(--${borderColors.colorBorderWarning.light});
+        --colorBorderInformation: var(--${borderColors.colorBorderInformation.light});
+        --colorBorderSelected: var(--${borderColors.colorBorderSelected.light});
+        --colorBorderUnselected: var(--${borderColors.colorBorderUnselected.light});
+        --colorBorderFocus: var(--${borderColors.colorBorderFocus.light});
+
+        --colorIconBrand: var(--${iconColors.colorIconBrand.light});
+        --colorIconNeutral: var(--${iconColors.colorIconNeutral.light});
+        --colorIconNeutralStatic: var(--${iconColors.colorIconNeutralStatic.light});
+        --colorIconInverse: var(--${iconColors.colorIconInverse.light});
+        --colorIconInverseStatic: var(--${iconColors.colorIconInverseStatic.light});
+        --colorIconSuccess: var(--${iconColors.colorIconSuccess.light});
+        --colorIconCritical: var(--${iconColors.colorIconCritical.light});
+        --colorIconWarning: var(--${iconColors.colorIconWarning.light});
+        --colorIconInformation: var(--${iconColors.colorIconInformation.light});
+
+        --${loadingSpinnerOverlayCssVar}: ${loadingSpinnerOverlays.light};
+
+        .dark {
+            --colorObjectBrand: var(--${objectColors.colorObjectBrand.dark});
+            --colorObjectNeutral: var(--${objectColors.colorObjectNeutral.dark});
+            --colorObjectSubtle: var(--${objectColors.colorObjectSubtle.dark});
+            --colorObjectInverse: var(--${objectColors.colorObjectInverse.dark});
+            --colorObjectAccent: var(--${objectColors.colorObjectAccent.dark});
+            --colorObjectSuccess: var(--${objectColors.colorObjectSuccess.dark});
+            --colorObjectCritical: var(--${objectColors.colorObjectCritical.dark});
+            --colorObjectWarning: var(--${objectColors.colorObjectWarning.dark});
+            --colorObjectInformation: var(--${objectColors.colorObjectInformation.dark});
+            --colorObjectSelected: var(--${objectColors.colorObjectSelected.dark});
+            --colorObjectUnselected: var(--${objectColors.colorObjectUnselected.dark});
+
+            /* Hover for object colors */
+            --colorObjectBrandHover: color-mix(in srgb, var(--colorObjectBrand), #000 8%);
+            --colorObjectNeutralHover: color-mix(in srgb, var(--colorObjectNeutral), #000 8%);
+            --colorObjectSubtleHover: color-mix(in srgb, var(--colorObjectSubtle), #000 8%);
+            --colorObjectInverseHover: color-mix(in srgb, var(--colorObjectInverse), #fff 8%);
+            --colorObjectAccentHover: color-mix(in srgb, var(--colorObjectAccent), #000 8%);
+            --colorObjectSuccessHover: color-mix(in srgb, var(--colorObjectSuccess), #000 8%);
+            --colorObjectCriticalHover: color-mix(in srgb, var(--colorObjectCritical), #000 8%);
+            --colorObjectWarningHover: color-mix(in srgb, var(--colorObjectWarning), #000 8%);
+            --colorObjectInformationHover: color-mix(in srgb, var(--colorObjectInformation), #000 8%);
+            --colorObjectSelectedHover: color-mix(in srgb, var(--colorObjectSelected), #000 8%);
+            --colorObjectUnselectedHover: color-mix(in srgb, var(--colorObjectUnselected), #000 8%);
+
+            /* Press for object colors */
+            --colorObjectBrandPress: color-mix(in srgb, var(--colorObjectBrand), #000 16%);
+            --colorObjectNeutralPress: color-mix(in srgb, var(--colorObjectNeutral), #000 16%);
+            --colorObjectSubtlePress: color-mix(in srgb, var(--colorObjectSubtle), #000 16%);
+            --colorObjectInversePress: color-mix(in srgb, var(--colorObjectInverse), #fff 16%);
+            --colorObjectAccentPress: color-mix(in srgb, var(--colorObjectAccent), #000 16%);
+            --colorObjectSuccessPress: color-mix(in srgb, var(--colorObjectSuccess), #000 16%);
+            --colorObjectCriticalPress: color-mix(in srgb, var(--colorObjectCritical), #000 16%);
+            --colorObjectWarningPress: color-mix(in srgb, var(--colorObjectWarning), #000 16%);
+            --colorObjectInformationPress: color-mix(in srgb, var(--colorObjectInformation), #000 16%);
+            --colorObjectSelectedPress: color-mix(in srgb, var(--colorObjectSelected), #000 16%);
+            --colorObjectUnselectedPress: color-mix(in srgb, var(--colorObjectUnselected), #000 16%);
+
+            --colorBackgroundBrand: var(--${backgroundColors.colorBackgroundBrand.dark});
+            --colorBackgroundNeutral: var(--${backgroundColors.colorBackgroundNeutral.dark});
+            --colorBackgroundSubtle: var(--${backgroundColors.colorBackgroundSubtle.dark});
+            --colorBackgroundOverlay: var(--${backgroundColors.colorBackgroundOverlay.dark});
+            --colorBackgroundOverlayStatic: var(--${backgroundColors.colorBackgroundOverlayStatic.dark});
+
+            /* Hover for background colors */
+            --colorBackgroundBrandHover: color-mix(in srgb, var(--colorBackgroundBrand), #000 8%);
+            --colorBackgroundNeutralHover: color-mix(in srgb, var(--colorBackgroundNeutral), #fff 8%);
+            --colorBackgroundSubtleHover: color-mix(in srgb, var(--colorBackgroundSubtle), #fff 8%);
+
+            /* Press for background colors */
+            --colorBackgroundBrandPress: color-mix(in srgb, var(--colorBackgroundBrand), #000 16%);
+            --colorBackgroundNeutralPress: color-mix(in srgb, var(--colorBackgroundNeutral), #fff 16%);
+            --colorBackgroundSubtlePress: color-mix(in srgb, var(--colorBackgroundSubtle), #fff 16%);
+
+            --colorTextBrand: var(--${textColors.colorTextBrand.dark});
+            --colorTextNeutral: var(--${textColors.colorTextNeutral.dark});
+            --colorTextNeutralStatic: var(--${textColors.colorTextNeutralStatic.dark});
+            --colorTextInverse: var(--${textColors.colorTextInverse.dark});
+            --colorTextInverseStatic: var(--${textColors.colorTextInverseStatic.dark});
+            --colorTextCritical: var(--${textColors.colorTextCritical.dark});
+            --colorTextPlaceholder: var(--${textColors.colorTextPlaceholder.dark});
+
+            --colorBorderBrand: var(--${borderColors.colorBorderBrand.dark});
+            --colorBorderNeutral: var(--${borderColors.colorBorderNeutral.dark});
+            --colorBorderSubtle: var(--${borderColors.colorBorderSubtle.dark});
+            --colorBorderInverse: var(--${borderColors.colorBorderInverse.dark});
+            --colorBorderAccent: var(--${borderColors.colorBorderAccent.dark});
+            --colorBorderSuccess: var(--${borderColors.colorBorderSuccess.dark});
+            --colorBorderCritical: var(--${borderColors.colorBorderCritical.dark});
+            --colorBorderWarning: var(--${borderColors.colorBorderWarning.dark});
+            --colorBorderInformation: var(--${borderColors.colorBorderInformation.dark});
+            --colorBorderSelected: var(--${borderColors.colorBorderSelected.dark});
+            --colorBorderUnselected: var(--${borderColors.colorBorderUnselected.dark});
+            --colorBorderFocus: var(--${borderColors.colorBorderFocus.dark});
+
+            --colorIconBrand: var(--${iconColors.colorIconBrand.dark});
+            --colorIconNeutral: var(--${iconColors.colorIconNeutral.dark});
+            --colorIconNeutralStatic: var(--${iconColors.colorIconNeutralStatic.dark});
+            --colorIconInverse: var(--${iconColors.colorIconInverse.dark});
+            --colorIconInverseStatic: var(--${iconColors.colorIconInverseStatic.dark});
+            --colorIconSuccess: var(--${iconColors.colorIconSuccess.dark});
+            --colorIconCritical: var(--${iconColors.colorIconCritical.dark});
+            --colorIconWarning: var(--${iconColors.colorIconWarning.dark});
+            --colorIconInformation: var(--${iconColors.colorIconInformation.dark});
+
+            --${loadingSpinnerOverlayCssVar}: ${loadingSpinnerOverlays.dark};
+        }
+
+        .darkMobile {
+            @media screen and (max-width: ${breakpoint_medium}) {
+                --colorObjectBrand: var(--${objectColors.colorObjectBrand.dark});
+                --colorObjectNeutral: var(--${objectColors.colorObjectNeutral.dark});
+                --colorObjectSubtle: var(--${objectColors.colorObjectSubtle.dark});
+                --colorObjectInverse: var(--${objectColors.colorObjectInverse.dark});
+                --colorObjectAccent: var(--${objectColors.colorObjectAccent.dark});
+                --colorObjectSuccess: var(--${objectColors.colorObjectSuccess.dark});
+                --colorObjectCritical: var(--${objectColors.colorObjectCritical.dark});
+                --colorObjectWarning: var(--${objectColors.colorObjectWarning.dark});
+                --colorObjectInformation: var(--${objectColors.colorObjectInformation.dark});
+                --colorObjectSelected: var(--${objectColors.colorObjectSelected.dark});
+                --colorObjectUnselected: var(--${objectColors.colorObjectUnselected.dark});
+
+                /* Hover for object colors */
+                --colorObjectBrandHover: color-mix(in srgb, var(--colorObjectBrand), #000 8%);
+                --colorObjectNeutralHover: color-mix(in srgb, var(--colorObjectNeutral), #000 8%);
+                --colorObjectSubtleHover: color-mix(in srgb, var(--colorObjectSubtle), #000 8%);
+                --colorObjectInverseHover: color-mix(in srgb, var(--colorObjectInverse), #fff 8%);
+                --colorObjectAccentHover: color-mix(in srgb, var(--colorObjectAccent), #000 8%);
+                --colorObjectSuccessHover: color-mix(in srgb, var(--colorObjectSuccess), #000 8%);
+                --colorObjectCriticalHover: color-mix(in srgb, var(--colorObjectCritical), #000 8%);
+                --colorObjectWarningHover: color-mix(in srgb, var(--colorObjectWarning), #000 8%);
+                --colorObjectInformationHover: color-mix(in srgb, var(--colorObjectInformation), #000 8%);
+                --colorObjectSelectedHover: color-mix(in srgb, var(--colorObjectSelected), #000 8%);
+                --colorObjectUnselectedHover: color-mix(in srgb, var(--colorObjectUnselected), #000 8%);
+
+                /* Press for object colors */
+                --colorObjectBrandPress: color-mix(in srgb, var(--colorObjectBrand), #000 16%);
+                --colorObjectNeutralPress: color-mix(in srgb, var(--colorObjectNeutral), #000 16%);
+                --colorObjectSubtlePress: color-mix(in srgb, var(--colorObjectSubtle), #000 16%);
+                --colorObjectInversePress: color-mix(in srgb, var(--colorObjectInverse), #fff 16%);
+                --colorObjectAccentPress: color-mix(in srgb, var(--colorObjectAccent), #000 16%);
+                --colorObjectSuccessPress: color-mix(in srgb, var(--colorObjectSuccess), #000 16%);
+                --colorObjectCriticalPress: color-mix(in srgb, var(--colorObjectCritical), #000 16%);
+                --colorObjectWarningPress: color-mix(in srgb, var(--colorObjectWarning), #000 16%);
+                --colorObjectInformationPress: color-mix(in srgb, var(--colorObjectInformation), #000 16%);
+                --colorObjectSelectedPress: color-mix(in srgb, var(--colorObjectSelected), #000 16%);
+                --colorObjectUnselectedPress: color-mix(in srgb, var(--colorObjectUnselected), #000 16%);
+
+                --colorBackgroundBrand: var(--${backgroundColors.colorBackgroundBrand.dark});
+                --colorBackgroundNeutral: var(--${backgroundColors.colorBackgroundNeutral.dark});
+                --colorBackgroundSubtle: var(--${backgroundColors.colorBackgroundSubtle.dark});
+
+                /* Hover for background colors */
+                --colorBackgroundBrandHover: color-mix(in srgb, var(--colorBackgroundBrand), #000 8%);
+                --colorBackgroundNeutralHover: color-mix(in srgb, var(--colorBackgroundNeutral), #fff 8%);
+                --colorBackgroundSubtleHover: color-mix(in srgb, var(--colorBackgroundSubtle), #fff 8%);
+
+                /* Press for background colors */
+                --colorBackgroundBrandPress: color-mix(in srgb, var(--colorBackgroundBrand), #000 16%);
+                --colorBackgroundNeutralPress: color-mix(in srgb, var(--colorBackgroundNeutral), #fff 16%);
+                --colorBackgroundSubtlePress: color-mix(in srgb, var(--colorBackgroundSubtle), #fff 16%);
+
+                --colorTextBrand: var(--${textColors.colorTextBrand.dark});
+                --colorTextNeutral: var(--${textColors.colorTextNeutral.dark});
+                --colorTextNeutralStatic: var(--${textColors.colorTextNeutralStatic.dark});
+                --colorTextInverse: var(--${textColors.colorTextInverse.dark});
+                --colorTextInverseStatic: var(--${textColors.colorTextInverseStatic.dark});
+                --colorTextCritical: var(--${textColors.colorTextCritical.dark});
+                --colorTextPlaceholder: var(--${textColors.colorTextPlaceholder.dark});
+
+                --colorBorderBrand: var(--${borderColors.colorBorderBrand.dark});
+                --colorBorderNeutral: var(--${borderColors.colorBorderNeutral.dark});
+                --colorBorderSubtle: var(--${borderColors.colorBorderSubtle.dark});
+                --colorBorderInverse: var(--${borderColors.colorBorderInverse.dark});
+                --colorBorderAccent: var(--${borderColors.colorBorderAccent.dark});
+                --colorBorderSuccess: var(--${borderColors.colorBorderSuccess.dark});
+                --colorBorderCritical: var(--${borderColors.colorBorderCritical.dark});
+                --colorBorderWarning: var(--${borderColors.colorBorderWarning.dark});
+                --colorBorderInformation: var(--${borderColors.colorBorderInformation.dark});
+                --colorBorderSelected: var(--${borderColors.colorBorderSelected.dark});
+                --colorBorderUnselected: var(--${borderColors.colorBorderUnselected.dark});
+                --colorBorderFocus: var(--${borderColors.colorBorderFocus.dark});
+
+                --colorIconBrand: var(--${iconColors.colorIconBrand.dark});
+                --colorIconNeutral: var(--${iconColors.colorIconNeutral.dark});
+                --colorIconNeutralStatic: var(--${iconColors.colorIconNeutralStatic.dark});
+                --colorIconInverse: var(--${iconColors.colorIconInverse.dark});
+                --colorIconInverseStatic: var(--${iconColors.colorIconInverseStatic.dark});
+                --colorIconSuccess: var(--${iconColors.colorIconSuccess.dark});
+                --colorIconCritical: var(--${iconColors.colorIconCritical.dark});
+                --colorIconWarning: var(--${iconColors.colorIconWarning.dark});
+                --colorIconInformation: var(--${iconColors.colorIconInformation.dark});
+
+                --${loadingSpinnerOverlayCssVar}: ${loadingSpinnerOverlays.dark};
+            }
+        }
+    }
+    ${typographyAndIconSizeCssVars}
+`;
+const cssVars = css(["", ""], cssVarsString);
+export {
+  backgroundColors as a,
+  baseColors as b,
+  cssVars as c,
+  cssVarsString as d,
+  objectColors as o
+};