@tamagui/themes 1.31.4 → 1.32.0

package/src/generated-new.ts

@@ -0,0 +1,4313 @@
+type Theme = {
+  color1: string;
+  color2: string;
+  color3: string;
+  color4: string;
+  color5: string;
+  color6: string;
+  color7: string;
+  color8: string;
+  color9: string;
+  color10: string;
+  color11: string;
+  color12: string;
+  background: string;
+  backgroundHover: string;
+  backgroundPress: string;
+  backgroundFocus: string;
+  backgroundStrong: string;
+  backgroundTransparent: string;
+  color: string;
+  colorHover: string;
+  colorPress: string;
+  colorFocus: string;
+  colorTransparent: string;
+  borderColor: string;
+  borderColorHover: string;
+  borderColorFocus: string;
+  borderColorPress: string;
+  placeholderColor: string;
+  blue1: string;
+  blue2: string;
+  blue3: string;
+  blue4: string;
+  blue5: string;
+  blue6: string;
+  blue7: string;
+  blue8: string;
+  blue9: string;
+  blue10: string;
+  blue11: string;
+  blue12: string;
+  gray1: string;
+  gray2: string;
+  gray3: string;
+  gray4: string;
+  gray5: string;
+  gray6: string;
+  gray7: string;
+  gray8: string;
+  gray9: string;
+  gray10: string;
+  gray11: string;
+  gray12: string;
+  green1: string;
+  green2: string;
+  green3: string;
+  green4: string;
+  green5: string;
+  green6: string;
+  green7: string;
+  green8: string;
+  green9: string;
+  green10: string;
+  green11: string;
+  green12: string;
+  orange1: string;
+  orange2: string;
+  orange3: string;
+  orange4: string;
+  orange5: string;
+  orange6: string;
+  orange7: string;
+  orange8: string;
+  orange9: string;
+  orange10: string;
+  orange11: string;
+  orange12: string;
+  pink1: string;
+  pink2: string;
+  pink3: string;
+  pink4: string;
+  pink5: string;
+  pink6: string;
+  pink7: string;
+  pink8: string;
+  pink9: string;
+  pink10: string;
+  pink11: string;
+  pink12: string;
+  purple1: string;
+  purple2: string;
+  purple3: string;
+  purple4: string;
+  purple5: string;
+  purple6: string;
+  purple7: string;
+  purple8: string;
+  purple9: string;
+  purple10: string;
+  purple11: string;
+  purple12: string;
+  red1: string;
+  red2: string;
+  red3: string;
+  red4: string;
+  red5: string;
+  red6: string;
+  red7: string;
+  red8: string;
+  red9: string;
+  red10: string;
+  red11: string;
+  red12: string;
+  yellow1: string;
+  yellow2: string;
+  yellow3: string;
+  yellow4: string;
+  yellow5: string;
+  yellow6: string;
+  yellow7: string;
+  yellow8: string;
+  yellow9: string;
+  yellow10: string;
+  yellow11: string;
+  yellow12: string;
+  shadowColor: string;
+  shadowColorHover: string;
+  shadowColorPress: string;
+  shadowColorFocus: string;
+
+}
+
+export const light = {
+    color1: '#fff',
+    color2: '#f9f9f9',
+    color3: 'hsl(0, 0%, 97.3%)',
+    color4: 'hsl(0, 0%, 95.1%)',
+    color5: 'hsl(0, 0%, 94.0%)',
+    color6: 'hsl(0, 0%, 92.0%)',
+    color7: 'hsl(0, 0%, 89.5%)',
+    color8: 'hsl(0, 0%, 81.0%)',
+    color9: 'hsl(0, 0%, 56.1%)',
+    color10: 'hsl(0, 0%, 50.3%)',
+    color11: 'hsl(0, 0%, 42.5%)',
+    color12: 'hsl(0, 0%, 9.0%)',
+    background: '#f9f9f9',
+    backgroundHover: 'hsl(0, 0%, 97.3%)',
+    backgroundPress: 'hsl(0, 0%, 95.1%)',
+    backgroundFocus: 'hsl(0, 0%, 94.0%)',
+    backgroundStrong: '#fff',
+    backgroundTransparent: 'rgba(255,255,255,0)',
+    color: 'hsl(0, 0%, 9.0%)',
+    colorHover: 'hsl(0, 0%, 42.5%)',
+    colorPress: 'hsl(0, 0%, 9.0%)',
+    colorFocus: 'hsl(0, 0%, 42.5%)',
+    colorTransparent: 'rgba(10,10,10,0)',
+    borderColor: 'hsl(0, 0%, 94.0%)',
+    borderColorHover: 'hsl(0, 0%, 92.0%)',
+    borderColorFocus: 'hsl(0, 0%, 95.1%)',
+    borderColorPress: 'hsl(0, 0%, 94.0%)',
+    placeholderColor: 'hsl(0, 0%, 56.1%)',
+    blue1: 'hsl(206, 100%, 99.2%)',
+    blue2: 'hsl(210, 100%, 98.0%)',
+    blue3: 'hsl(209, 100%, 96.5%)',
+    blue4: 'hsl(210, 98.8%, 94.0%)',
+    blue5: 'hsl(209, 95.0%, 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.0%)',
+    blue10: 'hsl(208, 100%, 47.3%)',
+    blue11: 'hsl(211, 100%, 43.2%)',
+    blue12: 'hsl(211, 100%, 15.0%)',
+    gray1: 'hsl(0, 0%, 99.0%)',
+    gray2: 'hsl(0, 0%, 97.3%)',
+    gray3: 'hsl(0, 0%, 95.1%)',
+    gray4: 'hsl(0, 0%, 93.0%)',
+    gray5: 'hsl(0, 0%, 90.9%)',
+    gray6: 'hsl(0, 0%, 88.7%)',
+    gray7: 'hsl(0, 0%, 85.8%)',
+    gray8: 'hsl(0, 0%, 78.0%)',
+    gray9: 'hsl(0, 0%, 56.1%)',
+    gray10: 'hsl(0, 0%, 52.3%)',
+    gray11: 'hsl(0, 0%, 43.5%)',
+    gray12: 'hsl(0, 0%, 9.0%)',
+    green1: 'hsl(136, 50.0%, 98.9%)',
+    green2: 'hsl(138, 62.5%, 96.9%)',
+    green3: 'hsl(139, 55.2%, 94.5%)',
+    green4: 'hsl(140, 48.7%, 91.0%)',
+    green5: 'hsl(141, 43.7%, 86.0%)',
+    green6: 'hsl(143, 40.3%, 79.0%)',
+    green7: 'hsl(146, 38.5%, 69.0%)',
+    green8: 'hsl(151, 40.2%, 54.1%)',
+    green9: 'hsl(151, 55.0%, 41.5%)',
+    green10: 'hsl(152, 57.5%, 37.6%)',
+    green11: 'hsl(153, 67.0%, 28.5%)',
+    green12: 'hsl(155, 40.0%, 14.0%)',
+    orange1: 'hsl(24, 70.0%, 99.0%)',
+    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.0%, 50.0%)',
+    orange10: 'hsl(24, 100%, 46.5%)',
+    orange11: 'hsl(24, 100%, 37.0%)',
+    orange12: 'hsl(15, 60.0%, 17.0%)',
+    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.0%, 80.1%)',
+    pink8: 'hsl(323, 60.3%, 72.4%)',
+    pink9: 'hsl(322, 65.0%, 54.5%)',
+    pink10: 'hsl(322, 63.9%, 50.7%)',
+    pink11: 'hsl(322, 75.0%, 46.0%)',
+    pink12: 'hsl(320, 70.0%, 13.5%)',
+    purple1: 'hsl(280, 65.0%, 99.4%)',
+    purple2: 'hsl(276, 100%, 99.0%)',
+    purple3: 'hsl(276, 83.1%, 97.0%)',
+    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.0%, 81.7%)',
+    purple8: 'hsl(272, 60.0%, 73.5%)',
+    purple9: 'hsl(272, 51.0%, 54.0%)',
+    purple10: 'hsl(272, 46.8%, 50.3%)',
+    purple11: 'hsl(272, 50.0%, 45.8%)',
+    purple12: 'hsl(272, 66.0%, 16.0%)',
+    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.0%, 59.0%)',
+    red10: 'hsl(358, 69.4%, 55.2%)',
+    red11: 'hsl(358, 65.0%, 48.7%)',
+    red12: 'hsl(354, 50.0%, 14.6%)',
+    yellow1: 'hsl(60, 54.0%, 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.0%)',
+    yellow6: 'hsl(50, 89.4%, 76.1%)',
+    yellow7: 'hsl(47, 80.4%, 68.0%)',
+    yellow8: 'hsl(48, 100%, 46.1%)',
+    yellow9: 'hsl(53, 92.0%, 50.0%)',
+    yellow10: 'hsl(50, 100%, 48.5%)',
+    yellow11: 'hsl(42, 100%, 29.0%)',
+    yellow12: 'hsl(40, 55.0%, 13.5%)',
+    shadowColor: 'rgba(0,0,0,0.066)',
+    shadowColorHover: 'rgba(0,0,0,0.066)',
+    shadowColorPress: 'rgba(0,0,0,0.02)',
+    shadowColorFocus: 'rgba(0,0,0,0.02)'
+} as Theme
+export const dark = {
+    color1: '#050505',
+    color2: '#151515',
+    color3: '#191919',
+    color4: '#232323',
+    color5: '#282828',
+    color6: '#323232',
+    color7: '#424242',
+    color8: '#494949',
+    color9: '#545454',
+    color10: '#626262',
+    color11: '#a5a5a5',
+    color12: '#fff',
+    background: '#151515',
+    backgroundHover: '#191919',
+    backgroundPress: '#232323',
+    backgroundFocus: '#282828',
+    backgroundStrong: '#050505',
+    backgroundTransparent: 'rgba(10,10,10,0)',
+    color: '#fff',
+    colorHover: '#a5a5a5',
+    colorPress: '#fff',
+    colorFocus: '#a5a5a5',
+    colorTransparent: 'rgba(255,255,255,0)',
+    borderColor: '#282828',
+    borderColorHover: '#323232',
+    borderColorFocus: '#232323',
+    borderColorPress: '#282828',
+    placeholderColor: '#545454',
+    blue1: 'hsl(212, 35.0%, 9.2%)',
+    blue2: 'hsl(216, 50.0%, 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.0%)',
+    blue10: 'hsl(209, 100%, 60.6%)',
+    blue11: 'hsl(210, 100%, 66.1%)',
+    blue12: 'hsl(206, 98.0%, 95.8%)',
+    gray1: 'hsl(0, 0%, 8.5%)',
+    gray2: 'hsl(0, 0%, 11.0%)',
+    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.0%)',
+    green1: 'hsl(146, 30.0%, 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.0%, 41.5%)',
+    green10: 'hsl(151, 49.3%, 46.5%)',
+    green11: 'hsl(151, 50.0%, 53.2%)',
+    green12: 'hsl(137, 72.0%, 94.0%)',
+    orange1: 'hsl(30, 70.0%, 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.0%)',
+    orange8: 'hsl(25, 100%, 29.0%)',
+    orange9: 'hsl(24, 94.0%, 50.0%)',
+    orange10: 'hsl(24, 100%, 58.5%)',
+    orange11: 'hsl(24, 100%, 62.2%)',
+    orange12: 'hsl(24, 97.0%, 93.2%)',
+    pink1: 'hsl(318, 25.0%, 9.6%)',
+    pink2: 'hsl(319, 32.2%, 11.6%)',
+    pink3: 'hsl(319, 41.0%, 16.0%)',
+    pink4: 'hsl(320, 45.4%, 18.7%)',
+    pink5: 'hsl(320, 49.0%, 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.0%, 54.5%)',
+    pink10: 'hsl(323, 72.8%, 59.2%)',
+    pink11: 'hsl(325, 90.0%, 66.4%)',
+    pink12: 'hsl(322, 90.0%, 95.8%)',
+    purple1: 'hsl(284, 20.0%, 9.6%)',
+    purple2: 'hsl(283, 30.0%, 11.8%)',
+    purple3: 'hsl(281, 37.5%, 16.5%)',
+    purple4: 'hsl(280, 41.2%, 20.0%)',
+    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.0%, 54.0%)',
+    purple10: 'hsl(273, 57.3%, 59.1%)',
+    purple11: 'hsl(275, 80.0%, 71.0%)',
+    purple12: 'hsl(279, 75.0%, 95.7%)',
+    red1: 'hsl(353, 23.0%, 9.8%)',
+    red2: 'hsl(357, 34.4%, 12.0%)',
+    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.0%, 40.4%)',
+    red9: 'hsl(358, 75.0%, 59.0%)',
+    red10: 'hsl(358, 85.3%, 64.0%)',
+    red11: 'hsl(358, 100%, 69.5%)',
+    red12: 'hsl(351, 89.0%, 96.0%)',
+    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.0%)',
+    yellow9: 'hsl(53, 92.0%, 50.0%)',
+    yellow10: 'hsl(54, 100%, 68.0%)',
+    yellow11: 'hsl(48, 100%, 47.0%)',
+    yellow12: 'hsl(53, 100%, 91.0%)',
+    shadowColor: 'rgba(0,0,0,0.3)',
+    shadowColorHover: 'rgba(0,0,0,0.3)',
+    shadowColorPress: 'rgba(0,0,0,0.2)',
+    shadowColorFocus: 'rgba(0,0,0,0.2)'
+} as Theme
+export const light_orange = {
+    color1: 'hsl(24, 70.0%, 99.0%)',
+    color2: 'hsl(24, 83.3%, 97.6%)',
+    color3: 'hsl(24, 100%, 95.3%)',
+    color4: 'hsl(25, 100%, 92.2%)',
+    color5: 'hsl(25, 100%, 88.2%)',
+    color6: 'hsl(25, 100%, 82.8%)',
+    color7: 'hsl(24, 94.5%, 64.3%)',
+    color8: 'hsl(24, 94.0%, 50.0%)',
+    color9: 'hsl(24, 100%, 46.5%)',
+    color10: 'hsl(24, 100%, 37.0%)',
+    color11: 'hsl(15, 60.0%, 17.0%)',
+    color12: 'hsl(0, 0%, 9.0%)',
+    background: 'hsl(24, 83.3%, 97.6%)',
+    backgroundHover: 'hsl(24, 100%, 95.3%)',
+    backgroundPress: 'hsl(25, 100%, 92.2%)',
+    backgroundFocus: 'hsl(25, 100%, 88.2%)',
+    backgroundStrong: 'hsl(24, 70.0%, 99.0%)',
+    backgroundTransparent: 'hsla(24, 70.0%, 99.0%, 0)',
+    color: 'hsl(0, 0%, 9.0%)',
+    colorHover: 'hsl(15, 60.0%, 17.0%)',
+    colorPress: 'hsl(0, 0%, 9.0%)',
+    colorFocus: 'hsl(15, 60.0%, 17.0%)',
+    colorTransparent: 'hsla(15, 60.0%, 17.0%, 0)',
+    borderColor: 'hsl(25, 100%, 92.2%)',
+    borderColorHover: 'hsl(25, 100%, 88.2%)',
+    borderColorFocus: 'hsl(25, 100%, 92.2%)',
+    borderColorPress: 'hsl(25, 100%, 92.2%)',
+    placeholderColor: 'hsl(24, 100%, 46.5%)'
+} as Theme
+export const light_yellow = {
+    color1: 'hsl(60, 54.0%, 98.5%)',
+    color2: 'hsl(52, 100%, 95.5%)',
+    color3: 'hsl(55, 100%, 90.9%)',
+    color4: 'hsl(54, 100%, 86.6%)',
+    color5: 'hsl(52, 97.9%, 82.0%)',
+    color6: 'hsl(50, 89.4%, 76.1%)',
+    color7: 'hsl(48, 100%, 46.1%)',
+    color8: 'hsl(53, 92.0%, 50.0%)',
+    color9: 'hsl(50, 100%, 48.5%)',
+    color10: 'hsl(42, 100%, 29.0%)',
+    color11: 'hsl(40, 55.0%, 13.5%)',
+    color12: 'hsl(0, 0%, 9.0%)',
+    background: 'hsl(52, 100%, 95.5%)',
+    backgroundHover: 'hsl(55, 100%, 90.9%)',
+    backgroundPress: 'hsl(54, 100%, 86.6%)',
+    backgroundFocus: 'hsl(52, 97.9%, 82.0%)',
+    backgroundStrong: 'hsl(60, 54.0%, 98.5%)',
+    backgroundTransparent: 'hsla(60, 54.0%, 98.5%, 0)',
+    color: 'hsl(0, 0%, 9.0%)',
+    colorHover: 'hsl(40, 55.0%, 13.5%)',
+    colorPress: 'hsl(0, 0%, 9.0%)',
+    colorFocus: 'hsl(40, 55.0%, 13.5%)',
+    colorTransparent: 'hsla(40, 55.0%, 13.5%, 0)',
+    borderColor: 'hsl(54, 100%, 86.6%)',
+    borderColorHover: 'hsl(52, 97.9%, 82.0%)',
+    borderColorFocus: 'hsl(54, 100%, 86.6%)',
+    borderColorPress: 'hsl(54, 100%, 86.6%)',
+    placeholderColor: 'hsl(50, 100%, 48.5%)'
+} as Theme
+export const light_green = {
+    color1: 'hsl(136, 50.0%, 98.9%)',
+    color2: 'hsl(138, 62.5%, 96.9%)',
+    color3: 'hsl(139, 55.2%, 94.5%)',
+    color4: 'hsl(140, 48.7%, 91.0%)',
+    color5: 'hsl(141, 43.7%, 86.0%)',
+    color6: 'hsl(143, 40.3%, 79.0%)',
+    color7: 'hsl(151, 40.2%, 54.1%)',
+    color8: 'hsl(151, 55.0%, 41.5%)',
+    color9: 'hsl(152, 57.5%, 37.6%)',
+    color10: 'hsl(153, 67.0%, 28.5%)',
+    color11: 'hsl(155, 40.0%, 14.0%)',
+    color12: 'hsl(0, 0%, 9.0%)',
+    background: 'hsl(138, 62.5%, 96.9%)',
+    backgroundHover: 'hsl(139, 55.2%, 94.5%)',
+    backgroundPress: 'hsl(140, 48.7%, 91.0%)',
+    backgroundFocus: 'hsl(141, 43.7%, 86.0%)',
+    backgroundStrong: 'hsl(136, 50.0%, 98.9%)',
+    backgroundTransparent: 'hsla(136, 50.0%, 98.9%, 0)',
+    color: 'hsl(0, 0%, 9.0%)',
+    colorHover: 'hsl(155, 40.0%, 14.0%)',
+    colorPress: 'hsl(0, 0%, 9.0%)',
+    colorFocus: 'hsl(155, 40.0%, 14.0%)',
+    colorTransparent: 'hsla(155, 40.0%, 14.0%, 0)',
+    borderColor: 'hsl(140, 48.7%, 91.0%)',
+    borderColorHover: 'hsl(141, 43.7%, 86.0%)',
+    borderColorFocus: 'hsl(140, 48.7%, 91.0%)',
+    borderColorPress: 'hsl(140, 48.7%, 91.0%)',
+    placeholderColor: 'hsl(152, 57.5%, 37.6%)'
+} as Theme
+export const light_blue = {
+    color1: 'hsl(206, 100%, 99.2%)',
+    color2: 'hsl(210, 100%, 98.0%)',
+    color3: 'hsl(209, 100%, 96.5%)',
+    color4: 'hsl(210, 98.8%, 94.0%)',
+    color5: 'hsl(209, 95.0%, 90.1%)',
+    color6: 'hsl(209, 81.2%, 84.5%)',
+    color7: 'hsl(206, 81.9%, 65.3%)',
+    color8: 'hsl(206, 100%, 50.0%)',
+    color9: 'hsl(208, 100%, 47.3%)',
+    color10: 'hsl(211, 100%, 43.2%)',
+    color11: 'hsl(211, 100%, 15.0%)',
+    color12: 'hsl(0, 0%, 9.0%)',
+    background: 'hsl(210, 100%, 98.0%)',
+    backgroundHover: 'hsl(209, 100%, 96.5%)',
+    backgroundPress: 'hsl(210, 98.8%, 94.0%)',
+    backgroundFocus: 'hsl(209, 95.0%, 90.1%)',
+    backgroundStrong: 'hsl(206, 100%, 99.2%)',
+    backgroundTransparent: 'hsla(206, 100%, 99.2%, 0)',
+    color: 'hsl(0, 0%, 9.0%)',
+    colorHover: 'hsl(211, 100%, 15.0%)',
+    colorPress: 'hsl(0, 0%, 9.0%)',
+    colorFocus: 'hsl(211, 100%, 15.0%)',
+    colorTransparent: 'hsla(211, 100%, 15.0%, 0)',
+    borderColor: 'hsl(210, 98.8%, 94.0%)',
+    borderColorHover: 'hsl(209, 95.0%, 90.1%)',
+    borderColorFocus: 'hsl(210, 98.8%, 94.0%)',
+    borderColorPress: 'hsl(210, 98.8%, 94.0%)',
+    placeholderColor: 'hsl(208, 100%, 47.3%)'
+} as Theme
+export const light_purple = {
+    color1: 'hsl(280, 65.0%, 99.4%)',
+    color2: 'hsl(276, 100%, 99.0%)',
+    color3: 'hsl(276, 83.1%, 97.0%)',
+    color4: 'hsl(275, 76.4%, 94.7%)',
+    color5: 'hsl(275, 70.8%, 91.8%)',
+    color6: 'hsl(274, 65.4%, 87.8%)',
+    color7: 'hsl(272, 60.0%, 73.5%)',
+    color8: 'hsl(272, 51.0%, 54.0%)',
+    color9: 'hsl(272, 46.8%, 50.3%)',
+    color10: 'hsl(272, 50.0%, 45.8%)',
+    color11: 'hsl(272, 66.0%, 16.0%)',
+    color12: 'hsl(0, 0%, 9.0%)',
+    background: 'hsl(276, 100%, 99.0%)',
+    backgroundHover: 'hsl(276, 83.1%, 97.0%)',
+    backgroundPress: 'hsl(275, 76.4%, 94.7%)',
+    backgroundFocus: 'hsl(275, 70.8%, 91.8%)',
+    backgroundStrong: 'hsl(280, 65.0%, 99.4%)',
+    backgroundTransparent: 'hsla(280, 65.0%, 99.4%, 0)',
+    color: 'hsl(0, 0%, 9.0%)',
+    colorHover: 'hsl(272, 66.0%, 16.0%)',
+    colorPress: 'hsl(0, 0%, 9.0%)',
+    colorFocus: 'hsl(272, 66.0%, 16.0%)',
+    colorTransparent: 'hsla(272, 66.0%, 16.0%, 0)',
+    borderColor: 'hsl(275, 76.4%, 94.7%)',
+    borderColorHover: 'hsl(275, 70.8%, 91.8%)',
+    borderColorFocus: 'hsl(275, 76.4%, 94.7%)',
+    borderColorPress: 'hsl(275, 76.4%, 94.7%)',
+    placeholderColor: 'hsl(272, 46.8%, 50.3%)'
+} as Theme
+export const light_pink = {
+    color1: 'hsl(322, 100%, 99.4%)',
+    color2: 'hsl(323, 100%, 98.4%)',
+    color3: 'hsl(323, 86.3%, 96.5%)',
+    color4: 'hsl(323, 78.7%, 94.2%)',
+    color5: 'hsl(323, 72.2%, 91.1%)',
+    color6: 'hsl(323, 66.3%, 86.6%)',
+    color7: 'hsl(323, 60.3%, 72.4%)',
+    color8: 'hsl(322, 65.0%, 54.5%)',
+    color9: 'hsl(322, 63.9%, 50.7%)',
+    color10: 'hsl(322, 75.0%, 46.0%)',
+    color11: 'hsl(320, 70.0%, 13.5%)',
+    color12: 'hsl(0, 0%, 9.0%)',
+    background: 'hsl(323, 100%, 98.4%)',
+    backgroundHover: 'hsl(323, 86.3%, 96.5%)',
+    backgroundPress: 'hsl(323, 78.7%, 94.2%)',
+    backgroundFocus: 'hsl(323, 72.2%, 91.1%)',
+    backgroundStrong: 'hsl(322, 100%, 99.4%)',
+    backgroundTransparent: 'hsla(322, 100%, 99.4%, 0)',
+    color: 'hsl(0, 0%, 9.0%)',
+    colorHover: 'hsl(320, 70.0%, 13.5%)',
+    colorPress: 'hsl(0, 0%, 9.0%)',
+    colorFocus: 'hsl(320, 70.0%, 13.5%)',
+    colorTransparent: 'hsla(320, 70.0%, 13.5%, 0)',
+    borderColor: 'hsl(323, 78.7%, 94.2%)',
+    borderColorHover: 'hsl(323, 72.2%, 91.1%)',
+    borderColorFocus: 'hsl(323, 78.7%, 94.2%)',
+    borderColorPress: 'hsl(323, 78.7%, 94.2%)',
+    placeholderColor: 'hsl(322, 63.9%, 50.7%)'
+} as Theme
+export const light_red = {
+    color1: 'hsl(359, 100%, 99.4%)',
+    color2: 'hsl(359, 100%, 98.6%)',
+    color3: 'hsl(360, 100%, 96.8%)',
+    color4: 'hsl(360, 97.9%, 94.8%)',
+    color5: 'hsl(360, 90.2%, 91.9%)',
+    color6: 'hsl(360, 81.7%, 87.8%)',
+    color7: 'hsl(359, 69.5%, 74.3%)',
+    color8: 'hsl(358, 75.0%, 59.0%)',
+    color9: 'hsl(358, 69.4%, 55.2%)',
+    color10: 'hsl(358, 65.0%, 48.7%)',
+    color11: 'hsl(354, 50.0%, 14.6%)',
+    color12: 'hsl(0, 0%, 9.0%)',
+    background: 'hsl(359, 100%, 98.6%)',
+    backgroundHover: 'hsl(360, 100%, 96.8%)',
+    backgroundPress: 'hsl(360, 97.9%, 94.8%)',
+    backgroundFocus: 'hsl(360, 90.2%, 91.9%)',
+    backgroundStrong: 'hsl(359, 100%, 99.4%)',
+    backgroundTransparent: 'hsla(359, 100%, 99.4%, 0)',
+    color: 'hsl(0, 0%, 9.0%)',
+    colorHover: 'hsl(354, 50.0%, 14.6%)',
+    colorPress: 'hsl(0, 0%, 9.0%)',
+    colorFocus: 'hsl(354, 50.0%, 14.6%)',
+    colorTransparent: 'hsla(354, 50.0%, 14.6%, 0)',
+    borderColor: 'hsl(360, 97.9%, 94.8%)',
+    borderColorHover: 'hsl(360, 90.2%, 91.9%)',
+    borderColorFocus: 'hsl(360, 97.9%, 94.8%)',
+    borderColorPress: 'hsl(360, 97.9%, 94.8%)',
+    placeholderColor: 'hsl(358, 69.4%, 55.2%)'
+} as Theme
+export const dark_orange = {
+    color1: 'hsl(30, 70.0%, 7.2%)',
+    color2: 'hsl(28, 100%, 8.4%)',
+    color3: 'hsl(26, 91.1%, 11.6%)',
+    color4: 'hsl(25, 88.3%, 14.1%)',
+    color5: 'hsl(24, 87.6%, 16.6%)',
+    color6: 'hsl(24, 88.6%, 19.8%)',
+    color7: 'hsl(25, 100%, 29.0%)',
+    color8: 'hsl(24, 94.0%, 50.0%)',
+    color9: 'hsl(24, 100%, 58.5%)',
+    color10: 'hsl(24, 100%, 62.2%)',
+    color11: 'hsl(24, 97.0%, 93.2%)',
+    color12: '#fff',
+    background: 'hsl(28, 100%, 8.4%)',
+    backgroundHover: 'hsl(26, 91.1%, 11.6%)',
+    backgroundPress: 'hsl(25, 88.3%, 14.1%)',
+    backgroundFocus: 'hsl(24, 87.6%, 16.6%)',
+    backgroundStrong: 'hsl(30, 70.0%, 7.2%)',
+    backgroundTransparent: 'hsla(30, 70.0%, 7.2%, 0)',
+    color: '#fff',
+    colorHover: 'hsl(24, 97.0%, 93.2%)',
+    colorPress: '#fff',
+    colorFocus: 'hsl(24, 97.0%, 93.2%)',
+    colorTransparent: 'hsla(24, 97.0%, 93.2%, 0)',
+    borderColor: 'hsl(24, 87.6%, 16.6%)',
+    borderColorHover: 'hsl(24, 88.6%, 19.8%)',
+    borderColorFocus: 'hsl(25, 88.3%, 14.1%)',
+    borderColorPress: 'hsl(24, 87.6%, 16.6%)',
+    placeholderColor: 'hsl(24, 100%, 58.5%)'
+} as Theme
+
+export const dark_orange_ListItem = dark_orange as Theme
+export const dark_yellow = {
+    color1: 'hsl(45, 100%, 5.5%)',
+    color2: 'hsl(46, 100%, 6.7%)',
+    color3: 'hsl(45, 100%, 8.7%)',
+    color4: 'hsl(45, 100%, 10.4%)',
+    color5: 'hsl(47, 100%, 12.1%)',
+    color6: 'hsl(49, 100%, 14.3%)',
+    color7: 'hsl(50, 100%, 22.0%)',
+    color8: 'hsl(53, 92.0%, 50.0%)',
+    color9: 'hsl(54, 100%, 68.0%)',
+    color10: 'hsl(48, 100%, 47.0%)',
+    color11: 'hsl(53, 100%, 91.0%)',
+    color12: '#fff',
+    background: 'hsl(46, 100%, 6.7%)',
+    backgroundHover: 'hsl(45, 100%, 8.7%)',
+    backgroundPress: 'hsl(45, 100%, 10.4%)',
+    backgroundFocus: 'hsl(47, 100%, 12.1%)',
+    backgroundStrong: 'hsl(45, 100%, 5.5%)',
+    backgroundTransparent: 'hsla(45, 100%, 5.5%, 0)',
+    color: '#fff',
+    colorHover: 'hsl(53, 100%, 91.0%)',
+    colorPress: '#fff',
+    colorFocus: 'hsl(53, 100%, 91.0%)',
+    colorTransparent: 'hsla(53, 100%, 91.0%, 0)',
+    borderColor: 'hsl(47, 100%, 12.1%)',
+    borderColorHover: 'hsl(49, 100%, 14.3%)',
+    borderColorFocus: 'hsl(45, 100%, 10.4%)',
+    borderColorPress: 'hsl(47, 100%, 12.1%)',
+    placeholderColor: 'hsl(54, 100%, 68.0%)'
+} as Theme
+
+export const dark_yellow_ListItem = dark_yellow as Theme
+export const dark_green = {
+    color1: 'hsl(146, 30.0%, 7.4%)',
+    color2: 'hsl(155, 44.2%, 8.4%)',
+    color3: 'hsl(155, 46.7%, 10.9%)',
+    color4: 'hsl(154, 48.4%, 12.9%)',
+    color5: 'hsl(154, 49.7%, 14.9%)',
+    color6: 'hsl(154, 50.9%, 17.6%)',
+    color7: 'hsl(151, 51.7%, 28.4%)',
+    color8: 'hsl(151, 55.0%, 41.5%)',
+    color9: 'hsl(151, 49.3%, 46.5%)',
+    color10: 'hsl(151, 50.0%, 53.2%)',
+    color11: 'hsl(137, 72.0%, 94.0%)',
+    color12: '#fff',
+    background: 'hsl(155, 44.2%, 8.4%)',
+    backgroundHover: 'hsl(155, 46.7%, 10.9%)',
+    backgroundPress: 'hsl(154, 48.4%, 12.9%)',
+    backgroundFocus: 'hsl(154, 49.7%, 14.9%)',
+    backgroundStrong: 'hsl(146, 30.0%, 7.4%)',
+    backgroundTransparent: 'hsla(146, 30.0%, 7.4%, 0)',
+    color: '#fff',
+    colorHover: 'hsl(137, 72.0%, 94.0%)',
+    colorPress: '#fff',
+    colorFocus: 'hsl(137, 72.0%, 94.0%)',
+    colorTransparent: 'hsla(137, 72.0%, 94.0%, 0)',
+    borderColor: 'hsl(154, 49.7%, 14.9%)',
+    borderColorHover: 'hsl(154, 50.9%, 17.6%)',
+    borderColorFocus: 'hsl(154, 48.4%, 12.9%)',
+    borderColorPress: 'hsl(154, 49.7%, 14.9%)',
+    placeholderColor: 'hsl(151, 49.3%, 46.5%)'
+} as Theme
+
+export const dark_green_ListItem = dark_green as Theme
+export const dark_blue = {
+    color1: 'hsl(212, 35.0%, 9.2%)',
+    color2: 'hsl(216, 50.0%, 11.8%)',
+    color3: 'hsl(214, 59.4%, 15.3%)',
+    color4: 'hsl(214, 65.8%, 17.9%)',
+    color5: 'hsl(213, 71.2%, 20.2%)',
+    color6: 'hsl(212, 77.4%, 23.1%)',
+    color7: 'hsl(211, 89.7%, 34.1%)',
+    color8: 'hsl(206, 100%, 50.0%)',
+    color9: 'hsl(209, 100%, 60.6%)',
+    color10: 'hsl(210, 100%, 66.1%)',
+    color11: 'hsl(206, 98.0%, 95.8%)',
+    color12: '#fff',
+    background: 'hsl(216, 50.0%, 11.8%)',
+    backgroundHover: 'hsl(214, 59.4%, 15.3%)',
+    backgroundPress: 'hsl(214, 65.8%, 17.9%)',
+    backgroundFocus: 'hsl(213, 71.2%, 20.2%)',
+    backgroundStrong: 'hsl(212, 35.0%, 9.2%)',
+    backgroundTransparent: 'hsla(212, 35.0%, 9.2%, 0)',
+    color: '#fff',
+    colorHover: 'hsl(206, 98.0%, 95.8%)',
+    colorPress: '#fff',
+    colorFocus: 'hsl(206, 98.0%, 95.8%)',
+    colorTransparent: 'hsla(206, 98.0%, 95.8%, 0)',
+    borderColor: 'hsl(213, 71.2%, 20.2%)',
+    borderColorHover: 'hsl(212, 77.4%, 23.1%)',
+    borderColorFocus: 'hsl(214, 65.8%, 17.9%)',
+    borderColorPress: 'hsl(213, 71.2%, 20.2%)',
+    placeholderColor: 'hsl(209, 100%, 60.6%)'
+} as Theme
+
+export const dark_blue_ListItem = dark_blue as Theme
+export const dark_purple = {
+    color1: 'hsl(284, 20.0%, 9.6%)',
+    color2: 'hsl(283, 30.0%, 11.8%)',
+    color3: 'hsl(281, 37.5%, 16.5%)',
+    color4: 'hsl(280, 41.2%, 20.0%)',
+    color5: 'hsl(279, 43.8%, 23.3%)',
+    color6: 'hsl(277, 46.4%, 27.5%)',
+    color7: 'hsl(272, 52.1%, 45.9%)',
+    color8: 'hsl(272, 51.0%, 54.0%)',
+    color9: 'hsl(273, 57.3%, 59.1%)',
+    color10: 'hsl(275, 80.0%, 71.0%)',
+    color11: 'hsl(279, 75.0%, 95.7%)',
+    color12: '#fff',
+    background: 'hsl(283, 30.0%, 11.8%)',
+    backgroundHover: 'hsl(281, 37.5%, 16.5%)',
+    backgroundPress: 'hsl(280, 41.2%, 20.0%)',
+    backgroundFocus: 'hsl(279, 43.8%, 23.3%)',
+    backgroundStrong: 'hsl(284, 20.0%, 9.6%)',
+    backgroundTransparent: 'hsla(284, 20.0%, 9.6%, 0)',
+    color: '#fff',
+    colorHover: 'hsl(279, 75.0%, 95.7%)',
+    colorPress: '#fff',
+    colorFocus: 'hsl(279, 75.0%, 95.7%)',
+    colorTransparent: 'hsla(279, 75.0%, 95.7%, 0)',
+    borderColor: 'hsl(279, 43.8%, 23.3%)',
+    borderColorHover: 'hsl(277, 46.4%, 27.5%)',
+    borderColorFocus: 'hsl(280, 41.2%, 20.0%)',
+    borderColorPress: 'hsl(279, 43.8%, 23.3%)',
+    placeholderColor: 'hsl(273, 57.3%, 59.1%)'
+} as Theme
+
+export const dark_purple_ListItem = dark_purple as Theme
+export const dark_pink = {
+    color1: 'hsl(318, 25.0%, 9.6%)',
+    color2: 'hsl(319, 32.2%, 11.6%)',
+    color3: 'hsl(319, 41.0%, 16.0%)',
+    color4: 'hsl(320, 45.4%, 18.7%)',
+    color5: 'hsl(320, 49.0%, 21.1%)',
+    color6: 'hsl(321, 53.6%, 24.4%)',
+    color7: 'hsl(322, 74.9%, 37.5%)',
+    color8: 'hsl(322, 65.0%, 54.5%)',
+    color9: 'hsl(323, 72.8%, 59.2%)',
+    color10: 'hsl(325, 90.0%, 66.4%)',
+    color11: 'hsl(322, 90.0%, 95.8%)',
+    color12: '#fff',
+    background: 'hsl(319, 32.2%, 11.6%)',
+    backgroundHover: 'hsl(319, 41.0%, 16.0%)',
+    backgroundPress: 'hsl(320, 45.4%, 18.7%)',
+    backgroundFocus: 'hsl(320, 49.0%, 21.1%)',
+    backgroundStrong: 'hsl(318, 25.0%, 9.6%)',
+    backgroundTransparent: 'hsla(318, 25.0%, 9.6%, 0)',
+    color: '#fff',
+    colorHover: 'hsl(322, 90.0%, 95.8%)',
+    colorPress: '#fff',
+    colorFocus: 'hsl(322, 90.0%, 95.8%)',
+    colorTransparent: 'hsla(322, 90.0%, 95.8%, 0)',
+    borderColor: 'hsl(320, 49.0%, 21.1%)',
+    borderColorHover: 'hsl(321, 53.6%, 24.4%)',
+    borderColorFocus: 'hsl(320, 45.4%, 18.7%)',
+    borderColorPress: 'hsl(320, 49.0%, 21.1%)',
+    placeholderColor: 'hsl(323, 72.8%, 59.2%)'
+} as Theme
+
+export const dark_pink_ListItem = dark_pink as Theme
+export const dark_red = {
+    color1: 'hsl(353, 23.0%, 9.8%)',
+    color2: 'hsl(357, 34.4%, 12.0%)',
+    color3: 'hsl(356, 43.4%, 16.4%)',
+    color4: 'hsl(356, 47.6%, 19.2%)',
+    color5: 'hsl(356, 51.1%, 21.9%)',
+    color6: 'hsl(356, 55.2%, 25.9%)',
+    color7: 'hsl(358, 65.0%, 40.4%)',
+    color8: 'hsl(358, 75.0%, 59.0%)',
+    color9: 'hsl(358, 85.3%, 64.0%)',
+    color10: 'hsl(358, 100%, 69.5%)',
+    color11: 'hsl(351, 89.0%, 96.0%)',
+    color12: '#fff',
+    background: 'hsl(357, 34.4%, 12.0%)',
+    backgroundHover: 'hsl(356, 43.4%, 16.4%)',
+    backgroundPress: 'hsl(356, 47.6%, 19.2%)',
+    backgroundFocus: 'hsl(356, 51.1%, 21.9%)',
+    backgroundStrong: 'hsl(353, 23.0%, 9.8%)',
+    backgroundTransparent: 'hsla(353, 23.0%, 9.8%, 0)',
+    color: '#fff',
+    colorHover: 'hsl(351, 89.0%, 96.0%)',
+    colorPress: '#fff',
+    colorFocus: 'hsl(351, 89.0%, 96.0%)',
+    colorTransparent: 'hsla(351, 89.0%, 96.0%, 0)',
+    borderColor: 'hsl(356, 51.1%, 21.9%)',
+    borderColorHover: 'hsl(356, 55.2%, 25.9%)',
+    borderColorFocus: 'hsl(356, 47.6%, 19.2%)',
+    borderColorPress: 'hsl(356, 51.1%, 21.9%)',
+    placeholderColor: 'hsl(358, 85.3%, 64.0%)'
+} as Theme
+
+export const dark_red_ListItem = dark_red as Theme
+export const light_SheetOverlay = {
+    background: 'rgba(0,0,0,0.5)'
+} as Theme
+
+export const light_DialogOverlay = light_SheetOverlay as Theme
+export const light_ModalOverlay = light_SheetOverlay as Theme
+export const light_orange_SheetOverlay = light_SheetOverlay as Theme
+export const light_orange_DialogOverlay = light_SheetOverlay as Theme
+export const light_orange_ModalOverlay = light_SheetOverlay as Theme
+export const light_yellow_SheetOverlay = light_SheetOverlay as Theme
+export const light_yellow_DialogOverlay = light_SheetOverlay as Theme
+export const light_yellow_ModalOverlay = light_SheetOverlay as Theme
+export const light_green_SheetOverlay = light_SheetOverlay as Theme
+export const light_green_DialogOverlay = light_SheetOverlay as Theme
+export const light_green_ModalOverlay = light_SheetOverlay as Theme
+export const light_blue_SheetOverlay = light_SheetOverlay as Theme
+export const light_blue_DialogOverlay = light_SheetOverlay as Theme
+export const light_blue_ModalOverlay = light_SheetOverlay as Theme
+export const light_purple_SheetOverlay = light_SheetOverlay as Theme
+export const light_purple_DialogOverlay = light_SheetOverlay as Theme
+export const light_purple_ModalOverlay = light_SheetOverlay as Theme
+export const light_pink_SheetOverlay = light_SheetOverlay as Theme
+export const light_pink_DialogOverlay = light_SheetOverlay as Theme
+export const light_pink_ModalOverlay = light_SheetOverlay as Theme
+export const light_red_SheetOverlay = light_SheetOverlay as Theme
+export const light_red_DialogOverlay = light_SheetOverlay as Theme
+export const light_red_ModalOverlay = light_SheetOverlay as Theme
+export const dark_SheetOverlay = {
+    background: 'rgba(0,0,0,0.9)'
+} as Theme
+
+export const dark_DialogOverlay = dark_SheetOverlay as Theme
+export const dark_ModalOverlay = dark_SheetOverlay as Theme
+export const dark_orange_SheetOverlay = dark_SheetOverlay as Theme
+export const dark_orange_DialogOverlay = dark_SheetOverlay as Theme
+export const dark_orange_ModalOverlay = dark_SheetOverlay as Theme
+export const dark_yellow_SheetOverlay = dark_SheetOverlay as Theme
+export const dark_yellow_DialogOverlay = dark_SheetOverlay as Theme
+export const dark_yellow_ModalOverlay = dark_SheetOverlay as Theme
+export const dark_green_SheetOverlay = dark_SheetOverlay as Theme
+export const dark_green_DialogOverlay = dark_SheetOverlay as Theme
+export const dark_green_ModalOverlay = dark_SheetOverlay as Theme
+export const dark_blue_SheetOverlay = dark_SheetOverlay as Theme
+export const dark_blue_DialogOverlay = dark_SheetOverlay as Theme
+export const dark_blue_ModalOverlay = dark_SheetOverlay as Theme
+export const dark_purple_SheetOverlay = dark_SheetOverlay as Theme
+export const dark_purple_DialogOverlay = dark_SheetOverlay as Theme
+export const dark_purple_ModalOverlay = dark_SheetOverlay as Theme
+export const dark_pink_SheetOverlay = dark_SheetOverlay as Theme
+export const dark_pink_DialogOverlay = dark_SheetOverlay as Theme
+export const dark_pink_ModalOverlay = dark_SheetOverlay as Theme
+export const dark_red_SheetOverlay = dark_SheetOverlay as Theme
+export const dark_red_DialogOverlay = dark_SheetOverlay as Theme
+export const dark_red_ModalOverlay = dark_SheetOverlay as Theme
+export const light_alt1 = {
+    color1: '#f9f9f9',
+    color2: 'hsl(0, 0%, 97.3%)',
+    color3: 'hsl(0, 0%, 95.1%)',
+    color4: 'hsl(0, 0%, 94.0%)',
+    color5: 'hsl(0, 0%, 92.0%)',
+    color6: 'hsl(0, 0%, 89.5%)',
+    color7: 'hsl(0, 0%, 81.0%)',
+    color8: 'hsl(0, 0%, 56.1%)',
+    color9: 'hsl(0, 0%, 50.3%)',
+    color10: 'hsl(0, 0%, 42.5%)',
+    color11: 'hsl(0, 0%, 9.0%)',
+    color12: 'hsl(0, 0%, 9.0%)',
+    background: 'hsl(0, 0%, 97.3%)',
+    backgroundHover: 'hsl(0, 0%, 95.1%)',
+    backgroundPress: 'hsl(0, 0%, 94.0%)',
+    backgroundFocus: 'hsl(0, 0%, 92.0%)',
+    backgroundStrong: '#f9f9f9',
+    backgroundTransparent: '#fff',
+    color: 'hsl(0, 0%, 42.5%)',
+    colorHover: 'hsl(0, 0%, 50.3%)',
+    colorPress: 'hsl(0, 0%, 42.5%)',
+    colorFocus: 'hsl(0, 0%, 50.3%)',
+    colorTransparent: 'hsl(0, 0%, 9.0%)',
+    borderColor: 'hsl(0, 0%, 92.0%)',
+    borderColorHover: 'hsl(0, 0%, 89.5%)',
+    borderColorFocus: 'hsl(0, 0%, 94.0%)',
+    borderColorPress: 'hsl(0, 0%, 92.0%)',
+    placeholderColor: 'hsl(0, 0%, 81.0%)'
+} as Theme
+export const light_alt2 = {
+    color1: 'hsl(0, 0%, 97.3%)',
+    color2: 'hsl(0, 0%, 95.1%)',
+    color3: 'hsl(0, 0%, 94.0%)',
+    color4: 'hsl(0, 0%, 92.0%)',
+    color5: 'hsl(0, 0%, 89.5%)',
+    color6: 'hsl(0, 0%, 81.0%)',
+    color7: 'hsl(0, 0%, 56.1%)',
+    color8: 'hsl(0, 0%, 50.3%)',
+    color9: 'hsl(0, 0%, 42.5%)',
+    color10: 'hsl(0, 0%, 9.0%)',
+    color11: 'hsl(0, 0%, 9.0%)',
+    color12: 'hsl(0, 0%, 9.0%)',
+    background: 'hsl(0, 0%, 95.1%)',
+    backgroundHover: 'hsl(0, 0%, 94.0%)',
+    backgroundPress: 'hsl(0, 0%, 92.0%)',
+    backgroundFocus: 'hsl(0, 0%, 89.5%)',
+    backgroundStrong: 'hsl(0, 0%, 97.3%)',
+    backgroundTransparent: '#f9f9f9',
+    color: 'hsl(0, 0%, 50.3%)',
+    colorHover: 'hsl(0, 0%, 56.1%)',
+    colorPress: 'hsl(0, 0%, 50.3%)',
+    colorFocus: 'hsl(0, 0%, 56.1%)',
+    colorTransparent: 'hsl(0, 0%, 42.5%)',
+    borderColor: 'hsl(0, 0%, 89.5%)',
+    borderColorHover: 'hsl(0, 0%, 81.0%)',
+    borderColorFocus: 'hsl(0, 0%, 92.0%)',
+    borderColorPress: 'hsl(0, 0%, 89.5%)',
+    placeholderColor: 'hsl(0, 0%, 89.5%)'
+} as Theme
+export const light_active = {
+    color1: 'hsl(0, 0%, 95.1%)',
+    color2: 'hsl(0, 0%, 94.0%)',
+    color3: 'hsl(0, 0%, 92.0%)',
+    color4: 'hsl(0, 0%, 89.5%)',
+    color5: 'hsl(0, 0%, 81.0%)',
+    color6: 'hsl(0, 0%, 56.1%)',
+    color7: 'hsl(0, 0%, 50.3%)',
+    color8: 'hsl(0, 0%, 42.5%)',
+    color9: 'hsl(0, 0%, 9.0%)',
+    color10: 'rgba(10,10,10,0)',
+    color11: 'rgba(10,10,10,0)',
+    color12: 'rgba(10,10,10,0)',
+    background: 'hsl(0, 0%, 94.0%)',
+    backgroundHover: 'hsl(0, 0%, 92.0%)',
+    backgroundPress: 'hsl(0, 0%, 89.5%)',
+    backgroundFocus: 'hsl(0, 0%, 81.0%)',
+    backgroundStrong: 'hsl(0, 0%, 95.1%)',
+    backgroundTransparent: 'hsl(0, 0%, 97.3%)',
+    colorHover: 'hsl(0, 0%, 81.0%)',
+    colorPress: 'hsl(0, 0%, 56.1%)',
+    colorFocus: 'hsl(0, 0%, 81.0%)',
+    colorTransparent: 'hsl(0, 0%, 50.3%)',
+    borderColor: 'hsl(0, 0%, 81.0%)',
+    borderColorHover: 'hsl(0, 0%, 56.1%)',
+    borderColorFocus: 'hsl(0, 0%, 89.5%)',
+    borderColorPress: 'hsl(0, 0%, 81.0%)',
+    placeholderColor: 'hsl(0, 0%, 92.0%)'
+} as Theme
+export const dark_alt1 = {
+    color1: '#151515',
+    color2: '#191919',
+    color3: '#232323',
+    color4: '#282828',
+    color5: '#323232',
+    color6: '#424242',
+    color7: '#494949',
+    color8: '#545454',
+    color9: '#626262',
+    color10: '#a5a5a5',
+    color11: '#fff',
+    color12: '#fff',
+    background: '#191919',
+    backgroundHover: '#232323',
+    backgroundPress: '#282828',
+    backgroundFocus: '#323232',
+    backgroundStrong: '#151515',
+    backgroundTransparent: '#050505',
+    color: '#a5a5a5',
+    colorHover: '#626262',
+    colorPress: '#a5a5a5',
+    colorFocus: '#626262',
+    colorTransparent: '#fff',
+    borderColor: '#323232',
+    borderColorHover: '#424242',
+    borderColorFocus: '#282828',
+    borderColorPress: '#323232',
+    placeholderColor: '#494949'
+} as Theme
+export const dark_alt2 = {
+    color1: '#191919',
+    color2: '#232323',
+    color3: '#282828',
+    color4: '#323232',
+    color5: '#424242',
+    color6: '#494949',
+    color7: '#545454',
+    color8: '#626262',
+    color9: '#a5a5a5',
+    color10: '#fff',
+    color11: '#fff',
+    color12: '#fff',
+    background: '#232323',
+    backgroundHover: '#282828',
+    backgroundPress: '#323232',
+    backgroundFocus: '#424242',
+    backgroundStrong: '#191919',
+    backgroundTransparent: '#151515',
+    color: '#626262',
+    colorHover: '#545454',
+    colorPress: '#626262',
+    colorFocus: '#545454',
+    colorTransparent: '#a5a5a5',
+    borderColor: '#424242',
+    borderColorHover: '#494949',
+    borderColorFocus: '#323232',
+    borderColorPress: '#424242',
+    placeholderColor: '#424242'
+} as Theme
+export const dark_active = {
+    color1: '#232323',
+    color2: '#282828',
+    color3: '#323232',
+    color4: '#424242',
+    color5: '#494949',
+    color6: '#545454',
+    color7: '#626262',
+    color8: '#a5a5a5',
+    color9: '#fff',
+    color10: 'rgba(255,255,255,0)',
+    color11: 'rgba(255,255,255,0)',
+    color12: 'rgba(255,255,255,0)',
+    background: '#282828',
+    backgroundHover: '#323232',
+    backgroundPress: '#424242',
+    backgroundFocus: '#494949',
+    backgroundStrong: '#232323',
+    backgroundTransparent: '#191919',
+    colorHover: '#494949',
+    colorPress: '#545454',
+    colorFocus: '#494949',
+    colorTransparent: '#626262',
+    borderColor: '#494949',
+    borderColorHover: '#545454',
+    borderColorFocus: '#424242',
+    borderColorPress: '#494949',
+    placeholderColor: '#323232'
+} as Theme
+export const light_orange_alt1 = {
+    color1: 'hsl(24, 83.3%, 97.6%)',
+    color2: 'hsl(24, 100%, 95.3%)',
+    color3: 'hsl(25, 100%, 92.2%)',
+    color4: 'hsl(25, 100%, 88.2%)',
+    color5: 'hsl(25, 100%, 82.8%)',
+    color6: 'hsl(24, 94.5%, 64.3%)',
+    color7: 'hsl(24, 94.0%, 50.0%)',
+    color8: 'hsl(24, 100%, 46.5%)',
+    color9: 'hsl(24, 100%, 37.0%)',
+    color10: 'hsl(15, 60.0%, 17.0%)',
+    color11: 'hsl(0, 0%, 9.0%)',
+    color12: 'hsl(0, 0%, 9.0%)',
+    background: 'hsl(24, 100%, 95.3%)',
+    backgroundHover: 'hsl(25, 100%, 92.2%)',
+    backgroundPress: 'hsl(25, 100%, 88.2%)',
+    backgroundFocus: 'hsl(25, 100%, 82.8%)',
+    backgroundStrong: 'hsl(24, 83.3%, 97.6%)',
+    backgroundTransparent: 'hsl(24, 70.0%, 99.0%)',
+    color: 'hsl(15, 60.0%, 17.0%)',
+    colorHover: 'hsl(24, 100%, 37.0%)',
+    colorPress: 'hsl(15, 60.0%, 17.0%)',
+    colorFocus: 'hsl(24, 100%, 37.0%)',
+    colorTransparent: 'hsl(0, 0%, 9.0%)',
+    borderColor: 'hsl(25, 100%, 88.2%)',
+    borderColorHover: 'hsl(25, 100%, 82.8%)',
+    borderColorFocus: 'hsl(25, 100%, 88.2%)',
+    borderColorPress: 'hsl(25, 100%, 88.2%)',
+    placeholderColor: 'hsl(24, 94.0%, 50.0%)'
+} as Theme
+export const light_orange_alt2 = {
+    color1: 'hsl(24, 100%, 95.3%)',
+    color2: 'hsl(25, 100%, 92.2%)',
+    color3: 'hsl(25, 100%, 88.2%)',
+    color4: 'hsl(25, 100%, 82.8%)',
+    color5: 'hsl(24, 94.5%, 64.3%)',
+    color6: 'hsl(24, 94.0%, 50.0%)',
+    color7: 'hsl(24, 100%, 46.5%)',
+    color8: 'hsl(24, 100%, 37.0%)',
+    color9: 'hsl(15, 60.0%, 17.0%)',
+    color10: 'hsl(0, 0%, 9.0%)',
+    color11: 'hsl(0, 0%, 9.0%)',
+    color12: 'hsl(0, 0%, 9.0%)',
+    background: 'hsl(25, 100%, 92.2%)',
+    backgroundHover: 'hsl(25, 100%, 88.2%)',
+    backgroundPress: 'hsl(25, 100%, 82.8%)',
+    backgroundFocus: 'hsl(24, 94.5%, 64.3%)',
+    backgroundStrong: 'hsl(24, 100%, 95.3%)',
+    backgroundTransparent: 'hsl(24, 83.3%, 97.6%)',
+    color: 'hsl(24, 100%, 37.0%)',
+    colorHover: 'hsl(24, 100%, 46.5%)',
+    colorPress: 'hsl(24, 100%, 37.0%)',
+    colorFocus: 'hsl(24, 100%, 46.5%)',
+    colorTransparent: 'hsl(15, 60.0%, 17.0%)',
+    borderColor: 'hsl(25, 100%, 82.8%)',
+    borderColorHover: 'hsl(24, 94.5%, 64.3%)',
+    borderColorFocus: 'hsl(25, 100%, 82.8%)',
+    borderColorPress: 'hsl(25, 100%, 82.8%)',
+    placeholderColor: 'hsl(24, 94.5%, 64.3%)'
+} as Theme
+export const light_orange_active = {
+    color1: 'hsl(25, 100%, 92.2%)',
+    color2: 'hsl(25, 100%, 88.2%)',
+    color3: 'hsl(25, 100%, 82.8%)',
+    color4: 'hsl(24, 94.5%, 64.3%)',
+    color5: 'hsl(24, 94.0%, 50.0%)',
+    color6: 'hsl(24, 100%, 46.5%)',
+    color7: 'hsl(24, 100%, 37.0%)',
+    color8: 'hsl(15, 60.0%, 17.0%)',
+    color9: 'hsl(0, 0%, 9.0%)',
+    color10: 'hsla(15, 60.0%, 17.0%, 0)',
+    color11: 'hsla(15, 60.0%, 17.0%, 0)',
+    color12: 'hsla(15, 60.0%, 17.0%, 0)',
+    background: 'hsl(25, 100%, 88.2%)',
+    backgroundHover: 'hsl(25, 100%, 82.8%)',
+    backgroundPress: 'hsl(24, 94.5%, 64.3%)',
+    backgroundFocus: 'hsl(24, 94.0%, 50.0%)',
+    backgroundStrong: 'hsl(25, 100%, 92.2%)',
+    backgroundTransparent: 'hsl(24, 100%, 95.3%)',
+    colorHover: 'hsl(24, 94.0%, 50.0%)',
+    colorPress: 'hsl(24, 100%, 46.5%)',
+    colorFocus: 'hsl(24, 94.0%, 50.0%)',
+    colorTransparent: 'hsl(24, 100%, 37.0%)',
+    borderColor: 'hsl(24, 94.5%, 64.3%)',
+    borderColorHover: 'hsl(24, 94.0%, 50.0%)',
+    borderColorFocus: 'hsl(24, 94.5%, 64.3%)',
+    borderColorPress: 'hsl(24, 94.5%, 64.3%)',
+    placeholderColor: 'hsl(25, 100%, 82.8%)'
+} as Theme
+export const light_yellow_alt1 = {
+    color1: 'hsl(52, 100%, 95.5%)',
+    color2: 'hsl(55, 100%, 90.9%)',
+    color3: 'hsl(54, 100%, 86.6%)',
+    color4: 'hsl(52, 97.9%, 82.0%)',
+    color5: 'hsl(50, 89.4%, 76.1%)',
+    color6: 'hsl(48, 100%, 46.1%)',
+    color7: 'hsl(53, 92.0%, 50.0%)',
+    color8: 'hsl(50, 100%, 48.5%)',
+    color9: 'hsl(42, 100%, 29.0%)',
+    color10: 'hsl(40, 55.0%, 13.5%)',
+    color11: 'hsl(0, 0%, 9.0%)',
+    color12: 'hsl(0, 0%, 9.0%)',
+    background: 'hsl(55, 100%, 90.9%)',
+    backgroundHover: 'hsl(54, 100%, 86.6%)',
+    backgroundPress: 'hsl(52, 97.9%, 82.0%)',
+    backgroundFocus: 'hsl(50, 89.4%, 76.1%)',
+    backgroundStrong: 'hsl(52, 100%, 95.5%)',
+    backgroundTransparent: 'hsl(60, 54.0%, 98.5%)',
+    color: 'hsl(40, 55.0%, 13.5%)',
+    colorHover: 'hsl(42, 100%, 29.0%)',
+    colorPress: 'hsl(40, 55.0%, 13.5%)',
+    colorFocus: 'hsl(42, 100%, 29.0%)',
+    colorTransparent: 'hsl(0, 0%, 9.0%)',
+    borderColor: 'hsl(52, 97.9%, 82.0%)',
+    borderColorHover: 'hsl(50, 89.4%, 76.1%)',
+    borderColorFocus: 'hsl(52, 97.9%, 82.0%)',
+    borderColorPress: 'hsl(52, 97.9%, 82.0%)',
+    placeholderColor: 'hsl(53, 92.0%, 50.0%)'
+} as Theme
+export const light_yellow_alt2 = {
+    color1: 'hsl(55, 100%, 90.9%)',
+    color2: 'hsl(54, 100%, 86.6%)',
+    color3: 'hsl(52, 97.9%, 82.0%)',
+    color4: 'hsl(50, 89.4%, 76.1%)',
+    color5: 'hsl(48, 100%, 46.1%)',
+    color6: 'hsl(53, 92.0%, 50.0%)',
+    color7: 'hsl(50, 100%, 48.5%)',
+    color8: 'hsl(42, 100%, 29.0%)',
+    color9: 'hsl(40, 55.0%, 13.5%)',
+    color10: 'hsl(0, 0%, 9.0%)',
+    color11: 'hsl(0, 0%, 9.0%)',
+    color12: 'hsl(0, 0%, 9.0%)',
+    background: 'hsl(54, 100%, 86.6%)',
+    backgroundHover: 'hsl(52, 97.9%, 82.0%)',
+    backgroundPress: 'hsl(50, 89.4%, 76.1%)',
+    backgroundFocus: 'hsl(48, 100%, 46.1%)',
+    backgroundStrong: 'hsl(55, 100%, 90.9%)',
+    backgroundTransparent: 'hsl(52, 100%, 95.5%)',
+    color: 'hsl(42, 100%, 29.0%)',
+    colorHover: 'hsl(50, 100%, 48.5%)',
+    colorPress: 'hsl(42, 100%, 29.0%)',
+    colorFocus: 'hsl(50, 100%, 48.5%)',
+    colorTransparent: 'hsl(40, 55.0%, 13.5%)',
+    borderColor: 'hsl(50, 89.4%, 76.1%)',
+    borderColorHover: 'hsl(48, 100%, 46.1%)',
+    borderColorFocus: 'hsl(50, 89.4%, 76.1%)',
+    borderColorPress: 'hsl(50, 89.4%, 76.1%)',
+    placeholderColor: 'hsl(48, 100%, 46.1%)'
+} as Theme
+export const light_yellow_active = {
+    color1: 'hsl(54, 100%, 86.6%)',
+    color2: 'hsl(52, 97.9%, 82.0%)',
+    color3: 'hsl(50, 89.4%, 76.1%)',
+    color4: 'hsl(48, 100%, 46.1%)',
+    color5: 'hsl(53, 92.0%, 50.0%)',
+    color6: 'hsl(50, 100%, 48.5%)',
+    color7: 'hsl(42, 100%, 29.0%)',
+    color8: 'hsl(40, 55.0%, 13.5%)',
+    color9: 'hsl(0, 0%, 9.0%)',
+    color10: 'hsla(40, 55.0%, 13.5%, 0)',
+    color11: 'hsla(40, 55.0%, 13.5%, 0)',
+    color12: 'hsla(40, 55.0%, 13.5%, 0)',
+    background: 'hsl(52, 97.9%, 82.0%)',
+    backgroundHover: 'hsl(50, 89.4%, 76.1%)',
+    backgroundPress: 'hsl(48, 100%, 46.1%)',
+    backgroundFocus: 'hsl(53, 92.0%, 50.0%)',
+    backgroundStrong: 'hsl(54, 100%, 86.6%)',
+    backgroundTransparent: 'hsl(55, 100%, 90.9%)',
+    colorHover: 'hsl(53, 92.0%, 50.0%)',
+    colorPress: 'hsl(50, 100%, 48.5%)',
+    colorFocus: 'hsl(53, 92.0%, 50.0%)',
+    colorTransparent: 'hsl(42, 100%, 29.0%)',
+    borderColor: 'hsl(48, 100%, 46.1%)',
+    borderColorHover: 'hsl(53, 92.0%, 50.0%)',
+    borderColorFocus: 'hsl(48, 100%, 46.1%)',
+    borderColorPress: 'hsl(48, 100%, 46.1%)',
+    placeholderColor: 'hsl(50, 89.4%, 76.1%)'
+} as Theme
+export const light_green_alt1 = {
+    color1: 'hsl(138, 62.5%, 96.9%)',
+    color2: 'hsl(139, 55.2%, 94.5%)',
+    color3: 'hsl(140, 48.7%, 91.0%)',
+    color4: 'hsl(141, 43.7%, 86.0%)',
+    color5: 'hsl(143, 40.3%, 79.0%)',
+    color6: 'hsl(151, 40.2%, 54.1%)',
+    color7: 'hsl(151, 55.0%, 41.5%)',
+    color8: 'hsl(152, 57.5%, 37.6%)',
+    color9: 'hsl(153, 67.0%, 28.5%)',
+    color10: 'hsl(155, 40.0%, 14.0%)',
+    color11: 'hsl(0, 0%, 9.0%)',
+    color12: 'hsl(0, 0%, 9.0%)',
+    background: 'hsl(139, 55.2%, 94.5%)',
+    backgroundHover: 'hsl(140, 48.7%, 91.0%)',
+    backgroundPress: 'hsl(141, 43.7%, 86.0%)',
+    backgroundFocus: 'hsl(143, 40.3%, 79.0%)',
+    backgroundStrong: 'hsl(138, 62.5%, 96.9%)',
+    backgroundTransparent: 'hsl(136, 50.0%, 98.9%)',
+    color: 'hsl(155, 40.0%, 14.0%)',
+    colorHover: 'hsl(153, 67.0%, 28.5%)',
+    colorPress: 'hsl(155, 40.0%, 14.0%)',
+    colorFocus: 'hsl(153, 67.0%, 28.5%)',
+    colorTransparent: 'hsl(0, 0%, 9.0%)',
+    borderColor: 'hsl(141, 43.7%, 86.0%)',
+    borderColorHover: 'hsl(143, 40.3%, 79.0%)',
+    borderColorFocus: 'hsl(141, 43.7%, 86.0%)',
+    borderColorPress: 'hsl(141, 43.7%, 86.0%)',
+    placeholderColor: 'hsl(151, 55.0%, 41.5%)'
+} as Theme
+export const light_green_alt2 = {
+    color1: 'hsl(139, 55.2%, 94.5%)',
+    color2: 'hsl(140, 48.7%, 91.0%)',
+    color3: 'hsl(141, 43.7%, 86.0%)',
+    color4: 'hsl(143, 40.3%, 79.0%)',
+    color5: 'hsl(151, 40.2%, 54.1%)',
+    color6: 'hsl(151, 55.0%, 41.5%)',
+    color7: 'hsl(152, 57.5%, 37.6%)',
+    color8: 'hsl(153, 67.0%, 28.5%)',
+    color9: 'hsl(155, 40.0%, 14.0%)',
+    color10: 'hsl(0, 0%, 9.0%)',
+    color11: 'hsl(0, 0%, 9.0%)',
+    color12: 'hsl(0, 0%, 9.0%)',
+    background: 'hsl(140, 48.7%, 91.0%)',
+    backgroundHover: 'hsl(141, 43.7%, 86.0%)',
+    backgroundPress: 'hsl(143, 40.3%, 79.0%)',
+    backgroundFocus: 'hsl(151, 40.2%, 54.1%)',
+    backgroundStrong: 'hsl(139, 55.2%, 94.5%)',
+    backgroundTransparent: 'hsl(138, 62.5%, 96.9%)',
+    color: 'hsl(153, 67.0%, 28.5%)',
+    colorHover: 'hsl(152, 57.5%, 37.6%)',
+    colorPress: 'hsl(153, 67.0%, 28.5%)',
+    colorFocus: 'hsl(152, 57.5%, 37.6%)',
+    colorTransparent: 'hsl(155, 40.0%, 14.0%)',
+    borderColor: 'hsl(143, 40.3%, 79.0%)',
+    borderColorHover: 'hsl(151, 40.2%, 54.1%)',
+    borderColorFocus: 'hsl(143, 40.3%, 79.0%)',
+    borderColorPress: 'hsl(143, 40.3%, 79.0%)',
+    placeholderColor: 'hsl(151, 40.2%, 54.1%)'
+} as Theme
+export const light_green_active = {
+    color1: 'hsl(140, 48.7%, 91.0%)',
+    color2: 'hsl(141, 43.7%, 86.0%)',
+    color3: 'hsl(143, 40.3%, 79.0%)',
+    color4: 'hsl(151, 40.2%, 54.1%)',
+    color5: 'hsl(151, 55.0%, 41.5%)',
+    color6: 'hsl(152, 57.5%, 37.6%)',
+    color7: 'hsl(153, 67.0%, 28.5%)',
+    color8: 'hsl(155, 40.0%, 14.0%)',
+    color9: 'hsl(0, 0%, 9.0%)',
+    color10: 'hsla(155, 40.0%, 14.0%, 0)',
+    color11: 'hsla(155, 40.0%, 14.0%, 0)',
+    color12: 'hsla(155, 40.0%, 14.0%, 0)',
+    background: 'hsl(141, 43.7%, 86.0%)',
+    backgroundHover: 'hsl(143, 40.3%, 79.0%)',
+    backgroundPress: 'hsl(151, 40.2%, 54.1%)',
+    backgroundFocus: 'hsl(151, 55.0%, 41.5%)',
+    backgroundStrong: 'hsl(140, 48.7%, 91.0%)',
+    backgroundTransparent: 'hsl(139, 55.2%, 94.5%)',
+    colorHover: 'hsl(151, 55.0%, 41.5%)',
+    colorPress: 'hsl(152, 57.5%, 37.6%)',
+    colorFocus: 'hsl(151, 55.0%, 41.5%)',
+    colorTransparent: 'hsl(153, 67.0%, 28.5%)',
+    borderColor: 'hsl(151, 40.2%, 54.1%)',
+    borderColorHover: 'hsl(151, 55.0%, 41.5%)',
+    borderColorFocus: 'hsl(151, 40.2%, 54.1%)',
+    borderColorPress: 'hsl(151, 40.2%, 54.1%)',
+    placeholderColor: 'hsl(143, 40.3%, 79.0%)'
+} as Theme
+export const light_blue_alt1 = {
+    color1: 'hsl(210, 100%, 98.0%)',
+    color2: 'hsl(209, 100%, 96.5%)',
+    color3: 'hsl(210, 98.8%, 94.0%)',
+    color4: 'hsl(209, 95.0%, 90.1%)',
+    color5: 'hsl(209, 81.2%, 84.5%)',
+    color6: 'hsl(206, 81.9%, 65.3%)',
+    color7: 'hsl(206, 100%, 50.0%)',
+    color8: 'hsl(208, 100%, 47.3%)',
+    color9: 'hsl(211, 100%, 43.2%)',
+    color10: 'hsl(211, 100%, 15.0%)',
+    color11: 'hsl(0, 0%, 9.0%)',
+    color12: 'hsl(0, 0%, 9.0%)',
+    background: 'hsl(209, 100%, 96.5%)',
+    backgroundHover: 'hsl(210, 98.8%, 94.0%)',
+    backgroundPress: 'hsl(209, 95.0%, 90.1%)',
+    backgroundFocus: 'hsl(209, 81.2%, 84.5%)',
+    backgroundStrong: 'hsl(210, 100%, 98.0%)',
+    backgroundTransparent: 'hsl(206, 100%, 99.2%)',
+    color: 'hsl(211, 100%, 15.0%)',
+    colorHover: 'hsl(211, 100%, 43.2%)',
+    colorPress: 'hsl(211, 100%, 15.0%)',
+    colorFocus: 'hsl(211, 100%, 43.2%)',
+    colorTransparent: 'hsl(0, 0%, 9.0%)',
+    borderColor: 'hsl(209, 95.0%, 90.1%)',
+    borderColorHover: 'hsl(209, 81.2%, 84.5%)',
+    borderColorFocus: 'hsl(209, 95.0%, 90.1%)',
+    borderColorPress: 'hsl(209, 95.0%, 90.1%)',
+    placeholderColor: 'hsl(206, 100%, 50.0%)'
+} as Theme
+export const light_blue_alt2 = {
+    color1: 'hsl(209, 100%, 96.5%)',
+    color2: 'hsl(210, 98.8%, 94.0%)',
+    color3: 'hsl(209, 95.0%, 90.1%)',
+    color4: 'hsl(209, 81.2%, 84.5%)',
+    color5: 'hsl(206, 81.9%, 65.3%)',
+    color6: 'hsl(206, 100%, 50.0%)',
+    color7: 'hsl(208, 100%, 47.3%)',
+    color8: 'hsl(211, 100%, 43.2%)',
+    color9: 'hsl(211, 100%, 15.0%)',
+    color10: 'hsl(0, 0%, 9.0%)',
+    color11: 'hsl(0, 0%, 9.0%)',
+    color12: 'hsl(0, 0%, 9.0%)',
+    background: 'hsl(210, 98.8%, 94.0%)',
+    backgroundHover: 'hsl(209, 95.0%, 90.1%)',
+    backgroundPress: 'hsl(209, 81.2%, 84.5%)',
+    backgroundFocus: 'hsl(206, 81.9%, 65.3%)',
+    backgroundStrong: 'hsl(209, 100%, 96.5%)',
+    backgroundTransparent: 'hsl(210, 100%, 98.0%)',
+    color: 'hsl(211, 100%, 43.2%)',
+    colorHover: 'hsl(208, 100%, 47.3%)',
+    colorPress: 'hsl(211, 100%, 43.2%)',
+    colorFocus: 'hsl(208, 100%, 47.3%)',
+    colorTransparent: 'hsl(211, 100%, 15.0%)',
+    borderColor: 'hsl(209, 81.2%, 84.5%)',
+    borderColorHover: 'hsl(206, 81.9%, 65.3%)',
+    borderColorFocus: 'hsl(209, 81.2%, 84.5%)',
+    borderColorPress: 'hsl(209, 81.2%, 84.5%)',
+    placeholderColor: 'hsl(206, 81.9%, 65.3%)'
+} as Theme
+export const light_blue_active = {
+    color1: 'hsl(210, 98.8%, 94.0%)',
+    color2: 'hsl(209, 95.0%, 90.1%)',
+    color3: 'hsl(209, 81.2%, 84.5%)',
+    color4: 'hsl(206, 81.9%, 65.3%)',
+    color5: 'hsl(206, 100%, 50.0%)',
+    color6: 'hsl(208, 100%, 47.3%)',
+    color7: 'hsl(211, 100%, 43.2%)',
+    color8: 'hsl(211, 100%, 15.0%)',
+    color9: 'hsl(0, 0%, 9.0%)',
+    color10: 'hsla(211, 100%, 15.0%, 0)',
+    color11: 'hsla(211, 100%, 15.0%, 0)',
+    color12: 'hsla(211, 100%, 15.0%, 0)',
+    background: 'hsl(209, 95.0%, 90.1%)',
+    backgroundHover: 'hsl(209, 81.2%, 84.5%)',
+    backgroundPress: 'hsl(206, 81.9%, 65.3%)',
+    backgroundFocus: 'hsl(206, 100%, 50.0%)',
+    backgroundStrong: 'hsl(210, 98.8%, 94.0%)',
+    backgroundTransparent: 'hsl(209, 100%, 96.5%)',
+    colorHover: 'hsl(206, 100%, 50.0%)',
+    colorPress: 'hsl(208, 100%, 47.3%)',
+    colorFocus: 'hsl(206, 100%, 50.0%)',
+    colorTransparent: 'hsl(211, 100%, 43.2%)',
+    borderColor: 'hsl(206, 81.9%, 65.3%)',
+    borderColorHover: 'hsl(206, 100%, 50.0%)',
+    borderColorFocus: 'hsl(206, 81.9%, 65.3%)',
+    borderColorPress: 'hsl(206, 81.9%, 65.3%)',
+    placeholderColor: 'hsl(209, 81.2%, 84.5%)'
+} as Theme
+export const light_purple_alt1 = {
+    color1: 'hsl(276, 100%, 99.0%)',
+    color2: 'hsl(276, 83.1%, 97.0%)',
+    color3: 'hsl(275, 76.4%, 94.7%)',
+    color4: 'hsl(275, 70.8%, 91.8%)',
+    color5: 'hsl(274, 65.4%, 87.8%)',
+    color6: 'hsl(272, 60.0%, 73.5%)',
+    color7: 'hsl(272, 51.0%, 54.0%)',
+    color8: 'hsl(272, 46.8%, 50.3%)',
+    color9: 'hsl(272, 50.0%, 45.8%)',
+    color10: 'hsl(272, 66.0%, 16.0%)',
+    color11: 'hsl(0, 0%, 9.0%)',
+    color12: 'hsl(0, 0%, 9.0%)',
+    background: 'hsl(276, 83.1%, 97.0%)',
+    backgroundHover: 'hsl(275, 76.4%, 94.7%)',
+    backgroundPress: 'hsl(275, 70.8%, 91.8%)',
+    backgroundFocus: 'hsl(274, 65.4%, 87.8%)',
+    backgroundStrong: 'hsl(276, 100%, 99.0%)',
+    backgroundTransparent: 'hsl(280, 65.0%, 99.4%)',
+    color: 'hsl(272, 66.0%, 16.0%)',
+    colorHover: 'hsl(272, 50.0%, 45.8%)',
+    colorPress: 'hsl(272, 66.0%, 16.0%)',
+    colorFocus: 'hsl(272, 50.0%, 45.8%)',
+    colorTransparent: 'hsl(0, 0%, 9.0%)',
+    borderColor: 'hsl(275, 70.8%, 91.8%)',
+    borderColorHover: 'hsl(274, 65.4%, 87.8%)',
+    borderColorFocus: 'hsl(275, 70.8%, 91.8%)',
+    borderColorPress: 'hsl(275, 70.8%, 91.8%)',
+    placeholderColor: 'hsl(272, 51.0%, 54.0%)'
+} as Theme
+export const light_purple_alt2 = {
+    color1: 'hsl(276, 83.1%, 97.0%)',
+    color2: 'hsl(275, 76.4%, 94.7%)',
+    color3: 'hsl(275, 70.8%, 91.8%)',
+    color4: 'hsl(274, 65.4%, 87.8%)',
+    color5: 'hsl(272, 60.0%, 73.5%)',
+    color6: 'hsl(272, 51.0%, 54.0%)',
+    color7: 'hsl(272, 46.8%, 50.3%)',
+    color8: 'hsl(272, 50.0%, 45.8%)',
+    color9: 'hsl(272, 66.0%, 16.0%)',
+    color10: 'hsl(0, 0%, 9.0%)',
+    color11: 'hsl(0, 0%, 9.0%)',
+    color12: 'hsl(0, 0%, 9.0%)',
+    background: 'hsl(275, 76.4%, 94.7%)',
+    backgroundHover: 'hsl(275, 70.8%, 91.8%)',
+    backgroundPress: 'hsl(274, 65.4%, 87.8%)',
+    backgroundFocus: 'hsl(272, 60.0%, 73.5%)',
+    backgroundStrong: 'hsl(276, 83.1%, 97.0%)',
+    backgroundTransparent: 'hsl(276, 100%, 99.0%)',
+    color: 'hsl(272, 50.0%, 45.8%)',
+    colorHover: 'hsl(272, 46.8%, 50.3%)',
+    colorPress: 'hsl(272, 50.0%, 45.8%)',
+    colorFocus: 'hsl(272, 46.8%, 50.3%)',
+    colorTransparent: 'hsl(272, 66.0%, 16.0%)',
+    borderColor: 'hsl(274, 65.4%, 87.8%)',
+    borderColorHover: 'hsl(272, 60.0%, 73.5%)',
+    borderColorFocus: 'hsl(274, 65.4%, 87.8%)',
+    borderColorPress: 'hsl(274, 65.4%, 87.8%)',
+    placeholderColor: 'hsl(272, 60.0%, 73.5%)'
+} as Theme
+export const light_purple_active = {
+    color1: 'hsl(275, 76.4%, 94.7%)',
+    color2: 'hsl(275, 70.8%, 91.8%)',
+    color3: 'hsl(274, 65.4%, 87.8%)',
+    color4: 'hsl(272, 60.0%, 73.5%)',
+    color5: 'hsl(272, 51.0%, 54.0%)',
+    color6: 'hsl(272, 46.8%, 50.3%)',
+    color7: 'hsl(272, 50.0%, 45.8%)',
+    color8: 'hsl(272, 66.0%, 16.0%)',
+    color9: 'hsl(0, 0%, 9.0%)',
+    color10: 'hsla(272, 66.0%, 16.0%, 0)',
+    color11: 'hsla(272, 66.0%, 16.0%, 0)',
+    color12: 'hsla(272, 66.0%, 16.0%, 0)',
+    background: 'hsl(275, 70.8%, 91.8%)',
+    backgroundHover: 'hsl(274, 65.4%, 87.8%)',
+    backgroundPress: 'hsl(272, 60.0%, 73.5%)',
+    backgroundFocus: 'hsl(272, 51.0%, 54.0%)',
+    backgroundStrong: 'hsl(275, 76.4%, 94.7%)',
+    backgroundTransparent: 'hsl(276, 83.1%, 97.0%)',
+    colorHover: 'hsl(272, 51.0%, 54.0%)',
+    colorPress: 'hsl(272, 46.8%, 50.3%)',
+    colorFocus: 'hsl(272, 51.0%, 54.0%)',
+    colorTransparent: 'hsl(272, 50.0%, 45.8%)',
+    borderColor: 'hsl(272, 60.0%, 73.5%)',
+    borderColorHover: 'hsl(272, 51.0%, 54.0%)',
+    borderColorFocus: 'hsl(272, 60.0%, 73.5%)',
+    borderColorPress: 'hsl(272, 60.0%, 73.5%)',
+    placeholderColor: 'hsl(274, 65.4%, 87.8%)'
+} as Theme
+export const light_pink_alt1 = {
+    color1: 'hsl(323, 100%, 98.4%)',
+    color2: 'hsl(323, 86.3%, 96.5%)',
+    color3: 'hsl(323, 78.7%, 94.2%)',
+    color4: 'hsl(323, 72.2%, 91.1%)',
+    color5: 'hsl(323, 66.3%, 86.6%)',
+    color6: 'hsl(323, 60.3%, 72.4%)',
+    color7: 'hsl(322, 65.0%, 54.5%)',
+    color8: 'hsl(322, 63.9%, 50.7%)',
+    color9: 'hsl(322, 75.0%, 46.0%)',
+    color10: 'hsl(320, 70.0%, 13.5%)',
+    color11: 'hsl(0, 0%, 9.0%)',
+    color12: 'hsl(0, 0%, 9.0%)',
+    background: 'hsl(323, 86.3%, 96.5%)',
+    backgroundHover: 'hsl(323, 78.7%, 94.2%)',
+    backgroundPress: 'hsl(323, 72.2%, 91.1%)',
+    backgroundFocus: 'hsl(323, 66.3%, 86.6%)',
+    backgroundStrong: 'hsl(323, 100%, 98.4%)',
+    backgroundTransparent: 'hsl(322, 100%, 99.4%)',
+    color: 'hsl(320, 70.0%, 13.5%)',
+    colorHover: 'hsl(322, 75.0%, 46.0%)',
+    colorPress: 'hsl(320, 70.0%, 13.5%)',
+    colorFocus: 'hsl(322, 75.0%, 46.0%)',
+    colorTransparent: 'hsl(0, 0%, 9.0%)',
+    borderColor: 'hsl(323, 72.2%, 91.1%)',
+    borderColorHover: 'hsl(323, 66.3%, 86.6%)',
+    borderColorFocus: 'hsl(323, 72.2%, 91.1%)',
+    borderColorPress: 'hsl(323, 72.2%, 91.1%)',
+    placeholderColor: 'hsl(322, 65.0%, 54.5%)'
+} as Theme
+export const light_pink_alt2 = {
+    color1: 'hsl(323, 86.3%, 96.5%)',
+    color2: 'hsl(323, 78.7%, 94.2%)',
+    color3: 'hsl(323, 72.2%, 91.1%)',
+    color4: 'hsl(323, 66.3%, 86.6%)',
+    color5: 'hsl(323, 60.3%, 72.4%)',
+    color6: 'hsl(322, 65.0%, 54.5%)',
+    color7: 'hsl(322, 63.9%, 50.7%)',
+    color8: 'hsl(322, 75.0%, 46.0%)',
+    color9: 'hsl(320, 70.0%, 13.5%)',
+    color10: 'hsl(0, 0%, 9.0%)',
+    color11: 'hsl(0, 0%, 9.0%)',
+    color12: 'hsl(0, 0%, 9.0%)',
+    background: 'hsl(323, 78.7%, 94.2%)',
+    backgroundHover: 'hsl(323, 72.2%, 91.1%)',
+    backgroundPress: 'hsl(323, 66.3%, 86.6%)',
+    backgroundFocus: 'hsl(323, 60.3%, 72.4%)',
+    backgroundStrong: 'hsl(323, 86.3%, 96.5%)',
+    backgroundTransparent: 'hsl(323, 100%, 98.4%)',
+    color: 'hsl(322, 75.0%, 46.0%)',
+    colorHover: 'hsl(322, 63.9%, 50.7%)',
+    colorPress: 'hsl(322, 75.0%, 46.0%)',
+    colorFocus: 'hsl(322, 63.9%, 50.7%)',
+    colorTransparent: 'hsl(320, 70.0%, 13.5%)',
+    borderColor: 'hsl(323, 66.3%, 86.6%)',
+    borderColorHover: 'hsl(323, 60.3%, 72.4%)',
+    borderColorFocus: 'hsl(323, 66.3%, 86.6%)',
+    borderColorPress: 'hsl(323, 66.3%, 86.6%)',
+    placeholderColor: 'hsl(323, 60.3%, 72.4%)'
+} as Theme
+export const light_pink_active = {
+    color1: 'hsl(323, 78.7%, 94.2%)',
+    color2: 'hsl(323, 72.2%, 91.1%)',
+    color3: 'hsl(323, 66.3%, 86.6%)',
+    color4: 'hsl(323, 60.3%, 72.4%)',
+    color5: 'hsl(322, 65.0%, 54.5%)',
+    color6: 'hsl(322, 63.9%, 50.7%)',
+    color7: 'hsl(322, 75.0%, 46.0%)',
+    color8: 'hsl(320, 70.0%, 13.5%)',
+    color9: 'hsl(0, 0%, 9.0%)',
+    color10: 'hsla(320, 70.0%, 13.5%, 0)',
+    color11: 'hsla(320, 70.0%, 13.5%, 0)',
+    color12: 'hsla(320, 70.0%, 13.5%, 0)',
+    background: 'hsl(323, 72.2%, 91.1%)',
+    backgroundHover: 'hsl(323, 66.3%, 86.6%)',
+    backgroundPress: 'hsl(323, 60.3%, 72.4%)',
+    backgroundFocus: 'hsl(322, 65.0%, 54.5%)',
+    backgroundStrong: 'hsl(323, 78.7%, 94.2%)',
+    backgroundTransparent: 'hsl(323, 86.3%, 96.5%)',
+    colorHover: 'hsl(322, 65.0%, 54.5%)',
+    colorPress: 'hsl(322, 63.9%, 50.7%)',
+    colorFocus: 'hsl(322, 65.0%, 54.5%)',
+    colorTransparent: 'hsl(322, 75.0%, 46.0%)',
+    borderColor: 'hsl(323, 60.3%, 72.4%)',
+    borderColorHover: 'hsl(322, 65.0%, 54.5%)',
+    borderColorFocus: 'hsl(323, 60.3%, 72.4%)',
+    borderColorPress: 'hsl(323, 60.3%, 72.4%)',
+    placeholderColor: 'hsl(323, 66.3%, 86.6%)'
+} as Theme
+export const light_red_alt1 = {
+    color1: 'hsl(359, 100%, 98.6%)',
+    color2: 'hsl(360, 100%, 96.8%)',
+    color3: 'hsl(360, 97.9%, 94.8%)',
+    color4: 'hsl(360, 90.2%, 91.9%)',
+    color5: 'hsl(360, 81.7%, 87.8%)',
+    color6: 'hsl(359, 69.5%, 74.3%)',
+    color7: 'hsl(358, 75.0%, 59.0%)',
+    color8: 'hsl(358, 69.4%, 55.2%)',
+    color9: 'hsl(358, 65.0%, 48.7%)',
+    color10: 'hsl(354, 50.0%, 14.6%)',
+    color11: 'hsl(0, 0%, 9.0%)',
+    color12: 'hsl(0, 0%, 9.0%)',
+    background: 'hsl(360, 100%, 96.8%)',
+    backgroundHover: 'hsl(360, 97.9%, 94.8%)',
+    backgroundPress: 'hsl(360, 90.2%, 91.9%)',
+    backgroundFocus: 'hsl(360, 81.7%, 87.8%)',
+    backgroundStrong: 'hsl(359, 100%, 98.6%)',
+    backgroundTransparent: 'hsl(359, 100%, 99.4%)',
+    color: 'hsl(354, 50.0%, 14.6%)',
+    colorHover: 'hsl(358, 65.0%, 48.7%)',
+    colorPress: 'hsl(354, 50.0%, 14.6%)',
+    colorFocus: 'hsl(358, 65.0%, 48.7%)',
+    colorTransparent: 'hsl(0, 0%, 9.0%)',
+    borderColor: 'hsl(360, 90.2%, 91.9%)',
+    borderColorHover: 'hsl(360, 81.7%, 87.8%)',
+    borderColorFocus: 'hsl(360, 90.2%, 91.9%)',
+    borderColorPress: 'hsl(360, 90.2%, 91.9%)',
+    placeholderColor: 'hsl(358, 75.0%, 59.0%)'
+} as Theme
+export const light_red_alt2 = {
+    color1: 'hsl(360, 100%, 96.8%)',
+    color2: 'hsl(360, 97.9%, 94.8%)',
+    color3: 'hsl(360, 90.2%, 91.9%)',
+    color4: 'hsl(360, 81.7%, 87.8%)',
+    color5: 'hsl(359, 69.5%, 74.3%)',
+    color6: 'hsl(358, 75.0%, 59.0%)',
+    color7: 'hsl(358, 69.4%, 55.2%)',
+    color8: 'hsl(358, 65.0%, 48.7%)',
+    color9: 'hsl(354, 50.0%, 14.6%)',
+    color10: 'hsl(0, 0%, 9.0%)',
+    color11: 'hsl(0, 0%, 9.0%)',
+    color12: 'hsl(0, 0%, 9.0%)',
+    background: 'hsl(360, 97.9%, 94.8%)',
+    backgroundHover: 'hsl(360, 90.2%, 91.9%)',
+    backgroundPress: 'hsl(360, 81.7%, 87.8%)',
+    backgroundFocus: 'hsl(359, 69.5%, 74.3%)',
+    backgroundStrong: 'hsl(360, 100%, 96.8%)',
+    backgroundTransparent: 'hsl(359, 100%, 98.6%)',
+    color: 'hsl(358, 65.0%, 48.7%)',
+    colorHover: 'hsl(358, 69.4%, 55.2%)',
+    colorPress: 'hsl(358, 65.0%, 48.7%)',
+    colorFocus: 'hsl(358, 69.4%, 55.2%)',
+    colorTransparent: 'hsl(354, 50.0%, 14.6%)',
+    borderColor: 'hsl(360, 81.7%, 87.8%)',
+    borderColorHover: 'hsl(359, 69.5%, 74.3%)',
+    borderColorFocus: 'hsl(360, 81.7%, 87.8%)',
+    borderColorPress: 'hsl(360, 81.7%, 87.8%)',
+    placeholderColor: 'hsl(359, 69.5%, 74.3%)'
+} as Theme
+export const light_red_active = {
+    color1: 'hsl(360, 97.9%, 94.8%)',
+    color2: 'hsl(360, 90.2%, 91.9%)',
+    color3: 'hsl(360, 81.7%, 87.8%)',
+    color4: 'hsl(359, 69.5%, 74.3%)',
+    color5: 'hsl(358, 75.0%, 59.0%)',
+    color6: 'hsl(358, 69.4%, 55.2%)',
+    color7: 'hsl(358, 65.0%, 48.7%)',
+    color8: 'hsl(354, 50.0%, 14.6%)',
+    color9: 'hsl(0, 0%, 9.0%)',
+    color10: 'hsla(354, 50.0%, 14.6%, 0)',
+    color11: 'hsla(354, 50.0%, 14.6%, 0)',
+    color12: 'hsla(354, 50.0%, 14.6%, 0)',
+    background: 'hsl(360, 90.2%, 91.9%)',
+    backgroundHover: 'hsl(360, 81.7%, 87.8%)',
+    backgroundPress: 'hsl(359, 69.5%, 74.3%)',
+    backgroundFocus: 'hsl(358, 75.0%, 59.0%)',
+    backgroundStrong: 'hsl(360, 97.9%, 94.8%)',
+    backgroundTransparent: 'hsl(360, 100%, 96.8%)',
+    colorHover: 'hsl(358, 75.0%, 59.0%)',
+    colorPress: 'hsl(358, 69.4%, 55.2%)',
+    colorFocus: 'hsl(358, 75.0%, 59.0%)',
+    colorTransparent: 'hsl(358, 65.0%, 48.7%)',
+    borderColor: 'hsl(359, 69.5%, 74.3%)',
+    borderColorHover: 'hsl(358, 75.0%, 59.0%)',
+    borderColorFocus: 'hsl(359, 69.5%, 74.3%)',
+    borderColorPress: 'hsl(359, 69.5%, 74.3%)',
+    placeholderColor: 'hsl(360, 81.7%, 87.8%)'
+} as Theme
+export const dark_orange_alt1 = {
+    color1: 'hsl(28, 100%, 8.4%)',
+    color2: 'hsl(26, 91.1%, 11.6%)',
+    color3: 'hsl(25, 88.3%, 14.1%)',
+    color4: 'hsl(24, 87.6%, 16.6%)',
+    color5: 'hsl(24, 88.6%, 19.8%)',
+    color6: 'hsl(25, 100%, 29.0%)',
+    color7: 'hsl(24, 94.0%, 50.0%)',
+    color8: 'hsl(24, 100%, 58.5%)',
+    color9: 'hsl(24, 100%, 62.2%)',
+    color10: 'hsl(24, 97.0%, 93.2%)',
+    color11: '#fff',
+    color12: '#fff',
+    background: 'hsl(26, 91.1%, 11.6%)',
+    backgroundHover: 'hsl(25, 88.3%, 14.1%)',
+    backgroundPress: 'hsl(24, 87.6%, 16.6%)',
+    backgroundFocus: 'hsl(24, 88.6%, 19.8%)',
+    backgroundStrong: 'hsl(28, 100%, 8.4%)',
+    backgroundTransparent: 'hsl(30, 70.0%, 7.2%)',
+    color: 'hsl(24, 97.0%, 93.2%)',
+    colorHover: 'hsl(24, 100%, 62.2%)',
+    colorPress: 'hsl(24, 97.0%, 93.2%)',
+    colorFocus: 'hsl(24, 100%, 62.2%)',
+    colorTransparent: '#fff',
+    borderColor: 'hsl(24, 88.6%, 19.8%)',
+    borderColorHover: 'hsl(25, 100%, 29.0%)',
+    borderColorFocus: 'hsl(24, 87.6%, 16.6%)',
+    borderColorPress: 'hsl(24, 88.6%, 19.8%)',
+    placeholderColor: 'hsl(24, 94.0%, 50.0%)'
+} as Theme
+export const dark_orange_alt2 = {
+    color1: 'hsl(26, 91.1%, 11.6%)',
+    color2: 'hsl(25, 88.3%, 14.1%)',
+    color3: 'hsl(24, 87.6%, 16.6%)',
+    color4: 'hsl(24, 88.6%, 19.8%)',
+    color5: 'hsl(25, 100%, 29.0%)',
+    color6: 'hsl(24, 94.0%, 50.0%)',
+    color7: 'hsl(24, 100%, 58.5%)',
+    color8: 'hsl(24, 100%, 62.2%)',
+    color9: 'hsl(24, 97.0%, 93.2%)',
+    color10: '#fff',
+    color11: '#fff',
+    color12: '#fff',
+    background: 'hsl(25, 88.3%, 14.1%)',
+    backgroundHover: 'hsl(24, 87.6%, 16.6%)',
+    backgroundPress: 'hsl(24, 88.6%, 19.8%)',
+    backgroundFocus: 'hsl(25, 100%, 29.0%)',
+    backgroundStrong: 'hsl(26, 91.1%, 11.6%)',
+    backgroundTransparent: 'hsl(28, 100%, 8.4%)',
+    color: 'hsl(24, 100%, 62.2%)',
+    colorHover: 'hsl(24, 100%, 58.5%)',
+    colorPress: 'hsl(24, 100%, 62.2%)',
+    colorFocus: 'hsl(24, 100%, 58.5%)',
+    colorTransparent: 'hsl(24, 97.0%, 93.2%)',
+    borderColor: 'hsl(25, 100%, 29.0%)',
+    borderColorHover: 'hsl(24, 94.0%, 50.0%)',
+    borderColorFocus: 'hsl(24, 88.6%, 19.8%)',
+    borderColorPress: 'hsl(25, 100%, 29.0%)',
+    placeholderColor: 'hsl(25, 100%, 29.0%)'
+} as Theme
+export const dark_orange_active = {
+    color1: 'hsl(25, 88.3%, 14.1%)',
+    color2: 'hsl(24, 87.6%, 16.6%)',
+    color3: 'hsl(24, 88.6%, 19.8%)',
+    color4: 'hsl(25, 100%, 29.0%)',
+    color5: 'hsl(24, 94.0%, 50.0%)',
+    color6: 'hsl(24, 100%, 58.5%)',
+    color7: 'hsl(24, 100%, 62.2%)',
+    color8: 'hsl(24, 97.0%, 93.2%)',
+    color9: '#fff',
+    color10: 'hsla(24, 97.0%, 93.2%, 0)',
+    color11: 'hsla(24, 97.0%, 93.2%, 0)',
+    color12: 'hsla(24, 97.0%, 93.2%, 0)',
+    background: 'hsl(24, 87.6%, 16.6%)',
+    backgroundHover: 'hsl(24, 88.6%, 19.8%)',
+    backgroundPress: 'hsl(25, 100%, 29.0%)',
+    backgroundFocus: 'hsl(24, 94.0%, 50.0%)',
+    backgroundStrong: 'hsl(25, 88.3%, 14.1%)',
+    backgroundTransparent: 'hsl(26, 91.1%, 11.6%)',
+    colorHover: 'hsl(24, 94.0%, 50.0%)',
+    colorPress: 'hsl(24, 100%, 58.5%)',
+    colorFocus: 'hsl(24, 94.0%, 50.0%)',
+    colorTransparent: 'hsl(24, 100%, 62.2%)',
+    borderColor: 'hsl(24, 94.0%, 50.0%)',
+    borderColorHover: 'hsl(24, 100%, 58.5%)',
+    borderColorFocus: 'hsl(25, 100%, 29.0%)',
+    borderColorPress: 'hsl(24, 94.0%, 50.0%)',
+    placeholderColor: 'hsl(24, 88.6%, 19.8%)'
+} as Theme
+export const dark_yellow_alt1 = {
+    color1: 'hsl(46, 100%, 6.7%)',
+    color2: 'hsl(45, 100%, 8.7%)',
+    color3: 'hsl(45, 100%, 10.4%)',
+    color4: 'hsl(47, 100%, 12.1%)',
+    color5: 'hsl(49, 100%, 14.3%)',
+    color6: 'hsl(50, 100%, 22.0%)',
+    color7: 'hsl(53, 92.0%, 50.0%)',
+    color8: 'hsl(54, 100%, 68.0%)',
+    color9: 'hsl(48, 100%, 47.0%)',
+    color10: 'hsl(53, 100%, 91.0%)',
+    color11: '#fff',
+    color12: '#fff',
+    background: 'hsl(45, 100%, 8.7%)',
+    backgroundHover: 'hsl(45, 100%, 10.4%)',
+    backgroundPress: 'hsl(47, 100%, 12.1%)',
+    backgroundFocus: 'hsl(49, 100%, 14.3%)',
+    backgroundStrong: 'hsl(46, 100%, 6.7%)',
+    backgroundTransparent: 'hsl(45, 100%, 5.5%)',
+    color: 'hsl(53, 100%, 91.0%)',
+    colorHover: 'hsl(48, 100%, 47.0%)',
+    colorPress: 'hsl(53, 100%, 91.0%)',
+    colorFocus: 'hsl(48, 100%, 47.0%)',
+    colorTransparent: '#fff',
+    borderColor: 'hsl(49, 100%, 14.3%)',
+    borderColorHover: 'hsl(50, 100%, 22.0%)',
+    borderColorFocus: 'hsl(47, 100%, 12.1%)',
+    borderColorPress: 'hsl(49, 100%, 14.3%)',
+    placeholderColor: 'hsl(53, 92.0%, 50.0%)'
+} as Theme
+export const dark_yellow_alt2 = {
+    color1: 'hsl(45, 100%, 8.7%)',
+    color2: 'hsl(45, 100%, 10.4%)',
+    color3: 'hsl(47, 100%, 12.1%)',
+    color4: 'hsl(49, 100%, 14.3%)',
+    color5: 'hsl(50, 100%, 22.0%)',
+    color6: 'hsl(53, 92.0%, 50.0%)',
+    color7: 'hsl(54, 100%, 68.0%)',
+    color8: 'hsl(48, 100%, 47.0%)',
+    color9: 'hsl(53, 100%, 91.0%)',
+    color10: '#fff',
+    color11: '#fff',
+    color12: '#fff',
+    background: 'hsl(45, 100%, 10.4%)',
+    backgroundHover: 'hsl(47, 100%, 12.1%)',
+    backgroundPress: 'hsl(49, 100%, 14.3%)',
+    backgroundFocus: 'hsl(50, 100%, 22.0%)',
+    backgroundStrong: 'hsl(45, 100%, 8.7%)',
+    backgroundTransparent: 'hsl(46, 100%, 6.7%)',
+    color: 'hsl(48, 100%, 47.0%)',
+    colorHover: 'hsl(54, 100%, 68.0%)',
+    colorPress: 'hsl(48, 100%, 47.0%)',
+    colorFocus: 'hsl(54, 100%, 68.0%)',
+    colorTransparent: 'hsl(53, 100%, 91.0%)',
+    borderColor: 'hsl(50, 100%, 22.0%)',
+    borderColorHover: 'hsl(53, 92.0%, 50.0%)',
+    borderColorFocus: 'hsl(49, 100%, 14.3%)',
+    borderColorPress: 'hsl(50, 100%, 22.0%)',
+    placeholderColor: 'hsl(50, 100%, 22.0%)'
+} as Theme
+export const dark_yellow_active = {
+    color1: 'hsl(45, 100%, 10.4%)',
+    color2: 'hsl(47, 100%, 12.1%)',
+    color3: 'hsl(49, 100%, 14.3%)',
+    color4: 'hsl(50, 100%, 22.0%)',
+    color5: 'hsl(53, 92.0%, 50.0%)',
+    color6: 'hsl(54, 100%, 68.0%)',
+    color7: 'hsl(48, 100%, 47.0%)',
+    color8: 'hsl(53, 100%, 91.0%)',
+    color9: '#fff',
+    color10: 'hsla(53, 100%, 91.0%, 0)',
+    color11: 'hsla(53, 100%, 91.0%, 0)',
+    color12: 'hsla(53, 100%, 91.0%, 0)',
+    background: 'hsl(47, 100%, 12.1%)',
+    backgroundHover: 'hsl(49, 100%, 14.3%)',
+    backgroundPress: 'hsl(50, 100%, 22.0%)',
+    backgroundFocus: 'hsl(53, 92.0%, 50.0%)',
+    backgroundStrong: 'hsl(45, 100%, 10.4%)',
+    backgroundTransparent: 'hsl(45, 100%, 8.7%)',
+    colorHover: 'hsl(53, 92.0%, 50.0%)',
+    colorPress: 'hsl(54, 100%, 68.0%)',
+    colorFocus: 'hsl(53, 92.0%, 50.0%)',
+    colorTransparent: 'hsl(48, 100%, 47.0%)',
+    borderColor: 'hsl(53, 92.0%, 50.0%)',
+    borderColorHover: 'hsl(54, 100%, 68.0%)',
+    borderColorFocus: 'hsl(50, 100%, 22.0%)',
+    borderColorPress: 'hsl(53, 92.0%, 50.0%)',
+    placeholderColor: 'hsl(49, 100%, 14.3%)'
+} as Theme
+export const dark_green_alt1 = {
+    color1: 'hsl(155, 44.2%, 8.4%)',
+    color2: 'hsl(155, 46.7%, 10.9%)',
+    color3: 'hsl(154, 48.4%, 12.9%)',
+    color4: 'hsl(154, 49.7%, 14.9%)',
+    color5: 'hsl(154, 50.9%, 17.6%)',
+    color6: 'hsl(151, 51.7%, 28.4%)',
+    color7: 'hsl(151, 55.0%, 41.5%)',
+    color8: 'hsl(151, 49.3%, 46.5%)',
+    color9: 'hsl(151, 50.0%, 53.2%)',
+    color10: 'hsl(137, 72.0%, 94.0%)',
+    color11: '#fff',
+    color12: '#fff',
+    background: 'hsl(155, 46.7%, 10.9%)',
+    backgroundHover: 'hsl(154, 48.4%, 12.9%)',
+    backgroundPress: 'hsl(154, 49.7%, 14.9%)',
+    backgroundFocus: 'hsl(154, 50.9%, 17.6%)',
+    backgroundStrong: 'hsl(155, 44.2%, 8.4%)',
+    backgroundTransparent: 'hsl(146, 30.0%, 7.4%)',
+    color: 'hsl(137, 72.0%, 94.0%)',
+    colorHover: 'hsl(151, 50.0%, 53.2%)',
+    colorPress: 'hsl(137, 72.0%, 94.0%)',
+    colorFocus: 'hsl(151, 50.0%, 53.2%)',
+    colorTransparent: '#fff',
+    borderColor: 'hsl(154, 50.9%, 17.6%)',
+    borderColorHover: 'hsl(151, 51.7%, 28.4%)',
+    borderColorFocus: 'hsl(154, 49.7%, 14.9%)',
+    borderColorPress: 'hsl(154, 50.9%, 17.6%)',
+    placeholderColor: 'hsl(151, 55.0%, 41.5%)'
+} as Theme
+export const dark_green_alt2 = {
+    color1: 'hsl(155, 46.7%, 10.9%)',
+    color2: 'hsl(154, 48.4%, 12.9%)',
+    color3: 'hsl(154, 49.7%, 14.9%)',
+    color4: 'hsl(154, 50.9%, 17.6%)',
+    color5: 'hsl(151, 51.7%, 28.4%)',
+    color6: 'hsl(151, 55.0%, 41.5%)',
+    color7: 'hsl(151, 49.3%, 46.5%)',
+    color8: 'hsl(151, 50.0%, 53.2%)',
+    color9: 'hsl(137, 72.0%, 94.0%)',
+    color10: '#fff',
+    color11: '#fff',
+    color12: '#fff',
+    background: 'hsl(154, 48.4%, 12.9%)',
+    backgroundHover: 'hsl(154, 49.7%, 14.9%)',
+    backgroundPress: 'hsl(154, 50.9%, 17.6%)',
+    backgroundFocus: 'hsl(151, 51.7%, 28.4%)',
+    backgroundStrong: 'hsl(155, 46.7%, 10.9%)',
+    backgroundTransparent: 'hsl(155, 44.2%, 8.4%)',
+    color: 'hsl(151, 50.0%, 53.2%)',
+    colorHover: 'hsl(151, 49.3%, 46.5%)',
+    colorPress: 'hsl(151, 50.0%, 53.2%)',
+    colorFocus: 'hsl(151, 49.3%, 46.5%)',
+    colorTransparent: 'hsl(137, 72.0%, 94.0%)',
+    borderColor: 'hsl(151, 51.7%, 28.4%)',
+    borderColorHover: 'hsl(151, 55.0%, 41.5%)',
+    borderColorFocus: 'hsl(154, 50.9%, 17.6%)',
+    borderColorPress: 'hsl(151, 51.7%, 28.4%)',
+    placeholderColor: 'hsl(151, 51.7%, 28.4%)'
+} as Theme
+export const dark_green_active = {
+    color1: 'hsl(154, 48.4%, 12.9%)',
+    color2: 'hsl(154, 49.7%, 14.9%)',
+    color3: 'hsl(154, 50.9%, 17.6%)',
+    color4: 'hsl(151, 51.7%, 28.4%)',
+    color5: 'hsl(151, 55.0%, 41.5%)',
+    color6: 'hsl(151, 49.3%, 46.5%)',
+    color7: 'hsl(151, 50.0%, 53.2%)',
+    color8: 'hsl(137, 72.0%, 94.0%)',
+    color9: '#fff',
+    color10: 'hsla(137, 72.0%, 94.0%, 0)',
+    color11: 'hsla(137, 72.0%, 94.0%, 0)',
+    color12: 'hsla(137, 72.0%, 94.0%, 0)',
+    background: 'hsl(154, 49.7%, 14.9%)',
+    backgroundHover: 'hsl(154, 50.9%, 17.6%)',
+    backgroundPress: 'hsl(151, 51.7%, 28.4%)',
+    backgroundFocus: 'hsl(151, 55.0%, 41.5%)',
+    backgroundStrong: 'hsl(154, 48.4%, 12.9%)',
+    backgroundTransparent: 'hsl(155, 46.7%, 10.9%)',
+    colorHover: 'hsl(151, 55.0%, 41.5%)',
+    colorPress: 'hsl(151, 49.3%, 46.5%)',
+    colorFocus: 'hsl(151, 55.0%, 41.5%)',
+    colorTransparent: 'hsl(151, 50.0%, 53.2%)',
+    borderColor: 'hsl(151, 55.0%, 41.5%)',
+    borderColorHover: 'hsl(151, 49.3%, 46.5%)',
+    borderColorFocus: 'hsl(151, 51.7%, 28.4%)',
+    borderColorPress: 'hsl(151, 55.0%, 41.5%)',
+    placeholderColor: 'hsl(154, 50.9%, 17.6%)'
+} as Theme
+export const dark_blue_alt1 = {
+    color1: 'hsl(216, 50.0%, 11.8%)',
+    color2: 'hsl(214, 59.4%, 15.3%)',
+    color3: 'hsl(214, 65.8%, 17.9%)',
+    color4: 'hsl(213, 71.2%, 20.2%)',
+    color5: 'hsl(212, 77.4%, 23.1%)',
+    color6: 'hsl(211, 89.7%, 34.1%)',
+    color7: 'hsl(206, 100%, 50.0%)',
+    color8: 'hsl(209, 100%, 60.6%)',
+    color9: 'hsl(210, 100%, 66.1%)',
+    color10: 'hsl(206, 98.0%, 95.8%)',
+    color11: '#fff',
+    color12: '#fff',
+    background: 'hsl(214, 59.4%, 15.3%)',
+    backgroundHover: 'hsl(214, 65.8%, 17.9%)',
+    backgroundPress: 'hsl(213, 71.2%, 20.2%)',
+    backgroundFocus: 'hsl(212, 77.4%, 23.1%)',
+    backgroundStrong: 'hsl(216, 50.0%, 11.8%)',
+    backgroundTransparent: 'hsl(212, 35.0%, 9.2%)',
+    color: 'hsl(206, 98.0%, 95.8%)',
+    colorHover: 'hsl(210, 100%, 66.1%)',
+    colorPress: 'hsl(206, 98.0%, 95.8%)',
+    colorFocus: 'hsl(210, 100%, 66.1%)',
+    colorTransparent: '#fff',
+    borderColor: 'hsl(212, 77.4%, 23.1%)',
+    borderColorHover: 'hsl(211, 89.7%, 34.1%)',
+    borderColorFocus: 'hsl(213, 71.2%, 20.2%)',
+    borderColorPress: 'hsl(212, 77.4%, 23.1%)',
+    placeholderColor: 'hsl(206, 100%, 50.0%)'
+} as Theme
+export const dark_blue_alt2 = {
+    color1: 'hsl(214, 59.4%, 15.3%)',
+    color2: 'hsl(214, 65.8%, 17.9%)',
+    color3: 'hsl(213, 71.2%, 20.2%)',
+    color4: 'hsl(212, 77.4%, 23.1%)',
+    color5: 'hsl(211, 89.7%, 34.1%)',
+    color6: 'hsl(206, 100%, 50.0%)',
+    color7: 'hsl(209, 100%, 60.6%)',
+    color8: 'hsl(210, 100%, 66.1%)',
+    color9: 'hsl(206, 98.0%, 95.8%)',
+    color10: '#fff',
+    color11: '#fff',
+    color12: '#fff',
+    background: 'hsl(214, 65.8%, 17.9%)',
+    backgroundHover: 'hsl(213, 71.2%, 20.2%)',
+    backgroundPress: 'hsl(212, 77.4%, 23.1%)',
+    backgroundFocus: 'hsl(211, 89.7%, 34.1%)',
+    backgroundStrong: 'hsl(214, 59.4%, 15.3%)',
+    backgroundTransparent: 'hsl(216, 50.0%, 11.8%)',
+    color: 'hsl(210, 100%, 66.1%)',
+    colorHover: 'hsl(209, 100%, 60.6%)',
+    colorPress: 'hsl(210, 100%, 66.1%)',
+    colorFocus: 'hsl(209, 100%, 60.6%)',
+    colorTransparent: 'hsl(206, 98.0%, 95.8%)',
+    borderColor: 'hsl(211, 89.7%, 34.1%)',
+    borderColorHover: 'hsl(206, 100%, 50.0%)',
+    borderColorFocus: 'hsl(212, 77.4%, 23.1%)',
+    borderColorPress: 'hsl(211, 89.7%, 34.1%)',
+    placeholderColor: 'hsl(211, 89.7%, 34.1%)'
+} as Theme
+export const dark_blue_active = {
+    color1: 'hsl(214, 65.8%, 17.9%)',
+    color2: 'hsl(213, 71.2%, 20.2%)',
+    color3: 'hsl(212, 77.4%, 23.1%)',
+    color4: 'hsl(211, 89.7%, 34.1%)',
+    color5: 'hsl(206, 100%, 50.0%)',
+    color6: 'hsl(209, 100%, 60.6%)',
+    color7: 'hsl(210, 100%, 66.1%)',
+    color8: 'hsl(206, 98.0%, 95.8%)',
+    color9: '#fff',
+    color10: 'hsla(206, 98.0%, 95.8%, 0)',
+    color11: 'hsla(206, 98.0%, 95.8%, 0)',
+    color12: 'hsla(206, 98.0%, 95.8%, 0)',
+    background: 'hsl(213, 71.2%, 20.2%)',
+    backgroundHover: 'hsl(212, 77.4%, 23.1%)',
+    backgroundPress: 'hsl(211, 89.7%, 34.1%)',
+    backgroundFocus: 'hsl(206, 100%, 50.0%)',
+    backgroundStrong: 'hsl(214, 65.8%, 17.9%)',
+    backgroundTransparent: 'hsl(214, 59.4%, 15.3%)',
+    colorHover: 'hsl(206, 100%, 50.0%)',
+    colorPress: 'hsl(209, 100%, 60.6%)',
+    colorFocus: 'hsl(206, 100%, 50.0%)',
+    colorTransparent: 'hsl(210, 100%, 66.1%)',
+    borderColor: 'hsl(206, 100%, 50.0%)',
+    borderColorHover: 'hsl(209, 100%, 60.6%)',
+    borderColorFocus: 'hsl(211, 89.7%, 34.1%)',
+    borderColorPress: 'hsl(206, 100%, 50.0%)',
+    placeholderColor: 'hsl(212, 77.4%, 23.1%)'
+} as Theme
+export const dark_purple_alt1 = {
+    color1: 'hsl(283, 30.0%, 11.8%)',
+    color2: 'hsl(281, 37.5%, 16.5%)',
+    color3: 'hsl(280, 41.2%, 20.0%)',
+    color4: 'hsl(279, 43.8%, 23.3%)',
+    color5: 'hsl(277, 46.4%, 27.5%)',
+    color6: 'hsl(272, 52.1%, 45.9%)',
+    color7: 'hsl(272, 51.0%, 54.0%)',
+    color8: 'hsl(273, 57.3%, 59.1%)',
+    color9: 'hsl(275, 80.0%, 71.0%)',
+    color10: 'hsl(279, 75.0%, 95.7%)',
+    color11: '#fff',
+    color12: '#fff',
+    background: 'hsl(281, 37.5%, 16.5%)',
+    backgroundHover: 'hsl(280, 41.2%, 20.0%)',
+    backgroundPress: 'hsl(279, 43.8%, 23.3%)',
+    backgroundFocus: 'hsl(277, 46.4%, 27.5%)',
+    backgroundStrong: 'hsl(283, 30.0%, 11.8%)',
+    backgroundTransparent: 'hsl(284, 20.0%, 9.6%)',
+    color: 'hsl(279, 75.0%, 95.7%)',
+    colorHover: 'hsl(275, 80.0%, 71.0%)',
+    colorPress: 'hsl(279, 75.0%, 95.7%)',
+    colorFocus: 'hsl(275, 80.0%, 71.0%)',
+    colorTransparent: '#fff',
+    borderColor: 'hsl(277, 46.4%, 27.5%)',
+    borderColorHover: 'hsl(272, 52.1%, 45.9%)',
+    borderColorFocus: 'hsl(279, 43.8%, 23.3%)',
+    borderColorPress: 'hsl(277, 46.4%, 27.5%)',
+    placeholderColor: 'hsl(272, 51.0%, 54.0%)'
+} as Theme
+export const dark_purple_alt2 = {
+    color1: 'hsl(281, 37.5%, 16.5%)',
+    color2: 'hsl(280, 41.2%, 20.0%)',
+    color3: 'hsl(279, 43.8%, 23.3%)',
+    color4: 'hsl(277, 46.4%, 27.5%)',
+    color5: 'hsl(272, 52.1%, 45.9%)',
+    color6: 'hsl(272, 51.0%, 54.0%)',
+    color7: 'hsl(273, 57.3%, 59.1%)',
+    color8: 'hsl(275, 80.0%, 71.0%)',
+    color9: 'hsl(279, 75.0%, 95.7%)',
+    color10: '#fff',
+    color11: '#fff',
+    color12: '#fff',
+    background: 'hsl(280, 41.2%, 20.0%)',
+    backgroundHover: 'hsl(279, 43.8%, 23.3%)',
+    backgroundPress: 'hsl(277, 46.4%, 27.5%)',
+    backgroundFocus: 'hsl(272, 52.1%, 45.9%)',
+    backgroundStrong: 'hsl(281, 37.5%, 16.5%)',
+    backgroundTransparent: 'hsl(283, 30.0%, 11.8%)',
+    color: 'hsl(275, 80.0%, 71.0%)',
+    colorHover: 'hsl(273, 57.3%, 59.1%)',
+    colorPress: 'hsl(275, 80.0%, 71.0%)',
+    colorFocus: 'hsl(273, 57.3%, 59.1%)',
+    colorTransparent: 'hsl(279, 75.0%, 95.7%)',
+    borderColor: 'hsl(272, 52.1%, 45.9%)',
+    borderColorHover: 'hsl(272, 51.0%, 54.0%)',
+    borderColorFocus: 'hsl(277, 46.4%, 27.5%)',
+    borderColorPress: 'hsl(272, 52.1%, 45.9%)',
+    placeholderColor: 'hsl(272, 52.1%, 45.9%)'
+} as Theme
+export const dark_purple_active = {
+    color1: 'hsl(280, 41.2%, 20.0%)',
+    color2: 'hsl(279, 43.8%, 23.3%)',
+    color3: 'hsl(277, 46.4%, 27.5%)',
+    color4: 'hsl(272, 52.1%, 45.9%)',
+    color5: 'hsl(272, 51.0%, 54.0%)',
+    color6: 'hsl(273, 57.3%, 59.1%)',
+    color7: 'hsl(275, 80.0%, 71.0%)',
+    color8: 'hsl(279, 75.0%, 95.7%)',
+    color9: '#fff',
+    color10: 'hsla(279, 75.0%, 95.7%, 0)',
+    color11: 'hsla(279, 75.0%, 95.7%, 0)',
+    color12: 'hsla(279, 75.0%, 95.7%, 0)',
+    background: 'hsl(279, 43.8%, 23.3%)',
+    backgroundHover: 'hsl(277, 46.4%, 27.5%)',
+    backgroundPress: 'hsl(272, 52.1%, 45.9%)',
+    backgroundFocus: 'hsl(272, 51.0%, 54.0%)',
+    backgroundStrong: 'hsl(280, 41.2%, 20.0%)',
+    backgroundTransparent: 'hsl(281, 37.5%, 16.5%)',
+    colorHover: 'hsl(272, 51.0%, 54.0%)',
+    colorPress: 'hsl(273, 57.3%, 59.1%)',
+    colorFocus: 'hsl(272, 51.0%, 54.0%)',
+    colorTransparent: 'hsl(275, 80.0%, 71.0%)',
+    borderColor: 'hsl(272, 51.0%, 54.0%)',
+    borderColorHover: 'hsl(273, 57.3%, 59.1%)',
+    borderColorFocus: 'hsl(272, 52.1%, 45.9%)',
+    borderColorPress: 'hsl(272, 51.0%, 54.0%)',
+    placeholderColor: 'hsl(277, 46.4%, 27.5%)'
+} as Theme
+export const dark_pink_alt1 = {
+    color1: 'hsl(319, 32.2%, 11.6%)',
+    color2: 'hsl(319, 41.0%, 16.0%)',
+    color3: 'hsl(320, 45.4%, 18.7%)',
+    color4: 'hsl(320, 49.0%, 21.1%)',
+    color5: 'hsl(321, 53.6%, 24.4%)',
+    color6: 'hsl(322, 74.9%, 37.5%)',
+    color7: 'hsl(322, 65.0%, 54.5%)',
+    color8: 'hsl(323, 72.8%, 59.2%)',
+    color9: 'hsl(325, 90.0%, 66.4%)',
+    color10: 'hsl(322, 90.0%, 95.8%)',
+    color11: '#fff',
+    color12: '#fff',
+    background: 'hsl(319, 41.0%, 16.0%)',
+    backgroundHover: 'hsl(320, 45.4%, 18.7%)',
+    backgroundPress: 'hsl(320, 49.0%, 21.1%)',
+    backgroundFocus: 'hsl(321, 53.6%, 24.4%)',
+    backgroundStrong: 'hsl(319, 32.2%, 11.6%)',
+    backgroundTransparent: 'hsl(318, 25.0%, 9.6%)',
+    color: 'hsl(322, 90.0%, 95.8%)',
+    colorHover: 'hsl(325, 90.0%, 66.4%)',
+    colorPress: 'hsl(322, 90.0%, 95.8%)',
+    colorFocus: 'hsl(325, 90.0%, 66.4%)',
+    colorTransparent: '#fff',
+    borderColor: 'hsl(321, 53.6%, 24.4%)',
+    borderColorHover: 'hsl(322, 74.9%, 37.5%)',
+    borderColorFocus: 'hsl(320, 49.0%, 21.1%)',
+    borderColorPress: 'hsl(321, 53.6%, 24.4%)',
+    placeholderColor: 'hsl(322, 65.0%, 54.5%)'
+} as Theme
+export const dark_pink_alt2 = {
+    color1: 'hsl(319, 41.0%, 16.0%)',
+    color2: 'hsl(320, 45.4%, 18.7%)',
+    color3: 'hsl(320, 49.0%, 21.1%)',
+    color4: 'hsl(321, 53.6%, 24.4%)',
+    color5: 'hsl(322, 74.9%, 37.5%)',
+    color6: 'hsl(322, 65.0%, 54.5%)',
+    color7: 'hsl(323, 72.8%, 59.2%)',
+    color8: 'hsl(325, 90.0%, 66.4%)',
+    color9: 'hsl(322, 90.0%, 95.8%)',
+    color10: '#fff',
+    color11: '#fff',
+    color12: '#fff',
+    background: 'hsl(320, 45.4%, 18.7%)',
+    backgroundHover: 'hsl(320, 49.0%, 21.1%)',
+    backgroundPress: 'hsl(321, 53.6%, 24.4%)',
+    backgroundFocus: 'hsl(322, 74.9%, 37.5%)',
+    backgroundStrong: 'hsl(319, 41.0%, 16.0%)',
+    backgroundTransparent: 'hsl(319, 32.2%, 11.6%)',
+    color: 'hsl(325, 90.0%, 66.4%)',
+    colorHover: 'hsl(323, 72.8%, 59.2%)',
+    colorPress: 'hsl(325, 90.0%, 66.4%)',
+    colorFocus: 'hsl(323, 72.8%, 59.2%)',
+    colorTransparent: 'hsl(322, 90.0%, 95.8%)',
+    borderColor: 'hsl(322, 74.9%, 37.5%)',
+    borderColorHover: 'hsl(322, 65.0%, 54.5%)',
+    borderColorFocus: 'hsl(321, 53.6%, 24.4%)',
+    borderColorPress: 'hsl(322, 74.9%, 37.5%)',
+    placeholderColor: 'hsl(322, 74.9%, 37.5%)'
+} as Theme
+export const dark_pink_active = {
+    color1: 'hsl(320, 45.4%, 18.7%)',
+    color2: 'hsl(320, 49.0%, 21.1%)',
+    color3: 'hsl(321, 53.6%, 24.4%)',
+    color4: 'hsl(322, 74.9%, 37.5%)',
+    color5: 'hsl(322, 65.0%, 54.5%)',
+    color6: 'hsl(323, 72.8%, 59.2%)',
+    color7: 'hsl(325, 90.0%, 66.4%)',
+    color8: 'hsl(322, 90.0%, 95.8%)',
+    color9: '#fff',
+    color10: 'hsla(322, 90.0%, 95.8%, 0)',
+    color11: 'hsla(322, 90.0%, 95.8%, 0)',
+    color12: 'hsla(322, 90.0%, 95.8%, 0)',
+    background: 'hsl(320, 49.0%, 21.1%)',
+    backgroundHover: 'hsl(321, 53.6%, 24.4%)',
+    backgroundPress: 'hsl(322, 74.9%, 37.5%)',
+    backgroundFocus: 'hsl(322, 65.0%, 54.5%)',
+    backgroundStrong: 'hsl(320, 45.4%, 18.7%)',
+    backgroundTransparent: 'hsl(319, 41.0%, 16.0%)',
+    colorHover: 'hsl(322, 65.0%, 54.5%)',
+    colorPress: 'hsl(323, 72.8%, 59.2%)',
+    colorFocus: 'hsl(322, 65.0%, 54.5%)',
+    colorTransparent: 'hsl(325, 90.0%, 66.4%)',
+    borderColor: 'hsl(322, 65.0%, 54.5%)',
+    borderColorHover: 'hsl(323, 72.8%, 59.2%)',
+    borderColorFocus: 'hsl(322, 74.9%, 37.5%)',
+    borderColorPress: 'hsl(322, 65.0%, 54.5%)',
+    placeholderColor: 'hsl(321, 53.6%, 24.4%)'
+} as Theme
+export const dark_red_alt1 = {
+    color1: 'hsl(357, 34.4%, 12.0%)',
+    color2: 'hsl(356, 43.4%, 16.4%)',
+    color3: 'hsl(356, 47.6%, 19.2%)',
+    color4: 'hsl(356, 51.1%, 21.9%)',
+    color5: 'hsl(356, 55.2%, 25.9%)',
+    color6: 'hsl(358, 65.0%, 40.4%)',
+    color7: 'hsl(358, 75.0%, 59.0%)',
+    color8: 'hsl(358, 85.3%, 64.0%)',
+    color9: 'hsl(358, 100%, 69.5%)',
+    color10: 'hsl(351, 89.0%, 96.0%)',
+    color11: '#fff',
+    color12: '#fff',
+    background: 'hsl(356, 43.4%, 16.4%)',
+    backgroundHover: 'hsl(356, 47.6%, 19.2%)',
+    backgroundPress: 'hsl(356, 51.1%, 21.9%)',
+    backgroundFocus: 'hsl(356, 55.2%, 25.9%)',
+    backgroundStrong: 'hsl(357, 34.4%, 12.0%)',
+    backgroundTransparent: 'hsl(353, 23.0%, 9.8%)',
+    color: 'hsl(351, 89.0%, 96.0%)',
+    colorHover: 'hsl(358, 100%, 69.5%)',
+    colorPress: 'hsl(351, 89.0%, 96.0%)',
+    colorFocus: 'hsl(358, 100%, 69.5%)',
+    colorTransparent: '#fff',
+    borderColor: 'hsl(356, 55.2%, 25.9%)',
+    borderColorHover: 'hsl(358, 65.0%, 40.4%)',
+    borderColorFocus: 'hsl(356, 51.1%, 21.9%)',
+    borderColorPress: 'hsl(356, 55.2%, 25.9%)',
+    placeholderColor: 'hsl(358, 75.0%, 59.0%)'
+} as Theme
+export const dark_red_alt2 = {
+    color1: 'hsl(356, 43.4%, 16.4%)',
+    color2: 'hsl(356, 47.6%, 19.2%)',
+    color3: 'hsl(356, 51.1%, 21.9%)',
+    color4: 'hsl(356, 55.2%, 25.9%)',
+    color5: 'hsl(358, 65.0%, 40.4%)',
+    color6: 'hsl(358, 75.0%, 59.0%)',
+    color7: 'hsl(358, 85.3%, 64.0%)',
+    color8: 'hsl(358, 100%, 69.5%)',
+    color9: 'hsl(351, 89.0%, 96.0%)',
+    color10: '#fff',
+    color11: '#fff',
+    color12: '#fff',
+    background: 'hsl(356, 47.6%, 19.2%)',
+    backgroundHover: 'hsl(356, 51.1%, 21.9%)',
+    backgroundPress: 'hsl(356, 55.2%, 25.9%)',
+    backgroundFocus: 'hsl(358, 65.0%, 40.4%)',
+    backgroundStrong: 'hsl(356, 43.4%, 16.4%)',
+    backgroundTransparent: 'hsl(357, 34.4%, 12.0%)',
+    color: 'hsl(358, 100%, 69.5%)',
+    colorHover: 'hsl(358, 85.3%, 64.0%)',
+    colorPress: 'hsl(358, 100%, 69.5%)',
+    colorFocus: 'hsl(358, 85.3%, 64.0%)',
+    colorTransparent: 'hsl(351, 89.0%, 96.0%)',
+    borderColor: 'hsl(358, 65.0%, 40.4%)',
+    borderColorHover: 'hsl(358, 75.0%, 59.0%)',
+    borderColorFocus: 'hsl(356, 55.2%, 25.9%)',
+    borderColorPress: 'hsl(358, 65.0%, 40.4%)',
+    placeholderColor: 'hsl(358, 65.0%, 40.4%)'
+} as Theme
+export const dark_red_active = {
+    color1: 'hsl(356, 47.6%, 19.2%)',
+    color2: 'hsl(356, 51.1%, 21.9%)',
+    color3: 'hsl(356, 55.2%, 25.9%)',
+    color4: 'hsl(358, 65.0%, 40.4%)',
+    color5: 'hsl(358, 75.0%, 59.0%)',
+    color6: 'hsl(358, 85.3%, 64.0%)',
+    color7: 'hsl(358, 100%, 69.5%)',
+    color8: 'hsl(351, 89.0%, 96.0%)',
+    color9: '#fff',
+    color10: 'hsla(351, 89.0%, 96.0%, 0)',
+    color11: 'hsla(351, 89.0%, 96.0%, 0)',
+    color12: 'hsla(351, 89.0%, 96.0%, 0)',
+    background: 'hsl(356, 51.1%, 21.9%)',
+    backgroundHover: 'hsl(356, 55.2%, 25.9%)',
+    backgroundPress: 'hsl(358, 65.0%, 40.4%)',
+    backgroundFocus: 'hsl(358, 75.0%, 59.0%)',
+    backgroundStrong: 'hsl(356, 47.6%, 19.2%)',
+    backgroundTransparent: 'hsl(356, 43.4%, 16.4%)',
+    colorHover: 'hsl(358, 75.0%, 59.0%)',
+    colorPress: 'hsl(358, 85.3%, 64.0%)',
+    colorFocus: 'hsl(358, 75.0%, 59.0%)',
+    colorTransparent: 'hsl(358, 100%, 69.5%)',
+    borderColor: 'hsl(358, 75.0%, 59.0%)',
+    borderColorHover: 'hsl(358, 85.3%, 64.0%)',
+    borderColorFocus: 'hsl(358, 65.0%, 40.4%)',
+    borderColorPress: 'hsl(358, 75.0%, 59.0%)',
+    placeholderColor: 'hsl(356, 55.2%, 25.9%)'
+} as Theme
+export const light_ListItem = {
+    background: '#fff',
+    backgroundHover: '#f9f9f9',
+    backgroundPress: 'hsl(0, 0%, 97.3%)',
+    backgroundFocus: 'hsl(0, 0%, 95.1%)',
+    backgroundStrong: '#fff',
+    backgroundTransparent: '#fff',
+    color: 'hsl(0, 0%, 9.0%)',
+    colorHover: 'hsl(0, 0%, 42.5%)',
+    colorPress: 'hsl(0, 0%, 9.0%)',
+    colorFocus: 'hsl(0, 0%, 42.5%)',
+    colorTransparent: 'hsl(0, 0%, 9.0%)',
+    borderColor: 'hsl(0, 0%, 95.1%)',
+    borderColorHover: 'hsl(0, 0%, 94.0%)',
+    borderColorFocus: 'hsl(0, 0%, 97.3%)',
+    borderColorPress: 'hsl(0, 0%, 95.1%)',
+    placeholderColor: 'hsl(0, 0%, 50.3%)'
+} as Theme
+export const light_Card = {
+    background: 'hsl(0, 0%, 97.3%)',
+    backgroundHover: 'hsl(0, 0%, 95.1%)',
+    backgroundPress: 'hsl(0, 0%, 94.0%)',
+    backgroundFocus: 'hsl(0, 0%, 92.0%)',
+    backgroundStrong: '#f9f9f9',
+    backgroundTransparent: '#fff',
+    color: 'hsl(0, 0%, 9.0%)',
+    colorHover: 'hsl(0, 0%, 42.5%)',
+    colorPress: 'hsl(0, 0%, 9.0%)',
+    colorFocus: 'hsl(0, 0%, 42.5%)',
+    colorTransparent: 'hsl(0, 0%, 9.0%)',
+    borderColor: 'hsl(0, 0%, 92.0%)',
+    borderColorHover: 'hsl(0, 0%, 89.5%)',
+    borderColorFocus: 'hsl(0, 0%, 94.0%)',
+    borderColorPress: 'hsl(0, 0%, 92.0%)',
+    placeholderColor: 'hsl(0, 0%, 81.0%)'
+} as Theme
+
+export const light_DrawerFrame = light_Card as Theme
+export const light_Progress = light_Card as Theme
+export const light_TooltipArrow = light_Card as Theme
+export const light_SliderTrack = light_Card as Theme
+export const light_Button = {
+    background: 'hsl(0, 0%, 95.1%)',
+    backgroundHover: 'hsl(0, 0%, 94.0%)',
+    backgroundPress: 'hsl(0, 0%, 92.0%)',
+    backgroundFocus: 'hsl(0, 0%, 89.5%)',
+    backgroundStrong: 'hsl(0, 0%, 97.3%)',
+    backgroundTransparent: '#f9f9f9',
+    color: 'hsl(0, 0%, 9.0%)',
+    colorHover: 'hsl(0, 0%, 42.5%)',
+    colorPress: 'hsl(0, 0%, 9.0%)',
+    colorFocus: 'hsl(0, 0%, 42.5%)',
+    colorTransparent: 'hsl(0, 0%, 42.5%)',
+    borderColor: 'transparent',
+    borderColorHover: 'transparent',
+    borderColorFocus: 'hsl(0, 0%, 92.0%)',
+    borderColorPress: 'hsl(0, 0%, 89.5%)',
+    placeholderColor: 'hsl(0, 0%, 89.5%)'
+} as Theme
+export const light_Checkbox = {
+    background: 'hsl(0, 0%, 95.1%)',
+    backgroundHover: 'hsl(0, 0%, 94.0%)',
+    backgroundPress: 'hsl(0, 0%, 92.0%)',
+    backgroundFocus: 'hsl(0, 0%, 89.5%)',
+    backgroundStrong: 'hsl(0, 0%, 97.3%)',
+    backgroundTransparent: '#f9f9f9',
+    color: 'hsl(0, 0%, 9.0%)',
+    colorHover: 'hsl(0, 0%, 42.5%)',
+    colorPress: 'hsl(0, 0%, 9.0%)',
+    colorFocus: 'hsl(0, 0%, 42.5%)',
+    colorTransparent: 'hsl(0, 0%, 42.5%)',
+    borderColor: 'hsl(0, 0%, 89.5%)',
+    borderColorHover: 'hsl(0, 0%, 81.0%)',
+    borderColorFocus: 'hsl(0, 0%, 92.0%)',
+    borderColorPress: 'hsl(0, 0%, 89.5%)',
+    placeholderColor: 'hsl(0, 0%, 89.5%)'
+} as Theme
+
+export const light_SliderTrackActive = light_Checkbox as Theme
+export const light_Switch = light_Checkbox as Theme
+export const light_TooltipContent = light_Checkbox as Theme
+export const light_SwitchThumb = {
+    background: '#fff',
+    backgroundHover: '#fff',
+    backgroundPress: 'hsl(351, 89.0%, 96.0%)',
+    backgroundFocus: 'hsl(358, 100%, 69.5%)',
+    backgroundStrong: '#fff',
+    backgroundTransparent: '#fff',
+    color: 'hsl(353, 23.0%, 9.8%)',
+    colorHover: 'hsl(357, 34.4%, 12.0%)',
+    colorPress: 'hsl(353, 23.0%, 9.8%)',
+    colorFocus: 'hsl(357, 34.4%, 12.0%)',
+    colorTransparent: 'hsl(353, 23.0%, 9.8%)',
+    borderColor: 'hsl(358, 100%, 69.5%)',
+    borderColorHover: 'hsl(358, 85.3%, 64.0%)',
+    borderColorFocus: 'hsl(351, 89.0%, 96.0%)',
+    borderColorPress: 'hsl(358, 100%, 69.5%)',
+    placeholderColor: 'hsl(357, 34.4%, 12.0%)'
+} as Theme
+
+export const dark_red_SwitchThumb = light_SwitchThumb as Theme
+export const light_SliderThumb = {
+    background: 'hsl(0, 0%, 42.5%)',
+    backgroundHover: 'hsl(0, 0%, 50.3%)',
+    backgroundPress: 'hsl(0, 0%, 56.1%)',
+    backgroundFocus: 'hsl(0, 0%, 81.0%)',
+    backgroundStrong: 'hsl(0, 0%, 9.0%)',
+    backgroundTransparent: 'rgba(10,10,10,0)',
+    color: '#fff',
+    colorHover: '#f9f9f9',
+    colorPress: '#fff',
+    colorFocus: '#f9f9f9',
+    colorTransparent: 'rgba(255,255,255,0)',
+    borderColor: 'hsl(0, 0%, 81.0%)',
+    borderColorHover: 'hsl(0, 0%, 89.5%)',
+    borderColorFocus: 'hsl(0, 0%, 56.1%)',
+    borderColorPress: 'hsl(0, 0%, 81.0%)',
+    placeholderColor: 'hsl(0, 0%, 95.1%)'
+} as Theme
+
+export const light_Tooltip = light_SliderThumb as Theme
+export const light_ProgressIndicator = light_SliderThumb as Theme
+export const light_Input = {
+    background: '#fff',
+    backgroundHover: '#f9f9f9',
+    backgroundPress: 'hsl(0, 0%, 97.3%)',
+    backgroundFocus: 'hsl(0, 0%, 95.1%)',
+    backgroundStrong: '#fff',
+    backgroundTransparent: '#fff',
+    color: 'hsl(0, 0%, 9.0%)',
+    colorHover: 'hsl(0, 0%, 42.5%)',
+    colorPress: 'hsl(0, 0%, 9.0%)',
+    colorFocus: 'hsl(0, 0%, 42.5%)',
+    colorTransparent: 'hsl(0, 0%, 9.0%)',
+    borderColor: 'hsl(0, 0%, 92.0%)',
+    borderColorHover: 'hsl(0, 0%, 89.5%)',
+    borderColorFocus: 'hsl(0, 0%, 94.0%)',
+    borderColorPress: 'hsl(0, 0%, 92.0%)',
+    placeholderColor: 'hsl(0, 0%, 50.3%)'
+} as Theme
+
+export const light_TextArea = light_Input as Theme
+export const dark_ListItem = {
+    color1: '#050505',
+    color2: '#151515',
+    color3: '#191919',
+    color4: '#232323',
+    color5: '#282828',
+    color6: '#323232',
+    color7: '#424242',
+    color8: '#494949',
+    color9: '#545454',
+    color10: '#626262',
+    color11: '#a5a5a5',
+    color12: '#fff',
+    background: '#151515',
+    backgroundHover: '#191919',
+    backgroundPress: '#232323',
+    backgroundFocus: '#282828',
+    backgroundStrong: '#050505',
+    backgroundTransparent: 'rgba(10,10,10,0)',
+    color: '#fff',
+    colorHover: '#a5a5a5',
+    colorPress: '#fff',
+    colorFocus: '#a5a5a5',
+    colorTransparent: 'rgba(255,255,255,0)',
+    borderColor: '#282828',
+    borderColorHover: '#323232',
+    borderColorFocus: '#232323',
+    borderColorPress: '#282828',
+    placeholderColor: '#545454'
+} as Theme
+export const dark_Card = {
+    background: '#191919',
+    backgroundHover: '#232323',
+    backgroundPress: '#282828',
+    backgroundFocus: '#323232',
+    backgroundStrong: '#151515',
+    backgroundTransparent: '#050505',
+    color: '#fff',
+    colorHover: '#a5a5a5',
+    colorPress: '#fff',
+    colorFocus: '#a5a5a5',
+    colorTransparent: '#fff',
+    borderColor: '#323232',
+    borderColorHover: '#424242',
+    borderColorFocus: '#282828',
+    borderColorPress: '#323232',
+    placeholderColor: '#494949'
+} as Theme
+
+export const dark_DrawerFrame = dark_Card as Theme
+export const dark_Progress = dark_Card as Theme
+export const dark_TooltipArrow = dark_Card as Theme
+export const dark_SliderTrack = dark_Card as Theme
+export const dark_Button = {
+    background: '#232323',
+    backgroundHover: '#282828',
+    backgroundPress: '#323232',
+    backgroundFocus: '#424242',
+    backgroundStrong: '#191919',
+    backgroundTransparent: '#151515',
+    color: '#fff',
+    colorHover: '#a5a5a5',
+    colorPress: '#fff',
+    colorFocus: '#a5a5a5',
+    colorTransparent: '#a5a5a5',
+    borderColor: 'transparent',
+    borderColorHover: 'transparent',
+    borderColorFocus: '#323232',
+    borderColorPress: '#424242',
+    placeholderColor: '#424242'
+} as Theme
+export const dark_Checkbox = {
+    background: '#232323',
+    backgroundHover: '#282828',
+    backgroundPress: '#323232',
+    backgroundFocus: '#424242',
+    backgroundStrong: '#191919',
+    backgroundTransparent: '#151515',
+    color: '#fff',
+    colorHover: '#a5a5a5',
+    colorPress: '#fff',
+    colorFocus: '#a5a5a5',
+    colorTransparent: '#a5a5a5',
+    borderColor: '#424242',
+    borderColorHover: '#494949',
+    borderColorFocus: '#323232',
+    borderColorPress: '#424242',
+    placeholderColor: '#424242'
+} as Theme
+
+export const dark_SliderTrackActive = dark_Checkbox as Theme
+export const dark_Switch = dark_Checkbox as Theme
+export const dark_TooltipContent = dark_Checkbox as Theme
+export const dark_SwitchThumb = {
+    background: '#fff',
+    backgroundHover: '#fff',
+    backgroundPress: '#a5a5a5',
+    backgroundFocus: '#626262',
+    backgroundStrong: '#fff',
+    backgroundTransparent: '#fff',
+    color: '#050505',
+    colorHover: '#151515',
+    colorPress: '#050505',
+    colorFocus: '#151515',
+    colorTransparent: '#050505',
+    borderColor: '#626262',
+    borderColorHover: '#545454',
+    borderColorFocus: '#a5a5a5',
+    borderColorPress: '#626262',
+    placeholderColor: '#151515'
+} as Theme
+export const dark_SliderThumb = {
+    background: '#a5a5a5',
+    backgroundHover: '#626262',
+    backgroundPress: '#545454',
+    backgroundFocus: '#494949',
+    backgroundStrong: '#fff',
+    backgroundTransparent: 'rgba(255,255,255,0)',
+    color: '#050505',
+    colorHover: '#151515',
+    colorPress: '#050505',
+    colorFocus: '#151515',
+    colorTransparent: 'rgba(10,10,10,0)',
+    borderColor: '#494949',
+    borderColorHover: '#424242',
+    borderColorFocus: '#545454',
+    borderColorPress: '#494949',
+    placeholderColor: '#232323'
+} as Theme
+
+export const dark_Tooltip = dark_SliderThumb as Theme
+export const dark_ProgressIndicator = dark_SliderThumb as Theme
+export const dark_Input = {
+    background: '#151515',
+    backgroundHover: '#191919',
+    backgroundPress: '#232323',
+    backgroundFocus: '#282828',
+    backgroundStrong: '#050505',
+    backgroundTransparent: 'rgba(10,10,10,0)',
+    color: '#fff',
+    colorHover: '#a5a5a5',
+    colorPress: '#fff',
+    colorFocus: '#a5a5a5',
+    colorTransparent: 'rgba(255,255,255,0)',
+    borderColor: '#323232',
+    borderColorHover: '#424242',
+    borderColorFocus: '#282828',
+    borderColorPress: '#323232',
+    placeholderColor: '#545454'
+} as Theme
+
+export const dark_TextArea = dark_Input as Theme
+export const light_orange_ListItem = {
+    background: 'hsl(24, 70.0%, 99.0%)',
+    backgroundHover: 'hsl(24, 83.3%, 97.6%)',
+    backgroundPress: 'hsl(24, 100%, 95.3%)',
+    backgroundFocus: 'hsl(25, 100%, 92.2%)',
+    backgroundStrong: 'hsl(24, 70.0%, 99.0%)',
+    backgroundTransparent: 'hsl(24, 70.0%, 99.0%)',
+    color: 'hsl(0, 0%, 9.0%)',
+    colorHover: 'hsl(15, 60.0%, 17.0%)',
+    colorPress: 'hsl(0, 0%, 9.0%)',
+    colorFocus: 'hsl(15, 60.0%, 17.0%)',
+    colorTransparent: 'hsl(0, 0%, 9.0%)',
+    borderColor: 'hsl(24, 100%, 95.3%)',
+    borderColorHover: 'hsl(25, 100%, 92.2%)',
+    borderColorFocus: 'hsl(24, 100%, 95.3%)',
+    borderColorPress: 'hsl(24, 100%, 95.3%)',
+    placeholderColor: 'hsl(24, 100%, 37.0%)'
+} as Theme
+export const light_orange_Card = {
+    background: 'hsl(24, 100%, 95.3%)',
+    backgroundHover: 'hsl(25, 100%, 92.2%)',
+    backgroundPress: 'hsl(25, 100%, 88.2%)',
+    backgroundFocus: 'hsl(25, 100%, 82.8%)',
+    backgroundStrong: 'hsl(24, 83.3%, 97.6%)',
+    backgroundTransparent: 'hsl(24, 70.0%, 99.0%)',
+    color: 'hsl(0, 0%, 9.0%)',
+    colorHover: 'hsl(15, 60.0%, 17.0%)',
+    colorPress: 'hsl(0, 0%, 9.0%)',
+    colorFocus: 'hsl(15, 60.0%, 17.0%)',
+    colorTransparent: 'hsl(0, 0%, 9.0%)',
+    borderColor: 'hsl(25, 100%, 88.2%)',
+    borderColorHover: 'hsl(25, 100%, 82.8%)',
+    borderColorFocus: 'hsl(25, 100%, 88.2%)',
+    borderColorPress: 'hsl(25, 100%, 88.2%)',
+    placeholderColor: 'hsl(24, 94.0%, 50.0%)'
+} as Theme
+
+export const light_orange_DrawerFrame = light_orange_Card as Theme
+export const light_orange_Progress = light_orange_Card as Theme
+export const light_orange_TooltipArrow = light_orange_Card as Theme
+export const light_orange_SliderTrack = light_orange_Card as Theme
+export const light_orange_Button = {
+    background: 'hsl(25, 100%, 92.2%)',
+    backgroundHover: 'hsl(25, 100%, 88.2%)',
+    backgroundPress: 'hsl(25, 100%, 82.8%)',
+    backgroundFocus: 'hsl(24, 94.5%, 64.3%)',
+    backgroundStrong: 'hsl(24, 100%, 95.3%)',
+    backgroundTransparent: 'hsl(24, 83.3%, 97.6%)',
+    color: 'hsl(0, 0%, 9.0%)',
+    colorHover: 'hsl(15, 60.0%, 17.0%)',
+    colorPress: 'hsl(0, 0%, 9.0%)',
+    colorFocus: 'hsl(15, 60.0%, 17.0%)',
+    colorTransparent: 'hsl(15, 60.0%, 17.0%)',
+    borderColor: 'transparent',
+    borderColorHover: 'transparent',
+    borderColorFocus: 'hsl(25, 100%, 82.8%)',
+    borderColorPress: 'hsl(25, 100%, 82.8%)',
+    placeholderColor: 'hsl(24, 94.5%, 64.3%)'
+} as Theme
+export const light_orange_Checkbox = {
+    background: 'hsl(25, 100%, 92.2%)',
+    backgroundHover: 'hsl(25, 100%, 88.2%)',
+    backgroundPress: 'hsl(25, 100%, 82.8%)',
+    backgroundFocus: 'hsl(24, 94.5%, 64.3%)',
+    backgroundStrong: 'hsl(24, 100%, 95.3%)',
+    backgroundTransparent: 'hsl(24, 83.3%, 97.6%)',
+    color: 'hsl(0, 0%, 9.0%)',
+    colorHover: 'hsl(15, 60.0%, 17.0%)',
+    colorPress: 'hsl(0, 0%, 9.0%)',
+    colorFocus: 'hsl(15, 60.0%, 17.0%)',
+    colorTransparent: 'hsl(15, 60.0%, 17.0%)',
+    borderColor: 'hsl(25, 100%, 82.8%)',
+    borderColorHover: 'hsl(24, 94.5%, 64.3%)',
+    borderColorFocus: 'hsl(25, 100%, 82.8%)',
+    borderColorPress: 'hsl(25, 100%, 82.8%)',
+    placeholderColor: 'hsl(24, 94.5%, 64.3%)'
+} as Theme
+
+export const light_orange_SliderTrackActive = light_orange_Checkbox as Theme
+export const light_orange_Switch = light_orange_Checkbox as Theme
+export const light_orange_TooltipContent = light_orange_Checkbox as Theme
+export const light_orange_SwitchThumb = {
+    background: 'hsl(0, 0%, 9.0%)',
+    backgroundHover: 'hsl(0, 0%, 9.0%)',
+    backgroundPress: 'hsl(354, 50.0%, 14.6%)',
+    backgroundFocus: 'hsl(358, 65.0%, 48.7%)',
+    backgroundStrong: 'hsl(0, 0%, 9.0%)',
+    backgroundTransparent: 'hsl(0, 0%, 9.0%)',
+    color: 'hsl(359, 100%, 99.4%)',
+    colorHover: 'hsl(359, 100%, 98.6%)',
+    colorPress: 'hsl(359, 100%, 99.4%)',
+    colorFocus: 'hsl(359, 100%, 98.6%)',
+    colorTransparent: 'hsl(359, 100%, 99.4%)',
+    borderColor: 'hsl(354, 50.0%, 14.6%)',
+    borderColorHover: 'hsl(358, 65.0%, 48.7%)',
+    borderColorFocus: 'hsl(354, 50.0%, 14.6%)',
+    borderColorPress: 'hsl(354, 50.0%, 14.6%)',
+    placeholderColor: 'hsl(359, 100%, 98.6%)'
+} as Theme
+
+export const light_yellow_SwitchThumb = light_orange_SwitchThumb as Theme
+export const light_green_SwitchThumb = light_orange_SwitchThumb as Theme
+export const light_blue_SwitchThumb = light_orange_SwitchThumb as Theme
+export const light_purple_SwitchThumb = light_orange_SwitchThumb as Theme
+export const light_pink_SwitchThumb = light_orange_SwitchThumb as Theme
+export const light_red_SwitchThumb = light_orange_SwitchThumb as Theme
+export const light_orange_SliderThumb = {
+    background: 'hsl(15, 60.0%, 17.0%)',
+    backgroundHover: 'hsl(24, 100%, 37.0%)',
+    backgroundPress: 'hsl(24, 100%, 46.5%)',
+    backgroundFocus: 'hsl(24, 94.0%, 50.0%)',
+    backgroundStrong: 'hsl(0, 0%, 9.0%)',
+    backgroundTransparent: 'hsla(15, 60.0%, 17.0%, 0)',
+    color: 'hsl(24, 70.0%, 99.0%)',
+    colorHover: 'hsl(24, 83.3%, 97.6%)',
+    colorPress: 'hsl(24, 70.0%, 99.0%)',
+    colorFocus: 'hsl(24, 83.3%, 97.6%)',
+    colorTransparent: 'hsla(24, 70.0%, 99.0%, 0)',
+    borderColor: 'hsl(24, 100%, 46.5%)',
+    borderColorHover: 'hsl(24, 94.0%, 50.0%)',
+    borderColorFocus: 'hsl(24, 100%, 46.5%)',
+    borderColorPress: 'hsl(24, 100%, 46.5%)',
+    placeholderColor: 'hsl(25, 100%, 92.2%)'
+} as Theme
+
+export const light_orange_Tooltip = light_orange_SliderThumb as Theme
+export const light_orange_ProgressIndicator = light_orange_SliderThumb as Theme
+export const light_orange_Input = {
+    background: 'hsl(24, 70.0%, 99.0%)',
+    backgroundHover: 'hsl(24, 83.3%, 97.6%)',
+    backgroundPress: 'hsl(24, 100%, 95.3%)',
+    backgroundFocus: 'hsl(25, 100%, 92.2%)',
+    backgroundStrong: 'hsl(24, 70.0%, 99.0%)',
+    backgroundTransparent: 'hsl(24, 70.0%, 99.0%)',
+    color: 'hsl(0, 0%, 9.0%)',
+    colorHover: 'hsl(15, 60.0%, 17.0%)',
+    colorPress: 'hsl(0, 0%, 9.0%)',
+    colorFocus: 'hsl(15, 60.0%, 17.0%)',
+    colorTransparent: 'hsl(0, 0%, 9.0%)',
+    borderColor: 'hsl(25, 100%, 88.2%)',
+    borderColorHover: 'hsl(25, 100%, 82.8%)',
+    borderColorFocus: 'hsl(25, 100%, 88.2%)',
+    borderColorPress: 'hsl(25, 100%, 88.2%)',
+    placeholderColor: 'hsl(24, 100%, 37.0%)'
+} as Theme
+
+export const light_orange_TextArea = light_orange_Input as Theme
+export const light_yellow_ListItem = {
+    background: 'hsl(60, 54.0%, 98.5%)',
+    backgroundHover: 'hsl(52, 100%, 95.5%)',
+    backgroundPress: 'hsl(55, 100%, 90.9%)',
+    backgroundFocus: 'hsl(54, 100%, 86.6%)',
+    backgroundStrong: 'hsl(60, 54.0%, 98.5%)',
+    backgroundTransparent: 'hsl(60, 54.0%, 98.5%)',
+    color: 'hsl(0, 0%, 9.0%)',
+    colorHover: 'hsl(40, 55.0%, 13.5%)',
+    colorPress: 'hsl(0, 0%, 9.0%)',
+    colorFocus: 'hsl(40, 55.0%, 13.5%)',
+    colorTransparent: 'hsl(0, 0%, 9.0%)',
+    borderColor: 'hsl(55, 100%, 90.9%)',
+    borderColorHover: 'hsl(54, 100%, 86.6%)',
+    borderColorFocus: 'hsl(55, 100%, 90.9%)',
+    borderColorPress: 'hsl(55, 100%, 90.9%)',
+    placeholderColor: 'hsl(42, 100%, 29.0%)'
+} as Theme
+export const light_yellow_Card = {
+    background: 'hsl(55, 100%, 90.9%)',
+    backgroundHover: 'hsl(54, 100%, 86.6%)',
+    backgroundPress: 'hsl(52, 97.9%, 82.0%)',
+    backgroundFocus: 'hsl(50, 89.4%, 76.1%)',
+    backgroundStrong: 'hsl(52, 100%, 95.5%)',
+    backgroundTransparent: 'hsl(60, 54.0%, 98.5%)',
+    color: 'hsl(0, 0%, 9.0%)',
+    colorHover: 'hsl(40, 55.0%, 13.5%)',
+    colorPress: 'hsl(0, 0%, 9.0%)',
+    colorFocus: 'hsl(40, 55.0%, 13.5%)',
+    colorTransparent: 'hsl(0, 0%, 9.0%)',
+    borderColor: 'hsl(52, 97.9%, 82.0%)',
+    borderColorHover: 'hsl(50, 89.4%, 76.1%)',
+    borderColorFocus: 'hsl(52, 97.9%, 82.0%)',
+    borderColorPress: 'hsl(52, 97.9%, 82.0%)',
+    placeholderColor: 'hsl(53, 92.0%, 50.0%)'
+} as Theme
+
+export const light_yellow_DrawerFrame = light_yellow_Card as Theme
+export const light_yellow_Progress = light_yellow_Card as Theme
+export const light_yellow_TooltipArrow = light_yellow_Card as Theme
+export const light_yellow_SliderTrack = light_yellow_Card as Theme
+export const light_yellow_Button = {
+    background: 'hsl(54, 100%, 86.6%)',
+    backgroundHover: 'hsl(52, 97.9%, 82.0%)',
+    backgroundPress: 'hsl(50, 89.4%, 76.1%)',
+    backgroundFocus: 'hsl(48, 100%, 46.1%)',
+    backgroundStrong: 'hsl(55, 100%, 90.9%)',
+    backgroundTransparent: 'hsl(52, 100%, 95.5%)',
+    color: 'hsl(0, 0%, 9.0%)',
+    colorHover: 'hsl(40, 55.0%, 13.5%)',
+    colorPress: 'hsl(0, 0%, 9.0%)',
+    colorFocus: 'hsl(40, 55.0%, 13.5%)',
+    colorTransparent: 'hsl(40, 55.0%, 13.5%)',
+    borderColor: 'transparent',
+    borderColorHover: 'transparent',
+    borderColorFocus: 'hsl(50, 89.4%, 76.1%)',
+    borderColorPress: 'hsl(50, 89.4%, 76.1%)',
+    placeholderColor: 'hsl(48, 100%, 46.1%)'
+} as Theme
+export const light_yellow_Checkbox = {
+    background: 'hsl(54, 100%, 86.6%)',
+    backgroundHover: 'hsl(52, 97.9%, 82.0%)',
+    backgroundPress: 'hsl(50, 89.4%, 76.1%)',
+    backgroundFocus: 'hsl(48, 100%, 46.1%)',
+    backgroundStrong: 'hsl(55, 100%, 90.9%)',
+    backgroundTransparent: 'hsl(52, 100%, 95.5%)',
+    color: 'hsl(0, 0%, 9.0%)',
+    colorHover: 'hsl(40, 55.0%, 13.5%)',
+    colorPress: 'hsl(0, 0%, 9.0%)',
+    colorFocus: 'hsl(40, 55.0%, 13.5%)',
+    colorTransparent: 'hsl(40, 55.0%, 13.5%)',
+    borderColor: 'hsl(50, 89.4%, 76.1%)',
+    borderColorHover: 'hsl(48, 100%, 46.1%)',
+    borderColorFocus: 'hsl(50, 89.4%, 76.1%)',
+    borderColorPress: 'hsl(50, 89.4%, 76.1%)',
+    placeholderColor: 'hsl(48, 100%, 46.1%)'
+} as Theme
+
+export const light_yellow_SliderTrackActive = light_yellow_Checkbox as Theme
+export const light_yellow_Switch = light_yellow_Checkbox as Theme
+export const light_yellow_TooltipContent = light_yellow_Checkbox as Theme
+export const light_yellow_SliderThumb = {
+    background: 'hsl(40, 55.0%, 13.5%)',
+    backgroundHover: 'hsl(42, 100%, 29.0%)',
+    backgroundPress: 'hsl(50, 100%, 48.5%)',
+    backgroundFocus: 'hsl(53, 92.0%, 50.0%)',
+    backgroundStrong: 'hsl(0, 0%, 9.0%)',
+    backgroundTransparent: 'hsla(40, 55.0%, 13.5%, 0)',
+    color: 'hsl(60, 54.0%, 98.5%)',
+    colorHover: 'hsl(52, 100%, 95.5%)',
+    colorPress: 'hsl(60, 54.0%, 98.5%)',
+    colorFocus: 'hsl(52, 100%, 95.5%)',
+    colorTransparent: 'hsla(60, 54.0%, 98.5%, 0)',
+    borderColor: 'hsl(50, 100%, 48.5%)',
+    borderColorHover: 'hsl(53, 92.0%, 50.0%)',
+    borderColorFocus: 'hsl(50, 100%, 48.5%)',
+    borderColorPress: 'hsl(50, 100%, 48.5%)',
+    placeholderColor: 'hsl(54, 100%, 86.6%)'
+} as Theme
+
+export const light_yellow_Tooltip = light_yellow_SliderThumb as Theme
+export const light_yellow_ProgressIndicator = light_yellow_SliderThumb as Theme
+export const light_yellow_Input = {
+    background: 'hsl(60, 54.0%, 98.5%)',
+    backgroundHover: 'hsl(52, 100%, 95.5%)',
+    backgroundPress: 'hsl(55, 100%, 90.9%)',
+    backgroundFocus: 'hsl(54, 100%, 86.6%)',
+    backgroundStrong: 'hsl(60, 54.0%, 98.5%)',
+    backgroundTransparent: 'hsl(60, 54.0%, 98.5%)',
+    color: 'hsl(0, 0%, 9.0%)',
+    colorHover: 'hsl(40, 55.0%, 13.5%)',
+    colorPress: 'hsl(0, 0%, 9.0%)',
+    colorFocus: 'hsl(40, 55.0%, 13.5%)',
+    colorTransparent: 'hsl(0, 0%, 9.0%)',
+    borderColor: 'hsl(52, 97.9%, 82.0%)',
+    borderColorHover: 'hsl(50, 89.4%, 76.1%)',
+    borderColorFocus: 'hsl(52, 97.9%, 82.0%)',
+    borderColorPress: 'hsl(52, 97.9%, 82.0%)',
+    placeholderColor: 'hsl(42, 100%, 29.0%)'
+} as Theme
+
+export const light_yellow_TextArea = light_yellow_Input as Theme
+export const light_green_ListItem = {
+    background: 'hsl(136, 50.0%, 98.9%)',
+    backgroundHover: 'hsl(138, 62.5%, 96.9%)',
+    backgroundPress: 'hsl(139, 55.2%, 94.5%)',
+    backgroundFocus: 'hsl(140, 48.7%, 91.0%)',
+    backgroundStrong: 'hsl(136, 50.0%, 98.9%)',
+    backgroundTransparent: 'hsl(136, 50.0%, 98.9%)',
+    color: 'hsl(0, 0%, 9.0%)',
+    colorHover: 'hsl(155, 40.0%, 14.0%)',
+    colorPress: 'hsl(0, 0%, 9.0%)',
+    colorFocus: 'hsl(155, 40.0%, 14.0%)',
+    colorTransparent: 'hsl(0, 0%, 9.0%)',
+    borderColor: 'hsl(139, 55.2%, 94.5%)',
+    borderColorHover: 'hsl(140, 48.7%, 91.0%)',
+    borderColorFocus: 'hsl(139, 55.2%, 94.5%)',
+    borderColorPress: 'hsl(139, 55.2%, 94.5%)',
+    placeholderColor: 'hsl(153, 67.0%, 28.5%)'
+} as Theme
+export const light_green_Card = {
+    background: 'hsl(139, 55.2%, 94.5%)',
+    backgroundHover: 'hsl(140, 48.7%, 91.0%)',
+    backgroundPress: 'hsl(141, 43.7%, 86.0%)',
+    backgroundFocus: 'hsl(143, 40.3%, 79.0%)',
+    backgroundStrong: 'hsl(138, 62.5%, 96.9%)',
+    backgroundTransparent: 'hsl(136, 50.0%, 98.9%)',
+    color: 'hsl(0, 0%, 9.0%)',
+    colorHover: 'hsl(155, 40.0%, 14.0%)',
+    colorPress: 'hsl(0, 0%, 9.0%)',
+    colorFocus: 'hsl(155, 40.0%, 14.0%)',
+    colorTransparent: 'hsl(0, 0%, 9.0%)',
+    borderColor: 'hsl(141, 43.7%, 86.0%)',
+    borderColorHover: 'hsl(143, 40.3%, 79.0%)',
+    borderColorFocus: 'hsl(141, 43.7%, 86.0%)',
+    borderColorPress: 'hsl(141, 43.7%, 86.0%)',
+    placeholderColor: 'hsl(151, 55.0%, 41.5%)'
+} as Theme
+
+export const light_green_DrawerFrame = light_green_Card as Theme
+export const light_green_Progress = light_green_Card as Theme
+export const light_green_TooltipArrow = light_green_Card as Theme
+export const light_green_SliderTrack = light_green_Card as Theme
+export const light_green_Button = {
+    background: 'hsl(140, 48.7%, 91.0%)',
+    backgroundHover: 'hsl(141, 43.7%, 86.0%)',
+    backgroundPress: 'hsl(143, 40.3%, 79.0%)',
+    backgroundFocus: 'hsl(151, 40.2%, 54.1%)',
+    backgroundStrong: 'hsl(139, 55.2%, 94.5%)',
+    backgroundTransparent: 'hsl(138, 62.5%, 96.9%)',
+    color: 'hsl(0, 0%, 9.0%)',
+    colorHover: 'hsl(155, 40.0%, 14.0%)',
+    colorPress: 'hsl(0, 0%, 9.0%)',
+    colorFocus: 'hsl(155, 40.0%, 14.0%)',
+    colorTransparent: 'hsl(155, 40.0%, 14.0%)',
+    borderColor: 'transparent',
+    borderColorHover: 'transparent',
+    borderColorFocus: 'hsl(143, 40.3%, 79.0%)',
+    borderColorPress: 'hsl(143, 40.3%, 79.0%)',
+    placeholderColor: 'hsl(151, 40.2%, 54.1%)'
+} as Theme
+export const light_green_Checkbox = {
+    background: 'hsl(140, 48.7%, 91.0%)',
+    backgroundHover: 'hsl(141, 43.7%, 86.0%)',
+    backgroundPress: 'hsl(143, 40.3%, 79.0%)',
+    backgroundFocus: 'hsl(151, 40.2%, 54.1%)',
+    backgroundStrong: 'hsl(139, 55.2%, 94.5%)',
+    backgroundTransparent: 'hsl(138, 62.5%, 96.9%)',
+    color: 'hsl(0, 0%, 9.0%)',
+    colorHover: 'hsl(155, 40.0%, 14.0%)',
+    colorPress: 'hsl(0, 0%, 9.0%)',
+    colorFocus: 'hsl(155, 40.0%, 14.0%)',
+    colorTransparent: 'hsl(155, 40.0%, 14.0%)',
+    borderColor: 'hsl(143, 40.3%, 79.0%)',
+    borderColorHover: 'hsl(151, 40.2%, 54.1%)',
+    borderColorFocus: 'hsl(143, 40.3%, 79.0%)',
+    borderColorPress: 'hsl(143, 40.3%, 79.0%)',
+    placeholderColor: 'hsl(151, 40.2%, 54.1%)'
+} as Theme
+
+export const light_green_SliderTrackActive = light_green_Checkbox as Theme
+export const light_green_Switch = light_green_Checkbox as Theme
+export const light_green_TooltipContent = light_green_Checkbox as Theme
+export const light_green_SliderThumb = {
+    background: 'hsl(155, 40.0%, 14.0%)',
+    backgroundHover: 'hsl(153, 67.0%, 28.5%)',
+    backgroundPress: 'hsl(152, 57.5%, 37.6%)',
+    backgroundFocus: 'hsl(151, 55.0%, 41.5%)',
+    backgroundStrong: 'hsl(0, 0%, 9.0%)',
+    backgroundTransparent: 'hsla(155, 40.0%, 14.0%, 0)',
+    color: 'hsl(136, 50.0%, 98.9%)',
+    colorHover: 'hsl(138, 62.5%, 96.9%)',
+    colorPress: 'hsl(136, 50.0%, 98.9%)',
+    colorFocus: 'hsl(138, 62.5%, 96.9%)',
+    colorTransparent: 'hsla(136, 50.0%, 98.9%, 0)',
+    borderColor: 'hsl(152, 57.5%, 37.6%)',
+    borderColorHover: 'hsl(151, 55.0%, 41.5%)',
+    borderColorFocus: 'hsl(152, 57.5%, 37.6%)',
+    borderColorPress: 'hsl(152, 57.5%, 37.6%)',
+    placeholderColor: 'hsl(140, 48.7%, 91.0%)'
+} as Theme
+
+export const light_green_Tooltip = light_green_SliderThumb as Theme
+export const light_green_ProgressIndicator = light_green_SliderThumb as Theme
+export const light_green_Input = {
+    background: 'hsl(136, 50.0%, 98.9%)',
+    backgroundHover: 'hsl(138, 62.5%, 96.9%)',
+    backgroundPress: 'hsl(139, 55.2%, 94.5%)',
+    backgroundFocus: 'hsl(140, 48.7%, 91.0%)',
+    backgroundStrong: 'hsl(136, 50.0%, 98.9%)',
+    backgroundTransparent: 'hsl(136, 50.0%, 98.9%)',
+    color: 'hsl(0, 0%, 9.0%)',
+    colorHover: 'hsl(155, 40.0%, 14.0%)',
+    colorPress: 'hsl(0, 0%, 9.0%)',
+    colorFocus: 'hsl(155, 40.0%, 14.0%)',
+    colorTransparent: 'hsl(0, 0%, 9.0%)',
+    borderColor: 'hsl(141, 43.7%, 86.0%)',
+    borderColorHover: 'hsl(143, 40.3%, 79.0%)',
+    borderColorFocus: 'hsl(141, 43.7%, 86.0%)',
+    borderColorPress: 'hsl(141, 43.7%, 86.0%)',
+    placeholderColor: 'hsl(153, 67.0%, 28.5%)'
+} as Theme
+
+export const light_green_TextArea = light_green_Input as Theme
+export const light_blue_ListItem = {
+    background: 'hsl(206, 100%, 99.2%)',
+    backgroundHover: 'hsl(210, 100%, 98.0%)',
+    backgroundPress: 'hsl(209, 100%, 96.5%)',
+    backgroundFocus: 'hsl(210, 98.8%, 94.0%)',
+    backgroundStrong: 'hsl(206, 100%, 99.2%)',
+    backgroundTransparent: 'hsl(206, 100%, 99.2%)',
+    color: 'hsl(0, 0%, 9.0%)',
+    colorHover: 'hsl(211, 100%, 15.0%)',
+    colorPress: 'hsl(0, 0%, 9.0%)',
+    colorFocus: 'hsl(211, 100%, 15.0%)',
+    colorTransparent: 'hsl(0, 0%, 9.0%)',
+    borderColor: 'hsl(209, 100%, 96.5%)',
+    borderColorHover: 'hsl(210, 98.8%, 94.0%)',
+    borderColorFocus: 'hsl(209, 100%, 96.5%)',
+    borderColorPress: 'hsl(209, 100%, 96.5%)',
+    placeholderColor: 'hsl(211, 100%, 43.2%)'
+} as Theme
+export const light_blue_Card = {
+    background: 'hsl(209, 100%, 96.5%)',
+    backgroundHover: 'hsl(210, 98.8%, 94.0%)',
+    backgroundPress: 'hsl(209, 95.0%, 90.1%)',
+    backgroundFocus: 'hsl(209, 81.2%, 84.5%)',
+    backgroundStrong: 'hsl(210, 100%, 98.0%)',
+    backgroundTransparent: 'hsl(206, 100%, 99.2%)',
+    color: 'hsl(0, 0%, 9.0%)',
+    colorHover: 'hsl(211, 100%, 15.0%)',
+    colorPress: 'hsl(0, 0%, 9.0%)',
+    colorFocus: 'hsl(211, 100%, 15.0%)',
+    colorTransparent: 'hsl(0, 0%, 9.0%)',
+    borderColor: 'hsl(209, 95.0%, 90.1%)',
+    borderColorHover: 'hsl(209, 81.2%, 84.5%)',
+    borderColorFocus: 'hsl(209, 95.0%, 90.1%)',
+    borderColorPress: 'hsl(209, 95.0%, 90.1%)',
+    placeholderColor: 'hsl(206, 100%, 50.0%)'
+} as Theme
+
+export const light_blue_DrawerFrame = light_blue_Card as Theme
+export const light_blue_Progress = light_blue_Card as Theme
+export const light_blue_TooltipArrow = light_blue_Card as Theme
+export const light_blue_SliderTrack = light_blue_Card as Theme
+export const light_blue_Button = {
+    background: 'hsl(210, 98.8%, 94.0%)',
+    backgroundHover: 'hsl(209, 95.0%, 90.1%)',
+    backgroundPress: 'hsl(209, 81.2%, 84.5%)',
+    backgroundFocus: 'hsl(206, 81.9%, 65.3%)',
+    backgroundStrong: 'hsl(209, 100%, 96.5%)',
+    backgroundTransparent: 'hsl(210, 100%, 98.0%)',
+    color: 'hsl(0, 0%, 9.0%)',
+    colorHover: 'hsl(211, 100%, 15.0%)',
+    colorPress: 'hsl(0, 0%, 9.0%)',
+    colorFocus: 'hsl(211, 100%, 15.0%)',
+    colorTransparent: 'hsl(211, 100%, 15.0%)',
+    borderColor: 'transparent',
+    borderColorHover: 'transparent',
+    borderColorFocus: 'hsl(209, 81.2%, 84.5%)',
+    borderColorPress: 'hsl(209, 81.2%, 84.5%)',
+    placeholderColor: 'hsl(206, 81.9%, 65.3%)'
+} as Theme
+export const light_blue_Checkbox = {
+    background: 'hsl(210, 98.8%, 94.0%)',
+    backgroundHover: 'hsl(209, 95.0%, 90.1%)',
+    backgroundPress: 'hsl(209, 81.2%, 84.5%)',
+    backgroundFocus: 'hsl(206, 81.9%, 65.3%)',
+    backgroundStrong: 'hsl(209, 100%, 96.5%)',
+    backgroundTransparent: 'hsl(210, 100%, 98.0%)',
+    color: 'hsl(0, 0%, 9.0%)',
+    colorHover: 'hsl(211, 100%, 15.0%)',
+    colorPress: 'hsl(0, 0%, 9.0%)',
+    colorFocus: 'hsl(211, 100%, 15.0%)',
+    colorTransparent: 'hsl(211, 100%, 15.0%)',
+    borderColor: 'hsl(209, 81.2%, 84.5%)',
+    borderColorHover: 'hsl(206, 81.9%, 65.3%)',
+    borderColorFocus: 'hsl(209, 81.2%, 84.5%)',
+    borderColorPress: 'hsl(209, 81.2%, 84.5%)',
+    placeholderColor: 'hsl(206, 81.9%, 65.3%)'
+} as Theme
+
+export const light_blue_SliderTrackActive = light_blue_Checkbox as Theme
+export const light_blue_Switch = light_blue_Checkbox as Theme
+export const light_blue_TooltipContent = light_blue_Checkbox as Theme
+export const light_blue_SliderThumb = {
+    background: 'hsl(211, 100%, 15.0%)',
+    backgroundHover: 'hsl(211, 100%, 43.2%)',
+    backgroundPress: 'hsl(208, 100%, 47.3%)',
+    backgroundFocus: 'hsl(206, 100%, 50.0%)',
+    backgroundStrong: 'hsl(0, 0%, 9.0%)',
+    backgroundTransparent: 'hsla(211, 100%, 15.0%, 0)',
+    color: 'hsl(206, 100%, 99.2%)',
+    colorHover: 'hsl(210, 100%, 98.0%)',
+    colorPress: 'hsl(206, 100%, 99.2%)',
+    colorFocus: 'hsl(210, 100%, 98.0%)',
+    colorTransparent: 'hsla(206, 100%, 99.2%, 0)',
+    borderColor: 'hsl(208, 100%, 47.3%)',
+    borderColorHover: 'hsl(206, 100%, 50.0%)',
+    borderColorFocus: 'hsl(208, 100%, 47.3%)',
+    borderColorPress: 'hsl(208, 100%, 47.3%)',
+    placeholderColor: 'hsl(210, 98.8%, 94.0%)'
+} as Theme
+
+export const light_blue_Tooltip = light_blue_SliderThumb as Theme
+export const light_blue_ProgressIndicator = light_blue_SliderThumb as Theme
+export const light_blue_Input = {
+    background: 'hsl(206, 100%, 99.2%)',
+    backgroundHover: 'hsl(210, 100%, 98.0%)',
+    backgroundPress: 'hsl(209, 100%, 96.5%)',
+    backgroundFocus: 'hsl(210, 98.8%, 94.0%)',
+    backgroundStrong: 'hsl(206, 100%, 99.2%)',
+    backgroundTransparent: 'hsl(206, 100%, 99.2%)',
+    color: 'hsl(0, 0%, 9.0%)',
+    colorHover: 'hsl(211, 100%, 15.0%)',
+    colorPress: 'hsl(0, 0%, 9.0%)',
+    colorFocus: 'hsl(211, 100%, 15.0%)',
+    colorTransparent: 'hsl(0, 0%, 9.0%)',
+    borderColor: 'hsl(209, 95.0%, 90.1%)',
+    borderColorHover: 'hsl(209, 81.2%, 84.5%)',
+    borderColorFocus: 'hsl(209, 95.0%, 90.1%)',
+    borderColorPress: 'hsl(209, 95.0%, 90.1%)',
+    placeholderColor: 'hsl(211, 100%, 43.2%)'
+} as Theme
+
+export const light_blue_TextArea = light_blue_Input as Theme
+export const light_purple_ListItem = {
+    background: 'hsl(280, 65.0%, 99.4%)',
+    backgroundHover: 'hsl(276, 100%, 99.0%)',
+    backgroundPress: 'hsl(276, 83.1%, 97.0%)',
+    backgroundFocus: 'hsl(275, 76.4%, 94.7%)',
+    backgroundStrong: 'hsl(280, 65.0%, 99.4%)',
+    backgroundTransparent: 'hsl(280, 65.0%, 99.4%)',
+    color: 'hsl(0, 0%, 9.0%)',
+    colorHover: 'hsl(272, 66.0%, 16.0%)',
+    colorPress: 'hsl(0, 0%, 9.0%)',
+    colorFocus: 'hsl(272, 66.0%, 16.0%)',
+    colorTransparent: 'hsl(0, 0%, 9.0%)',
+    borderColor: 'hsl(276, 83.1%, 97.0%)',
+    borderColorHover: 'hsl(275, 76.4%, 94.7%)',
+    borderColorFocus: 'hsl(276, 83.1%, 97.0%)',
+    borderColorPress: 'hsl(276, 83.1%, 97.0%)',
+    placeholderColor: 'hsl(272, 50.0%, 45.8%)'
+} as Theme
+export const light_purple_Card = {
+    background: 'hsl(276, 83.1%, 97.0%)',
+    backgroundHover: 'hsl(275, 76.4%, 94.7%)',
+    backgroundPress: 'hsl(275, 70.8%, 91.8%)',
+    backgroundFocus: 'hsl(274, 65.4%, 87.8%)',
+    backgroundStrong: 'hsl(276, 100%, 99.0%)',
+    backgroundTransparent: 'hsl(280, 65.0%, 99.4%)',
+    color: 'hsl(0, 0%, 9.0%)',
+    colorHover: 'hsl(272, 66.0%, 16.0%)',
+    colorPress: 'hsl(0, 0%, 9.0%)',
+    colorFocus: 'hsl(272, 66.0%, 16.0%)',
+    colorTransparent: 'hsl(0, 0%, 9.0%)',
+    borderColor: 'hsl(275, 70.8%, 91.8%)',
+    borderColorHover: 'hsl(274, 65.4%, 87.8%)',
+    borderColorFocus: 'hsl(275, 70.8%, 91.8%)',
+    borderColorPress: 'hsl(275, 70.8%, 91.8%)',
+    placeholderColor: 'hsl(272, 51.0%, 54.0%)'
+} as Theme
+
+export const light_purple_DrawerFrame = light_purple_Card as Theme
+export const light_purple_Progress = light_purple_Card as Theme
+export const light_purple_TooltipArrow = light_purple_Card as Theme
+export const light_purple_SliderTrack = light_purple_Card as Theme
+export const light_purple_Button = {
+    background: 'hsl(275, 76.4%, 94.7%)',
+    backgroundHover: 'hsl(275, 70.8%, 91.8%)',
+    backgroundPress: 'hsl(274, 65.4%, 87.8%)',
+    backgroundFocus: 'hsl(272, 60.0%, 73.5%)',
+    backgroundStrong: 'hsl(276, 83.1%, 97.0%)',
+    backgroundTransparent: 'hsl(276, 100%, 99.0%)',
+    color: 'hsl(0, 0%, 9.0%)',
+    colorHover: 'hsl(272, 66.0%, 16.0%)',
+    colorPress: 'hsl(0, 0%, 9.0%)',
+    colorFocus: 'hsl(272, 66.0%, 16.0%)',
+    colorTransparent: 'hsl(272, 66.0%, 16.0%)',
+    borderColor: 'transparent',
+    borderColorHover: 'transparent',
+    borderColorFocus: 'hsl(274, 65.4%, 87.8%)',
+    borderColorPress: 'hsl(274, 65.4%, 87.8%)',
+    placeholderColor: 'hsl(272, 60.0%, 73.5%)'
+} as Theme
+export const light_purple_Checkbox = {
+    background: 'hsl(275, 76.4%, 94.7%)',
+    backgroundHover: 'hsl(275, 70.8%, 91.8%)',
+    backgroundPress: 'hsl(274, 65.4%, 87.8%)',
+    backgroundFocus: 'hsl(272, 60.0%, 73.5%)',
+    backgroundStrong: 'hsl(276, 83.1%, 97.0%)',
+    backgroundTransparent: 'hsl(276, 100%, 99.0%)',
+    color: 'hsl(0, 0%, 9.0%)',
+    colorHover: 'hsl(272, 66.0%, 16.0%)',
+    colorPress: 'hsl(0, 0%, 9.0%)',
+    colorFocus: 'hsl(272, 66.0%, 16.0%)',
+    colorTransparent: 'hsl(272, 66.0%, 16.0%)',
+    borderColor: 'hsl(274, 65.4%, 87.8%)',
+    borderColorHover: 'hsl(272, 60.0%, 73.5%)',
+    borderColorFocus: 'hsl(274, 65.4%, 87.8%)',
+    borderColorPress: 'hsl(274, 65.4%, 87.8%)',
+    placeholderColor: 'hsl(272, 60.0%, 73.5%)'
+} as Theme
+
+export const light_purple_SliderTrackActive = light_purple_Checkbox as Theme
+export const light_purple_Switch = light_purple_Checkbox as Theme
+export const light_purple_TooltipContent = light_purple_Checkbox as Theme
+export const light_purple_SliderThumb = {
+    background: 'hsl(272, 66.0%, 16.0%)',
+    backgroundHover: 'hsl(272, 50.0%, 45.8%)',
+    backgroundPress: 'hsl(272, 46.8%, 50.3%)',
+    backgroundFocus: 'hsl(272, 51.0%, 54.0%)',
+    backgroundStrong: 'hsl(0, 0%, 9.0%)',
+    backgroundTransparent: 'hsla(272, 66.0%, 16.0%, 0)',
+    color: 'hsl(280, 65.0%, 99.4%)',
+    colorHover: 'hsl(276, 100%, 99.0%)',
+    colorPress: 'hsl(280, 65.0%, 99.4%)',
+    colorFocus: 'hsl(276, 100%, 99.0%)',
+    colorTransparent: 'hsla(280, 65.0%, 99.4%, 0)',
+    borderColor: 'hsl(272, 46.8%, 50.3%)',
+    borderColorHover: 'hsl(272, 51.0%, 54.0%)',
+    borderColorFocus: 'hsl(272, 46.8%, 50.3%)',
+    borderColorPress: 'hsl(272, 46.8%, 50.3%)',
+    placeholderColor: 'hsl(275, 76.4%, 94.7%)'
+} as Theme
+
+export const light_purple_Tooltip = light_purple_SliderThumb as Theme
+export const light_purple_ProgressIndicator = light_purple_SliderThumb as Theme
+export const light_purple_Input = {
+    background: 'hsl(280, 65.0%, 99.4%)',
+    backgroundHover: 'hsl(276, 100%, 99.0%)',
+    backgroundPress: 'hsl(276, 83.1%, 97.0%)',
+    backgroundFocus: 'hsl(275, 76.4%, 94.7%)',
+    backgroundStrong: 'hsl(280, 65.0%, 99.4%)',
+    backgroundTransparent: 'hsl(280, 65.0%, 99.4%)',
+    color: 'hsl(0, 0%, 9.0%)',
+    colorHover: 'hsl(272, 66.0%, 16.0%)',
+    colorPress: 'hsl(0, 0%, 9.0%)',
+    colorFocus: 'hsl(272, 66.0%, 16.0%)',
+    colorTransparent: 'hsl(0, 0%, 9.0%)',
+    borderColor: 'hsl(275, 70.8%, 91.8%)',
+    borderColorHover: 'hsl(274, 65.4%, 87.8%)',
+    borderColorFocus: 'hsl(275, 70.8%, 91.8%)',
+    borderColorPress: 'hsl(275, 70.8%, 91.8%)',
+    placeholderColor: 'hsl(272, 50.0%, 45.8%)'
+} as Theme
+
+export const light_purple_TextArea = light_purple_Input as Theme
+export const light_pink_ListItem = {
+    background: 'hsl(322, 100%, 99.4%)',
+    backgroundHover: 'hsl(323, 100%, 98.4%)',
+    backgroundPress: 'hsl(323, 86.3%, 96.5%)',
+    backgroundFocus: 'hsl(323, 78.7%, 94.2%)',
+    backgroundStrong: 'hsl(322, 100%, 99.4%)',
+    backgroundTransparent: 'hsl(322, 100%, 99.4%)',
+    color: 'hsl(0, 0%, 9.0%)',
+    colorHover: 'hsl(320, 70.0%, 13.5%)',
+    colorPress: 'hsl(0, 0%, 9.0%)',
+    colorFocus: 'hsl(320, 70.0%, 13.5%)',
+    colorTransparent: 'hsl(0, 0%, 9.0%)',
+    borderColor: 'hsl(323, 86.3%, 96.5%)',
+    borderColorHover: 'hsl(323, 78.7%, 94.2%)',
+    borderColorFocus: 'hsl(323, 86.3%, 96.5%)',
+    borderColorPress: 'hsl(323, 86.3%, 96.5%)',
+    placeholderColor: 'hsl(322, 75.0%, 46.0%)'
+} as Theme
+export const light_pink_Card = {
+    background: 'hsl(323, 86.3%, 96.5%)',
+    backgroundHover: 'hsl(323, 78.7%, 94.2%)',
+    backgroundPress: 'hsl(323, 72.2%, 91.1%)',
+    backgroundFocus: 'hsl(323, 66.3%, 86.6%)',
+    backgroundStrong: 'hsl(323, 100%, 98.4%)',
+    backgroundTransparent: 'hsl(322, 100%, 99.4%)',
+    color: 'hsl(0, 0%, 9.0%)',
+    colorHover: 'hsl(320, 70.0%, 13.5%)',
+    colorPress: 'hsl(0, 0%, 9.0%)',
+    colorFocus: 'hsl(320, 70.0%, 13.5%)',
+    colorTransparent: 'hsl(0, 0%, 9.0%)',
+    borderColor: 'hsl(323, 72.2%, 91.1%)',
+    borderColorHover: 'hsl(323, 66.3%, 86.6%)',
+    borderColorFocus: 'hsl(323, 72.2%, 91.1%)',
+    borderColorPress: 'hsl(323, 72.2%, 91.1%)',
+    placeholderColor: 'hsl(322, 65.0%, 54.5%)'
+} as Theme
+
+export const light_pink_DrawerFrame = light_pink_Card as Theme
+export const light_pink_Progress = light_pink_Card as Theme
+export const light_pink_TooltipArrow = light_pink_Card as Theme
+export const light_pink_SliderTrack = light_pink_Card as Theme
+export const light_pink_Button = {
+    background: 'hsl(323, 78.7%, 94.2%)',
+    backgroundHover: 'hsl(323, 72.2%, 91.1%)',
+    backgroundPress: 'hsl(323, 66.3%, 86.6%)',
+    backgroundFocus: 'hsl(323, 60.3%, 72.4%)',
+    backgroundStrong: 'hsl(323, 86.3%, 96.5%)',
+    backgroundTransparent: 'hsl(323, 100%, 98.4%)',
+    color: 'hsl(0, 0%, 9.0%)',
+    colorHover: 'hsl(320, 70.0%, 13.5%)',
+    colorPress: 'hsl(0, 0%, 9.0%)',
+    colorFocus: 'hsl(320, 70.0%, 13.5%)',
+    colorTransparent: 'hsl(320, 70.0%, 13.5%)',
+    borderColor: 'transparent',
+    borderColorHover: 'transparent',
+    borderColorFocus: 'hsl(323, 66.3%, 86.6%)',
+    borderColorPress: 'hsl(323, 66.3%, 86.6%)',
+    placeholderColor: 'hsl(323, 60.3%, 72.4%)'
+} as Theme
+export const light_pink_Checkbox = {
+    background: 'hsl(323, 78.7%, 94.2%)',
+    backgroundHover: 'hsl(323, 72.2%, 91.1%)',
+    backgroundPress: 'hsl(323, 66.3%, 86.6%)',
+    backgroundFocus: 'hsl(323, 60.3%, 72.4%)',
+    backgroundStrong: 'hsl(323, 86.3%, 96.5%)',
+    backgroundTransparent: 'hsl(323, 100%, 98.4%)',
+    color: 'hsl(0, 0%, 9.0%)',
+    colorHover: 'hsl(320, 70.0%, 13.5%)',
+    colorPress: 'hsl(0, 0%, 9.0%)',
+    colorFocus: 'hsl(320, 70.0%, 13.5%)',
+    colorTransparent: 'hsl(320, 70.0%, 13.5%)',
+    borderColor: 'hsl(323, 66.3%, 86.6%)',
+    borderColorHover: 'hsl(323, 60.3%, 72.4%)',
+    borderColorFocus: 'hsl(323, 66.3%, 86.6%)',
+    borderColorPress: 'hsl(323, 66.3%, 86.6%)',
+    placeholderColor: 'hsl(323, 60.3%, 72.4%)'
+} as Theme
+
+export const light_pink_SliderTrackActive = light_pink_Checkbox as Theme
+export const light_pink_Switch = light_pink_Checkbox as Theme
+export const light_pink_TooltipContent = light_pink_Checkbox as Theme
+export const light_pink_SliderThumb = {
+    background: 'hsl(320, 70.0%, 13.5%)',
+    backgroundHover: 'hsl(322, 75.0%, 46.0%)',
+    backgroundPress: 'hsl(322, 63.9%, 50.7%)',
+    backgroundFocus: 'hsl(322, 65.0%, 54.5%)',
+    backgroundStrong: 'hsl(0, 0%, 9.0%)',
+    backgroundTransparent: 'hsla(320, 70.0%, 13.5%, 0)',
+    color: 'hsl(322, 100%, 99.4%)',
+    colorHover: 'hsl(323, 100%, 98.4%)',
+    colorPress: 'hsl(322, 100%, 99.4%)',
+    colorFocus: 'hsl(323, 100%, 98.4%)',
+    colorTransparent: 'hsla(322, 100%, 99.4%, 0)',
+    borderColor: 'hsl(322, 63.9%, 50.7%)',
+    borderColorHover: 'hsl(322, 65.0%, 54.5%)',
+    borderColorFocus: 'hsl(322, 63.9%, 50.7%)',
+    borderColorPress: 'hsl(322, 63.9%, 50.7%)',
+    placeholderColor: 'hsl(323, 78.7%, 94.2%)'
+} as Theme
+
+export const light_pink_Tooltip = light_pink_SliderThumb as Theme
+export const light_pink_ProgressIndicator = light_pink_SliderThumb as Theme
+export const light_pink_Input = {
+    background: 'hsl(322, 100%, 99.4%)',
+    backgroundHover: 'hsl(323, 100%, 98.4%)',
+    backgroundPress: 'hsl(323, 86.3%, 96.5%)',
+    backgroundFocus: 'hsl(323, 78.7%, 94.2%)',
+    backgroundStrong: 'hsl(322, 100%, 99.4%)',
+    backgroundTransparent: 'hsl(322, 100%, 99.4%)',
+    color: 'hsl(0, 0%, 9.0%)',
+    colorHover: 'hsl(320, 70.0%, 13.5%)',
+    colorPress: 'hsl(0, 0%, 9.0%)',
+    colorFocus: 'hsl(320, 70.0%, 13.5%)',
+    colorTransparent: 'hsl(0, 0%, 9.0%)',
+    borderColor: 'hsl(323, 72.2%, 91.1%)',
+    borderColorHover: 'hsl(323, 66.3%, 86.6%)',
+    borderColorFocus: 'hsl(323, 72.2%, 91.1%)',
+    borderColorPress: 'hsl(323, 72.2%, 91.1%)',
+    placeholderColor: 'hsl(322, 75.0%, 46.0%)'
+} as Theme
+
+export const light_pink_TextArea = light_pink_Input as Theme
+export const light_red_ListItem = {
+    background: 'hsl(359, 100%, 99.4%)',
+    backgroundHover: 'hsl(359, 100%, 98.6%)',
+    backgroundPress: 'hsl(360, 100%, 96.8%)',
+    backgroundFocus: 'hsl(360, 97.9%, 94.8%)',
+    backgroundStrong: 'hsl(359, 100%, 99.4%)',
+    backgroundTransparent: 'hsl(359, 100%, 99.4%)',
+    color: 'hsl(0, 0%, 9.0%)',
+    colorHover: 'hsl(354, 50.0%, 14.6%)',
+    colorPress: 'hsl(0, 0%, 9.0%)',
+    colorFocus: 'hsl(354, 50.0%, 14.6%)',
+    colorTransparent: 'hsl(0, 0%, 9.0%)',
+    borderColor: 'hsl(360, 100%, 96.8%)',
+    borderColorHover: 'hsl(360, 97.9%, 94.8%)',
+    borderColorFocus: 'hsl(360, 100%, 96.8%)',
+    borderColorPress: 'hsl(360, 100%, 96.8%)',
+    placeholderColor: 'hsl(358, 65.0%, 48.7%)'
+} as Theme
+export const light_red_Card = {
+    background: 'hsl(360, 100%, 96.8%)',
+    backgroundHover: 'hsl(360, 97.9%, 94.8%)',
+    backgroundPress: 'hsl(360, 90.2%, 91.9%)',
+    backgroundFocus: 'hsl(360, 81.7%, 87.8%)',
+    backgroundStrong: 'hsl(359, 100%, 98.6%)',
+    backgroundTransparent: 'hsl(359, 100%, 99.4%)',
+    color: 'hsl(0, 0%, 9.0%)',
+    colorHover: 'hsl(354, 50.0%, 14.6%)',
+    colorPress: 'hsl(0, 0%, 9.0%)',
+    colorFocus: 'hsl(354, 50.0%, 14.6%)',
+    colorTransparent: 'hsl(0, 0%, 9.0%)',
+    borderColor: 'hsl(360, 90.2%, 91.9%)',
+    borderColorHover: 'hsl(360, 81.7%, 87.8%)',
+    borderColorFocus: 'hsl(360, 90.2%, 91.9%)',
+    borderColorPress: 'hsl(360, 90.2%, 91.9%)',
+    placeholderColor: 'hsl(358, 75.0%, 59.0%)'
+} as Theme
+
+export const light_red_DrawerFrame = light_red_Card as Theme
+export const light_red_Progress = light_red_Card as Theme
+export const light_red_TooltipArrow = light_red_Card as Theme
+export const light_red_SliderTrack = light_red_Card as Theme
+export const light_red_Button = {
+    background: 'hsl(360, 97.9%, 94.8%)',
+    backgroundHover: 'hsl(360, 90.2%, 91.9%)',
+    backgroundPress: 'hsl(360, 81.7%, 87.8%)',
+    backgroundFocus: 'hsl(359, 69.5%, 74.3%)',
+    backgroundStrong: 'hsl(360, 100%, 96.8%)',
+    backgroundTransparent: 'hsl(359, 100%, 98.6%)',
+    color: 'hsl(0, 0%, 9.0%)',
+    colorHover: 'hsl(354, 50.0%, 14.6%)',
+    colorPress: 'hsl(0, 0%, 9.0%)',
+    colorFocus: 'hsl(354, 50.0%, 14.6%)',
+    colorTransparent: 'hsl(354, 50.0%, 14.6%)',
+    borderColor: 'transparent',
+    borderColorHover: 'transparent',
+    borderColorFocus: 'hsl(360, 81.7%, 87.8%)',
+    borderColorPress: 'hsl(360, 81.7%, 87.8%)',
+    placeholderColor: 'hsl(359, 69.5%, 74.3%)'
+} as Theme
+export const light_red_Checkbox = {
+    background: 'hsl(360, 97.9%, 94.8%)',
+    backgroundHover: 'hsl(360, 90.2%, 91.9%)',
+    backgroundPress: 'hsl(360, 81.7%, 87.8%)',
+    backgroundFocus: 'hsl(359, 69.5%, 74.3%)',
+    backgroundStrong: 'hsl(360, 100%, 96.8%)',
+    backgroundTransparent: 'hsl(359, 100%, 98.6%)',
+    color: 'hsl(0, 0%, 9.0%)',
+    colorHover: 'hsl(354, 50.0%, 14.6%)',
+    colorPress: 'hsl(0, 0%, 9.0%)',
+    colorFocus: 'hsl(354, 50.0%, 14.6%)',
+    colorTransparent: 'hsl(354, 50.0%, 14.6%)',
+    borderColor: 'hsl(360, 81.7%, 87.8%)',
+    borderColorHover: 'hsl(359, 69.5%, 74.3%)',
+    borderColorFocus: 'hsl(360, 81.7%, 87.8%)',
+    borderColorPress: 'hsl(360, 81.7%, 87.8%)',
+    placeholderColor: 'hsl(359, 69.5%, 74.3%)'
+} as Theme
+
+export const light_red_SliderTrackActive = light_red_Checkbox as Theme
+export const light_red_Switch = light_red_Checkbox as Theme
+export const light_red_TooltipContent = light_red_Checkbox as Theme
+export const light_red_SliderThumb = {
+    background: 'hsl(354, 50.0%, 14.6%)',
+    backgroundHover: 'hsl(358, 65.0%, 48.7%)',
+    backgroundPress: 'hsl(358, 69.4%, 55.2%)',
+    backgroundFocus: 'hsl(358, 75.0%, 59.0%)',
+    backgroundStrong: 'hsl(0, 0%, 9.0%)',
+    backgroundTransparent: 'hsla(354, 50.0%, 14.6%, 0)',
+    color: 'hsl(359, 100%, 99.4%)',
+    colorHover: 'hsl(359, 100%, 98.6%)',
+    colorPress: 'hsl(359, 100%, 99.4%)',
+    colorFocus: 'hsl(359, 100%, 98.6%)',
+    colorTransparent: 'hsla(359, 100%, 99.4%, 0)',
+    borderColor: 'hsl(358, 69.4%, 55.2%)',
+    borderColorHover: 'hsl(358, 75.0%, 59.0%)',
+    borderColorFocus: 'hsl(358, 69.4%, 55.2%)',
+    borderColorPress: 'hsl(358, 69.4%, 55.2%)',
+    placeholderColor: 'hsl(360, 97.9%, 94.8%)'
+} as Theme
+
+export const light_red_Tooltip = light_red_SliderThumb as Theme
+export const light_red_ProgressIndicator = light_red_SliderThumb as Theme
+export const light_red_Input = {
+    background: 'hsl(359, 100%, 99.4%)',
+    backgroundHover: 'hsl(359, 100%, 98.6%)',
+    backgroundPress: 'hsl(360, 100%, 96.8%)',
+    backgroundFocus: 'hsl(360, 97.9%, 94.8%)',
+    backgroundStrong: 'hsl(359, 100%, 99.4%)',
+    backgroundTransparent: 'hsl(359, 100%, 99.4%)',
+    color: 'hsl(0, 0%, 9.0%)',
+    colorHover: 'hsl(354, 50.0%, 14.6%)',
+    colorPress: 'hsl(0, 0%, 9.0%)',
+    colorFocus: 'hsl(354, 50.0%, 14.6%)',
+    colorTransparent: 'hsl(0, 0%, 9.0%)',
+    borderColor: 'hsl(360, 90.2%, 91.9%)',
+    borderColorHover: 'hsl(360, 81.7%, 87.8%)',
+    borderColorFocus: 'hsl(360, 90.2%, 91.9%)',
+    borderColorPress: 'hsl(360, 90.2%, 91.9%)',
+    placeholderColor: 'hsl(358, 65.0%, 48.7%)'
+} as Theme
+
+export const light_red_TextArea = light_red_Input as Theme
+export const dark_orange_Card = {
+    background: 'hsl(26, 91.1%, 11.6%)',
+    backgroundHover: 'hsl(25, 88.3%, 14.1%)',
+    backgroundPress: 'hsl(24, 87.6%, 16.6%)',
+    backgroundFocus: 'hsl(24, 88.6%, 19.8%)',
+    backgroundStrong: 'hsl(28, 100%, 8.4%)',
+    backgroundTransparent: 'hsl(30, 70.0%, 7.2%)',
+    color: '#fff',
+    colorHover: 'hsl(24, 97.0%, 93.2%)',
+    colorPress: '#fff',
+    colorFocus: 'hsl(24, 97.0%, 93.2%)',
+    colorTransparent: '#fff',
+    borderColor: 'hsl(24, 88.6%, 19.8%)',
+    borderColorHover: 'hsl(25, 100%, 29.0%)',
+    borderColorFocus: 'hsl(24, 87.6%, 16.6%)',
+    borderColorPress: 'hsl(24, 88.6%, 19.8%)',
+    placeholderColor: 'hsl(24, 94.0%, 50.0%)'
+} as Theme
+
+export const dark_orange_DrawerFrame = dark_orange_Card as Theme
+export const dark_orange_Progress = dark_orange_Card as Theme
+export const dark_orange_TooltipArrow = dark_orange_Card as Theme
+export const dark_orange_SliderTrack = dark_orange_Card as Theme
+export const dark_orange_Button = {
+    background: 'hsl(25, 88.3%, 14.1%)',
+    backgroundHover: 'hsl(24, 87.6%, 16.6%)',
+    backgroundPress: 'hsl(24, 88.6%, 19.8%)',
+    backgroundFocus: 'hsl(25, 100%, 29.0%)',
+    backgroundStrong: 'hsl(26, 91.1%, 11.6%)',
+    backgroundTransparent: 'hsl(28, 100%, 8.4%)',
+    color: '#fff',
+    colorHover: 'hsl(24, 97.0%, 93.2%)',
+    colorPress: '#fff',
+    colorFocus: 'hsl(24, 97.0%, 93.2%)',
+    colorTransparent: 'hsl(24, 97.0%, 93.2%)',
+    borderColor: 'transparent',
+    borderColorHover: 'transparent',
+    borderColorFocus: 'hsl(24, 88.6%, 19.8%)',
+    borderColorPress: 'hsl(25, 100%, 29.0%)',
+    placeholderColor: 'hsl(25, 100%, 29.0%)'
+} as Theme
+export const dark_orange_Checkbox = {
+    background: 'hsl(25, 88.3%, 14.1%)',
+    backgroundHover: 'hsl(24, 87.6%, 16.6%)',
+    backgroundPress: 'hsl(24, 88.6%, 19.8%)',
+    backgroundFocus: 'hsl(25, 100%, 29.0%)',
+    backgroundStrong: 'hsl(26, 91.1%, 11.6%)',
+    backgroundTransparent: 'hsl(28, 100%, 8.4%)',
+    color: '#fff',
+    colorHover: 'hsl(24, 97.0%, 93.2%)',
+    colorPress: '#fff',
+    colorFocus: 'hsl(24, 97.0%, 93.2%)',
+    colorTransparent: 'hsl(24, 97.0%, 93.2%)',
+    borderColor: 'hsl(25, 100%, 29.0%)',
+    borderColorHover: 'hsl(24, 94.0%, 50.0%)',
+    borderColorFocus: 'hsl(24, 88.6%, 19.8%)',
+    borderColorPress: 'hsl(25, 100%, 29.0%)',
+    placeholderColor: 'hsl(25, 100%, 29.0%)'
+} as Theme
+
+export const dark_orange_SliderTrackActive = dark_orange_Checkbox as Theme
+export const dark_orange_Switch = dark_orange_Checkbox as Theme
+export const dark_orange_TooltipContent = dark_orange_Checkbox as Theme
+export const dark_orange_SwitchThumb = {
+    background: '#fff',
+    backgroundHover: '#fff',
+    backgroundPress: 'hsl(24, 97.0%, 93.2%)',
+    backgroundFocus: 'hsl(24, 100%, 62.2%)',
+    backgroundStrong: '#fff',
+    backgroundTransparent: '#fff',
+    color: 'hsl(30, 70.0%, 7.2%)',
+    colorHover: 'hsl(28, 100%, 8.4%)',
+    colorPress: 'hsl(30, 70.0%, 7.2%)',
+    colorFocus: 'hsl(28, 100%, 8.4%)',
+    colorTransparent: 'hsl(30, 70.0%, 7.2%)',
+    borderColor: 'hsl(24, 100%, 62.2%)',
+    borderColorHover: 'hsl(24, 100%, 58.5%)',
+    borderColorFocus: 'hsl(24, 97.0%, 93.2%)',
+    borderColorPress: 'hsl(24, 100%, 62.2%)',
+    placeholderColor: 'hsl(28, 100%, 8.4%)'
+} as Theme
+export const dark_orange_SliderThumb = {
+    background: 'hsl(24, 97.0%, 93.2%)',
+    backgroundHover: 'hsl(24, 100%, 62.2%)',
+    backgroundPress: 'hsl(24, 100%, 58.5%)',
+    backgroundFocus: 'hsl(24, 94.0%, 50.0%)',
+    backgroundStrong: '#fff',
+    backgroundTransparent: 'hsla(24, 97.0%, 93.2%, 0)',
+    color: 'hsl(30, 70.0%, 7.2%)',
+    colorHover: 'hsl(28, 100%, 8.4%)',
+    colorPress: 'hsl(30, 70.0%, 7.2%)',
+    colorFocus: 'hsl(28, 100%, 8.4%)',
+    colorTransparent: 'hsla(30, 70.0%, 7.2%, 0)',
+    borderColor: 'hsl(24, 94.0%, 50.0%)',
+    borderColorHover: 'hsl(25, 100%, 29.0%)',
+    borderColorFocus: 'hsl(24, 100%, 58.5%)',
+    borderColorPress: 'hsl(24, 94.0%, 50.0%)',
+    placeholderColor: 'hsl(25, 88.3%, 14.1%)'
+} as Theme
+
+export const dark_orange_Tooltip = dark_orange_SliderThumb as Theme
+export const dark_orange_ProgressIndicator = dark_orange_SliderThumb as Theme
+export const dark_orange_Input = {
+    background: 'hsl(28, 100%, 8.4%)',
+    backgroundHover: 'hsl(26, 91.1%, 11.6%)',
+    backgroundPress: 'hsl(25, 88.3%, 14.1%)',
+    backgroundFocus: 'hsl(24, 87.6%, 16.6%)',
+    backgroundStrong: 'hsl(30, 70.0%, 7.2%)',
+    backgroundTransparent: 'hsla(30, 70.0%, 7.2%, 0)',
+    color: '#fff',
+    colorHover: 'hsl(24, 97.0%, 93.2%)',
+    colorPress: '#fff',
+    colorFocus: 'hsl(24, 97.0%, 93.2%)',
+    colorTransparent: 'hsla(24, 97.0%, 93.2%, 0)',
+    borderColor: 'hsl(24, 88.6%, 19.8%)',
+    borderColorHover: 'hsl(25, 100%, 29.0%)',
+    borderColorFocus: 'hsl(24, 87.6%, 16.6%)',
+    borderColorPress: 'hsl(24, 88.6%, 19.8%)',
+    placeholderColor: 'hsl(24, 100%, 58.5%)'
+} as Theme
+
+export const dark_orange_TextArea = dark_orange_Input as Theme
+export const dark_yellow_Card = {
+    background: 'hsl(45, 100%, 8.7%)',
+    backgroundHover: 'hsl(45, 100%, 10.4%)',
+    backgroundPress: 'hsl(47, 100%, 12.1%)',
+    backgroundFocus: 'hsl(49, 100%, 14.3%)',
+    backgroundStrong: 'hsl(46, 100%, 6.7%)',
+    backgroundTransparent: 'hsl(45, 100%, 5.5%)',
+    color: '#fff',
+    colorHover: 'hsl(53, 100%, 91.0%)',
+    colorPress: '#fff',
+    colorFocus: 'hsl(53, 100%, 91.0%)',
+    colorTransparent: '#fff',
+    borderColor: 'hsl(49, 100%, 14.3%)',
+    borderColorHover: 'hsl(50, 100%, 22.0%)',
+    borderColorFocus: 'hsl(47, 100%, 12.1%)',
+    borderColorPress: 'hsl(49, 100%, 14.3%)',
+    placeholderColor: 'hsl(53, 92.0%, 50.0%)'
+} as Theme
+
+export const dark_yellow_DrawerFrame = dark_yellow_Card as Theme
+export const dark_yellow_Progress = dark_yellow_Card as Theme
+export const dark_yellow_TooltipArrow = dark_yellow_Card as Theme
+export const dark_yellow_SliderTrack = dark_yellow_Card as Theme
+export const dark_yellow_Button = {
+    background: 'hsl(45, 100%, 10.4%)',
+    backgroundHover: 'hsl(47, 100%, 12.1%)',
+    backgroundPress: 'hsl(49, 100%, 14.3%)',
+    backgroundFocus: 'hsl(50, 100%, 22.0%)',
+    backgroundStrong: 'hsl(45, 100%, 8.7%)',
+    backgroundTransparent: 'hsl(46, 100%, 6.7%)',
+    color: '#fff',
+    colorHover: 'hsl(53, 100%, 91.0%)',
+    colorPress: '#fff',
+    colorFocus: 'hsl(53, 100%, 91.0%)',
+    colorTransparent: 'hsl(53, 100%, 91.0%)',
+    borderColor: 'transparent',
+    borderColorHover: 'transparent',
+    borderColorFocus: 'hsl(49, 100%, 14.3%)',
+    borderColorPress: 'hsl(50, 100%, 22.0%)',
+    placeholderColor: 'hsl(50, 100%, 22.0%)'
+} as Theme
+export const dark_yellow_Checkbox = {
+    background: 'hsl(45, 100%, 10.4%)',
+    backgroundHover: 'hsl(47, 100%, 12.1%)',
+    backgroundPress: 'hsl(49, 100%, 14.3%)',
+    backgroundFocus: 'hsl(50, 100%, 22.0%)',
+    backgroundStrong: 'hsl(45, 100%, 8.7%)',
+    backgroundTransparent: 'hsl(46, 100%, 6.7%)',
+    color: '#fff',
+    colorHover: 'hsl(53, 100%, 91.0%)',
+    colorPress: '#fff',
+    colorFocus: 'hsl(53, 100%, 91.0%)',
+    colorTransparent: 'hsl(53, 100%, 91.0%)',
+    borderColor: 'hsl(50, 100%, 22.0%)',
+    borderColorHover: 'hsl(53, 92.0%, 50.0%)',
+    borderColorFocus: 'hsl(49, 100%, 14.3%)',
+    borderColorPress: 'hsl(50, 100%, 22.0%)',
+    placeholderColor: 'hsl(50, 100%, 22.0%)'
+} as Theme
+
+export const dark_yellow_SliderTrackActive = dark_yellow_Checkbox as Theme
+export const dark_yellow_Switch = dark_yellow_Checkbox as Theme
+export const dark_yellow_TooltipContent = dark_yellow_Checkbox as Theme
+export const dark_yellow_SwitchThumb = {
+    background: '#fff',
+    backgroundHover: '#fff',
+    backgroundPress: 'hsl(53, 100%, 91.0%)',
+    backgroundFocus: 'hsl(48, 100%, 47.0%)',
+    backgroundStrong: '#fff',
+    backgroundTransparent: '#fff',
+    color: 'hsl(45, 100%, 5.5%)',
+    colorHover: 'hsl(46, 100%, 6.7%)',
+    colorPress: 'hsl(45, 100%, 5.5%)',
+    colorFocus: 'hsl(46, 100%, 6.7%)',
+    colorTransparent: 'hsl(45, 100%, 5.5%)',
+    borderColor: 'hsl(48, 100%, 47.0%)',
+    borderColorHover: 'hsl(54, 100%, 68.0%)',
+    borderColorFocus: 'hsl(53, 100%, 91.0%)',
+    borderColorPress: 'hsl(48, 100%, 47.0%)',
+    placeholderColor: 'hsl(46, 100%, 6.7%)'
+} as Theme
+export const dark_yellow_SliderThumb = {
+    background: 'hsl(53, 100%, 91.0%)',
+    backgroundHover: 'hsl(48, 100%, 47.0%)',
+    backgroundPress: 'hsl(54, 100%, 68.0%)',
+    backgroundFocus: 'hsl(53, 92.0%, 50.0%)',
+    backgroundStrong: '#fff',
+    backgroundTransparent: 'hsla(53, 100%, 91.0%, 0)',
+    color: 'hsl(45, 100%, 5.5%)',
+    colorHover: 'hsl(46, 100%, 6.7%)',
+    colorPress: 'hsl(45, 100%, 5.5%)',
+    colorFocus: 'hsl(46, 100%, 6.7%)',
+    colorTransparent: 'hsla(45, 100%, 5.5%, 0)',
+    borderColor: 'hsl(53, 92.0%, 50.0%)',
+    borderColorHover: 'hsl(50, 100%, 22.0%)',
+    borderColorFocus: 'hsl(54, 100%, 68.0%)',
+    borderColorPress: 'hsl(53, 92.0%, 50.0%)',
+    placeholderColor: 'hsl(45, 100%, 10.4%)'
+} as Theme
+
+export const dark_yellow_Tooltip = dark_yellow_SliderThumb as Theme
+export const dark_yellow_ProgressIndicator = dark_yellow_SliderThumb as Theme
+export const dark_yellow_Input = {
+    background: 'hsl(46, 100%, 6.7%)',
+    backgroundHover: 'hsl(45, 100%, 8.7%)',
+    backgroundPress: 'hsl(45, 100%, 10.4%)',
+    backgroundFocus: 'hsl(47, 100%, 12.1%)',
+    backgroundStrong: 'hsl(45, 100%, 5.5%)',
+    backgroundTransparent: 'hsla(45, 100%, 5.5%, 0)',
+    color: '#fff',
+    colorHover: 'hsl(53, 100%, 91.0%)',
+    colorPress: '#fff',
+    colorFocus: 'hsl(53, 100%, 91.0%)',
+    colorTransparent: 'hsla(53, 100%, 91.0%, 0)',
+    borderColor: 'hsl(49, 100%, 14.3%)',
+    borderColorHover: 'hsl(50, 100%, 22.0%)',
+    borderColorFocus: 'hsl(47, 100%, 12.1%)',
+    borderColorPress: 'hsl(49, 100%, 14.3%)',
+    placeholderColor: 'hsl(54, 100%, 68.0%)'
+} as Theme
+
+export const dark_yellow_TextArea = dark_yellow_Input as Theme
+export const dark_green_Card = {
+    background: 'hsl(155, 46.7%, 10.9%)',
+    backgroundHover: 'hsl(154, 48.4%, 12.9%)',
+    backgroundPress: 'hsl(154, 49.7%, 14.9%)',
+    backgroundFocus: 'hsl(154, 50.9%, 17.6%)',
+    backgroundStrong: 'hsl(155, 44.2%, 8.4%)',
+    backgroundTransparent: 'hsl(146, 30.0%, 7.4%)',
+    color: '#fff',
+    colorHover: 'hsl(137, 72.0%, 94.0%)',
+    colorPress: '#fff',
+    colorFocus: 'hsl(137, 72.0%, 94.0%)',
+    colorTransparent: '#fff',
+    borderColor: 'hsl(154, 50.9%, 17.6%)',
+    borderColorHover: 'hsl(151, 51.7%, 28.4%)',
+    borderColorFocus: 'hsl(154, 49.7%, 14.9%)',
+    borderColorPress: 'hsl(154, 50.9%, 17.6%)',
+    placeholderColor: 'hsl(151, 55.0%, 41.5%)'
+} as Theme
+
+export const dark_green_DrawerFrame = dark_green_Card as Theme
+export const dark_green_Progress = dark_green_Card as Theme
+export const dark_green_TooltipArrow = dark_green_Card as Theme
+export const dark_green_SliderTrack = dark_green_Card as Theme
+export const dark_green_Button = {
+    background: 'hsl(154, 48.4%, 12.9%)',
+    backgroundHover: 'hsl(154, 49.7%, 14.9%)',
+    backgroundPress: 'hsl(154, 50.9%, 17.6%)',
+    backgroundFocus: 'hsl(151, 51.7%, 28.4%)',
+    backgroundStrong: 'hsl(155, 46.7%, 10.9%)',
+    backgroundTransparent: 'hsl(155, 44.2%, 8.4%)',
+    color: '#fff',
+    colorHover: 'hsl(137, 72.0%, 94.0%)',
+    colorPress: '#fff',
+    colorFocus: 'hsl(137, 72.0%, 94.0%)',
+    colorTransparent: 'hsl(137, 72.0%, 94.0%)',
+    borderColor: 'transparent',
+    borderColorHover: 'transparent',
+    borderColorFocus: 'hsl(154, 50.9%, 17.6%)',
+    borderColorPress: 'hsl(151, 51.7%, 28.4%)',
+    placeholderColor: 'hsl(151, 51.7%, 28.4%)'
+} as Theme
+export const dark_green_Checkbox = {
+    background: 'hsl(154, 48.4%, 12.9%)',
+    backgroundHover: 'hsl(154, 49.7%, 14.9%)',
+    backgroundPress: 'hsl(154, 50.9%, 17.6%)',
+    backgroundFocus: 'hsl(151, 51.7%, 28.4%)',
+    backgroundStrong: 'hsl(155, 46.7%, 10.9%)',
+    backgroundTransparent: 'hsl(155, 44.2%, 8.4%)',
+    color: '#fff',
+    colorHover: 'hsl(137, 72.0%, 94.0%)',
+    colorPress: '#fff',
+    colorFocus: 'hsl(137, 72.0%, 94.0%)',
+    colorTransparent: 'hsl(137, 72.0%, 94.0%)',
+    borderColor: 'hsl(151, 51.7%, 28.4%)',
+    borderColorHover: 'hsl(151, 55.0%, 41.5%)',
+    borderColorFocus: 'hsl(154, 50.9%, 17.6%)',
+    borderColorPress: 'hsl(151, 51.7%, 28.4%)',
+    placeholderColor: 'hsl(151, 51.7%, 28.4%)'
+} as Theme
+
+export const dark_green_SliderTrackActive = dark_green_Checkbox as Theme
+export const dark_green_Switch = dark_green_Checkbox as Theme
+export const dark_green_TooltipContent = dark_green_Checkbox as Theme
+export const dark_green_SwitchThumb = {
+    background: '#fff',
+    backgroundHover: '#fff',
+    backgroundPress: 'hsl(137, 72.0%, 94.0%)',
+    backgroundFocus: 'hsl(151, 50.0%, 53.2%)',
+    backgroundStrong: '#fff',
+    backgroundTransparent: '#fff',
+    color: 'hsl(146, 30.0%, 7.4%)',
+    colorHover: 'hsl(155, 44.2%, 8.4%)',
+    colorPress: 'hsl(146, 30.0%, 7.4%)',
+    colorFocus: 'hsl(155, 44.2%, 8.4%)',
+    colorTransparent: 'hsl(146, 30.0%, 7.4%)',
+    borderColor: 'hsl(151, 50.0%, 53.2%)',
+    borderColorHover: 'hsl(151, 49.3%, 46.5%)',
+    borderColorFocus: 'hsl(137, 72.0%, 94.0%)',
+    borderColorPress: 'hsl(151, 50.0%, 53.2%)',
+    placeholderColor: 'hsl(155, 44.2%, 8.4%)'
+} as Theme
+export const dark_green_SliderThumb = {
+    background: 'hsl(137, 72.0%, 94.0%)',
+    backgroundHover: 'hsl(151, 50.0%, 53.2%)',
+    backgroundPress: 'hsl(151, 49.3%, 46.5%)',
+    backgroundFocus: 'hsl(151, 55.0%, 41.5%)',
+    backgroundStrong: '#fff',
+    backgroundTransparent: 'hsla(137, 72.0%, 94.0%, 0)',
+    color: 'hsl(146, 30.0%, 7.4%)',
+    colorHover: 'hsl(155, 44.2%, 8.4%)',
+    colorPress: 'hsl(146, 30.0%, 7.4%)',
+    colorFocus: 'hsl(155, 44.2%, 8.4%)',
+    colorTransparent: 'hsla(146, 30.0%, 7.4%, 0)',
+    borderColor: 'hsl(151, 55.0%, 41.5%)',
+    borderColorHover: 'hsl(151, 51.7%, 28.4%)',
+    borderColorFocus: 'hsl(151, 49.3%, 46.5%)',
+    borderColorPress: 'hsl(151, 55.0%, 41.5%)',
+    placeholderColor: 'hsl(154, 48.4%, 12.9%)'
+} as Theme
+
+export const dark_green_Tooltip = dark_green_SliderThumb as Theme
+export const dark_green_ProgressIndicator = dark_green_SliderThumb as Theme
+export const dark_green_Input = {
+    background: 'hsl(155, 44.2%, 8.4%)',
+    backgroundHover: 'hsl(155, 46.7%, 10.9%)',
+    backgroundPress: 'hsl(154, 48.4%, 12.9%)',
+    backgroundFocus: 'hsl(154, 49.7%, 14.9%)',
+    backgroundStrong: 'hsl(146, 30.0%, 7.4%)',
+    backgroundTransparent: 'hsla(146, 30.0%, 7.4%, 0)',
+    color: '#fff',
+    colorHover: 'hsl(137, 72.0%, 94.0%)',
+    colorPress: '#fff',
+    colorFocus: 'hsl(137, 72.0%, 94.0%)',
+    colorTransparent: 'hsla(137, 72.0%, 94.0%, 0)',
+    borderColor: 'hsl(154, 50.9%, 17.6%)',
+    borderColorHover: 'hsl(151, 51.7%, 28.4%)',
+    borderColorFocus: 'hsl(154, 49.7%, 14.9%)',
+    borderColorPress: 'hsl(154, 50.9%, 17.6%)',
+    placeholderColor: 'hsl(151, 49.3%, 46.5%)'
+} as Theme
+
+export const dark_green_TextArea = dark_green_Input as Theme
+export const dark_blue_Card = {
+    background: 'hsl(214, 59.4%, 15.3%)',
+    backgroundHover: 'hsl(214, 65.8%, 17.9%)',
+    backgroundPress: 'hsl(213, 71.2%, 20.2%)',
+    backgroundFocus: 'hsl(212, 77.4%, 23.1%)',
+    backgroundStrong: 'hsl(216, 50.0%, 11.8%)',
+    backgroundTransparent: 'hsl(212, 35.0%, 9.2%)',
+    color: '#fff',
+    colorHover: 'hsl(206, 98.0%, 95.8%)',
+    colorPress: '#fff',
+    colorFocus: 'hsl(206, 98.0%, 95.8%)',
+    colorTransparent: '#fff',
+    borderColor: 'hsl(212, 77.4%, 23.1%)',
+    borderColorHover: 'hsl(211, 89.7%, 34.1%)',
+    borderColorFocus: 'hsl(213, 71.2%, 20.2%)',
+    borderColorPress: 'hsl(212, 77.4%, 23.1%)',
+    placeholderColor: 'hsl(206, 100%, 50.0%)'
+} as Theme
+
+export const dark_blue_DrawerFrame = dark_blue_Card as Theme
+export const dark_blue_Progress = dark_blue_Card as Theme
+export const dark_blue_TooltipArrow = dark_blue_Card as Theme
+export const dark_blue_SliderTrack = dark_blue_Card as Theme
+export const dark_blue_Button = {
+    background: 'hsl(214, 65.8%, 17.9%)',
+    backgroundHover: 'hsl(213, 71.2%, 20.2%)',
+    backgroundPress: 'hsl(212, 77.4%, 23.1%)',
+    backgroundFocus: 'hsl(211, 89.7%, 34.1%)',
+    backgroundStrong: 'hsl(214, 59.4%, 15.3%)',
+    backgroundTransparent: 'hsl(216, 50.0%, 11.8%)',
+    color: '#fff',
+    colorHover: 'hsl(206, 98.0%, 95.8%)',
+    colorPress: '#fff',
+    colorFocus: 'hsl(206, 98.0%, 95.8%)',
+    colorTransparent: 'hsl(206, 98.0%, 95.8%)',
+    borderColor: 'transparent',
+    borderColorHover: 'transparent',
+    borderColorFocus: 'hsl(212, 77.4%, 23.1%)',
+    borderColorPress: 'hsl(211, 89.7%, 34.1%)',
+    placeholderColor: 'hsl(211, 89.7%, 34.1%)'
+} as Theme
+export const dark_blue_Checkbox = {
+    background: 'hsl(214, 65.8%, 17.9%)',
+    backgroundHover: 'hsl(213, 71.2%, 20.2%)',
+    backgroundPress: 'hsl(212, 77.4%, 23.1%)',
+    backgroundFocus: 'hsl(211, 89.7%, 34.1%)',
+    backgroundStrong: 'hsl(214, 59.4%, 15.3%)',
+    backgroundTransparent: 'hsl(216, 50.0%, 11.8%)',
+    color: '#fff',
+    colorHover: 'hsl(206, 98.0%, 95.8%)',
+    colorPress: '#fff',
+    colorFocus: 'hsl(206, 98.0%, 95.8%)',
+    colorTransparent: 'hsl(206, 98.0%, 95.8%)',
+    borderColor: 'hsl(211, 89.7%, 34.1%)',
+    borderColorHover: 'hsl(206, 100%, 50.0%)',
+    borderColorFocus: 'hsl(212, 77.4%, 23.1%)',
+    borderColorPress: 'hsl(211, 89.7%, 34.1%)',
+    placeholderColor: 'hsl(211, 89.7%, 34.1%)'
+} as Theme
+
+export const dark_blue_SliderTrackActive = dark_blue_Checkbox as Theme
+export const dark_blue_Switch = dark_blue_Checkbox as Theme
+export const dark_blue_TooltipContent = dark_blue_Checkbox as Theme
+export const dark_blue_SwitchThumb = {
+    background: '#fff',
+    backgroundHover: '#fff',
+    backgroundPress: 'hsl(206, 98.0%, 95.8%)',
+    backgroundFocus: 'hsl(210, 100%, 66.1%)',
+    backgroundStrong: '#fff',
+    backgroundTransparent: '#fff',
+    color: 'hsl(212, 35.0%, 9.2%)',
+    colorHover: 'hsl(216, 50.0%, 11.8%)',
+    colorPress: 'hsl(212, 35.0%, 9.2%)',
+    colorFocus: 'hsl(216, 50.0%, 11.8%)',
+    colorTransparent: 'hsl(212, 35.0%, 9.2%)',
+    borderColor: 'hsl(210, 100%, 66.1%)',
+    borderColorHover: 'hsl(209, 100%, 60.6%)',
+    borderColorFocus: 'hsl(206, 98.0%, 95.8%)',
+    borderColorPress: 'hsl(210, 100%, 66.1%)',
+    placeholderColor: 'hsl(216, 50.0%, 11.8%)'
+} as Theme
+export const dark_blue_SliderThumb = {
+    background: 'hsl(206, 98.0%, 95.8%)',
+    backgroundHover: 'hsl(210, 100%, 66.1%)',
+    backgroundPress: 'hsl(209, 100%, 60.6%)',
+    backgroundFocus: 'hsl(206, 100%, 50.0%)',
+    backgroundStrong: '#fff',
+    backgroundTransparent: 'hsla(206, 98.0%, 95.8%, 0)',
+    color: 'hsl(212, 35.0%, 9.2%)',
+    colorHover: 'hsl(216, 50.0%, 11.8%)',
+    colorPress: 'hsl(212, 35.0%, 9.2%)',
+    colorFocus: 'hsl(216, 50.0%, 11.8%)',
+    colorTransparent: 'hsla(212, 35.0%, 9.2%, 0)',
+    borderColor: 'hsl(206, 100%, 50.0%)',
+    borderColorHover: 'hsl(211, 89.7%, 34.1%)',
+    borderColorFocus: 'hsl(209, 100%, 60.6%)',
+    borderColorPress: 'hsl(206, 100%, 50.0%)',
+    placeholderColor: 'hsl(214, 65.8%, 17.9%)'
+} as Theme
+
+export const dark_blue_Tooltip = dark_blue_SliderThumb as Theme
+export const dark_blue_ProgressIndicator = dark_blue_SliderThumb as Theme
+export const dark_blue_Input = {
+    background: 'hsl(216, 50.0%, 11.8%)',
+    backgroundHover: 'hsl(214, 59.4%, 15.3%)',
+    backgroundPress: 'hsl(214, 65.8%, 17.9%)',
+    backgroundFocus: 'hsl(213, 71.2%, 20.2%)',
+    backgroundStrong: 'hsl(212, 35.0%, 9.2%)',
+    backgroundTransparent: 'hsla(212, 35.0%, 9.2%, 0)',
+    color: '#fff',
+    colorHover: 'hsl(206, 98.0%, 95.8%)',
+    colorPress: '#fff',
+    colorFocus: 'hsl(206, 98.0%, 95.8%)',
+    colorTransparent: 'hsla(206, 98.0%, 95.8%, 0)',
+    borderColor: 'hsl(212, 77.4%, 23.1%)',
+    borderColorHover: 'hsl(211, 89.7%, 34.1%)',
+    borderColorFocus: 'hsl(213, 71.2%, 20.2%)',
+    borderColorPress: 'hsl(212, 77.4%, 23.1%)',
+    placeholderColor: 'hsl(209, 100%, 60.6%)'
+} as Theme
+
+export const dark_blue_TextArea = dark_blue_Input as Theme
+export const dark_purple_Card = {
+    background: 'hsl(281, 37.5%, 16.5%)',
+    backgroundHover: 'hsl(280, 41.2%, 20.0%)',
+    backgroundPress: 'hsl(279, 43.8%, 23.3%)',
+    backgroundFocus: 'hsl(277, 46.4%, 27.5%)',
+    backgroundStrong: 'hsl(283, 30.0%, 11.8%)',
+    backgroundTransparent: 'hsl(284, 20.0%, 9.6%)',
+    color: '#fff',
+    colorHover: 'hsl(279, 75.0%, 95.7%)',
+    colorPress: '#fff',
+    colorFocus: 'hsl(279, 75.0%, 95.7%)',
+    colorTransparent: '#fff',
+    borderColor: 'hsl(277, 46.4%, 27.5%)',
+    borderColorHover: 'hsl(272, 52.1%, 45.9%)',
+    borderColorFocus: 'hsl(279, 43.8%, 23.3%)',
+    borderColorPress: 'hsl(277, 46.4%, 27.5%)',
+    placeholderColor: 'hsl(272, 51.0%, 54.0%)'
+} as Theme
+
+export const dark_purple_DrawerFrame = dark_purple_Card as Theme
+export const dark_purple_Progress = dark_purple_Card as Theme
+export const dark_purple_TooltipArrow = dark_purple_Card as Theme
+export const dark_purple_SliderTrack = dark_purple_Card as Theme
+export const dark_purple_Button = {
+    background: 'hsl(280, 41.2%, 20.0%)',
+    backgroundHover: 'hsl(279, 43.8%, 23.3%)',
+    backgroundPress: 'hsl(277, 46.4%, 27.5%)',
+    backgroundFocus: 'hsl(272, 52.1%, 45.9%)',
+    backgroundStrong: 'hsl(281, 37.5%, 16.5%)',
+    backgroundTransparent: 'hsl(283, 30.0%, 11.8%)',
+    color: '#fff',
+    colorHover: 'hsl(279, 75.0%, 95.7%)',
+    colorPress: '#fff',
+    colorFocus: 'hsl(279, 75.0%, 95.7%)',
+    colorTransparent: 'hsl(279, 75.0%, 95.7%)',
+    borderColor: 'transparent',
+    borderColorHover: 'transparent',
+    borderColorFocus: 'hsl(277, 46.4%, 27.5%)',
+    borderColorPress: 'hsl(272, 52.1%, 45.9%)',
+    placeholderColor: 'hsl(272, 52.1%, 45.9%)'
+} as Theme
+export const dark_purple_Checkbox = {
+    background: 'hsl(280, 41.2%, 20.0%)',
+    backgroundHover: 'hsl(279, 43.8%, 23.3%)',
+    backgroundPress: 'hsl(277, 46.4%, 27.5%)',
+    backgroundFocus: 'hsl(272, 52.1%, 45.9%)',
+    backgroundStrong: 'hsl(281, 37.5%, 16.5%)',
+    backgroundTransparent: 'hsl(283, 30.0%, 11.8%)',
+    color: '#fff',
+    colorHover: 'hsl(279, 75.0%, 95.7%)',
+    colorPress: '#fff',
+    colorFocus: 'hsl(279, 75.0%, 95.7%)',
+    colorTransparent: 'hsl(279, 75.0%, 95.7%)',
+    borderColor: 'hsl(272, 52.1%, 45.9%)',
+    borderColorHover: 'hsl(272, 51.0%, 54.0%)',
+    borderColorFocus: 'hsl(277, 46.4%, 27.5%)',
+    borderColorPress: 'hsl(272, 52.1%, 45.9%)',
+    placeholderColor: 'hsl(272, 52.1%, 45.9%)'
+} as Theme
+
+export const dark_purple_SliderTrackActive = dark_purple_Checkbox as Theme
+export const dark_purple_Switch = dark_purple_Checkbox as Theme
+export const dark_purple_TooltipContent = dark_purple_Checkbox as Theme
+export const dark_purple_SwitchThumb = {
+    background: '#fff',
+    backgroundHover: '#fff',
+    backgroundPress: 'hsl(279, 75.0%, 95.7%)',
+    backgroundFocus: 'hsl(275, 80.0%, 71.0%)',
+    backgroundStrong: '#fff',
+    backgroundTransparent: '#fff',
+    color: 'hsl(284, 20.0%, 9.6%)',
+    colorHover: 'hsl(283, 30.0%, 11.8%)',
+    colorPress: 'hsl(284, 20.0%, 9.6%)',
+    colorFocus: 'hsl(283, 30.0%, 11.8%)',
+    colorTransparent: 'hsl(284, 20.0%, 9.6%)',
+    borderColor: 'hsl(275, 80.0%, 71.0%)',
+    borderColorHover: 'hsl(273, 57.3%, 59.1%)',
+    borderColorFocus: 'hsl(279, 75.0%, 95.7%)',
+    borderColorPress: 'hsl(275, 80.0%, 71.0%)',
+    placeholderColor: 'hsl(283, 30.0%, 11.8%)'
+} as Theme
+export const dark_purple_SliderThumb = {
+    background: 'hsl(279, 75.0%, 95.7%)',
+    backgroundHover: 'hsl(275, 80.0%, 71.0%)',
+    backgroundPress: 'hsl(273, 57.3%, 59.1%)',
+    backgroundFocus: 'hsl(272, 51.0%, 54.0%)',
+    backgroundStrong: '#fff',
+    backgroundTransparent: 'hsla(279, 75.0%, 95.7%, 0)',
+    color: 'hsl(284, 20.0%, 9.6%)',
+    colorHover: 'hsl(283, 30.0%, 11.8%)',
+    colorPress: 'hsl(284, 20.0%, 9.6%)',
+    colorFocus: 'hsl(283, 30.0%, 11.8%)',
+    colorTransparent: 'hsla(284, 20.0%, 9.6%, 0)',
+    borderColor: 'hsl(272, 51.0%, 54.0%)',
+    borderColorHover: 'hsl(272, 52.1%, 45.9%)',
+    borderColorFocus: 'hsl(273, 57.3%, 59.1%)',
+    borderColorPress: 'hsl(272, 51.0%, 54.0%)',
+    placeholderColor: 'hsl(280, 41.2%, 20.0%)'
+} as Theme
+
+export const dark_purple_Tooltip = dark_purple_SliderThumb as Theme
+export const dark_purple_ProgressIndicator = dark_purple_SliderThumb as Theme
+export const dark_purple_Input = {
+    background: 'hsl(283, 30.0%, 11.8%)',
+    backgroundHover: 'hsl(281, 37.5%, 16.5%)',
+    backgroundPress: 'hsl(280, 41.2%, 20.0%)',
+    backgroundFocus: 'hsl(279, 43.8%, 23.3%)',
+    backgroundStrong: 'hsl(284, 20.0%, 9.6%)',
+    backgroundTransparent: 'hsla(284, 20.0%, 9.6%, 0)',
+    color: '#fff',
+    colorHover: 'hsl(279, 75.0%, 95.7%)',
+    colorPress: '#fff',
+    colorFocus: 'hsl(279, 75.0%, 95.7%)',
+    colorTransparent: 'hsla(279, 75.0%, 95.7%, 0)',
+    borderColor: 'hsl(277, 46.4%, 27.5%)',
+    borderColorHover: 'hsl(272, 52.1%, 45.9%)',
+    borderColorFocus: 'hsl(279, 43.8%, 23.3%)',
+    borderColorPress: 'hsl(277, 46.4%, 27.5%)',
+    placeholderColor: 'hsl(273, 57.3%, 59.1%)'
+} as Theme
+
+export const dark_purple_TextArea = dark_purple_Input as Theme
+export const dark_pink_Card = {
+    background: 'hsl(319, 41.0%, 16.0%)',
+    backgroundHover: 'hsl(320, 45.4%, 18.7%)',
+    backgroundPress: 'hsl(320, 49.0%, 21.1%)',
+    backgroundFocus: 'hsl(321, 53.6%, 24.4%)',
+    backgroundStrong: 'hsl(319, 32.2%, 11.6%)',
+    backgroundTransparent: 'hsl(318, 25.0%, 9.6%)',
+    color: '#fff',
+    colorHover: 'hsl(322, 90.0%, 95.8%)',
+    colorPress: '#fff',
+    colorFocus: 'hsl(322, 90.0%, 95.8%)',
+    colorTransparent: '#fff',
+    borderColor: 'hsl(321, 53.6%, 24.4%)',
+    borderColorHover: 'hsl(322, 74.9%, 37.5%)',
+    borderColorFocus: 'hsl(320, 49.0%, 21.1%)',
+    borderColorPress: 'hsl(321, 53.6%, 24.4%)',
+    placeholderColor: 'hsl(322, 65.0%, 54.5%)'
+} as Theme
+
+export const dark_pink_DrawerFrame = dark_pink_Card as Theme
+export const dark_pink_Progress = dark_pink_Card as Theme
+export const dark_pink_TooltipArrow = dark_pink_Card as Theme
+export const dark_pink_SliderTrack = dark_pink_Card as Theme
+export const dark_pink_Button = {
+    background: 'hsl(320, 45.4%, 18.7%)',
+    backgroundHover: 'hsl(320, 49.0%, 21.1%)',
+    backgroundPress: 'hsl(321, 53.6%, 24.4%)',
+    backgroundFocus: 'hsl(322, 74.9%, 37.5%)',
+    backgroundStrong: 'hsl(319, 41.0%, 16.0%)',
+    backgroundTransparent: 'hsl(319, 32.2%, 11.6%)',
+    color: '#fff',
+    colorHover: 'hsl(322, 90.0%, 95.8%)',
+    colorPress: '#fff',
+    colorFocus: 'hsl(322, 90.0%, 95.8%)',
+    colorTransparent: 'hsl(322, 90.0%, 95.8%)',
+    borderColor: 'transparent',
+    borderColorHover: 'transparent',
+    borderColorFocus: 'hsl(321, 53.6%, 24.4%)',
+    borderColorPress: 'hsl(322, 74.9%, 37.5%)',
+    placeholderColor: 'hsl(322, 74.9%, 37.5%)'
+} as Theme
+export const dark_pink_Checkbox = {
+    background: 'hsl(320, 45.4%, 18.7%)',
+    backgroundHover: 'hsl(320, 49.0%, 21.1%)',
+    backgroundPress: 'hsl(321, 53.6%, 24.4%)',
+    backgroundFocus: 'hsl(322, 74.9%, 37.5%)',
+    backgroundStrong: 'hsl(319, 41.0%, 16.0%)',
+    backgroundTransparent: 'hsl(319, 32.2%, 11.6%)',
+    color: '#fff',
+    colorHover: 'hsl(322, 90.0%, 95.8%)',
+    colorPress: '#fff',
+    colorFocus: 'hsl(322, 90.0%, 95.8%)',
+    colorTransparent: 'hsl(322, 90.0%, 95.8%)',
+    borderColor: 'hsl(322, 74.9%, 37.5%)',
+    borderColorHover: 'hsl(322, 65.0%, 54.5%)',
+    borderColorFocus: 'hsl(321, 53.6%, 24.4%)',
+    borderColorPress: 'hsl(322, 74.9%, 37.5%)',
+    placeholderColor: 'hsl(322, 74.9%, 37.5%)'
+} as Theme
+
+export const dark_pink_SliderTrackActive = dark_pink_Checkbox as Theme
+export const dark_pink_Switch = dark_pink_Checkbox as Theme
+export const dark_pink_TooltipContent = dark_pink_Checkbox as Theme
+export const dark_pink_SwitchThumb = {
+    background: '#fff',
+    backgroundHover: '#fff',
+    backgroundPress: 'hsl(322, 90.0%, 95.8%)',
+    backgroundFocus: 'hsl(325, 90.0%, 66.4%)',
+    backgroundStrong: '#fff',
+    backgroundTransparent: '#fff',
+    color: 'hsl(318, 25.0%, 9.6%)',
+    colorHover: 'hsl(319, 32.2%, 11.6%)',
+    colorPress: 'hsl(318, 25.0%, 9.6%)',
+    colorFocus: 'hsl(319, 32.2%, 11.6%)',
+    colorTransparent: 'hsl(318, 25.0%, 9.6%)',
+    borderColor: 'hsl(325, 90.0%, 66.4%)',
+    borderColorHover: 'hsl(323, 72.8%, 59.2%)',
+    borderColorFocus: 'hsl(322, 90.0%, 95.8%)',
+    borderColorPress: 'hsl(325, 90.0%, 66.4%)',
+    placeholderColor: 'hsl(319, 32.2%, 11.6%)'
+} as Theme
+export const dark_pink_SliderThumb = {
+    background: 'hsl(322, 90.0%, 95.8%)',
+    backgroundHover: 'hsl(325, 90.0%, 66.4%)',
+    backgroundPress: 'hsl(323, 72.8%, 59.2%)',
+    backgroundFocus: 'hsl(322, 65.0%, 54.5%)',
+    backgroundStrong: '#fff',
+    backgroundTransparent: 'hsla(322, 90.0%, 95.8%, 0)',
+    color: 'hsl(318, 25.0%, 9.6%)',
+    colorHover: 'hsl(319, 32.2%, 11.6%)',
+    colorPress: 'hsl(318, 25.0%, 9.6%)',
+    colorFocus: 'hsl(319, 32.2%, 11.6%)',
+    colorTransparent: 'hsla(318, 25.0%, 9.6%, 0)',
+    borderColor: 'hsl(322, 65.0%, 54.5%)',
+    borderColorHover: 'hsl(322, 74.9%, 37.5%)',
+    borderColorFocus: 'hsl(323, 72.8%, 59.2%)',
+    borderColorPress: 'hsl(322, 65.0%, 54.5%)',
+    placeholderColor: 'hsl(320, 45.4%, 18.7%)'
+} as Theme
+
+export const dark_pink_Tooltip = dark_pink_SliderThumb as Theme
+export const dark_pink_ProgressIndicator = dark_pink_SliderThumb as Theme
+export const dark_pink_Input = {
+    background: 'hsl(319, 32.2%, 11.6%)',
+    backgroundHover: 'hsl(319, 41.0%, 16.0%)',
+    backgroundPress: 'hsl(320, 45.4%, 18.7%)',
+    backgroundFocus: 'hsl(320, 49.0%, 21.1%)',
+    backgroundStrong: 'hsl(318, 25.0%, 9.6%)',
+    backgroundTransparent: 'hsla(318, 25.0%, 9.6%, 0)',
+    color: '#fff',
+    colorHover: 'hsl(322, 90.0%, 95.8%)',
+    colorPress: '#fff',
+    colorFocus: 'hsl(322, 90.0%, 95.8%)',
+    colorTransparent: 'hsla(322, 90.0%, 95.8%, 0)',
+    borderColor: 'hsl(321, 53.6%, 24.4%)',
+    borderColorHover: 'hsl(322, 74.9%, 37.5%)',
+    borderColorFocus: 'hsl(320, 49.0%, 21.1%)',
+    borderColorPress: 'hsl(321, 53.6%, 24.4%)',
+    placeholderColor: 'hsl(323, 72.8%, 59.2%)'
+} as Theme
+
+export const dark_pink_TextArea = dark_pink_Input as Theme
+export const dark_red_Card = {
+    background: 'hsl(356, 43.4%, 16.4%)',
+    backgroundHover: 'hsl(356, 47.6%, 19.2%)',
+    backgroundPress: 'hsl(356, 51.1%, 21.9%)',
+    backgroundFocus: 'hsl(356, 55.2%, 25.9%)',
+    backgroundStrong: 'hsl(357, 34.4%, 12.0%)',
+    backgroundTransparent: 'hsl(353, 23.0%, 9.8%)',
+    color: '#fff',
+    colorHover: 'hsl(351, 89.0%, 96.0%)',
+    colorPress: '#fff',
+    colorFocus: 'hsl(351, 89.0%, 96.0%)',
+    colorTransparent: '#fff',
+    borderColor: 'hsl(356, 55.2%, 25.9%)',
+    borderColorHover: 'hsl(358, 65.0%, 40.4%)',
+    borderColorFocus: 'hsl(356, 51.1%, 21.9%)',
+    borderColorPress: 'hsl(356, 55.2%, 25.9%)',
+    placeholderColor: 'hsl(358, 75.0%, 59.0%)'
+} as Theme
+
+export const dark_red_DrawerFrame = dark_red_Card as Theme
+export const dark_red_Progress = dark_red_Card as Theme
+export const dark_red_TooltipArrow = dark_red_Card as Theme
+export const dark_red_SliderTrack = dark_red_Card as Theme
+export const dark_red_Button = {
+    background: 'hsl(356, 47.6%, 19.2%)',
+    backgroundHover: 'hsl(356, 51.1%, 21.9%)',
+    backgroundPress: 'hsl(356, 55.2%, 25.9%)',
+    backgroundFocus: 'hsl(358, 65.0%, 40.4%)',
+    backgroundStrong: 'hsl(356, 43.4%, 16.4%)',
+    backgroundTransparent: 'hsl(357, 34.4%, 12.0%)',
+    color: '#fff',
+    colorHover: 'hsl(351, 89.0%, 96.0%)',
+    colorPress: '#fff',
+    colorFocus: 'hsl(351, 89.0%, 96.0%)',
+    colorTransparent: 'hsl(351, 89.0%, 96.0%)',
+    borderColor: 'transparent',
+    borderColorHover: 'transparent',
+    borderColorFocus: 'hsl(356, 55.2%, 25.9%)',
+    borderColorPress: 'hsl(358, 65.0%, 40.4%)',
+    placeholderColor: 'hsl(358, 65.0%, 40.4%)'
+} as Theme
+export const dark_red_Checkbox = {
+    background: 'hsl(356, 47.6%, 19.2%)',
+    backgroundHover: 'hsl(356, 51.1%, 21.9%)',
+    backgroundPress: 'hsl(356, 55.2%, 25.9%)',
+    backgroundFocus: 'hsl(358, 65.0%, 40.4%)',
+    backgroundStrong: 'hsl(356, 43.4%, 16.4%)',
+    backgroundTransparent: 'hsl(357, 34.4%, 12.0%)',
+    color: '#fff',
+    colorHover: 'hsl(351, 89.0%, 96.0%)',
+    colorPress: '#fff',
+    colorFocus: 'hsl(351, 89.0%, 96.0%)',
+    colorTransparent: 'hsl(351, 89.0%, 96.0%)',
+    borderColor: 'hsl(358, 65.0%, 40.4%)',
+    borderColorHover: 'hsl(358, 75.0%, 59.0%)',
+    borderColorFocus: 'hsl(356, 55.2%, 25.9%)',
+    borderColorPress: 'hsl(358, 65.0%, 40.4%)',
+    placeholderColor: 'hsl(358, 65.0%, 40.4%)'
+} as Theme
+
+export const dark_red_SliderTrackActive = dark_red_Checkbox as Theme
+export const dark_red_Switch = dark_red_Checkbox as Theme
+export const dark_red_TooltipContent = dark_red_Checkbox as Theme
+export const dark_red_SliderThumb = {
+    background: 'hsl(351, 89.0%, 96.0%)',
+    backgroundHover: 'hsl(358, 100%, 69.5%)',
+    backgroundPress: 'hsl(358, 85.3%, 64.0%)',
+    backgroundFocus: 'hsl(358, 75.0%, 59.0%)',
+    backgroundStrong: '#fff',
+    backgroundTransparent: 'hsla(351, 89.0%, 96.0%, 0)',
+    color: 'hsl(353, 23.0%, 9.8%)',
+    colorHover: 'hsl(357, 34.4%, 12.0%)',
+    colorPress: 'hsl(353, 23.0%, 9.8%)',
+    colorFocus: 'hsl(357, 34.4%, 12.0%)',
+    colorTransparent: 'hsla(353, 23.0%, 9.8%, 0)',
+    borderColor: 'hsl(358, 75.0%, 59.0%)',
+    borderColorHover: 'hsl(358, 65.0%, 40.4%)',
+    borderColorFocus: 'hsl(358, 85.3%, 64.0%)',
+    borderColorPress: 'hsl(358, 75.0%, 59.0%)',
+    placeholderColor: 'hsl(356, 47.6%, 19.2%)'
+} as Theme
+
+export const dark_red_Tooltip = dark_red_SliderThumb as Theme
+export const dark_red_ProgressIndicator = dark_red_SliderThumb as Theme
+export const dark_red_Input = {
+    background: 'hsl(357, 34.4%, 12.0%)',
+    backgroundHover: 'hsl(356, 43.4%, 16.4%)',
+    backgroundPress: 'hsl(356, 47.6%, 19.2%)',
+    backgroundFocus: 'hsl(356, 51.1%, 21.9%)',
+    backgroundStrong: 'hsl(353, 23.0%, 9.8%)',
+    backgroundTransparent: 'hsla(353, 23.0%, 9.8%, 0)',
+    color: '#fff',
+    colorHover: 'hsl(351, 89.0%, 96.0%)',
+    colorPress: '#fff',
+    colorFocus: 'hsl(351, 89.0%, 96.0%)',
+    colorTransparent: 'hsla(351, 89.0%, 96.0%, 0)',
+    borderColor: 'hsl(356, 55.2%, 25.9%)',
+    borderColorHover: 'hsl(358, 65.0%, 40.4%)',
+    borderColorFocus: 'hsl(356, 51.1%, 21.9%)',
+    borderColorPress: 'hsl(356, 55.2%, 25.9%)',
+    placeholderColor: 'hsl(358, 85.3%, 64.0%)'
+} as Theme
+
+export const dark_red_TextArea = dark_red_Input as Theme