@postenbring/hedwig-tokens
Version:
Design tokens for [Hedwig Design System](https://github.com/bring/hedwig-design-system).
358 lines (356 loc) • 19 kB
TypeScript
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";