Init

src/styles/index.css

@@ -0,0 +1,37 @@
+@import 'tailwindcss/base';
+@import 'tailwindcss/components';
+@import 'tailwindcss/utilities';
+
+* {
+  -webkit-tap-highlight-color: transparent; /* Отключаем выделение синим при тапе на телефоне*/
+  /* outline: 1px solid green; */
+} 
+
+:root {
+  color-scheme: light dark;
+  width: 100%;
+  height: 100svh;
+  /* @apply bg-layout-background; */
+  transition: all linear 200ms;
+
+  font-family: 'Source Code Pro', monospace;
+  
+  /* font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; */
+  font-weight: 400;
+  line-height: 1.5;
+  color: rgba(255, 255, 255, 0.87);
+}
+
+#root {
+  width: 100%;
+  height: 100%;
+}
+
+body {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+}

src/styles/palette/theme-dark.css

@@ -0,0 +1,16 @@
+@import 'tailwindcss/base';
+
+@layer base {
+  :root[data-theme~="dark"] {
+    --color-liquid-brightmain: #00DBD9;
+    --color-liquid-darkmain: #075867;
+    --color-liquid-darker: #141515;
+    --color-liquid-background: #202222;
+    --color-liquid-lighter: #2A2E2F;
+    --color-liquid-white: #EDF6F7;
+    --color-liquid-red: #F13E5F;
+    --color-liquid-green: #10BE59;
+    --color-liquid-light: #576466;
+    --color-liquid-orange: #FF951B;
+  }
+}

src/styles/palette/theme-light.css

@@ -0,0 +1,16 @@
+@import 'tailwindcss/base';
+
+@layer base {
+  :root {
+    --color-liquid-brightmain: #00DBD9;
+    --color-liquid-darkmain: #075867;
+    --color-liquid-darker: #141515;
+    --color-liquid-background: #202222;
+    --color-liquid-lighter: #2A2E2F;
+    --color-liquid-white: #EDF6F7;
+    --color-liquid-red: #F13E5F;
+    --color-liquid-green: #10BE59;
+    --color-liquid-light: #576466;
+    --color-liquid-orange: #FF951B;
+  }
+}