lfg

src/resources/themes/sky.css

@@ -0,0 +1,122 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --light: 0 0% 100%;
+    --dark: 228.65 84% 5%;
+    --bg: 0 0% 100%;
+    --fg: 222.2 84% 4.9%;
+    --primary: 200.41 98.01% 40.41%;
+    --primary-fg: 204 100% 97.06%;
+    --secondary: 240 4% 96%;
+    --secondary-fg: 240.01 6% 10%;
+    --tertiary: 0 0% 100%;
+    --tertiary-fg: 240 4% 16%;
+    --accent: 214.29 33% 91%;
+    --accent-fg: 228.65 84% 5%;
+    --accent-subtle: 204 93.75% 93.73%;
+    --accent-subtle-fg: 200.95 90% 27.45%;
+    --overlay: 210 35% 98%;
+    --overlay-fg: 228.65 84% 5%;
+    --muted: 212.73 40% 89%;
+    --muted-fg: 215.39 17% 46%;
+    --success: 161.17 91% 31%;
+    --success-fg: 151.77 82% 96%;
+    --info: 205.77 100% 50%;
+    --info-fg: 40 35% 98%;
+    --danger: 0.01 72% 51%;
+    --danger-fg: 360 86% 97%;
+    --warning: 43.2 96% 56.99%;
+    --warning-fg: 20.91 91% 14.1%;
+    --border: 214.29 33% 91%;
+    --input: 214.29 33% 91%;
+    --ring: 198.63 88.66% 48.43%;
+    --toggle: 212.72 27% 84%;
+    --radius: 0.5rem;
+    --primary-chart: 198.63 88.66% 48.43%;
+    --secondary-chart: 199.37 95.49% 73.92%;
+    --tertiary-chart: 200.6 94.37% 86.08%;
+    --highlight-chart: 198.44 93.2% 59.61%;
+    --accent-chart: 204 93.75% 93.73%
+  }
+
+  .dark {
+    --bg: 222.2 84% 4.9%;
+    --fg: 210 40% 98%;
+    --primary: 200.41 98.01% 40.41%;
+    --primary-fg: 204 100% 97.06%;
+    --secondary: 222.23 48% 11%;
+    --secondary-fg: 210 35% 98%;
+    --tertiary: 230.03 88% 4%;
+    --tertiary-fg: 210 35% 98%;
+    --accent: 200.41 98.01% 40.41%;
+    --accent-fg: 204 100% 97.06%;
+    --accent-subtle: 205.14 100% 9%;
+    --accent-subtle-fg: 204 93.75% 93.73%;
+    --overlay: 230.03 88% 4%;
+    --overlay-fg: 210 35% 98%;
+    --muted: 217.3 40% 14.1%;
+    --muted-fg: 215 20% 65%;
+    --info: 205.77 100% 50%;
+    --info-fg: 40 35% 98%;
+    --success: 161.17 91% 31%;
+    --success-fg: 151.77 82% 96%;
+    --toggle: 215.29 33% 19%;
+    --border: 217.32 43% 13%;
+    --input: 217.24 33% 17%;
+    --ring: 198.63 88.66% 42.43%;
+    --primary-chart: 200.41 98.01% 39.41%;
+    --secondary-chart: 199.37 95.49% 73.92%;
+    --tertiary-chart: 200.6 94.37% 86.08%;
+    --highlight-chart: 198.44 93.2% 59.61%;
+    --accent-chart: 204 93.75% 93.73%
+  }
+}
+
+@layer base {
+  html {
+    @apply scroll-smooth;
+  }
+
+  * {
+    @apply border-border;
+    font-feature-settings: 'cv11', 'ss01';
+    font-variation-settings: 'opsz' 850;
+    text-rendering: optimizeLegibility;
+    scrollbar-width: thin;
+  }
+
+  body {
+    @apply bg-bg text-fg;
+  }
+
+  /* dark mode */
+  .dark {
+    scrollbar-width: thin;
+
+    @media (prefers-color-scheme: dark) {
+      * {
+        scrollbar-width: thin;
+      }
+    }
+  }
+
+  /* Chrome, Edge, and Safari */
+  *::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+  }
+
+  *::-webkit-scrollbar-track {
+    background: transparent;
+    border-radius: 5px;
+  }
+
+  *::-webkit-scrollbar-thumb {
+    @apply bg-muted;
+    border-radius: 14px;
+    border: 3px solid transparent;
+  }
+}