@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";