@postenbring/hedwig-tokens
Version:
Design tokens for [Hedwig Design System](https://github.com/bring/hedwig-design-system).
191 lines (190 loc) • 11.3 kB
JavaScript
export const PostenColorsSignatureRed = "#e32d22";
export const PostenColorsDarkerRed = "#4a1011";
export const PostenColorsDarkRed = "#980000";
export const PostenColorsLightRed = "#ffb5af";
export const PostenColorsLighterRed = "#fff5f0";
export const PostenColorsSignatureRedHover = "#ca201c";
export const PostenColorsLightRedHover = "#ffa199";
export const BringColorsSignatureGreen = "#56b529";
export const BringColorsDarkerGreen = "#002f19";
export const BringColorsDarkGreen = "#00643a";
export const BringColorsLightGreen = "#b5e099";
export const BringColorsLighterGreen = "#f1f7e9";
export const BringColorsSignatureGreenHover = "#6ec943";
export const BringColorsLightGreenHover = "#d3e593";
export const UiColorsBlack = "#000000";
export const UiColorsDarkGrey = "#6e6e6e";
export const UiColorsGrey = "#d6d6d6";
export const UiColorsLightGreyStroke = "#e4e4e4";
export const UiColorsLightGreyFill = "#f2f2f2";
export const UiColorsWhite = "#ffffff";
export const UiColorsWarningYellow = "#fdbb2f";
export const UiColorsWarningYellowStroke = "#d68000";
export const UiColorsWarningYellowLightFill = "#fff5e0";
export const UiColorsWarningYellowHover = "#ffc340";
export const UiColorsBlackHover = "#1e1e1e";
export const DarkModeColorsObsidian = "#121212"; // Base color for dark mode
export const DarkModeColorsCoal = "#252525"; // Background on none-clickable cards
export const DarkModeColorsDusk = "#2c2c2c"; // Fill inputfields, checkbox, radio buttons, toogles
export const DarkModeColorsSpider = "#333333"; // Clickable cards or tiles
export const DarkModeColorsAsh = "#999999"; // 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":500,"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 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 = 500;
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;