@salesforce-ux/design-system/design-tokens/dist/hooks.module.js

Salesforce Lightning Design System

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