@twilio-paste/design-tokens/dist/tokens.es6.js

export const borderRadius0 = "0";
export const borderRadius10 = "3px";
export const borderRadius20 = "4px";
export const borderRadius30 = "8px";
export const borderRadiusCircle = "50%";
export const borderWidth0 = "0";
export const borderWidth10 = "1px";
export const borderWidth20 = "2px";
export const colorBackground = "#f4f4f6";
export const colorBackgroundBody = "#ffffff";
export const colorBackgroundBrand = "#233659";
export const colorBackgroundBrandHighlight = "#f22f46";
export const colorBackgroundDestructive = "#d61f1f";
export const colorBackgroundDestructiveDark = "#750c0c";
export const colorBackgroundDestructiveDarker = "#4a0b0b";
export const colorBackgroundDestructiveLight = "#f58a8a";
export const colorBackgroundDestructiveLighter = "#fccfcf";
export const colorBackgroundDestructiveLightest = "#feecec";
export const colorBackgroundError = "#d61f1f";
export const colorBackgroundErrorLightest = "#feecec";
export const colorBackgroundInverse = "#1f304c";
export const colorBackgroundNeutralLightest = "#ebf4ff";
export const colorBackgroundPrimary = "#0263e0";
export const colorBackgroundPrimaryDark = "#001489";
export const colorBackgroundPrimaryDarker = "#030b5d";
export const colorBackgroundPrimaryLight = "#66b3ff";
export const colorBackgroundPrimaryLighter = "#cce4ff";
export const colorBackgroundPrimaryLightest = "#ebf4ff";
export const colorBackgroundRequired = "#eb5656";
export const colorBackgroundRowStriped = "#f4f4f6";
export const colorBackgroundSuccess = "#14b053";
export const colorBackgroundSuccessLightest = "#edfdf3";
export const colorBackgroundWarning = "#f47c22";
export const colorBackgroundWarningLightest = "#fef5ee";
export const colorBorder = "#aeb2c1";
export const colorBorderDark = "#606b85";
export const colorBorderDestructive = "#d61f1f";
export const colorBorderDestructiveDark = "#750c0c";
export const colorBorderDestructiveDarker = "#4a0b0b";
export const colorBorderDestructiveLight = "#f58a8a";
export const colorBorderDestructiveLighter = "#fccfcf";
export const colorBorderError = "#d61f1f";
export const colorBorderErrorLight = "#f58a8a";
export const colorBorderErrorLightest = "#feecec";
export const colorBorderInput = "#606b85";
export const colorBorderInputFocus = "#0263e0";
export const colorBorderInputHover = "#0263e0";
export const colorBorderLight = "#e1e3ea";
export const colorBorderNeutralLight = "#8891aa";
export const colorBorderPrimary = "#0263e0";
export const colorBorderPrimaryDark = "#001489";
export const colorBorderPrimaryDarker = "#030b5d";
export const colorBorderPrimaryLight = "#66b3ff";
export const colorBorderPrimaryLighter = "#cce4ff";
export const colorBorderSuccess = "#14b053";
export const colorBorderSuccessLightest = "#edfdf3";
export const colorBorderWarning = "#f47c22";
export const colorBorderWarningLight = "#ffb37a";
export const colorBorderWarningLightest = "#fef5ee";
export const colorBrand = "#233659";
export const colorBrandHighlight = "#f22f46";
export const colorGray0 = "#ffffff";
export const colorGray10 = "#f4f4f6";
export const colorGray100 = "#121c2d";
export const colorGray20 = "#e1e3ea";
export const colorGray30 = "#cacdd8";
export const colorGray40 = "#aeb2c1";
export const colorGray50 = "#8891aa";
export const colorGray60 = "#606b85";
export const colorGray70 = "#4b5671";
export const colorGray80 = "#394762";
export const colorGray90 = "#1f304c";
export const colorText = "#121c2d";
export const colorTextBrandHighlight = "#f22f46";
export const colorTextBrandInverse = "#ffffff";
export const colorTextError = "#d61f1f";
export const colorTextErrorDark = "#ad1111";
export const colorTextIcon = "#4b5671";
export const colorTextInverse = "#ffffff";
export const colorTextInverseWeak = "#8891aa";
export const colorTextLabel = "#121c2d";
export const colorTextLink = "#043cb5";
export const colorTextLinkDark = "#001489";
export const colorTextLinkDarker = "#030b5d";
export const colorTextLinkDestructive = "#d61f1f";
export const colorTextLinkDestructiveDark = "#ad1111";
export const colorTextLinkDestructiveDarker = "#750c0c";
export const colorTextLinkDestructiveLight = "#f58a8a";
export const colorTextLinkLight = "#66b3ff";
export const colorTextPlaceholder = "#4b5671";
export const colorTextSuccess = "#14b053";
export const colorTextWarning = "#f47c22";
export const colorTextWarningDark = "#c35323";
export const colorTextWeak = "#4b5671";
export const fontFamilyCode = "'Fira Mono', 'Courier New', Courier, monospace";
export const fontFamilyText = "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif";
export const fontSize10 = "0.625rem";
export const fontSize100 = "2.5rem";
export const fontSize110 = "3rem";
export const fontSize20 = "0.75rem";
export const fontSize30 = "0.875rem";
export const fontSize40 = "1rem";
export const fontSize50 = "1.125rem";
export const fontSize60 = "1.25rem";
export const fontSize70 = "1.5rem";
export const fontSize80 = "1.75rem";
export const fontSize90 = "2rem";
export const fontWeightBold = "700";
export const fontWeightLight = "300";
export const fontWeightMedium = "500";
export const fontWeightNormal = "400";
export const fontWeightSemibold = "600";
export const lineHeight10 = "1rem";
export const lineHeight100 = "3.25rem";
export const lineHeight110 = "3.75rem";
export const lineHeight20 = "1.25rem";
export const lineHeight30 = "1.5rem";
export const lineHeight40 = "1.75rem";
export const lineHeight50 = "1.75rem";
export const lineHeight60 = "1.75rem";
export const lineHeight70 = "2rem";
export const lineHeight80 = "2.25rem";
export const lineHeight90 = "2.5rem";
export const shadowBorderInput = "0 0 0 1px #606b85";
export const shadowBorderInputDisabled = "0 0 0 1px #e1e3ea";
export const shadowBorderInputError = "0 0 0 1px #d61f1f";
export const shadowBorderInputErrorHover = "0 0 0 1px #750c0c";
export const shadowBorderInputHover = "0 0 0 1px #030b5d";
export const shadowCard = "0 2px 4px 0 rgba(18, 28, 45, 0.3)";
export const shadowFocus = "0 0 0 4px rgba(2, 99, 224, 0.8)";
export const size0 = "0";
export const size10 = "5.5rem";
export const size100 = "64rem";
export const size110 = "70.5rem";
export const size120 = "77rem";
export const size20 = "12rem";
export const size30 = "18.5rem";
export const size40 = "25rem";
export const size50 = "31.5rem";
export const size60 = "38rem";
export const size70 = "44.5rem";
export const size80 = "51rem";
export const size90 = "57.5rem";
export const sizeIcon10 = "1rem";
export const sizeIcon100 = "3.25rem";
export const sizeIcon110 = "3.75rem";
export const sizeIcon20 = "1.25rem";
export const sizeIcon30 = "1.5rem";
export const sizeIcon40 = "1.75rem";
export const sizeIcon50 = "1.75rem";
export const sizeIcon60 = "1.75rem";
export const sizeIcon70 = "2rem";
export const sizeIcon80 = "2.25rem";
export const sizeIcon90 = "2.5rem";
export const space0 = "0";
export const space10 = "0.125rem";
export const space100 = "2.25rem";
export const space110 = "2.5rem";
export const space120 = "2.75rem";
export const space130 = "3rem";
export const space140 = "3.25rem";
export const space150 = "3.5rem";
export const space160 = "3.75rem";
export const space170 = "4rem";
export const space180 = "4.25rem";
export const space190 = "4.5rem";
export const space20 = "0.25rem";
export const space200 = "4.75rem";
export const space30 = "0.5rem";
export const space40 = "0.75rem";
export const space50 = "1rem";
export const space60 = "1.25rem";
export const space70 = "1.5rem";
export const space80 = "1.75rem";
export const space90 = "2rem";
export const zIndex0 = "0";
export const zIndex10 = "10";
export const zIndex20 = "20";
export const zIndex30 = "30";
export const zIndex40 = "40";
export const zIndex50 = "50";
export const zIndex60 = "60";
export const zIndex70 = "70";
export const zIndex80 = "80";
export const zIndex90 = "90";
export const backgroundColors = {
colorBackground,
colorBackgroundBody,
colorBackgroundBrand,
colorBackgroundBrandHighlight,
colorBackgroundDestructive,
colorBackgroundDestructiveDark,
colorBackgroundDestructiveDarker,
colorBackgroundDestructiveLight,
colorBackgroundDestructiveLighter,
colorBackgroundDestructiveLightest,
colorBackgroundError,
colorBackgroundErrorLightest,
colorBackgroundInverse,
colorBackgroundNeutralLightest,
colorBackgroundPrimary,
colorBackgroundPrimaryDark,
colorBackgroundPrimaryDarker,
colorBackgroundPrimaryLight,
colorBackgroundPrimaryLighter,
colorBackgroundPrimaryLightest,
colorBackgroundRequired,
colorBackgroundRowStriped,
colorBackgroundSuccess,
colorBackgroundSuccessLightest,
colorBackgroundWarning,
colorBackgroundWarningLightest,
};
export const borderColors = {
colorBorder,
colorBorderDark,
colorBorderDestructive,
colorBorderDestructiveDark,
colorBorderDestructiveDarker,
colorBorderDestructiveLight,
colorBorderDestructiveLighter,
colorBorderError,
colorBorderErrorLight,
colorBorderErrorLightest,
colorBorderInput,
colorBorderInputFocus,
colorBorderInputHover,
colorBorderLight,
colorBorderNeutralLight,
colorBorderPrimary,
colorBorderPrimaryDark,
colorBorderPrimaryDarker,
colorBorderPrimaryLight,
colorBorderPrimaryLighter,
colorBorderSuccess,
colorBorderSuccessLightest,
colorBorderWarning,
colorBorderWarningLight,
colorBorderWarningLightest,
};
export const borderWidths = {
borderWidth0,
borderWidth10,
borderWidth20,
};
export const boxShadows = {
shadowBorderInput,
shadowBorderInputDisabled,
shadowBorderInputError,
shadowBorderInputErrorHover,
shadowBorderInputHover,
shadowCard,
shadowFocus,
};
export const colors = {
colorBrand,
colorBrandHighlight,
colorGray0,
colorGray10,
colorGray100,
colorGray20,
colorGray30,
colorGray40,
colorGray50,
colorGray60,
colorGray70,
colorGray80,
colorGray90,
};
export const fonts = {
fontFamilyCode,
fontFamilyText,
};
export const fontSizes = {
fontSize10,
fontSize100,
fontSize110,
fontSize20,
fontSize30,
fontSize40,
fontSize50,
fontSize60,
fontSize70,
fontSize80,
fontSize90,
};
export const fontWeights = {
fontWeightBold,
fontWeightLight,
fontWeightMedium,
fontWeightNormal,
fontWeightSemibold,
};
export const lineHeights = {
lineHeight10,
lineHeight100,
lineHeight110,
lineHeight20,
lineHeight30,
lineHeight40,
lineHeight50,
lineHeight60,
lineHeight70,
lineHeight80,
lineHeight90,
};
export const radii = {
borderRadius0,
borderRadius10,
borderRadius20,
borderRadius30,
borderRadiusCircle,
};
export const sizings = {
size0,
size10,
size100,
size110,
size120,
size20,
size30,
size40,
size50,
size60,
size70,
size80,
size90,
sizeIcon10,
sizeIcon100,
sizeIcon110,
sizeIcon20,
sizeIcon30,
sizeIcon40,
sizeIcon50,
sizeIcon60,
sizeIcon70,
sizeIcon80,
sizeIcon90,
};
export const spacings = {
space0,
space10,
space100,
space110,
space120,
space130,
space140,
space150,
space160,
space170,
space180,
space190,
space20,
space200,
space30,
space40,
space50,
space60,
space70,
space80,
space90,
};
export const textColors = {
colorText,
colorTextBrandHighlight,
colorTextBrandInverse,
colorTextError,
colorTextErrorDark,
colorTextIcon,
colorTextInverse,
colorTextInverseWeak,
colorTextLabel,
colorTextLink,
colorTextLinkDark,
colorTextLinkDarker,
colorTextLinkDestructive,
colorTextLinkDestructiveDark,
colorTextLinkDestructiveDarker,
colorTextLinkDestructiveLight,
colorTextLinkLight,
colorTextPlaceholder,
colorTextSuccess,
colorTextWarning,
colorTextWarningDark,
colorTextWeak,
};
export const zIndices = {
zIndex0,
zIndex10,
zIndex20,
zIndex30,
zIndex40,
zIndex50,
zIndex60,
zIndex70,
zIndex80,
zIndex90,
};