@salesforce-ux/design-system
Version:
Salesforce Lightning Design System
616 lines • 23.5 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",
};