@postenbring/hedwig-tokens/tokens-output/tokens.js

Design tokens for [Hedwig Design System](https://github.com/bring/hedwig-design-system).

export const FontSizePostenH1Display = ["40px","72px"];
export const FontSizePostenH1DisplayMin = "40px";
export const FontSizePostenH1DisplayMax = "72px";
export const FontSizePostenH1 = ["32px","48px"];
export const FontSizePostenH1Min = "32px";
export const FontSizePostenH1Max = "48px";
export const FontSizePostenH2 = ["28px","32px"];
export const FontSizePostenH2Min = "28px";
export const FontSizePostenH2Max = "32px";
export const FontSizeBringH1Display = ["40px","72px"];
export const FontSizeBringH1DisplayMin = "40px";
export const FontSizeBringH1DisplayMax = "72px";
export const FontSizeBringH1 = ["32px","48px"];
export const FontSizeBringH1Min = "32px";
export const FontSizeBringH1Max = "48px";
export const FontSizeBringH2 = ["28px","32px"];
export const FontSizeBringH2Min = "28px";
export const FontSizeBringH2Max = "32px";
export const FontSizeH3 = ["22px","24px"];
export const FontSizeH3Min = "22px";
export const FontSizeH3Max = "24px";
export const FontSizeH3Title = ["22px","24px"];
export const FontSizeH3TitleMin = "22px";
export const FontSizeH3TitleMax = "24px";
export const FontSizeBody = ["18px","20px"];
export const FontSizeBodyMin = "18px";
export const FontSizeBodyMax = "20px";
export const FontSizeBodyTitle = ["18px","20px"];
export const FontSizeBodyTitleMin = "18px";
export const FontSizeBodyTitleMax = "20px";
export const FontSizeBodySmall = ["16px","18px"];
export const FontSizeBodySmallMin = "16px";
export const FontSizeBodySmallMax = "18px";
export const FontSizeBodySmallTitle = ["16px","18px"];
export const FontSizeBodySmallTitleMin = "16px";
export const FontSizeBodySmallTitleMax = "18px";
export const FontSizeTechnical = ["14px","16px"];
export const FontSizeTechnicalMin = "14px";
export const FontSizeTechnicalMax = "16px";
export const FontSizeTechnicalTitle = ["14px","16px"];
export const FontSizeTechnicalTitleMin = "14px";
export const FontSizeTechnicalTitleMax = "16px";
export const FontSizeCaption = "13px";
export const FontSizeCaptionTitle = "13px";
export const LineHeightPostenH1Display = ["56px","80px"];
export const LineHeightPostenH1DisplayMin = "56px";
export const LineHeightPostenH1DisplayMax = "80px";
export const LineHeightPostenH1 = ["40px","56px"];
export const LineHeightPostenH1Min = "40px";
export const LineHeightPostenH1Max = "56px";
export const LineHeightPostenH2 = ["36px","40px"];
export const LineHeightPostenH2Min = "36px";
export const LineHeightPostenH2Max = "40px";
export const LineHeightBringH1Display = ["56px","80px"];
export const LineHeightBringH1DisplayMin = "56px";
export const LineHeightBringH1DisplayMax = "80px";
export const LineHeightBringH1 = ["40px","56px"];
export const LineHeightBringH1Min = "40px";
export const LineHeightBringH1Max = "56px";
export const LineHeightBringH2 = ["36px","40px"];
export const LineHeightBringH2Min = "36px";
export const LineHeightBringH2Max = "40px";
export const LineHeightH3 = ["28px","32px"];
export const LineHeightH3Min = "28px";
export const LineHeightH3Max = "32px";
export const LineHeightH3Title = ["28px","32px"];
export const LineHeightH3TitleMin = "28px";
export const LineHeightH3TitleMax = "32px";
export const LineHeightBody = ["26px","28px"];
export const LineHeightBodyMin = "26px";
export const LineHeightBodyMax = "28px";
export const LineHeightBodyTitle = ["26px","28px"];
export const LineHeightBodyTitleMin = "26px";
export const LineHeightBodyTitleMax = "28px";
export const LineHeightBodySmall = ["24px","26px"];
export const LineHeightBodySmallMin = "24px";
export const LineHeightBodySmallMax = "26px";
export const LineHeightBodySmallTitle = ["24px","26px"];
export const LineHeightBodySmallTitleMin = "24px";
export const LineHeightBodySmallTitleMax = "26px";
export const LineHeightTechnical = ["22px","24px"];
export const LineHeightTechnicalMin = "22px";
export const LineHeightTechnicalMax = "24px";
export const LineHeightTechnicalTitle = ["22px","24px"];
export const LineHeightTechnicalTitleMin = "22px";
export const LineHeightTechnicalTitleMax = "24px";
export const LineHeightCaption = "18px";
export const LineHeightCaptionTitle = "18px";
export const FontWeightPostenH1Display = 700;
export const FontWeightPostenH1 = 700;
export const FontWeightPostenH2 = 700;
export const FontWeightBringH1Display = 500;
export const FontWeightBringH1 = 500;
export const FontWeightBringH2 = 500;
export const FontWeightH3 = 400;
export const FontWeightH3Title = 500;
export const FontWeightBody = 400;
export const FontWeightBodyTitle = 500;
export const FontWeightBodySmall = 400;
export const FontWeightBodySmallTitle = 500;
export const FontWeightTechnical = 400;
export const FontWeightTechnicalTitle = 500;
export const FontWeightCaption = 400;
export const FontWeightCaptionTitle = 500;
export const PostenColorsSignatureRed = "#e32d22"; // @deprecated Use the new color scheme instead
export const PostenColorsDarkerRed = "#4a1011"; // @deprecated Use the new color scheme instead
export const PostenColorsDarkRed = "#980000"; // @deprecated Use the new color scheme instead
export const PostenColorsLightRed = "#ffb5af"; // @deprecated Use the new color scheme instead
export const PostenColorsLighterRed = "#fff5f0"; // @deprecated Use the new color scheme instead
export const PostenColorsSignatureRedHover = "#ca201c"; // @deprecated Use the new color scheme instead
export const PostenColorsLightRedHover = "#ffa199"; // @deprecated Use the new color scheme instead
export const BringColorsSignatureGreen = "#56b529"; // @deprecated Use the new color scheme instead
export const BringColorsDarkerGreen = "#002f19"; // @deprecated Use the new color scheme instead
export const BringColorsDarkGreen = "#00643a"; // @deprecated Use the new color scheme instead
export const BringColorsLightGreen = "#b5e099"; // @deprecated Use the new color scheme instead
export const BringColorsLighterGreen = "#f1f7e9"; // @deprecated Use the new color scheme instead
export const BringColorsSignatureGreenHover = "#6ec943"; // @deprecated Use the new color scheme instead
export const BringColorsLightGreenHover = "#d3e593"; // @deprecated Use the new color scheme instead
export const UiColorsBlack = "#000000"; // @deprecated Use the new color scheme instead
export const UiColorsDarkGrey = "#6e6e6e"; // @deprecated Use the new color scheme instead
export const UiColorsGrey = "#d6d6d6"; // @deprecated Use the new color scheme instead
export const UiColorsLightGreyStroke = "#e4e4e4"; // @deprecated Use the new color scheme instead
export const UiColorsLightGreyFill = "#f2f2f2"; // @deprecated Use the new color scheme instead
export const UiColorsWhite = "#ffffff"; // @deprecated Use the new color scheme instead
export const UiColorsWarningYellow = "#fdbb2f"; // @deprecated Use the new color scheme instead
export const UiColorsWarningYellowStroke = "#d68000"; // @deprecated Use the new color scheme instead
export const UiColorsWarningYellowLightFill = "#fff5e0"; // @deprecated Use the new color scheme instead
export const UiColorsWarningYellowHover = "#ffc340"; // @deprecated Use the new color scheme instead
export const UiColorsBlackHover = "#1e1e1e"; // @deprecated Use the new color scheme instead
export const DarkModeColorsObsidian = "#121212"; // @deprecated Use the new color scheme instead - Base color for dark mode
export const DarkModeColorsCoal = "#252525"; // @deprecated Use the new color scheme instead - Background on none-clickable cards
export const DarkModeColorsDusk = "#2c2c2c"; // @deprecated Use the new color scheme instead - Fill inputfields, checkbox, radio buttons, toogles
export const DarkModeColorsSpider = "#333333"; // @deprecated Use the new color scheme instead - Clickable cards or tiles
export const DarkModeColorsAsh = "#999999"; // @deprecated Use the new color scheme instead - Default radio buttons, checkbox, label on inputsfields, toogle off  (background)
export const BreakpointSmall = "460px"; // Larger mobile phones
export const BreakpointMedium = "720px"; // Most tablets
export const BreakpointLarge = "940px"; // Smaller laptops and desktop monitors. This is where the navbar goes from the mobile version to the desktop version
export const BreakpointXlarge = "1200px"; // Most modern laptops and desktop monitors
export const Spacing4 = "4px";
export const Spacing8 = "8px";
export const Spacing12 = "12px";
export const Spacing16 = "16px";
export const Spacing20 = "20px";
export const Spacing24 = "24px";
export const Spacing32 = "32px";
export const Spacing40 = "40px";
export const Spacing48 = "48px";
export const Spacing64 = "64px";
export const Spacing80 = "80px";
export const Spacing120 = "120px";
export const Spacing160 = "160px";
export const NavbarHeight = "112px";
export const FontsPostenSans = ["Posten Sans","Arial","sans-serif"];
export const FontsPostenSansBold = ["Posten Sans Bold","Arial","sans-serif"];
export const FontsPostenSansMedium = ["Posten Sans Medium","Arial","sans-serif"];
export const FontsPostenSansRegular = ["Posten Sans Regular","Arial","sans-serif"];
export const TypographyPostenH1Display = {"fontFamily":["Posten Sans","Arial","sans-serif"],"fontSize":["40px","72px"],"lineHeight":["56px","80px"],"fontWeight":700,"letterSpacing":"0"};
export const TypographyPostenH1 = {"fontFamily":["Posten Sans","Arial","sans-serif"],"fontSize":["32px","48px"],"lineHeight":["40px","56px"],"fontWeight":700,"letterSpacing":"0"};
export const TypographyPostenH2 = {"fontFamily":["Posten Sans","Arial","sans-serif"],"fontSize":["28px","32px"],"lineHeight":["36px","40px"],"fontWeight":700,"letterSpacing":"0"};
export const TypographyBringH1Display = {"fontFamily":["Posten Sans","Arial","sans-serif"],"fontSize":["40px","72px"],"lineHeight":["56px","80px"],"fontWeight":500,"letterSpacing":"0"};
export const TypographyBringH1 = {"fontFamily":["Posten Sans","Arial","sans-serif"],"fontSize":["32px","48px"],"lineHeight":["40px","56px"],"fontWeight":500,"letterSpacing":"0"};
export const TypographyBringH2 = {"fontFamily":["Posten Sans","Arial","sans-serif"],"fontSize":["28px","32px"],"lineHeight":["36px","40px"],"fontWeight":500,"letterSpacing":"0"};
export const TypographyH3 = {"fontFamily":["Posten Sans","Arial","sans-serif"],"fontSize":["22px","24px"],"lineHeight":["28px","32px"],"fontWeight":400,"letterSpacing":"0"};
export const TypographyH3Title = {"fontFamily":["Posten Sans","Arial","sans-serif"],"fontSize":["22px","24px"],"lineHeight":["28px","32px"],"fontWeight":500,"letterSpacing":"0"};
export const TypographyBody = {"fontFamily":["Posten Sans","Arial","sans-serif"],"fontSize":["18px","20px"],"lineHeight":["26px","28px"],"fontWeight":400,"letterSpacing":"0"};
export const TypographyBodyTitle = {"fontFamily":["Posten Sans","Arial","sans-serif"],"fontSize":["18px","20px"],"lineHeight":["26px","28px"],"fontWeight":500,"letterSpacing":"0"};
export const TypographyBodySmall = {"fontFamily":["Posten Sans","Arial","sans-serif"],"fontSize":["16px","18px"],"lineHeight":["24px","26px"],"fontWeight":400,"letterSpacing":"0"};
export const TypographyBodySmallTitle = {"fontFamily":["Posten Sans","Arial","sans-serif"],"fontSize":["16px","18px"],"lineHeight":["24px","26px"],"fontWeight":500,"letterSpacing":"0"};
export const TypographyTechnical = {"fontFamily":["Posten Sans","Arial","sans-serif"],"fontSize":["14px","16px"],"lineHeight":["22px","24px"],"fontWeight":400,"letterSpacing":"0"};
export const TypographyTechnicalTitle = {"fontFamily":["Posten Sans","Arial","sans-serif"],"fontSize":["14px","16px"],"lineHeight":["22px","24px"],"fontWeight":500,"letterSpacing":"0"};
export const TypographyCaption = {"fontFamily":["Posten Sans","Arial","sans-serif"],"fontSize":"13px","lineHeight":"18px","fontWeight":400,"letterSpacing":"0"};
export const TypographyCaptionTitle = {"fontFamily":["Posten Sans","Arial","sans-serif"],"fontSize":"13px","lineHeight":"18px","fontWeight":500,"letterSpacing":"0"};
export const BorderRadius8 = "8px";
export const BorderRadius16 = "16px";
export const BorderRadius24 = "24px";
export const BorderRadius32 = "32px";
export const BorderRadius = "2px";
export const StrokeDefault = "1px";
export const StrokeThick = "2px";
export const ShadowDefault = {"color":"#00000022","offsetX":"0px","offsetY":"1px","blur":"5px","spread":"0px"};
export const MicroAnimationEasingIn = [0.65,0,1,0.1];
export const MicroAnimationEasingOut = [0,0.45,0.1,1];
export const MicroAnimationEasingNormal = [0.45,0.1,0.65,1];
export const MicroAnimationDurationQuick = "0.130s";
export const MicroAnimationDurationNormal = "0.300s";
export const MicroAnimationDurationSlow = "0.700s";
export const Opacity7 = ".07";
export const Opacity10 = ".1";
export const Opacity20 = ".2";
export const Opacity50 = ".5";
export const ColorsBringBgDefault = "#ffffff";
export const ColorsBringBgTinted = "#f1f7e9";
export const ColorsBringSurfaceDefault = "#f1f7e9";
export const ColorsBringSurfaceTinted = "#ddf1d0";
export const ColorsBringSurfaceHover = "#c6e7b1";
export const ColorsBringSurfaceActive = "#b5e099";
export const ColorsBringBorderDefault = "#56b529";
export const ColorsBringBorderStrong = "#00643a";
export const ColorsBringTextSubtle = "#00643a";
export const ColorsBringTextDefault = "#002f19";
export const ColorsBringBaseDefault = "#6ec943";
export const ColorsBringBaseHover = "#56b529";
export const ColorsBringBaseActive = "#b5e099";
export const ColorsBringBaseContrastDefault = "#000000";
export const ColorsPostenBgDefault = "#ffffff";
export const ColorsPostenBgTinted = "#fff5f0";
export const ColorsPostenSurfaceDefault = "#fff5f0";
export const ColorsPostenSurfaceTinted = "#ffe3e0";
export const ColorsPostenSurfaceHover = "#fcd3cf";
export const ColorsPostenSurfaceActive = "#ffb5af";
export const ColorsPostenBorderDefault = "#e32d22";
export const ColorsPostenBorderStrong = "#980000";
export const ColorsPostenTextSubtle = "#980000";
export const ColorsPostenTextDefault = "#4a1011";
export const ColorsPostenBaseDefault = "#e32d22";
export const ColorsPostenBaseHover = "#ca201c";
export const ColorsPostenBaseActive = "#980000";
export const ColorsPostenBaseContrastDefault = "#ffffff";
export const ColorsNeutralBgDefault = "#ffffff";
export const ColorsNeutralBgTinted = "#f7f7f7";
export const ColorsNeutralSurfaceDefault = "#ffffff";
export const ColorsNeutralSurfaceTinted = "#f7f7f7";
export const ColorsNeutralSurfaceHover = "#f2f2f2";
export const ColorsNeutralSurfaceActive = "#e6e6e6";
export const ColorsNeutralBorderDefault = "#d6d6d6";
export const ColorsNeutralBorderStrong = "#666666";
export const ColorsNeutralTextSubtle = "#666666";
export const ColorsNeutralTextDefault = "#000000";
export const ColorsNeutralBaseDefault = "#e6e6e6";
export const ColorsNeutralBaseHover = "#d6d6d6";
export const ColorsNeutralBaseActive = "#c1c1c1";
export const ColorsNeutralBaseContrastDefault = "#121212";
export const ColorsWarningSurfaceDefault = "#fff5e0";
export const ColorsWarningBorderDefault = "#d68000";
export const ColorsWarningBorderStrong = "#666666";
export const ColorsWarningTextDefault = "#121212";
export const ColorsWarningBaseDefault = "#fdbb2f";
export const ColorsWarningBaseContrastDefault = "#121212";
export const ColorsSuccessSurfaceDefault = "#f1f7e9";
export const ColorsSuccessBorderDefault = "#c6e7b1";
export const ColorsSuccessBorderStrong = "#00643a";
export const ColorsSuccessTextDefault = "#00643a";
export const ColorsSuccessBaseDefault = "#b5e099";
export const ColorsSuccessBaseContrastDefault = "#002f19";
export const ColorsInfoSurfaceDefault = "#efeeff";
export const ColorsInfoBorderDefault = "#c6c2ff";
export const ColorsInfoBorderStrong = "#7167fe";
export const ColorsInfoTextDefault = "#002ca3";
export const ColorsInfoBaseDefault = "#fff5e0";
export const ColorsInfoBaseContrastDefault = "#121212";
export const ColorsErrorSurfaceDefault = "#fff5f0";
export const ColorsErrorBorderDefault = "#ffb5af";
export const ColorsErrorBorderStrong = "#980000";
export const ColorsErrorTextDefault = "#980000";
export const ColorsErrorBaseDefault = "#980000";
export const ColorsErrorBaseContrastDefault = "#ffffff";

export const ColorsBringDarkBgDefault = "#121212";
export const ColorsBringDarkBgTinted = "#222222";
export const ColorsBringDarkSurfaceDefault = "#333333";
export const ColorsBringDarkSurfaceTinted = "#002f19";
export const ColorsBringDarkSurfaceHover = "#222222";
export const ColorsBringDarkSurfaceActive = "#3d3d3d";
export const ColorsBringDarkBorderDefault = "#56b529";
export const ColorsBringDarkBorderStrong = "#c6e7b1";
export const ColorsBringDarkTextSubtle = "#c6e7b1";
export const ColorsBringDarkTextDefault = "#f1f7e9";
export const ColorsBringDarkBaseDefault = "#6ec943";
export const ColorsBringDarkBaseHover = "#56b529";
export const ColorsBringDarkBaseActive = "#b5e099";
export const ColorsBringDarkBaseContrastDefault = "#000000";
export const ColorsPostenDarkBgDefault = "#121212";
export const ColorsPostenDarkBgTinted = "#222222";
export const ColorsPostenDarkSurfaceDefault = "#333333";
export const ColorsPostenDarkSurfaceTinted = "#4a1011";
export const ColorsPostenDarkSurfaceHover = "#222222";
export const ColorsPostenDarkSurfaceActive = "#3d3d3d";
export const ColorsPostenDarkBorderDefault = "#e32d22";
export const ColorsPostenDarkBorderStrong = "#fcd3cf";
export const ColorsPostenDarkTextSubtle = "#fcd3cf";
export const ColorsPostenDarkTextDefault = "#fff5f0";
export const ColorsPostenDarkBaseDefault = "#e32d22";
export const ColorsPostenDarkBaseHover = "#ca201c";
export const ColorsPostenDarkBaseActive = "#980000";
export const ColorsPostenDarkBaseContrastDefault = "#ffffff";
export const ColorsNeutralDarkBgDefault = "#121212";
export const ColorsNeutralDarkBgTinted = "#222222";
export const ColorsNeutralDarkSurfaceDefault = "#2c2c2c";
export const ColorsNeutralDarkSurfaceTinted = "#333333";
export const ColorsNeutralDarkSurfaceHover = "#3d3d3d";
export const ColorsNeutralDarkSurfaceActive = "#666666";
export const ColorsNeutralDarkBorderDefault = "#666666";
export const ColorsNeutralDarkBorderStrong = "#d6d6d6";
export const ColorsNeutralDarkTextSubtle = "#d6d6d6";
export const ColorsNeutralDarkTextDefault = "#ffffff";
export const ColorsNeutralDarkBaseDefault = "#222222";
export const ColorsNeutralDarkBaseHover = "#3d3d3d";
export const ColorsNeutralDarkBaseActive = "#666666";
export const ColorsNeutralDarkBaseContrastDefault = "#f7f7f7";
export const ColorsWarningDarkSurfaceDefault = "#3d3d3d";
export const ColorsWarningDarkBorderDefault = "#d68000";
export const ColorsWarningDarkBorderStrong = "#fdbb2f";
export const ColorsWarningDarkTextDefault = "#ffe2a3";
export const ColorsWarningDarkBaseDefault = "#fdbb2f";
export const ColorsWarningDarkBaseContrastDefault = "#121212";
export const ColorsSuccessDarkSurfaceDefault = "#00643a";
export const ColorsSuccessDarkBorderDefault = "#00643a";
export const ColorsSuccessDarkBorderStrong = "#c6e7b1";
export const ColorsSuccessDarkTextDefault = "#b5e099";
export const ColorsSuccessDarkBaseDefault = "#b5e099";
export const ColorsSuccessDarkBaseContrastDefault = "#002f19";
export const ColorsInfoDarkSurfaceDefault = "#3d3d3d";
export const ColorsInfoDarkBorderDefault = "#c6c2ff";
export const ColorsInfoDarkBorderStrong = "#efeeff";
export const ColorsInfoDarkTextDefault = "#c6c2ff";
export const ColorsInfoDarkBaseDefault = "#c6c2ff";
export const ColorsInfoDarkBaseContrastDefault = "#121212";
export const ColorsErrorDarkSurfaceDefault = "#4a1011";
export const ColorsErrorDarkBorderDefault = "#980000";
export const ColorsErrorDarkBorderStrong = "#ffb5af";
export const ColorsErrorDarkTextDefault = "#fcd3cf";
export const ColorsErrorDarkBaseDefault = "#980000";
export const ColorsErrorDarkBaseContrastDefault = "#ffffff";