@postenbring/hedwig-tokens
Version:
Design tokens for [Hedwig Design System](https://github.com/bring/hedwig-design-system).
200 lines (199 loc) • 10.5 kB
TypeScript
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";
/** Base color for dark mode */
export const DarkModeColorsObsidian : "#121212";
/** Background on none-clickable cards */
export const DarkModeColorsCoal : "#252525";
/** Fill inputfields, checkbox, radio buttons, toogles */
export const DarkModeColorsDusk : "#2c2c2c";
/** Clickable cards or tiles */
export const DarkModeColorsSpider : "#333333";
/** Default radio buttons, checkbox, label on inputsfields, toogle off (background) */
export const DarkModeColorsAsh : "#999999";
/** Larger mobile phones */
export const BreakpointSmall : "460px";
/** Most tablets */
export const BreakpointMedium : "720px";
/** Smaller laptops and desktop monitors. This is where the navbar goes from the mobile version to the desktop version */
export const BreakpointLarge : "940px";
/** Most modern laptops and desktop monitors */
export const BreakpointXlarge : "1200px";
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 : string[];
export const FontsPostenSansBold : string[];
export const FontsPostenSansMedium : string[];
export const FontsPostenSansRegular : string[];
export const TypographyPostenH1Display : { fontFamily: string[], fontSize: string[], lineHeight: string[], fontWeight: number, letterSpacing: string };
export const TypographyPostenH1 : { fontFamily: string[], fontSize: string[], lineHeight: string[], fontWeight: number, letterSpacing: string };
export const TypographyPostenH2 : { fontFamily: string[], fontSize: string[], lineHeight: string[], fontWeight: number, letterSpacing: string };
export const TypographyBringH1Display : { fontFamily: string[], fontSize: string[], lineHeight: string[], fontWeight: number, letterSpacing: string };
export const TypographyBringH1 : { fontFamily: string[], fontSize: string[], lineHeight: string[], fontWeight: number, letterSpacing: string };
export const TypographyBringH2 : { fontFamily: string[], fontSize: string[], lineHeight: string[], fontWeight: number, letterSpacing: string };
export const TypographyH3 : { fontFamily: string[], fontSize: string[], lineHeight: string[], fontWeight: number, letterSpacing: string };
export const TypographyH3Title : { fontFamily: string[], fontSize: string[], lineHeight: string[], fontWeight: number, letterSpacing: string };
export const TypographyBody : { fontFamily: string[], fontSize: string[], lineHeight: string[], fontWeight: number, letterSpacing: string };
export const TypographyBodyTitle : { fontFamily: string[], fontSize: string[], lineHeight: string[], fontWeight: number, letterSpacing: string };
export const TypographyBodySmall : { fontFamily: string[], fontSize: string[], lineHeight: string[], fontWeight: number, letterSpacing: string };
export const TypographyBodySmallTitle : { fontFamily: string[], fontSize: string[], lineHeight: string[], fontWeight: number, letterSpacing: string };
export const TypographyTechnical : { fontFamily: string[], fontSize: string[], lineHeight: string[], fontWeight: number, letterSpacing: string };
export const TypographyTechnicalTitle : { fontFamily: string[], fontSize: string[], lineHeight: string[], fontWeight: number, letterSpacing: string };
export const TypographyCaption : { fontFamily: string[], fontSize: string, lineHeight: string, fontWeight: number, letterSpacing: string };
export const TypographyCaptionTitle : { fontFamily: string[], fontSize: string, lineHeight: string, fontWeight: number, letterSpacing: string };
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: string, offsetX: string, offsetY: string, blur: string, spread: string };
export const MicroAnimationEasingIn : number[];
export const MicroAnimationEasingOut : number[];
export const MicroAnimationEasingNormal : number[];
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 : string[];
export const FontSizePostenH1DisplayMin : "40px";
export const FontSizePostenH1DisplayMax : "72px";
export const FontSizePostenH1 : string[];
export const FontSizePostenH1Min : "32px";
export const FontSizePostenH1Max : "48px";
export const FontSizePostenH2 : string[];
export const FontSizePostenH2Min : "28px";
export const FontSizePostenH2Max : "32px";
export const FontSizeBringH1Display : string[];
export const FontSizeBringH1DisplayMin : "40px";
export const FontSizeBringH1DisplayMax : "72px";
export const FontSizeBringH1 : string[];
export const FontSizeBringH1Min : "32px";
export const FontSizeBringH1Max : "48px";
export const FontSizeBringH2 : string[];
export const FontSizeBringH2Min : "28px";
export const FontSizeBringH2Max : "32px";
export const FontSizeH3 : string[];
export const FontSizeH3Min : "22px";
export const FontSizeH3Max : "24px";
export const FontSizeH3Title : string[];
export const FontSizeH3TitleMin : "22px";
export const FontSizeH3TitleMax : "24px";
export const FontSizeBody : string[];
export const FontSizeBodyMin : "18px";
export const FontSizeBodyMax : "20px";
export const FontSizeBodyTitle : string[];
export const FontSizeBodyTitleMin : "18px";
export const FontSizeBodyTitleMax : "20px";
export const FontSizeBodySmall : string[];
export const FontSizeBodySmallMin : "16px";
export const FontSizeBodySmallMax : "18px";
export const FontSizeBodySmallTitle : string[];
export const FontSizeBodySmallTitleMin : "16px";
export const FontSizeBodySmallTitleMax : "18px";
export const FontSizeTechnical : string[];
export const FontSizeTechnicalMin : "14px";
export const FontSizeTechnicalMax : "16px";
export const FontSizeTechnicalTitle : string[];
export const FontSizeTechnicalTitleMin : "14px";
export const FontSizeTechnicalTitleMax : "16px";
export const FontSizeCaption : "13px";
export const FontSizeCaptionTitle : "13px";
export const LineHeightPostenH1Display : string[];
export const LineHeightPostenH1DisplayMin : "56px";
export const LineHeightPostenH1DisplayMax : "80px";
export const LineHeightPostenH1 : string[];
export const LineHeightPostenH1Min : "40px";
export const LineHeightPostenH1Max : "56px";
export const LineHeightPostenH2 : string[];
export const LineHeightPostenH2Min : "36px";
export const LineHeightPostenH2Max : "40px";
export const LineHeightBringH1Display : string[];
export const LineHeightBringH1DisplayMin : "56px";
export const LineHeightBringH1DisplayMax : "80px";
export const LineHeightBringH1 : string[];
export const LineHeightBringH1Min : "40px";
export const LineHeightBringH1Max : "56px";
export const LineHeightBringH2 : string[];
export const LineHeightBringH2Min : "36px";
export const LineHeightBringH2Max : "40px";
export const LineHeightH3 : string[];
export const LineHeightH3Min : "28px";
export const LineHeightH3Max : "32px";
export const LineHeightH3Title : string[];
export const LineHeightH3TitleMin : "28px";
export const LineHeightH3TitleMax : "32px";
export const LineHeightBody : string[];
export const LineHeightBodyMin : "26px";
export const LineHeightBodyMax : "28px";
export const LineHeightBodyTitle : string[];
export const LineHeightBodyTitleMin : "26px";
export const LineHeightBodyTitleMax : "28px";
export const LineHeightBodySmall : string[];
export const LineHeightBodySmallMin : "24px";
export const LineHeightBodySmallMax : "26px";
export const LineHeightBodySmallTitle : string[];
export const LineHeightBodySmallTitleMin : "24px";
export const LineHeightBodySmallTitleMax : "26px";
export const LineHeightTechnical : string[];
export const LineHeightTechnicalMin : "22px";
export const LineHeightTechnicalMax : "24px";
export const LineHeightTechnicalTitle : string[];
export const LineHeightTechnicalTitleMin : "22px";
export const LineHeightTechnicalTitleMax : "24px";
export const LineHeightCaption : "18px";
export const LineHeightCaptionTitle : "18px";
export const FontWeightPostenH1Display : number;
export const FontWeightPostenH1 : number;
export const FontWeightPostenH2 : number;
export const FontWeightBringH1Display : number;
export const FontWeightBringH1 : number;
export const FontWeightBringH2 : number;
export const FontWeightH3 : number;
export const FontWeightH3Title : number;
export const FontWeightBody : number;
export const FontWeightBodyTitle : number;
export const FontWeightBodySmall : number;
export const FontWeightBodySmallTitle : number;
export const FontWeightTechnical : number;
export const FontWeightTechnicalTitle : number;
export const FontWeightCaption : number;
export const FontWeightCaptionTitle : number;