UNPKG

@postenbring/hedwig-tokens

Version:

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

358 lines (356 loc) 19 kB
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; /** @deprecated Use the new color scheme instead */ 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 - Base color for dark mode */ export const DarkModeColorsObsidian : "#121212"; /** @deprecated Use the new color scheme instead - Background on none-clickable cards */ export const DarkModeColorsCoal : "#252525"; /** @deprecated Use the new color scheme instead - Fill inputfields, checkbox, radio buttons, toogles */ export const DarkModeColorsDusk : "#2c2c2c"; /** @deprecated Use the new color scheme instead - Clickable cards or tiles */ export const DarkModeColorsSpider : "#333333"; /** @deprecated Use the new color scheme instead - 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 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";