@itamar.wmde/wikit-css/build/tokens/index.js

Prototype for a Design System and UI toolkit for WMDE Wikibase

/**
 * Do not edit directly
 * Generated on Tue, 21 Apr 2020 07:34:07 GMT
 */

export const ButtonSizeMediumHeight = "32px";
export const ButtonSizeMediumTextPaddingX = "12px";
export const ButtonSizeMediumTextPaddingY = "5px";
export const ButtonSizeLargeHeight = "40px";
export const ButtonSizeLargeTextPaddingX = "16px";
export const ButtonSizeLargeTextPaddingY = "9px";
export const ButtonTextFontFamily = "-apple-system, 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Lato', 'Helvetica', 'Arial', sans-serif";
export const ButtonTextFontWeight = "600";
export const ButtonTextFontSize = "16px";
export const ButtonTextLineHeight = "1.25";
export const ButtonTextColorDisabled = "#ffffff";
export const ButtonBackgroundColorDisabled = "#c8ccd1";
export const ButtonBorderColorDisabled = "#c8ccd1";
export const ButtonBorderRadius = "2px";
export const ButtonBorderWidthDefault = "1px";
export const ButtonCursorHoverEnabled = "pointer";
export const ButtonCursorHoverDisabled = "default";
export const ButtonTransitionHoverProperty = "background-color, border-color, box-shadow";
export const ButtonTransitionHoverDuration = "100ms";
export const ButtonNeutralTextColorDefault = "#202122";
export const ButtonNeutralTextColorActive = "#000000";
export const ButtonNeutralBackgroundColorDefault = "#f8f9fa";
export const ButtonNeutralBackgroundColorHover = "#ffffff";
export const ButtonNeutralBackgroundColorActive = "#c8ccd1";
export const ButtonNeutralBackgroundColorFocus = "#f8f9fa";
export const ButtonNeutralBorderColorDefault = "#a2a9b1";
export const ButtonNeutralBorderColorHover = "#a2a9b1";
export const ButtonNeutralBorderColorActive = "#72777d";
export const ButtonNeutralBorderColorFocus = "#3366cc";
export const ButtonNeutralBoxShadowFocus = "inset 0 0 0 1px #3366cc";
export const ButtonPrimaryTextColorDefault = "#ffffff";
export const ButtonPrimaryBackgroundColorDefault = "#3366cc";
export const ButtonPrimaryBackgroundColorHover = "#447ff5";
export const ButtonPrimaryBackgroundColorActive = "#2a4b8d";
export const ButtonPrimaryBackgroundColorFocus = "#3366cc";
export const ButtonPrimaryBorderColorDefault = "#3366cc";
export const ButtonPrimaryBorderColorHover = "#447ff5";
export const ButtonPrimaryBorderColorActive = "#2a4b8d";
export const ButtonPrimaryBorderColorFocus = "#3366cc";
export const ButtonPrimaryBoxShadowFocus = "inset 0 0 0 1px #3366cc, inset 0 0 0 2px #ffffff";
export const ButtonDestructiveTextColorDefault = "#ffffff";
export const ButtonDestructiveBackgroundColorDefault = "#dd3333";
export const ButtonDestructiveBackgroundColorHover = "#b32424";
export const ButtonDestructiveBackgroundColorActive = "#d11d13";
export const ButtonDestructiveBackgroundColorFocus = "#dd3333";
export const ButtonDestructiveBorderColorDefault = "#dd3333";
export const ButtonDestructiveBorderColorHover = "#b32424";
export const ButtonDestructiveBorderColorActive = "#d11d13";
export const ButtonDestructiveBorderColorFocus = "#dd3333";
export const ButtonDestructiveBoxShadowFocus = "inset 0 0 0 1px #dd3333, inset 0 0 0 2px #ffffff";
export const TextColorBase = "#202122";
export const TextColorEmphasized = "#000000";
export const TextColorSecondary = "#72777d";
export const TextStyleH1FontFamily = "'Linux Libertine', 'Georgia', 'Times', serif";
export const TextStyleH1Size = "32px";
export const TextStyleH1LineHeight = "1.25";
export const TextStyleH1Color = "#202122";
export const TextStyleH1FontWeight = "400";
export const TextStyleH2FontFamily = "-apple-system, 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Lato', 'Helvetica', 'Arial', sans-serif";
export const TextStyleH2Size = "24px";
export const TextStyleH2LineHeight = "1.25";
export const TextStyleH2Color = "#202122";
export const TextStyleH2FontWeight = "600";
export const TextStyleH3FontFamily = "-apple-system, 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Lato', 'Helvetica', 'Arial', sans-serif";
export const TextStyleH3Size = "20px";
export const TextStyleH3LineHeight = "1.25";
export const TextStyleH3Color = "#202122";
export const TextStyleH3FontWeight = "600";
export const TextStyleH4FontFamily = "-apple-system, 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Lato', 'Helvetica', 'Arial', sans-serif";
export const TextStyleH4Size = "18px";
export const TextStyleH4LineHeight = "1.25";
export const TextStyleH4Color = "#202122";
export const TextStyleH4FontWeight = "600";
export const TextStyleH5FontFamily = "-apple-system, 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Lato', 'Helvetica', 'Arial', sans-serif";
export const TextStyleH5Size = "18px";
export const TextStyleH5LineHeight = "1.25";
export const TextStyleH5Color = "#202122";
export const TextStyleH5FontWeight = "600";
export const TextStyleH6FontFamily = "-apple-system, 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Lato', 'Helvetica', 'Arial', sans-serif";
export const TextStyleH6Size = "16px";
export const TextStyleH6LineHeight = "1.25";
export const TextStyleH6Color = "#202122";
export const TextStyleH6FontWeight = "400";
export const TextStyleBodyFontFamily = "-apple-system, 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Lato', 'Helvetica', 'Arial', sans-serif";
export const TextStyleBodySize = "16px";
export const TextStyleBodyLineHeight = "1.5";
export const TextStyleBodyColor = "#202122";
export const TextStyleBodyFontWeight = "400";
export const TextStyleDescriptionFontFamily = "-apple-system, 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Lato', 'Helvetica', 'Arial', sans-serif";
export const TextStyleDescriptionSize = "14px";
export const TextStyleDescriptionLineHeight = "1.6";
export const TextStyleDescriptionColor = "#72777d";
export const TextStyleDescriptionFontWeight = "400";
export const BackgroundColorUnframedBase = "#ffffff";
export const BackgroundColorUnframedHover = "#eaecf0";
export const BackgroundColorUnframedFocus = "#ffffff";
export const BackgroundColorUnframedDisabled = "#eaecf0";
export const BackgroundColorFramedBase = "#f8f9fa";
export const BackgroundColorFramedHover = "#ffffff";
export const BackgroundColorFramedActive = "#72777d";
export const BackgroundColorFramedDisabled = "#c8ccd1";
export const BorderColorBase = "#a2a9b1";
export const BorderColorHover = "#72777d";
export const BorderColorActive = "#72777d";
export const BorderColorFocus = "#a2a9b1";
export const BorderColorDisabled = "#c8ccd1";
export const BorderRadiusNone = "0px";
export const BorderRadiusSmall = "2px";
export const BorderRadiusMedium = "4px";
export const BorderWidthThin = "1px";
export const BorderWidthThick = "2px";
export const CtaTextLineHeight = "1.25";
export const CtaTextFontSize = "16px";
export const CtaTextFontWeight = "600";
export const CtaTextPaddingMediumX = "12px";
export const CtaTextPaddingMediumY = "5px";
export const CtaTextPaddingLargeX = "16px";
export const CtaTextPaddingLargeY = "9px";
export const CtaTextColorPositive = "#202122";
export const CtaTextColorReversed = "#ffffff";
export const CtaHeightMedium = "32px";
export const CtaHeightLarge = "40px";
export const CtaBorderColorDisabled = "#c8ccd1";
export const CtaBoxShadowInsetDefault = "inset 0 0 0 1px #3366cc";
export const CtaBoxShadowInsetDestructive = "inset 0 0 0 1px #dd3333";
export const CtaBoxShadowInsetFilled = "inset 0 0 0 2px #ffffff";
export const CtaBackgroundColorDisabled = "#c8ccd1";
export const CtaCursorHoverEnabled = "pointer";
export const CtaCursorHoverDisabled = "default";
export const CtaTransitionHoverProperty = "background-color, border-color, box-shadow";
export const CtaTransitionHoverDuration = "100ms";
export const FontFamilySans = "-apple-system, 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Lato', 'Helvetica', 'Arial', sans-serif";
export const FontFamilySerif = "'Linux Libertine', 'Georgia', 'Times', serif";
export const FontFamilyMonospace = "'Menlo', 'Consolas', 'Liberation Mono', 'Courier New', monospace";
export const FontWeightRegular = "400";
export const FontWeightBold = "600";
export const FontLineHeightSmall = "1.25";
export const FontLineHeightMedium = "1.5";
export const FontLineHeightLarge = "1.6";
export const ColorBase0 = "#000000";
export const ColorBase10 = "#202122";
export const ColorBase20 = "#54595d";
export const ColorBase30 = "#72777d";
export const ColorBase50 = "#a2a9b1";
export const ColorBase70 = "#c8ccd1";
export const ColorBase80 = "#eaecf0";
export const ColorBase90 = "#f8f9fa";
export const ColorBase100 = "#ffffff";
export const ColorAccent30 = "#2a4b8d";
export const ColorAccent50 = "#3366cc";
export const ColorAccent90 = "#eaf3ff";
export const ColorUtilityRed30 = "#b32424";
export const ColorUtilityRed50 = "#dd3333";
export const ColorUtilityRed90 = "#fee7e6";
export const ColorUtilityGreen30 = "#14866d";
export const ColorUtilityGreen50 = "#00af89";
export const ColorUtilityGreen90 = "#d5fdf4";
export const ColorUtilityYellow30 = "#ac6600";
export const ColorUtilityYellow50 = "#ffcc33";
export const ColorUtilityYellow90 = "#fef6e7";
export const ColorInteractionPrimaryHover = "#447ff5";
export const ColorInteractionDestructiveActive = "#d11d13";
export const DimensionFontSizeXsmall = "13px";
export const DimensionFontSizeSmall = "14px";
export const DimensionFontSizeMedium = "16px";
export const DimensionFontSizeLarge = "18px";
export const DimensionFontSizeXlarge = "20px";
export const DimensionFontSizeXxlarge = "24px";
export const DimensionFontSizeXxxlarge = "32px";
export const DimensionStaticSize0 = "0px";
export const DimensionStaticSize10 = "1px";
export const DimensionStaticSize25 = "2px";
export const DimensionStaticSize50 = "4px";
export const DimensionStaticSize65 = "5px";
export const DimensionStaticSize100 = "8px";
export const DimensionStaticSize110 = "9px";
export const DimensionStaticSize150 = "12px";
export const DimensionStaticSize200 = "16px";
export const DimensionStaticSize250 = "20px";
export const DimensionStaticSize300 = "24px";
export const DimensionStaticSize400 = "32px";
export const DimensionStaticSize500 = "40px";
export const TransitionDurationFast = "100ms";
export const TransitionDurationRegular = "200ms";
export const TransitionDurationSlower = "300ms";
export const TransitionDurationSlowest = "400ms";
export const TransitionPropertyBackgroundColor = "background-color";
export const TransitionPropertyBorderColor = "border-color";
export const TransitionPropertyBoxShadow = "box-shadow";
export const BoxShadowInsetThin = "inset 0 0 0 1px";
export const BoxShadowInsetThick = "inset 0 0 0 2px";
export const CursorDefault = "default";
export const CursorGrab = "grab";
export const CursorPointer = "pointer";
export const CursorNotAllowed = "not-allowed";