@salesforce-ux/design-system
Version:
Salesforce Lightning Design System
616 lines • 24.4 kB
JavaScript
module.exports = {
/* Neutral Base 100 - if used as a background, please use Neutral Base 60-10 to meet accessibility guidelines. */
colorNeutralBase100: "rgb(255, 255, 255)",
/* Neutral Base 95 - if used as a background, please use Neutral Base 50-10 to meet accessibility guidelines. */
colorNeutralBase95: "rgb(243, 243, 243)",
/* Neutral Base 90 - if used as a background, please use Neutral Base 40-10 to meet accessibility guidelines. */
colorNeutralBase90: "rgb(229, 229, 229)",
/* Neutral Base 80 - if used as a background, please use Neutral Base 30-10 to meet accessibility guidelines. */
colorNeutralBase80: "rgb(201, 201, 201)",
/* Neutral Base 70 - if used as a background, please use Neutral Base 20-10 to meet accessibility guidelines. */
colorNeutralBase70: "rgb(174, 174, 174)",
/* Neutral Base 65 - if used as a background, please use Neutral Base 15-10 to meet accessibility guidelines. */
colorNeutralBase65: "rgb(160, 160, 160)",
/* Neutral Base 60 - if used as a background, please use Neutral Base 100 to meet accessibility guidelines. */
colorNeutralBase60: "rgb(147, 147, 147)",
/* Neutral Base 50 - if used as a background, please use Neutral Base 100-95 to meet accessibility guidelines. */
colorNeutralBase50: "rgb(116, 116, 116)",
/* Neutral Base 40 - if used as a background, please use Neutral Base 100-90 to meet accessibility guidelines. */
colorNeutralBase40: "rgb(92, 92, 92)",
/* Neutral Base 30 - if used as a background, please use Neutral Base 100-80 to meet accessibility guidelines. */
colorNeutralBase30: "rgb(68, 68, 68)",
/* Neutral Base 20 - if used as a background, please use Neutral Base 100-70 to meet accessibility guidelines. */
colorNeutralBase20: "rgb(46, 46, 46)",
/* Neutral Base 15 - if used as a background, please use Neutral Base 100-65 to meet accessibility guidelines. */
colorNeutralBase15: "rgb(36, 36, 36)",
/* Neutral Base 10 - if used as a background, please use Neutral Base 100-65 to meet accessibility guidelines. */
colorNeutralBase10: "rgb(24, 24, 24)",
/* Brand Base 100 - if used as a background, please use Brand Base 60-10 to meet accessibility guidelines. */
colorBrandBase100: "rgb(255, 255, 255)",
/* Brand Base 95 - if used as a background, please use Brand Base 50-10 to meet accessibility guidelines. */
colorBrandBase95: "rgb(238, 244, 255)",
/* Brand Base 90 - if used as a background, please use Brand Base 40-10 to meet accessibility guidelines. */
colorBrandBase90: "rgb(216, 230, 254)",
/* Brand Base 80 - if used as a background, please use Brand Base 30-10 to meet accessibility guidelines. */
colorBrandBase80: "rgb(170, 203, 255)",
/* Brand Base 70 - if used as a background, please use Brand Base 20-10 to meet accessibility guidelines. */
colorBrandBase70: "rgb(120, 176, 253)",
/* Brand Base 65 - if used as a background, please use Brand Base 15-10 to meet accessibility guidelines. */
colorBrandBase65: "rgb(87, 163, 253)",
/* Brand Base 60 - if used as a background, please use Brand Base 100 to meet accessibility guidelines. */
colorBrandBase60: "rgb(27, 150, 255)",
/* Brand Base 50 - if used as a background, please use Brand Base 100-95 to meet accessibility guidelines. */
colorBrandBase50: "rgb(1, 118, 211)",
/* Brand Base 40 - if used as a background, please use Brand Base 100-90 to meet accessibility guidelines. */
colorBrandBase40: "rgb(11, 92, 171)",
/* Brand Base 30 - if used as a background, please use Brand Base 100-80 to meet accessibility guidelines. */
colorBrandBase30: "rgb(1, 68, 134)",
/* Brand Base 20 - if used as a background, please use Brand Base 100-70 to meet accessibility guidelines. */
colorBrandBase20: "rgb(3, 45, 96)",
/* Brand Base 15 - if used as a background, please use Brand Base 100-65 to meet accessibility guidelines. */
colorBrandBase15: "rgb(3, 35, 77)",
/* Brand Base 10 - if used as a background, please use Brand Base 100-65 to meet accessibility guidelines. */
colorBrandBase10: "rgb(0, 22, 57)",
/* Error Base 100 - if used as a background, please use Error Base 60-10 to meet accessibility guidelines. */
colorErrorBase100: "rgb(255, 255, 255)",
/* Error Base 90 - if used as a background, please use Error Base 50-10 to meet accessibility guidelines. */
colorErrorBase90: "rgb(254, 222, 216)",
/* Error Base 80 - if used as a background, please use Error Base 40-10 to meet accessibility guidelines. */
colorErrorBase80: "rgb(254, 184, 171)",
/* Error Base 70 - if used as a background, please use Error Base 30-10 to meet accessibility guidelines. */
colorErrorBase70: "rgb(254, 143, 125)",
/* Error Base 60 - if used as a background, please use Error Base 20-10 to meet accessibility guidelines. */
colorErrorBase60: "rgb(254, 92, 76)",
/* Error Base 50 - if used as a background, please use Error Base 100-90 to meet accessibility guidelines. */
colorErrorBase50: "rgb(234, 0, 30)",
/* Error Base 40 - if used as a background, please use Error Base 100-80 to meet accessibility guidelines. */
colorErrorBase40: "rgb(186, 5, 23)",
/* Error Base 30 - if used as a background, please use Error Base 100-70 to meet accessibility guidelines. */
colorErrorBase30: "rgb(142, 3, 15)",
/* Error Base 20 - if used as a background, please use Error Base 100-60 to meet accessibility guidelines. */
colorErrorBase20: "rgb(100, 1, 3)",
/* Error Base 10 - if used as a background, please use Error Base 100-50 to meet accessibility guidelines. */
colorErrorBase10: "rgb(48, 12, 1)",
/* Warning Base 100 - if used as a background, please use Warning Base 60-10 to meet accessibility guidelines. */
colorWarningBase100: "rgb(255, 255, 255)",
/* Warning Base 90 - if used as a background, please use Warning Base 50-10 to meet accessibility guidelines. */
colorWarningBase90: "rgb(254, 223, 208)",
/* Warning Base 80 - if used as a background, please use Warning Base 40-10 to meet accessibility guidelines. */
colorWarningBase80: "rgb(255, 186, 144)",
/* Warning Base 70 - if used as a background, please use Warning Base 30-10 to meet accessibility guidelines. */
colorWarningBase70: "rgb(254, 147, 57)",
/* Warning Base 60 - if used as a background, please use Warning Base 20-10 to meet accessibility guidelines. */
colorWarningBase60: "rgb(221, 122, 1)",
/* Warning Base 50 - if used as a background, please use Warning Base 100-90 to meet accessibility guidelines. */
colorWarningBase50: "rgb(169, 100, 4)",
/* Warning Base 40 - if used as a background, please use Warning Base 100-80 to meet accessibility guidelines. */
colorWarningBase40: "rgb(130, 81, 1)",
/* Warning Base 30 - if used as a background, please use Warning Base 100-70 to meet accessibility guidelines. */
colorWarningBase30: "rgb(95, 62, 2)",
/* Warning Base 20 - if used as a background, please use Warning Base 100-60 to meet accessibility guidelines. */
colorWarningBase20: "rgb(62, 43, 2)",
/* Warning Base 10 - if used as a background, please use Warning Base 100-50 to meet accessibility guidelines. */
colorWarningBase10: "rgb(32, 22, 0)",
/* Success Base 100 - if used as a background, please use Success Base 60-10 to meet accessibility guidelines. */
colorSuccessBase100: "rgb(255, 255, 255)",
/* Success Base 90 - if used as a background, please use Success Base 50-10 to meet accessibility guidelines. */
colorSuccessBase90: "rgb(205, 239, 196)",
/* Success Base 80 - if used as a background, please use Success Base 40-10 to meet accessibility guidelines. */
colorSuccessBase80: "rgb(145, 219, 139)",
/* Success Base 70 - if used as a background, please use Success Base 30-10 to meet accessibility guidelines. */
colorSuccessBase70: "rgb(69, 198, 90)",
/* Success Base 60 - if used as a background, please use Success Base 20-10 to meet accessibility guidelines. */
colorSuccessBase60: "rgb(59, 167, 85)",
/* Success Base 50 - if used as a background, please use Success Base 100-90 to meet accessibility guidelines. */
colorSuccessBase50: "rgb(46, 132, 74)",
/* Success Base 40 - if used as a background, please use Success Base 100-80 to meet accessibility guidelines. */
colorSuccessBase40: "rgb(57, 101, 71)",
/* Success Base 30 - if used as a background, please use Success Base 100-70 to meet accessibility guidelines. */
colorSuccessBase30: "rgb(25, 78, 49)",
/* Success Base 20 - if used as a background, please use Success Base 100-60 to meet accessibility guidelines. */
colorSuccessBase20: "rgb(28, 51, 38)",
/* Success Base 10 - if used as a background, please use Success Base 100-50 to meet accessibility guidelines. */
colorSuccessBase10: "rgb(7, 27, 18)",
/* Nuetral border color for UI elements. */
colorBorderBase1: "rgb(201, 201, 201)",
/* Neutral border color for UI elements. */
colorBorderBase2: "rgb(174, 174, 174)",
/* Neutral border color for UI elements. */
colorBorderBase3: "rgb(147, 147, 147)",
/* Neutral border color for UI elements. */
colorBorderBase4: "rgb(116, 116, 116)",
/* Brand border color for UI elements. */
colorBorderBrand1: "rgb(120, 176, 253)",
/* Alternate brand border color for UI elements. */
colorBorderBrand2: "rgb(27, 150, 255)",
/* Default color for hyperlinks. */
linkColor: "rgb(11, 92, 171)",
/* Default color on hover for hyperlinks. */
linkColorHover: "rgb(1, 68, 134)",
/* Default color on focus for hyperlinks. */
linkColorFocus: "rgb(1, 68, 134)",
/* Default color on active for hyperlinks. */
linkColorActive: "rgb(3, 45, 96)",
/* Blue 10 */
colorPaletteBlue10: "rgb(0, 22, 57)",
/* Blue 15 */
colorPaletteBlue15: "rgb(3, 35, 77)",
/* Blue 20 */
colorPaletteBlue20: "rgb(3, 45, 96)",
/* Blue 30 */
colorPaletteBlue30: "rgb(1, 68, 134)",
/* Blue 40 */
colorPaletteBlue40: "rgb(11, 92, 171)",
/* Blue 50 */
colorPaletteBlue50: "rgb(1, 118, 211)",
/* Blue 60 */
colorPaletteBlue60: "rgb(27, 150, 255)",
/* Blue 65 */
colorPaletteBlue65: "rgb(87, 163, 253)",
/* Blue 70 */
colorPaletteBlue70: "rgb(120, 176, 253)",
/* Blue 80 */
colorPaletteBlue80: "rgb(170, 203, 255)",
/* Blue 90 */
colorPaletteBlue90: "rgb(216, 230, 254)",
/* Blue 95 */
colorPaletteBlue95: "rgb(238, 244, 255)",
/* Cloud Blue 10 */
colorPaletteCloudBlue10: "rgb(0, 26, 40)",
/* Cloud Blue 15 */
colorPaletteCloudBlue15: "rgb(10, 38, 54)",
/* Cloud Blue 20 */
colorPaletteCloudBlue20: "rgb(2, 50, 72)",
/* Cloud Blue 30 */
colorPaletteCloudBlue30: "rgb(8, 73, 104)",
/* Cloud Blue 40 */
colorPaletteCloudBlue40: "rgb(5, 98, 138)",
/* Cloud Blue 50 */
colorPaletteCloudBlue50: "rgb(16, 124, 173)",
/* Cloud Blue 60 */
colorPaletteCloudBlue60: "rgb(13, 157, 218)",
/* Cloud Blue 65 */
colorPaletteCloudBlue65: "rgb(8, 171, 237)",
/* Cloud Blue 70 */
colorPaletteCloudBlue70: "rgb(26, 185, 255)",
/* Cloud Blue 80 */
colorPaletteCloudBlue80: "rgb(144, 208, 254)",
/* Cloud Blue 90 */
colorPaletteCloudBlue90: "rgb(207, 233, 254)",
/* Cloud Blue 95 */
colorPaletteCloudBlue95: "rgb(234, 245, 254)",
/* Green 10 */
colorPaletteGreen10: "rgb(7, 27, 18)",
/* Green 15 */
colorPaletteGreen15: "rgb(12, 41, 18)",
/* Green 20 */
colorPaletteGreen20: "rgb(28, 51, 38)",
/* Green 30 */
colorPaletteGreen30: "rgb(25, 78, 49)",
/* Green 40 */
colorPaletteGreen40: "rgb(57, 101, 71)",
/* Green 50 */
colorPaletteGreen50: "rgb(46, 132, 74)",
/* Green 60 */
colorPaletteGreen60: "rgb(59, 167, 85)",
/* Green 65 */
colorPaletteGreen65: "rgb(65, 182, 88)",
/* Green 70 */
colorPaletteGreen70: "rgb(69, 198, 90)",
/* Green 80 */
colorPaletteGreen80: "rgb(145, 219, 139)",
/* Green 90 */
colorPaletteGreen90: "rgb(205, 239, 196)",
/* Green 95 */
colorPaletteGreen95: "rgb(235, 247, 230)",
/* Hot Orange 10 */
colorPaletteHotOrange10: "rgb(40, 18, 2)",
/* Hot Orange 15 */
colorPaletteHotOrange15: "rgb(66, 22, 4)",
/* Hot Orange 20 */
colorPaletteHotOrange20: "rgb(74, 36, 19)",
/* Hot Orange 30 */
colorPaletteHotOrange30: "rgb(126, 38, 0)",
/* Hot Orange 40 */
colorPaletteHotOrange40: "rgb(170, 48, 1)",
/* Hot Orange 50 */
colorPaletteHotOrange50: "rgb(216, 58, 0)",
/* Hot Orange 60 */
colorPaletteHotOrange60: "rgb(255, 93, 45)",
/* Hot Orange 65 */
colorPaletteHotOrange65: "rgb(255, 120, 79)",
/* Hot Orange 70 */
colorPaletteHotOrange70: "rgb(255, 144, 110)",
/* Hot Orange 80 */
colorPaletteHotOrange80: "rgb(254, 185, 165)",
/* Hot Orange 90 */
colorPaletteHotOrange90: "rgb(255, 222, 213)",
/* Hot Orange 95 */
colorPaletteHotOrange95: "rgb(254, 241, 237)",
/* Indigo 10 */
colorPaletteIndigo10: "rgb(32, 6, 71)",
/* Indigo 15 */
colorPaletteIndigo15: "rgb(31, 9, 116)",
/* Indigo 20 */
colorPaletteIndigo20: "rgb(50, 29, 113)",
/* Indigo 30 */
colorPaletteIndigo30: "rgb(47, 44, 183)",
/* Indigo 40 */
colorPaletteIndigo40: "rgb(58, 73, 218)",
/* Indigo 50 */
colorPaletteIndigo50: "rgb(88, 103, 232)",
/* Indigo 60 */
colorPaletteIndigo60: "rgb(127, 140, 237)",
/* Indigo 65 */
colorPaletteIndigo65: "rgb(142, 155, 239)",
/* Indigo 70 */
colorPaletteIndigo70: "rgb(158, 169, 241)",
/* Indigo 80 */
colorPaletteIndigo80: "rgb(190, 199, 246)",
/* Indigo 90 */
colorPaletteIndigo90: "rgb(224, 229, 248)",
/* Indigo 95 */
colorPaletteIndigo95: "rgb(241, 243, 251)",
/* Orange 10 */
colorPaletteOrange10: "rgb(32, 22, 0)",
/* Orange 15 */
colorPaletteOrange15: "rgb(55, 30, 3)",
/* Orange 20 */
colorPaletteOrange20: "rgb(62, 43, 2)",
/* Orange 30 */
colorPaletteOrange30: "rgb(95, 62, 2)",
/* Orange 40 */
colorPaletteOrange40: "rgb(130, 81, 1)",
/* Orange 50 */
colorPaletteOrange50: "rgb(169, 100, 4)",
/* Orange 60 */
colorPaletteOrange60: "rgb(221, 122, 1)",
/* Orange 65 */
colorPaletteOrange65: "rgb(243, 131, 3)",
/* Orange 70 */
colorPaletteOrange70: "rgb(254, 147, 57)",
/* Orange 80 */
colorPaletteOrange80: "rgb(255, 186, 144)",
/* Orange 90 */
colorPaletteOrange90: "rgb(254, 223, 208)",
/* Orange 95 */
colorPaletteOrange95: "rgb(255, 241, 234)",
/* Pink 10 */
colorPalettePink10: "rgb(55, 1, 20)",
/* Pink 15 */
colorPalettePink15: "rgb(75, 6, 32)",
/* Pink 20 */
colorPalettePink20: "rgb(97, 2, 42)",
/* Pink 30 */
colorPalettePink30: "rgb(138, 3, 62)",
/* Pink 40 */
colorPalettePink40: "rgb(182, 5, 84)",
/* Pink 50 */
colorPalettePink50: "rgb(227, 6, 106)",
/* Pink 60 */
colorPalettePink60: "rgb(255, 83, 138)",
/* Pink 65 */
colorPalettePink65: "rgb(254, 114, 152)",
/* Pink 70 */
colorPalettePink70: "rgb(254, 138, 167)",
/* Pink 80 */
colorPalettePink80: "rgb(253, 182, 197)",
/* Pink 90 */
colorPalettePink90: "rgb(253, 221, 227)",
/* Pink 95 */
colorPalettePink95: "rgb(254, 240, 243)",
/* Purple 10 */
colorPalettePurple10: "rgb(36, 6, 67)",
/* Purple 15 */
colorPalettePurple15: "rgb(48, 11, 96)",
/* Purple 20 */
colorPalettePurple20: "rgb(64, 16, 117)",
/* Purple 30 */
colorPalettePurple30: "rgb(90, 27, 169)",
/* Purple 40 */
colorPalettePurple40: "rgb(117, 38, 227)",
/* Purple 50 */
colorPalettePurple50: "rgb(144, 80, 233)",
/* Purple 60 */
colorPalettePurple60: "rgb(173, 123, 238)",
/* Purple 65 */
colorPalettePurple65: "rgb(183, 141, 239)",
/* Purple 70 */
colorPalettePurple70: "rgb(194, 158, 241)",
/* Purple 80 */
colorPalettePurple80: "rgb(215, 191, 242)",
/* Purple 90 */
colorPalettePurple90: "rgb(236, 225, 249)",
/* Purple 95 */
colorPalettePurple95: "rgb(246, 242, 251)",
/* Red 10 */
colorPaletteRed10: "rgb(48, 12, 1)",
/* Red 15 */
colorPaletteRed15: "rgb(74, 12, 4)",
/* Red 20 */
colorPaletteRed20: "rgb(100, 1, 3)",
/* Red 30 */
colorPaletteRed30: "rgb(142, 3, 15)",
/* Red 40 */
colorPaletteRed40: "rgb(186, 5, 23)",
/* Red 50 */
colorPaletteRed50: "rgb(234, 0, 30)",
/* Red 60 */
colorPaletteRed60: "rgb(254, 92, 76)",
/* Red 65 */
colorPaletteRed65: "rgb(254, 119, 101)",
/* Red 70 */
colorPaletteRed70: "rgb(254, 143, 125)",
/* Red 80 */
colorPaletteRed80: "rgb(254, 184, 171)",
/* Red 90 */
colorPaletteRed90: "rgb(254, 222, 216)",
/* Red 95 */
colorPaletteRed95: "rgb(254, 241, 238)",
/* Teal 10 */
colorPaletteTeal10: "rgb(7, 27, 18)",
/* Teal 15 */
colorPaletteTeal15: "rgb(7, 40, 37)",
/* Teal 20 */
colorPaletteTeal20: "rgb(2, 52, 52)",
/* Teal 30 */
colorPaletteTeal30: "rgb(2, 77, 76)",
/* Teal 40 */
colorPaletteTeal40: "rgb(5, 103, 100)",
/* Teal 50 */
colorPaletteTeal50: "rgb(11, 130, 124)",
/* Teal 60 */
colorPaletteTeal60: "rgb(6, 165, 154)",
/* Teal 65 */
colorPaletteTeal65: "rgb(3, 180, 167)",
/* Teal 70 */
colorPaletteTeal70: "rgb(1, 195, 179)",
/* Teal 80 */
colorPaletteTeal80: "rgb(4, 225, 203)",
/* Teal 90 */
colorPaletteTeal90: "rgb(172, 243, 228)",
/* Teal 95 */
colorPaletteTeal95: "rgb(222, 249, 243)",
/* Violet 10 */
colorPaletteViolet10: "rgb(46, 0, 57)",
/* Violet 15 */
colorPaletteViolet15: "rgb(61, 1, 87)",
/* Violet 20 */
colorPaletteViolet20: "rgb(72, 26, 84)",
/* Violet 30 */
colorPaletteViolet30: "rgb(115, 3, 148)",
/* Violet 40 */
colorPaletteViolet40: "rgb(150, 2, 199)",
/* Violet 50 */
colorPaletteViolet50: "rgb(186, 1, 255)",
/* Violet 60 */
colorPaletteViolet60: "rgb(203, 101, 255)",
/* Violet 65 */
colorPaletteViolet65: "rgb(209, 125, 254)",
/* Violet 70 */
colorPaletteViolet70: "rgb(216, 146, 254)",
/* Violet 80 */
colorPaletteViolet80: "rgb(229, 185, 254)",
/* Violet 90 */
colorPaletteViolet90: "rgb(242, 222, 254)",
/* Violet 95 */
colorPaletteViolet95: "rgb(249, 240, 255)",
/* Yellow 10 */
colorPaletteYellow10: "rgb(40, 18, 2)",
/* Yellow 15 */
colorPaletteYellow15: "rgb(46, 34, 4)",
/* Yellow 20 */
colorPaletteYellow20: "rgb(79, 33, 0)",
/* Yellow 30 */
colorPaletteYellow30: "rgb(111, 52, 0)",
/* Yellow 40 */
colorPaletteYellow40: "rgb(140, 75, 2)",
/* Yellow 50 */
colorPaletteYellow50: "rgb(168, 100, 3)",
/* Yellow 60 */
colorPaletteYellow60: "rgb(202, 133, 1)",
/* Yellow 65 */
colorPaletteYellow65: "rgb(215, 147, 4)",
/* Yellow 70 */
colorPaletteYellow70: "rgb(228, 162, 1)",
/* Yellow 80 */
colorPaletteYellow80: "rgb(252, 192, 3)",
/* Yellow 90 */
colorPaletteYellow90: "rgb(249, 227, 182)",
/* Yellow 95 */
colorPaletteYellow95: "rgb(251, 243, 224)",
/* Neutral 10 */
colorPaletteNeutral10: "rgb(24, 24, 24)",
/* Neutral 15 */
colorPaletteNeutral15: "rgb(36, 36, 36)",
/* Neutral 20 */
colorPaletteNeutral20: "rgb(46, 46, 46)",
/* Neutral 30 */
colorPaletteNeutral30: "rgb(68, 68, 68)",
/* Neutral 40 */
colorPaletteNeutral40: "rgb(92, 92, 92)",
/* Neutral 50 */
colorPaletteNeutral50: "rgb(116, 116, 116)",
/* Neutral 60 */
colorPaletteNeutral60: "rgb(147, 147, 147)",
/* Neutral 65 */
colorPaletteNeutral65: "rgb(160, 160, 160)",
/* Neutral 70 */
colorPaletteNeutral70: "rgb(174, 174, 174)",
/* Neutral 80 */
colorPaletteNeutral80: "rgb(201, 201, 201)",
/* Neutral 90 */
colorPaletteNeutral90: "rgb(229, 229, 229)",
/* Neutral 95 */
colorPaletteNeutral95: "rgb(243, 243, 243)",
/* Neutral 100 */
colorPaletteNeutral100: "rgb(255, 255, 255)",
/* Spacing size 1. */
spacing1: "0.25rem",
/* Spacing size 2. */
spacing2: "0.5rem",
/* Spacing size 3. */
spacing3: "0.75rem",
/* Spacing size 4. */
spacing4: "1rem",
/* Spacing size 5. */
spacing5: "1.5rem",
/* Spacing size 6. */
spacing6: "2rem",
/* Spacing size 7. */
spacing7: "2.5rem",
/* Spacing size 8. */
spacing8: "3rem",
/* Spacing size 9. */
spacing9: "3.5rem",
/* Spacing size 10. */
spacing10: "4rem",
/* Spacing size 11. */
spacing11: "4.5rem",
/* Spacing size 12. */
spacing12: "5rem",
/* System font stack for your application. */
fontFamily: "system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'",
/* Monospace font stack for your application. */
fontFamilyMonospace: "Consolas, Menlo, Monaco, Courier, monospace",
/* Bold font-weight, use to increase emphasis. */
fontWeightBold: "bold",
/* Font weight 1 */
fontWeight1: "100",
/* Font weight 2 */
fontWeight2: "200",
/* Font weight 3 */
fontWeight3: "300",
/* Font weight 4 */
fontWeight4: "400",
/* Font weight 5 */
fontWeight5: "500",
/* Font weight 6 */
fontWeight6: "600",
/* Font weight 7 */
fontWeight7: "700",
/* Default line-height for your application. */
fontLineheight: "1.5",
/* Line-height 1. */
fontLineheight1: "1",
/* Line-height 2. */
fontLineheight2: "1.25",
/* Line-height 3. */
fontLineheight3: "1.375",
/* Line-height 4. */
fontLineheight4: "1.5",
/* Line-height 5. */
fontLineheight5: "1.75",
/* Line-height 6. */
fontLineheight6: "2",
/* Default font-size for your application. */
fontSizeBase: "1rem",
/* Scaled font-size that is 4 stops smaller than the base. */
fontScaleNeg4: "0.625rem",
/* Scaled font-size that is 3 stops smaller than the base. */
fontScaleNeg3: "0.75rem",
/* Scaled font-size that is 2 stops smaller than the base. */
fontScaleNeg2: "0.8125rem",
/* Scaled font-size that is 1 stop smaller than the base. */
fontScaleNeg1: "0.875rem",
/* Scaled font-size that is 1 stop bigger than the base. */
fontScale1: "1.125rem",
/* Scaled font-size that is 2 stops bigger than the base. */
fontScale2: "1.266rem",
/* Scaled font-size that is 3 stops bigger than the base. */
fontScale3: "1.424rem",
/* Scaled font-size that is 4 stops bigger than the base. */
fontScale4: "1.602rem",
/* Scaled font-size that is 5 stops bigger than the base. */
fontScale5: "1.802rem",
/* Scaled font-size that is 6 stops bigger than the base. */
fontScale6: "2.027rem",
/* Scaled font-size that is 7 stops bigger than the base. */
fontScale7: "2.281rem",
/* Scaled font-size that is 8 stops bigger than the base. */
fontScale8: "2.566rem",
/* Scaled font-size that is 9 stops bigger than the base. */
fontScale9: "2.887rem",
/* Scaled font-size that is 10 stops bigger than the base. */
fontScale10: "3.247rem",
/* Small border radius for UI elements. */
radiusBorder1: "0.125rem",
/* Medium border radius for UI elements. */
radiusBorder2: "0.25rem",
/* Large border radius for UI elements. */
radiusBorder3: "0.5rem",
/* Extra Large border radius for UI elements. */
radiusBorder4: "1rem",
/* Circular border radius for UI elements. */
radiusBorderCircle: "100%",
/* Square aspect ratio. */
ratioSquare: "1",
/* Landscape aspect ratio. */
ratioLandscape: "4/3",
/* Portrait aspect ratio. */
ratioPortrait: "3/4",
/* Widescreen aspect ratio. */
ratioWide: "16/9",
/* Ultra Widescreen aspect ratio. */
ratioUltrawide: "18/5",
/* Shadow depth 1 */
shadow1: "0 0 2px 0 #18181814, 0 2px 4px 1px #18181828",
/* Shadow depth 2 */
shadow2: "0 2px 8px -2px #18181814, 0 8px 12px -2px #18181828",
/* Shadow depth 3 */
shadow3: "0 12px 24px -4px #18181814, 0 16px 32px -4px #18181828",
/* Shadow depth 4 */
shadow4: "0 24px 48px -4px #18181833",
/* Border size 1. */
sizingBorder1: "1px",
/* Border size 2. */
sizingBorder2: "2px",
/* Border size 3. */
sizingBorder3: "3px",
/* Border size 4. */
sizingBorder4: "4px",
/* Size 1. */
sizing1: "0.125rem",
/* Size 2. */
sizing2: "0.25rem",
/* Size 3. */
sizing3: "0.5rem",
/* Size 4. */
sizing4: "0.75rem",
/* Size 5. */
sizing5: "1rem",
/* Size 6. */
sizing6: "1.25rem",
/* Size 7. */
sizing7: "1.5rem",
/* Size 8. */
sizing8: "1.75rem",
/* Size 9. */
sizing9: "2rem",
/* Size 10. */
sizing10: "3rem",
/* Size 11. */
sizing11: "4rem",
/* Size 12. */
sizing12: "5rem",
/* Size 13. */
sizing13: "10rem",
/* Size 14. */
sizing14: "15rem",
/* Size 15. */
sizing15: "20rem",
/* Size 16. */
sizing16: "30rem",
/* Content Size 1. */
sizingContent1: "20ch",
/* Content Size 2. */
sizingContent2: "45ch",
/* Content Size 3. */
sizingContent3: "60ch",
/* Header content size 1. */
sizingHeading1: "20ch",
/* Header content size 2. */
sizingHeading2: "25ch",
/* Header content size 3. */
sizingHeading3: "35ch",
};