UNPKG

@recastui/tailwind-config

Version:
901 lines (883 loc) 32.1 kB
@import 'tailwindcss/base'; @import 'tailwindcss/components'; @import 'tailwindcss/utilities'; /* -------- Global base styles -------- */ @layer base { html { @apply antialiased [font-feature-settings:'ss01']; } body { @apply bg-gray-1 text-gray-12 leading-normal; } h1, h2, h3, h4, h5, h6, th { @apply font-display font-bold; } } /* -------- Component styles -------- */ /* -------- Utility classes -------- */ @layer utilities { .visually-hidden { border: 0px; clip: rect(0px, 0px, 0px, 0px); height: 1px; width: 1px; margin: -1px; padding: 0px; overflow: hidden; white-space: nowrap; position: absolute; } } /* -------- Color pallets -------- */ @layer base { :root { --white: #ffffff; --whiteA1: hsla(0, 0%, 100%, 0); --whiteA2: hsla(0, 0%, 100%, 0.013); --whiteA3: hsla(0, 0%, 100%, 0.034); --whiteA4: hsla(0, 0%, 100%, 0.056); --whiteA5: hsla(0, 0%, 100%, 0.086); --whiteA6: hsla(0, 0%, 100%, 0.124); --whiteA7: hsla(0, 0%, 100%, 0.176); --whiteA8: hsla(0, 0%, 100%, 0.249); --whiteA9: hsla(0, 0%, 100%, 0.386); --whiteA10: hsla(0, 0%, 100%, 0.446); --whiteA11: hsla(0, 0%, 100%, 0.592); --whiteA12: hsla(0, 0%, 100%, 0.923); --black: #000000; --blackA1: hsla(0, 0%, 0%, 0.012); --blackA2: hsla(0, 0%, 0%, 0.027); --blackA3: hsla(0, 0%, 0%, 0.047); --blackA4: hsla(0, 0%, 0%, 0.071); --blackA5: hsla(0, 0%, 0%, 0.09); --blackA6: hsla(0, 0%, 0%, 0.114); --blackA7: hsla(0, 0%, 0%, 0.141); --blackA8: hsla(0, 0%, 0%, 0.22); --blackA9: hsla(0, 0%, 0%, 0.439); --blackA10: hsla(0, 0%, 0%, 0.478); --blackA11: hsla(0, 0%, 0%, 0.565); --blackA12: hsla(0, 0%, 0%, 0.91); --amber1: hsl(39, 70%, 99%); --amber2: hsl(40, 100%, 96.5%); --amber3: hsl(44, 100%, 91.7%); --amber4: hsl(43, 100%, 86.8%); --amber5: hsl(42, 100%, 81.8%); --amber6: hsl(38, 99.7%, 76.3%); --amber7: hsl(36, 86.1%, 67.1%); --amber8: hsl(35, 85.2%, 55.1%); --amber9: hsl(39, 100%, 57%); --amber10: hsl(35, 100%, 55.5%); --amber11: hsl(30, 100%, 34%); --amber12: hsl(20, 80%, 17%); --blue1: hsl(206, 100%, 99.2%); --blue2: hsl(210, 100%, 98%); --blue3: hsl(209, 100%, 96.5%); --blue4: hsl(210, 98.8%, 94%); --blue5: hsl(209, 95%, 90.1%); --blue6: hsl(209, 81.2%, 84.5%); --blue7: hsl(208, 77.5%, 76.9%); --blue8: hsl(206, 81.9%, 65.3%); --blue9: hsl(206, 100%, 50%); --blue10: hsl(208, 100%, 47.3%); --blue11: hsl(211, 100%, 43.2%); --blue12: hsl(211, 100%, 15%); --bronze1: hsl(15, 30%, 99.1%); --bronze2: hsl(17, 63.6%, 97.8%); --bronze3: hsl(17, 42.1%, 95.2%); --bronze4: hsl(17, 35.2%, 92.1%); --bronze5: hsl(17, 31.5%, 88.2%); --bronze6: hsl(17, 29%, 83%); --bronze7: hsl(17, 26.9%, 75.6%); --bronze8: hsl(17, 25.1%, 66.5%); --bronze9: hsl(17, 20%, 54%); --bronze10: hsl(17, 18.1%, 50.1%); --bronze11: hsl(15, 20%, 43.1%); --bronze12: hsl(12, 22%, 21.5%); --brown1: hsl(30, 40%, 99.1%); --brown2: hsl(30, 50%, 97.6%); --brown3: hsl(30, 52.5%, 94.6%); --brown4: hsl(30, 53%, 91.2%); --brown5: hsl(29, 52.9%, 86.8%); --brown6: hsl(29, 52.5%, 80.9%); --brown7: hsl(29, 51.5%, 72.8%); --brown8: hsl(28, 50%, 63.1%); --brown9: hsl(28, 34%, 51%); --brown10: hsl(27, 31.8%, 47.6%); --brown11: hsl(25, 30%, 41%); --brown12: hsl(20, 30%, 19%); --crimson1: hsl(332, 100%, 99.4%); --crimson2: hsl(330, 100%, 98.4%); --crimson3: hsl(331, 85.6%, 96.6%); --crimson4: hsl(331, 78.1%, 94.2%); --crimson5: hsl(332, 72.1%, 91.1%); --crimson6: hsl(333, 67%, 86.7%); --crimson7: hsl(335, 63.5%, 80.4%); --crimson8: hsl(336, 62.3%, 72.9%); --crimson9: hsl(336, 80%, 57.8%); --crimson10: hsl(336, 73.7%, 53.5%); --crimson11: hsl(336, 75%, 47.2%); --crimson12: hsl(340, 65%, 14.5%); --cyan1: hsl(185, 60%, 98.7%); --cyan2: hsl(185, 73.3%, 97.1%); --cyan3: hsl(186, 70.2%, 94.4%); --cyan4: hsl(186, 63.8%, 90.6%); --cyan5: hsl(187, 58.3%, 85.4%); --cyan6: hsl(188, 54.6%, 78.4%); --cyan7: hsl(189, 53.7%, 68.7%); --cyan8: hsl(189, 60.3%, 52.5%); --cyan9: hsl(190, 95%, 39%); --cyan10: hsl(191, 91.2%, 36.8%); --cyan11: hsl(192, 85%, 31%); --cyan12: hsl(192, 88%, 12.5%); --gold1: hsl(50, 20%, 99.1%); --gold2: hsl(47, 52.9%, 96.7%); --gold3: hsl(46, 38.2%, 93.7%); --gold4: hsl(44, 32.7%, 90.1%); --gold5: hsl(43, 29.9%, 85.7%); --gold6: hsl(41, 28.3%, 79.8%); --gold7: hsl(39, 27.6%, 71.9%); --gold8: hsl(36, 27.2%, 61.8%); --gold9: hsl(36, 20%, 49.5%); --gold10: hsl(36, 19.8%, 45.7%); --gold11: hsl(36, 20%, 39%); --gold12: hsl(36, 16%, 20%); --grass1: hsl(116, 50%, 98.9%); --grass2: hsl(120, 60%, 97.1%); --grass3: hsl(120, 53.6%, 94.8%); --grass4: hsl(121, 47.5%, 91.4%); --grass5: hsl(122, 42.6%, 86.5%); --grass6: hsl(124, 39%, 79.7%); --grass7: hsl(126, 37.1%, 70.2%); --grass8: hsl(131, 38.1%, 56.3%); --grass9: hsl(131, 41%, 46.5%); --grass10: hsl(132, 43.1%, 42.2%); --grass11: hsl(133, 50%, 32.5%); --grass12: hsl(130, 30%, 14.9%); --gray1: hsl(0, 0%, 99%); --gray2: hsl(0, 0%, 97.3%); --gray3: hsl(0, 0%, 95.1%); --gray4: hsl(0, 0%, 93%); --gray5: hsl(0, 0%, 90.9%); --gray6: hsl(0, 0%, 88.7%); --gray7: hsl(0, 0%, 85.8%); --gray8: hsl(0, 0%, 78%); --gray9: hsl(0, 0%, 56.1%); --gray10: hsl(0, 0%, 52.3%); --gray11: hsl(0, 0%, 43.5%); --gray12: hsl(0, 0%, 9%); --green1: hsl(136, 50%, 98.9%); --green2: hsl(138, 62.5%, 96.9%); --green3: hsl(139, 55.2%, 94.5%); --green4: hsl(140, 48.7%, 91%); --green5: hsl(141, 43.7%, 86%); --green6: hsl(143, 40.3%, 79%); --green7: hsl(146, 38.5%, 69%); --green8: hsl(151, 40.2%, 54.1%); --green9: hsl(151, 55%, 41.5%); --green10: hsl(152, 57.5%, 37.6%); --green11: hsl(153, 67%, 28.5%); --green12: hsl(155, 40%, 14%); --indigo1: hsl(225, 60%, 99.4%); --indigo2: hsl(223, 100%, 98.6%); --indigo3: hsl(223, 98.4%, 97.1%); --indigo4: hsl(223, 92.9%, 95%); --indigo5: hsl(224, 87.1%, 92%); --indigo6: hsl(224, 81.9%, 87.8%); --indigo7: hsl(225, 77.4%, 82.1%); --indigo8: hsl(226, 75.4%, 74.5%); --indigo9: hsl(226, 70%, 55.5%); --indigo10: hsl(226, 58.6%, 51.3%); --indigo11: hsl(226, 55%, 45%); --indigo12: hsl(226, 62%, 17%); --lime1: hsl(85, 50%, 98.7%); --lime2: hsl(85, 66.7%, 96.5%); --lime3: hsl(85, 76%, 92.3%); --lime4: hsl(84, 75.3%, 87.5%); --lime5: hsl(84, 71.5%, 81.9%); --lime6: hsl(82, 65%, 74.6%); --lime7: hsl(79, 53.2%, 61.8%); --lime8: hsl(76, 61.7%, 45.1%); --lime9: hsl(81, 67%, 50%); --lime10: hsl(80, 68.3%, 46.9%); --lime11: hsl(75, 80%, 26%); --lime12: hsl(78, 70%, 11.5%); --mauve1: hsl(300, 20%, 99%); --mauve2: hsl(300, 7.7%, 97.5%); --mauve3: hsl(294, 5.5%, 95.3%); --mauve4: hsl(289, 4.7%, 93.3%); --mauve5: hsl(283, 4.4%, 91.3%); --mauve6: hsl(278, 4.1%, 89.1%); --mauve7: hsl(271, 3.9%, 86.3%); --mauve8: hsl(255, 3.7%, 78.8%); --mauve9: hsl(252, 4%, 57.3%); --mauve10: hsl(253, 3.5%, 53.5%); --mauve11: hsl(252, 4%, 44.8%); --mauve12: hsl(260, 25%, 11%); --mint1: hsl(165, 80%, 98.8%); --mint2: hsl(164, 88.2%, 96.7%); --mint3: hsl(164, 76.6%, 93.3%); --mint4: hsl(165, 68.8%, 89.5%); --mint5: hsl(165, 60.6%, 84.5%); --mint6: hsl(165, 53.5%, 76.9%); --mint7: hsl(166, 50.7%, 66.1%); --mint8: hsl(168, 52.8%, 51%); --mint9: hsl(167, 65%, 66%); --mint10: hsl(167, 59.3%, 63.1%); --mint11: hsl(172, 72%, 28.5%); --mint12: hsl(172, 70%, 12%); --olive1: hsl(110, 20%, 99%); --olive2: hsl(120, 16.7%, 97.6%); --olive3: hsl(119, 10.1%, 95.2%); --olive4: hsl(118, 8.1%, 93%); --olive5: hsl(117, 7.1%, 90.8%); --olive6: hsl(115, 6.4%, 88.5%); --olive7: hsl(114, 5.9%, 85.4%); --olive8: hsl(110, 5.2%, 77.3%); --olive9: hsl(110, 3.5%, 55.5%); --olive10: hsl(111, 2.8%, 51.7%); --olive11: hsl(110, 3%, 43%); --olive12: hsl(110, 25%, 9.5%); --orange1: hsl(24, 70%, 99%); --orange2: hsl(24, 83.3%, 97.6%); --orange3: hsl(24, 100%, 95.3%); --orange4: hsl(25, 100%, 92.2%); --orange5: hsl(25, 100%, 88.2%); --orange6: hsl(25, 100%, 82.8%); --orange7: hsl(24, 100%, 75.3%); --orange8: hsl(24, 94.5%, 64.3%); --orange9: hsl(24, 94%, 50%); --orange10: hsl(24, 100%, 46.5%); --orange11: hsl(24, 100%, 37%); --orange12: hsl(15, 60%, 17%); --pink1: hsl(322, 100%, 99.4%); --pink2: hsl(323, 100%, 98.4%); --pink3: hsl(323, 86.3%, 96.5%); --pink4: hsl(323, 78.7%, 94.2%); --pink5: hsl(323, 72.2%, 91.1%); --pink6: hsl(323, 66.3%, 86.6%); --pink7: hsl(323, 62%, 80.1%); --pink8: hsl(323, 60.3%, 72.4%); --pink9: hsl(322, 65%, 54.5%); --pink10: hsl(322, 63.9%, 50.7%); --pink11: hsl(322, 75%, 46%); --pink12: hsl(320, 70%, 13.5%); --plum1: hsl(292, 90%, 99.4%); --plum2: hsl(300, 100%, 98.6%); --plum3: hsl(299, 71.2%, 96.4%); --plum4: hsl(299, 62%, 93.8%); --plum5: hsl(298, 56.1%, 90.5%); --plum6: hsl(296, 51.3%, 85.8%); --plum7: hsl(295, 48.2%, 78.9%); --plum8: hsl(292, 47.7%, 70.8%); --plum9: hsl(292, 45%, 51%); --plum10: hsl(292, 50.2%, 46.9%); --plum11: hsl(292, 60%, 42.5%); --plum12: hsl(291, 66%, 14%); --purple1: hsl(280, 65%, 99.4%); --purple2: hsl(276, 100%, 99%); --purple3: hsl(276, 83.1%, 97%); --purple4: hsl(275, 76.4%, 94.7%); --purple5: hsl(275, 70.8%, 91.8%); --purple6: hsl(274, 65.4%, 87.8%); --purple7: hsl(273, 61%, 81.7%); --purple8: hsl(272, 60%, 73.5%); --purple9: hsl(272, 51%, 54%); --purple10: hsl(272, 46.8%, 50.3%); --purple11: hsl(272, 50%, 45.8%); --purple12: hsl(272, 66%, 16%); --red1: hsl(359, 100%, 99.4%); --red2: hsl(359, 100%, 98.6%); --red3: hsl(360, 100%, 96.8%); --red4: hsl(360, 97.9%, 94.8%); --red5: hsl(360, 90.2%, 91.9%); --red6: hsl(360, 81.7%, 87.8%); --red7: hsl(359, 74.2%, 81.7%); --red8: hsl(359, 69.5%, 74.3%); --red9: hsl(358, 75%, 59%); --red10: hsl(358, 69.4%, 55.2%); --red11: hsl(358, 65%, 48.7%); --red12: hsl(354, 50%, 14.6%); --sage1: hsl(155, 30%, 98.8%); --sage2: hsl(150, 16.7%, 97.6%); --sage3: hsl(151, 10.6%, 95.2%); --sage4: hsl(151, 8.8%, 93%); --sage5: hsl(151, 7.8%, 90.8%); --sage6: hsl(152, 7.2%, 88.4%); --sage7: hsl(153, 6.7%, 85.3%); --sage8: hsl(154, 6.1%, 77.5%); --sage9: hsl(155, 3.5%, 55.5%); --sage10: hsl(154, 2.8%, 51.7%); --sage11: hsl(155, 3%, 43%); --sage12: hsl(155, 24%, 9%); --sand1: hsl(50, 20%, 99%); --sand2: hsl(60, 7.7%, 97.5%); --sand3: hsl(59, 6.5%, 95.1%); --sand4: hsl(58, 6.1%, 92.9%); --sand5: hsl(57, 6%, 90.7%); --sand6: hsl(56, 5.9%, 88.4%); --sand7: hsl(55, 5.9%, 85.2%); --sand8: hsl(51, 6%, 77.1%); --sand9: hsl(50, 2%, 55.7%); --sand10: hsl(55, 1.7%, 51.9%); --sand11: hsl(50, 2%, 43.1%); --sand12: hsl(50, 6%, 10%); --sky1: hsl(193, 100%, 98.8%); --sky2: hsl(193, 100%, 97.3%); --sky3: hsl(193, 99%, 94.7%); --sky4: hsl(193, 91.4%, 91.4%); --sky5: hsl(194, 82%, 86.6%); --sky6: hsl(194, 74.1%, 79.5%); --sky7: hsl(194, 72.3%, 69.6%); --sky8: hsl(193, 77.9%, 53.9%); --sky9: hsl(193, 98%, 70%); --sky10: hsl(193, 87%, 66.5%); --sky11: hsl(195, 100%, 31.5%); --sky12: hsl(195, 100%, 13%); --slate1: hsl(206, 30%, 98.8%); --slate2: hsl(210, 16.7%, 97.6%); --slate3: hsl(209, 13.3%, 95.3%); --slate4: hsl(209, 12.2%, 93.2%); --slate5: hsl(208, 11.7%, 91.1%); --slate6: hsl(208, 11.3%, 88.9%); --slate7: hsl(207, 11.1%, 85.9%); --slate8: hsl(205, 10.7%, 78%); --slate9: hsl(206, 6%, 56.1%); --slate10: hsl(206, 5.8%, 52.3%); --slate11: hsl(206, 6%, 43.5%); --slate12: hsl(206, 24%, 9%); --slat12: hsla(202, 97%, 2.4%, 0.934); --teal1: hsl(165, 60%, 98.8%); --teal2: hsl(169, 64.7%, 96.7%); --teal3: hsl(169, 59.8%, 94%); --teal4: hsl(169, 53.1%, 90.2%); --teal5: hsl(170, 47.1%, 85%); --teal6: hsl(170, 42.6%, 77.9%); --teal7: hsl(170, 39.9%, 68.1%); --teal8: hsl(172, 42.1%, 52.5%); --teal9: hsl(173, 80%, 36%); --teal10: hsl(173, 83.4%, 32.5%); --teal11: hsl(174, 90%, 25.2%); --teal12: hsl(170, 50%, 12.5%); --tomato1: hsl(10, 100%, 99.4%); --tomato2: hsl(8, 100%, 98.4%); --tomato3: hsl(8, 100%, 96.6%); --tomato4: hsl(8, 100%, 94.3%); --tomato5: hsl(8, 92.8%, 91%); --tomato6: hsl(9, 84.7%, 86.3%); --tomato7: hsl(10, 77.3%, 79.5%); --tomato8: hsl(10, 71.6%, 71%); --tomato9: hsl(10, 78%, 54%); --tomato10: hsl(10, 71.5%, 50%); --tomato11: hsl(10, 82%, 43.5%); --tomato12: hsl(10, 50%, 13.5%); --violet1: hsl(255, 65%, 99.4%); --violet2: hsl(252, 100%, 99%); --violet3: hsl(252, 96.9%, 97.4%); --violet4: hsl(252, 91.5%, 95.5%); --violet5: hsl(252, 85.1%, 93%); --violet6: hsl(252, 77.8%, 89.4%); --violet7: hsl(252, 71%, 83.7%); --violet8: hsl(252, 68.6%, 76.3%); --violet9: hsl(252, 56%, 57.5%); --violet10: hsl(251, 48.1%, 53.5%); --violet11: hsl(250, 43%, 48%); --violet12: hsl(254, 60%, 18.5%); --yellow1: hsl(60, 54%, 98.5%); --yellow2: hsl(52, 100%, 95.5%); --yellow3: hsl(55, 100%, 90.9%); --yellow4: hsl(54, 100%, 86.6%); --yellow5: hsl(52, 97.9%, 82%); --yellow6: hsl(50, 89.4%, 76.1%); --yellow7: hsl(47, 80.4%, 68%); --yellow8: hsl(48, 100%, 46.1%); --yellow9: hsl(53, 92%, 50%); --yellow10: hsl(50, 100%, 48.5%); --yellow11: hsl(42, 100%, 29%); --yellow12: hsl(40, 55%, 13.5%); --yellowA1: hsla(60, 94.3%, 34.6%, 0.024); --yellowA2: hsla(52, 100%, 50.4%, 0.091); --yellowA3: hsla(55, 100%, 50.2%, 0.181); --yellowA4: hsla(54, 100%, 50.1%, 0.267); --yellowA5: hsla(52, 99.9%, 49.5%, 0.357); --yellowA6: hsla(50, 100%, 47.4%, 0.451); --yellowA7: hsla(47, 99.8%, 44.6%, 0.577); --yellowA8: hsla(48, 100%, 46%, 0.98); --yellowA9: hsla(53, 100%, 48%, 0.961); --yellowA10: hsla(50, 100%, 48.4%, 0.98); --yellowA11: hsla(42, 100%, 28.6%, 0.98); --yellowA12: hsla(41, 98.9%, 8%, 0.942); } .dark { --blackA1: hsla(0, 0%, 100%, 0); --blackA2: hsla(0, 0%, 100%, 0.013); --blackA3: hsla(0, 0%, 100%, 0.034); --blackA4: hsla(0, 0%, 100%, 0.056); --blackA5: hsla(0, 0%, 100%, 0.086); --blackA6: hsla(0, 0%, 100%, 0.124); --blackA7: hsla(0, 0%, 100%, 0.176); --blackA8: hsla(0, 0%, 100%, 0.249); --blackA9: hsla(0, 0%, 100%, 0.386); --blackA10: hsla(0, 0%, 100%, 0.446); --blackA11: hsla(0, 0%, 100%, 0.592); --blackA12: hsla(0, 0%, 100%, 0.923); --whiteA1: hsla(0, 0%, 0%, 0.012); --whiteA2: hsla(0, 0%, 0%, 0.027); --whiteA3: hsla(0, 0%, 0%, 0.047); --whiteA4: hsla(0, 0%, 0%, 0.071); --whiteA5: hsla(0, 0%, 0%, 0.09); --whiteA6: hsla(0, 0%, 0%, 0.114); --whiteA7: hsla(0, 0%, 0%, 0.141); --whiteA8: hsla(0, 0%, 0%, 0.22); --whiteA9: hsla(0, 0%, 0%, 0.439); --whiteA10: hsla(0, 0%, 0%, 0.478); --whiteA11: hsla(0, 0%, 0%, 0.565); --whiteA12: hsla(0, 0%, 0%, 0.91); --amber1: hsl(36, 100%, 6.1%); --amber2: hsl(35, 100%, 7.6%); --amber3: hsl(32, 100%, 10.2%); --amber4: hsl(32, 100%, 12.4%); --amber5: hsl(33, 100%, 14.6%); --amber6: hsl(35, 100%, 17.1%); --amber7: hsl(35, 91%, 21.6%); --amber8: hsl(36, 100%, 25.5%); --amber9: hsl(39, 100%, 57%); --amber10: hsl(43, 100%, 64%); --amber11: hsl(39, 90%, 49.8%); --amber12: hsl(39, 97%, 93.2%); --blue1: hsl(212, 35%, 9.2%); --blue2: hsl(216, 50%, 11.8%); --blue3: hsl(214, 59.4%, 15.3%); --blue4: hsl(214, 65.8%, 17.9%); --blue5: hsl(213, 71.2%, 20.2%); --blue6: hsl(212, 77.4%, 23.1%); --blue7: hsl(211, 85.1%, 27.4%); --blue8: hsl(211, 89.7%, 34.1%); --blue9: hsl(206, 100%, 50%); --blue10: hsl(209, 100%, 60.6%); --blue11: hsl(210, 100%, 66.1%); --blue12: hsl(206, 98%, 95.8%); --bronze1: hsl(17, 10%, 8.8%); --bronze2: hsl(15, 14.8%, 10.6%); --bronze3: hsl(15, 16.3%, 14.3%); --bronze4: hsl(16, 17.1%, 17.2%); --bronze5: hsl(16, 17.6%, 19.6%); --bronze6: hsl(16, 18.1%, 22.9%); --bronze7: hsl(17, 18.8%, 28.8%); --bronze8: hsl(17, 19.6%, 38%); --bronze9: hsl(17, 20%, 54%); --bronze10: hsl(18, 24%, 59%); --bronze11: hsl(18, 35%, 68.5%); --bronze12: hsl(18, 57%, 94.1%); --brown1: hsl(22, 15%, 8.7%); --brown2: hsl(20, 28.3%, 10.4%); --brown3: hsl(20, 28%, 14%); --brown4: hsl(21, 28.4%, 16.5%); --brown5: hsl(22, 28.7%, 18.9%); --brown6: hsl(23, 29%, 22.3%); --brown7: hsl(25, 29.5%, 27.8%); --brown8: hsl(27, 30.1%, 35.9%); --brown9: hsl(28, 34%, 51%); --brown10: hsl(28, 41.4%, 55.8%); --brown11: hsl(28, 60%, 64.5%); --brown12: hsl(30, 67%, 94%); --crimson1: hsl(335, 20%, 9.6%); --crimson2: hsl(335, 32.2%, 11.6%); --crimson3: hsl(335, 42.5%, 16.5%); --crimson4: hsl(335, 47.2%, 19.3%); --crimson5: hsl(335, 50.9%, 21.8%); --crimson6: hsl(335, 55.7%, 25.3%); --crimson7: hsl(336, 62.9%, 30.8%); --crimson8: hsl(336, 74.9%, 39%); --crimson9: hsl(336, 80%, 57.8%); --crimson10: hsl(339, 84.1%, 62.6%); --crimson11: hsl(341, 90%, 67.3%); --crimson12: hsl(332, 87%, 96%); --cyan1: hsl(192, 60%, 7.2%); --cyan2: hsl(192, 71.4%, 8.2%); --cyan3: hsl(192, 75.9%, 10.8%); --cyan4: hsl(192, 79.3%, 12.8%); --cyan5: hsl(192, 82.5%, 14.6%); --cyan6: hsl(192, 86.6%, 16.9%); --cyan7: hsl(192, 92.6%, 20.1%); --cyan8: hsl(192, 100%, 24.5%); --cyan9: hsl(190, 95%, 39%); --cyan10: hsl(188, 100%, 40%); --cyan11: hsl(186, 100%, 42.2%); --cyan12: hsl(185, 73%, 93.2%); --gold1: hsl(44, 9%, 8.3%); --gold2: hsl(43, 14.3%, 9.6%); --gold3: hsl(42, 15.5%, 13%); --gold4: hsl(41, 16.4%, 15.6%); --gold5: hsl(41, 16.9%, 17.8%); --gold6: hsl(40, 17.6%, 20.8%); --gold7: hsl(38, 18.5%, 26.4%); --gold8: hsl(36, 19.6%, 35.1%); --gold9: hsl(36, 20%, 49.5%); --gold10: hsl(36, 22.3%, 54.5%); --gold11: hsl(35, 30%, 64%); --gold12: hsl(49, 52%, 93.8%); --grass1: hsl(146, 30%, 7.4%); --grass2: hsl(136, 33.3%, 8.8%); --grass3: hsl(137, 36%, 11.4%); --grass4: hsl(137, 37.6%, 13.7%); --grass5: hsl(136, 38.7%, 16%); --grass6: hsl(135, 39.6%, 19.1%); --grass7: hsl(134, 40.3%, 23.8%); --grass8: hsl(131, 40.1%, 30.8%); --grass9: hsl(131, 41%, 46.5%); --grass10: hsl(131, 39%, 52.1%); --grass11: hsl(131, 43%, 57.2%); --grass12: hsl(137, 72%, 94%); --gray1: hsl(0, 0%, 8.5%); --gray2: hsl(0, 0%, 11%); --gray3: hsl(0, 0%, 13.6%); --gray4: hsl(0, 0%, 15.8%); --gray5: hsl(0, 0%, 17.9%); --gray6: hsl(0, 0%, 20.5%); --gray7: hsl(0, 0%, 24.3%); --gray8: hsl(0, 0%, 31.2%); --gray9: hsl(0, 0%, 43.9%); --gray10: hsl(0, 0%, 49.4%); --gray11: hsl(0, 0%, 62.8%); --gray12: hsl(0, 0%, 93%); --green1: hsl(146, 30%, 7.4%); --green2: hsl(155, 44.2%, 8.4%); --green3: hsl(155, 46.7%, 10.9%); --green4: hsl(154, 48.4%, 12.9%); --green5: hsl(154, 49.7%, 14.9%); --green6: hsl(154, 50.9%, 17.6%); --green7: hsl(153, 51.8%, 21.8%); --green8: hsl(151, 51.7%, 28.4%); --green9: hsl(151, 55%, 41.5%); --green10: hsl(151, 49.3%, 46.5%); --green11: hsl(151, 50%, 53.2%); --green12: hsl(137, 72%, 94%); --indigo1: hsl(229, 24%, 10%); --indigo2: hsl(230, 36.4%, 12.9%); --indigo3: hsl(228, 43.3%, 17.5%); --indigo4: hsl(227, 47.2%, 21%); --indigo5: hsl(227, 50%, 24.1%); --indigo6: hsl(226, 52.9%, 28.2%); --indigo7: hsl(226, 56%, 34.5%); --indigo8: hsl(226, 58.2%, 44.1%); --indigo9: hsl(226, 70%, 55.5%); --indigo10: hsl(227, 75.2%, 61.6%); --indigo11: hsl(228, 100%, 75.9%); --indigo12: hsl(226, 83%, 96.3%); --lime1: hsl(75, 55%, 6%); --lime2: hsl(74, 56.8%, 7.3%); --lime3: hsl(78, 50.2%, 9.9%); --lime4: hsl(79, 50.3%, 12.1%); --lime5: hsl(79, 52.6%, 14.2%); --lime6: hsl(78, 55.7%, 16.7%); --lime7: hsl(77, 59.7%, 20.1%); --lime8: hsl(75, 64.8%, 24.5%); --lime9: hsl(81, 67%, 50%); --lime10: hsl(75, 85%, 60%); --lime11: hsl(81, 70%, 43.8%); --lime12: hsl(84, 79%, 92.6%); --mauve1: hsl(246, 6%, 9%); --mauve2: hsl(240, 5.1%, 11.6%); --mauve3: hsl(241, 5%, 14.3%); --mauve4: hsl(242, 4.9%, 16.5%); --mauve5: hsl(243, 4.9%, 18.8%); --mauve6: hsl(244, 4.9%, 21.5%); --mauve7: hsl(245, 4.9%, 25.4%); --mauve8: hsl(247, 4.8%, 32.5%); --mauve9: hsl(252, 4%, 45.2%); --mauve10: hsl(247, 3.4%, 50.7%); --mauve11: hsl(253, 4%, 63.7%); --mauve12: hsl(256, 6%, 93.2%); --mint1: hsl(173, 50%, 6.6%); --mint2: hsl(176, 73%, 7.3%); --mint3: hsl(175, 79.3%, 8.9%); --mint4: hsl(174, 84.8%, 10.3%); --mint5: hsl(174, 90.2%, 11.9%); --mint6: hsl(173, 96%, 13.8%); --mint7: hsl(172, 100%, 16.8%); --mint8: hsl(170, 100%, 21.4%); --mint9: hsl(167, 65%, 66%); --mint10: hsl(163, 80%, 77%); --mint11: hsl(167, 70%, 48%); --mint12: hsl(165, 80%, 94.8%); --olive1: hsl(110, 5%, 8.6%); --olive2: hsl(105, 7.4%, 10.6%); --olive3: hsl(106, 6.4%, 13.1%); --olive4: hsl(106, 5.8%, 15.3%); --olive5: hsl(107, 5.3%, 17.4%); --olive6: hsl(107, 4.9%, 19.9%); --olive7: hsl(108, 4.4%, 23.6%); --olive8: hsl(110, 3.8%, 30.6%); --olive9: hsl(110, 6%, 42.5%); --olive10: hsl(111, 4.8%, 48.2%); --olive11: hsl(110, 5%, 61.8%); --olive12: hsl(110, 6%, 93%); --orange1: hsl(30, 70%, 7.2%); --orange2: hsl(28, 100%, 8.4%); --orange3: hsl(26, 91.1%, 11.6%); --orange4: hsl(25, 88.3%, 14.1%); --orange5: hsl(24, 87.6%, 16.6%); --orange6: hsl(24, 88.6%, 19.8%); --orange7: hsl(24, 92.4%, 24%); --orange8: hsl(25, 100%, 29%); --orange9: hsl(24, 94%, 50%); --orange10: hsl(24, 100%, 58.5%); --orange11: hsl(24, 100%, 62.2%); --orange12: hsl(24, 97%, 93.2%); --pink1: hsl(318, 25%, 9.6%); --pink2: hsl(319, 32.2%, 11.6%); --pink3: hsl(319, 41%, 16%); --pink4: hsl(320, 45.4%, 18.7%); --pink5: hsl(320, 49%, 21.1%); --pink6: hsl(321, 53.6%, 24.4%); --pink7: hsl(321, 61.1%, 29.7%); --pink8: hsl(322, 74.9%, 37.5%); --pink9: hsl(322, 65%, 54.5%); --pink10: hsl(323, 72.8%, 59.2%); --pink11: hsl(325, 90%, 66.4%); --pink12: hsl(322, 90%, 95.8%); --plum1: hsl(301, 20%, 9.4%); --plum2: hsl(300, 29.8%, 11.2%); --plum3: hsl(298, 34.4%, 15.3%); --plum4: hsl(297, 36.8%, 18.3%); --plum5: hsl(296, 38.5%, 21.1%); --plum6: hsl(295, 40.4%, 24.7%); --plum7: hsl(294, 42.7%, 30.6%); --plum8: hsl(292, 45.1%, 40%); --plum9: hsl(292, 45%, 51%); --plum10: hsl(295, 50%, 55.4%); --plum11: hsl(300, 60%, 62%); --plum12: hsl(296, 74%, 95.7%); --purple1: hsl(284, 20%, 9.6%); --purple2: hsl(283, 30%, 11.8%); --purple3: hsl(281, 37.5%, 16.5%); --purple4: hsl(280, 41.2%, 20%); --purple5: hsl(279, 43.8%, 23.3%); --purple6: hsl(277, 46.4%, 27.5%); --purple7: hsl(275, 49.3%, 34.6%); --purple8: hsl(272, 52.1%, 45.9%); --purple9: hsl(272, 51%, 54%); --purple10: hsl(273, 57.3%, 59.1%); --purple11: hsl(275, 80%, 71%); --purple12: hsl(279, 75%, 95.7%); --red1: hsl(353, 23%, 9.8%); --red2: hsl(357, 34.4%, 12%); --red3: hsl(356, 43.4%, 16.4%); --red4: hsl(356, 47.6%, 19.2%); --red5: hsl(356, 51.1%, 21.9%); --red6: hsl(356, 55.2%, 25.9%); --red7: hsl(357, 60.2%, 31.8%); --red8: hsl(358, 65%, 40.4%); --red9: hsl(358, 75%, 59%); --red10: hsl(358, 85.3%, 64%); --red11: hsl(358, 100%, 69.5%); --red12: hsl(351, 89%, 96%); --sage1: hsl(155, 7%, 8.4%); --sage2: hsl(150, 7.4%, 10.6%); --sage3: hsl(150, 6.7%, 13.1%); --sage4: hsl(150, 6.4%, 15.3%); --sage5: hsl(150, 6.1%, 17.4%); --sage6: hsl(150, 5.8%, 19.9%); --sage7: hsl(150, 5.5%, 23.6%); --sage8: hsl(150, 5.1%, 30.6%); --sage9: hsl(155, 6%, 42.5%); --sage10: hsl(153, 4.8%, 48.2%); --sage11: hsl(155, 5%, 61.8%); --sage12: hsl(155, 6%, 93%); --sand1: hsl(61, 2%, 8.3%); --sand2: hsl(60, 3.7%, 10.6%); --sand3: hsl(58, 3.7%, 13.1%); --sand4: hsl(57, 3.6%, 15.3%); --sand5: hsl(56, 3.7%, 17.4%); --sand6: hsl(55, 3.7%, 19.9%); --sand7: hsl(53, 3.7%, 23.6%); --sand8: hsl(50, 3.8%, 30.6%); --sand9: hsl(50, 4%, 42.7%); --sand10: hsl(52, 3.1%, 48.3%); --sand11: hsl(50, 4%, 61.8%); --sand12: hsl(56, 4%, 92.8%); --sky1: hsl(205, 45%, 8.6%); --sky2: hsl(202, 71.4%, 9.6%); --sky3: hsl(201, 74.6%, 12.2%); --sky4: hsl(201, 77.4%, 14.4%); --sky5: hsl(200, 80.3%, 16.5%); --sky6: hsl(200, 84.1%, 18.9%); --sky7: hsl(199, 90.2%, 22.1%); --sky8: hsl(198, 100%, 26.1%); --sky9: hsl(193, 98%, 70%); --sky10: hsl(192, 100%, 77%); --sky11: hsl(192, 85%, 55.8%); --sky12: hsl(198, 98%, 95.8%); --slate1: hsl(200, 7%, 8.8%); --slate2: hsl(195, 7.1%, 11%); --slate3: hsl(197, 6.8%, 13.6%); --slate4: hsl(198, 6.6%, 15.8%); --slate5: hsl(199, 6.4%, 17.9%); --slate6: hsl(201, 6.2%, 20.5%); --slate7: hsl(203, 6%, 24.3%); --slate8: hsl(207, 5.6%, 31.6%); --slate9: hsl(206, 6%, 43.9%); --slate10: hsl(206, 5.2%, 49.5%); --slate11: hsl(206, 6%, 63%); --slate12: hsl(210, 6%, 93%); --teal1: hsl(168, 48%, 6.5%); --teal2: hsl(169, 77.8%, 7.1%); --teal3: hsl(170, 76.1%, 9.2%); --teal4: hsl(171, 75.8%, 11%); --teal5: hsl(171, 75.7%, 12.8%); --teal6: hsl(172, 75.8%, 15.1%); --teal7: hsl(172, 76.7%, 18.6%); --teal8: hsl(173, 80.2%, 23.7%); --teal9: hsl(173, 80%, 36%); --teal10: hsl(174, 83.9%, 38.2%); --teal11: hsl(174, 90%, 40.7%); --teal12: hsl(166, 73%, 93.1%); --tomato1: hsl(10, 23%, 9.4%); --tomato2: hsl(9, 44.8%, 11.4%); --tomato3: hsl(8, 52%, 15.3%); --tomato4: hsl(7, 56.3%, 18%); --tomato5: hsl(7, 60.1%, 20.6%); --tomato6: hsl(8, 64.8%, 24%); --tomato7: hsl(8, 71.2%, 29.1%); --tomato8: hsl(10, 80.2%, 35.7%); --tomato9: hsl(10, 78%, 54%); --tomato10: hsl(10, 81.7%, 59%); --tomato11: hsl(10, 85%, 62.8%); --tomato12: hsl(10, 89%, 96%); --violet1: hsl(250, 20%, 10.2%); --violet2: hsl(255, 30.3%, 12.9%); --violet3: hsl(253, 37%, 18.4%); --violet4: hsl(252, 40.1%, 22.5%); --violet5: hsl(252, 42.2%, 26.2%); --violet6: hsl(251, 44.3%, 31.1%); --violet7: hsl(250, 46.8%, 38.9%); --violet8: hsl(250, 51.8%, 51.2%); --violet9: hsl(252, 56%, 57.5%); --violet10: hsl(251, 63.2%, 63.2%); --violet11: hsl(250, 95%, 76.8%); --violet12: hsl(252, 87%, 96.4%); --yellow1: hsl(45, 100%, 5.5%); --yellow2: hsl(46, 100%, 6.7%); --yellow3: hsl(45, 100%, 8.7%); --yellow4: hsl(45, 100%, 10.4%); --yellow5: hsl(47, 100%, 12.1%); --yellow6: hsl(49, 100%, 14.3%); --yellow7: hsl(49, 90.3%, 18.4%); --yellow8: hsl(50, 100%, 22%); --yellow9: hsl(53, 92%, 50%); --yellow10: hsl(54, 100%, 68%); --yellow11: hsl(48, 100%, 47%); --yellow12: hsl(53, 100%, 91%); } /* Primary color */ :root { --main1: var(--gray1); --main2: var(--gray2); --main3: var(--gray3); --main4: var(--gray4); --main5: var(--gray5); --main6: var(--gray6); --main7: var(--gray7); --main8: var(--gray8); --main9: hsl(0, 0%, 13.6%); --main10: hsl(0, 0%, 15.8%); --main11: var(--gray11); --main12: var(--gray12); } .dark { --main1: var(--gray1); --main2: var(--gray2); --main3: var(--gray3); --main4: var(--gray4); --main5: var(--gray5); --main6: var(--gray6); --main7: var(--gray7); --main8: var(--gray8); --main9: hsl(0, 0%, 95.1%); --main10: hsl(0, 0%, 93%); --main11: var(--gray11); --main12: var(--gray12); } /* Themed default and stateful colors */ :root, .dark { --error1: var(--red1); --error2: var(--red2); --error3: var(--red3); --error4: var(--red4); --error5: var(--red5); --error6: var(--red6); --error7: var(--red7); --error8: var(--red8); --error9: var(--red9); --error10: var(--red10); --error11: var(--red11); --error12: var(--red12); --info1: var(--blue1); --info2: var(--blue2); --info3: var(--blue3); --info4: var(--blue4); --info5: var(--blue5); --info6: var(--blue6); --info7: var(--blue7); --info8: var(--blue8); --info9: var(--blue9); --info10: var(--blue10); --info11: var(--blue11); --info12: var(--blue12); --success1: var(--green1); --success2: var(--green2); --success3: var(--green3); --success4: var(--green4); --success5: var(--green5); --success6: var(--green6); --success7: var(--green7); --success8: var(--green8); --success9: var(--green9); --success10: var(--green10); --success11: var(--green11); --success12: var(--green12); --warning1: var(--orange1); --warning2: var(--orange2); --warning3: var(--orange3); --warning4: var(--orange4); --warning5: var(--orange5); --warning6: var(--orange6); --warning7: var(--orange7); --warning8: var(--orange8); --warning9: var(--orange9); --warning10: var(--orange10); --warning11: var(--orange11); --warning12: var(--orange12); } } @layer base { /* Form elements updates */ /* input type dates update calendar icon */ ::-webkit-calendar-picker-indicator { background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAsklEQVR4nO2WTQrFIAyEPUSZkGt6q/7cyiP49q8EFLoQtNVQpQZmZ5JPM2CM6T0AbEH2Ro6NedUARPQX3SkmZ2PeeADMvBDRAeAXi9RKagHYpXbJjY9WjRMg+VdEuDkAdzFgrVyA8Cozb+oJ6gjAKYygHICUNA4AOvDANgHMHMGD/z+1P6ibEJcGqfwJgC+MwL5qwlyMBYC3VzIAu+JSumYBmHkJT+YbNvfSvGgtn/G5OAGy8ZfEJC9HagAAAABJRU5ErkJggg==) center/80% no-repeat; } /* input type dates update calendar icon dark theme*/ .dark ::-webkit-calendar-picker-indicator { background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAq0lEQVR4nO2WQQ6AIAwEeYQv5VcWf8WVvaB3DQYjMUYhgkCgyR7bHWiTlrHSAwBZ8YAcfuTFAFitvItZ8z2vPgCt9QBgArA45l9laglT24d+imh81fsv4ny5dAbwq6StOSfpedSZQEEAMkELggDWFKoKgFjrQ0gdgNXSAjj7/+5++AOAnhZPB0ALLeBZh/AtqgNYcp9kItUqVkqNvmc5GdqI5rMx9zrLezQXGzuAIHQObeHUAAAAAElFTkSuQmCC) center/80% no-repeat; } /* Link type external */ a[data-external="true"]:after { display: inline-block; width: 24px; height: 24px; vertical-align: middle; content: ''; background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAACXBIWXMAAAsTAAALEwEAmpwYAAABAElEQVR4nO2WQQrCMBBF/znq2pVep7jwIL2SLnqyIrTdKowIWUm06WSSmcA8yDZ5r0lDAMdxHMscAYwAVgDEHN9IzZMk/8hYUD1gFJBXDVhbD6DcCXbSA3i2GtBvyJsOuETkYzEmA/qI7AvAtYWAf/KwHrAlbzogRd5sQKq8yYA98uYC9sqbCuDIiyARoCYvEaAqnxugLp8TICVPGj+x5Jen2gHSx4ZqBpQ481Qr4PzjPf955+dANXdgKHDbUO1/YBC+KknjFjpxFrL+FuJCHgDfgSzIjxAaP0JLZBKtMXMC7gbEKYwbJ+AAYDIgPwHowKQL9RrHaQlrs+Udx3FQnDfW3kAr8oY1AwAAAABJRU5ErkJggg==) center/80% no-repeat; } /* Link type external dark theme*/ .dark a[data-external="true"]:after { background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAACXBIWXMAAAsTAAALEwEAmpwYAAABC0lEQVR4nO2WOw7CMAxAcw6YmeA6iIGDcCUYejKERFlBeqjQgU+B1nFjI/nt2O8lUUVKQRAEbgFmQAWcENIxU2VOX/mDdKGHgCpX3jrg9O8BeQOG71sC5+etGfuzByjKN0iGPjGKebrtWXXIv8W4DKD75C/A2n3AN/mksX/MgF/yrgP6yLsN6CvvMmCIvLuAofKuAiTyKmgEmMlrBJjK5waYy+cEaMmT+4QlAzRPntIB2s+GkgFjvHlKBQCLD//nV1J5ixvYaJ28ScBDhNqnktIB7W/mElk3AZoQAS/EDZQ+QOIG7G+gxg9HScAOP2wlAVNgb23O3WEyOKCNmDT1Rs+pbnfL5IMgCFIJrgzRaGUki4tZAAAAAElFTkSuQmCC) center/80% no-repeat; } }