@salesforce-ux/design-system
Version:
Salesforce Lightning Design System
89 lines • 3.02 kB
JavaScript
module.exports = {
borderWidthThin: "1px",
borderWidthThick: "2px",
borderStrokeWidthThin: "1px",
borderStrokeWidthThick: "2px",
spacingNone: "0",
spacingXxxSmall: "0.125rem",
spacingXxSmall: "0.25rem",
spacingXSmall: "0.5rem",
spacingSmall: "0.75rem",
spacingMedium: "1rem",
spacingLarge: "2rem",
spacingXLarge: "4rem",
spacingXxLarge: "8rem",
// font-face should be 'Salesforce Sans'.
fontFamilyBody: "'Salesforce Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif",
// Salesforce Sans Light
fontWeightLight: "300",
// Salesforce Sans Regular
fontWeightRegular: "400",
// Salesforce Sans Bold
fontWeightBold: "700",
fontSizeXSmall: "0.625rem",
fontSizeSmall: "0.75rem",
fontSizeXMedium: "0.875rem",
fontSizeMedium: "1rem",
fontSizeLarge: "1.125rem",
fontSizeXLarge: "1.25rem",
fontSizeXxLarge: "1.5rem",
borderRadiusSmall: ".125rem",
borderRadiusMedium: ".25rem",
borderRadiusLarge: ".5rem",
borderRadiusPill: "5rem",
borderRadiusCircle: "50%",
lineHeightReset: "1",
lineHeightHeading: "1.25",
lineHeightText: "1.5",
// 448px, for phone devices and larger.
mqSmall: "only screen and (min-width: 28em)",
// 768px, for phone devices and larger.
mqMedium: "only screen and (min-width: 48em)",
// 1024px, for tablet devices and larger.
mqLarge: "only screen and (min-width: 64em)",
// 1280px, for desktop screens and larger.
mqXLarge: "only screen and (min-width: 80em)",
timing1: ".1s",
timing2: ".2s",
timing3: ".4s",
timing4: ".6s",
timing5: ".8s",
timingTest: "5s",
colorWhite: "rgb(255, 255, 255)",
colorGreenSea100: "rgb(53, 212, 204)",
colorGreenSea300: "rgb(46, 194, 186)",
colorGreenSea500: "rgb(39, 171, 164)",
colorGreenSea700: "rgb(32, 150, 145)",
colorGreenSea900: "rgb(27, 130, 125)",
colorBlueSky100: "rgb(108, 183, 250)",
colorBlueSky300: "rgb(68, 162, 245)",
colorBlueSky500: "rgb(45, 147, 237)",
colorBlueSky700: "rgb(32, 129, 214)",
colorBlueSky900: "rgb(25, 112, 189)",
colorPurpleRain100: "rgb(173, 144, 245)",
colorPurpleRain300: "rgb(146, 113, 232)",
colorPurpleRain500: "rgb(122, 86, 214)",
colorPurpleRain700: "rgb(100, 63, 192)",
colorPurpleRain900: "rgb(89, 65, 149)",
colorBlueAthens: "rgb(242, 246, 250)",
colorBlueSparta: "rgb(230, 236, 242)",
colorBlueRome: "rgb(197, 211, 224)",
colorBlueSpider: "rgb(163, 184, 204)",
colorBlueGhost: "rgb(125, 152, 179)",
colorBlueAluminium: "rgb(92, 122, 153)",
colorBlueRollingstone: "rgb(64, 96, 127)",
colorBlueRhino: "rgb(41, 71, 102)",
colorBlueZodiac: "rgb(23, 50, 77)",
colorBlueBigstoneBlue: "rgb(10, 31, 51)",
colorOrangeAlert: "rgb(255, 183, 93)",
colorRedError: "rgb(212, 80, 76)",
colorGreenSuccess: "rgb(75, 202, 129)",
// Link color (508)
colorBlueScience: "rgb(0, 112, 210)",
// Hover and focus link color
colorBlueEndeavour: "rgb(0, 95, 178)",
// Active link color
colorBlueMidnightBlue: "rgb(0, 57, 107)",
// Disabled link color
colorBlueBiscay: "rgb(22, 50, 92)"
};