[filigran-ui] Add dark theme in the css bundle

packages/filigran-ui/src/dark.css

@@ -0,0 +1,193 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --dark-100: var(--gray-1000);
+    --light-100: var(--gray-50);
+    --background: var(--gray-50);
+    --foreground: var(--gray-1000);
+
+    --page-background: var(--light-100);
+    --box-background: var(--light-100);
+    --primary-background: var(--darkblue-400);
+    --focus-background: var(--darkblue-100);
+    --text-foreground: var(--dark-100);
+    --secondary-text-foreground: var(--gray-600);
+    --text-inverted-foreground: var(--light-100);
+    --text-inverted-foreground-focus: var(--primary-background);
+    --border-strong: var(--gray-800);
+    --border-medium-strong: var(--gray-600);
+    --border-neutral: var(--gray-500);
+    --border-medium-light: var(--gray-200);
+    --border-light: var(--gray-150);
+    --border-focus: var(--darkblue-300);
+
+    --card: 0 0% 100%;
+    --card-foreground: 222.2 84% 4.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 222.2 84% 4.9%;
+    --primary: var(--blue-default);
+    --primary-foreground: 210 40% 98%;
+    --secondary: 210 40% 96.1%;
+    --secondary-foreground: 222.2 47.4% 11.2%;
+    --muted: var(--gray-default);
+    --muted-foreground: var(--gray-1000);
+    --accent: 210 40% 96.1%;
+    --accent-foreground: 222.2 47.4% 11.2%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 210 40% 98%;
+    --border: var(--gray-400);
+    --input: 214.3 31.8% 91.4%;
+    --ring: 222.2 84% 4.9%;
+    --radius: 0.3rem;
+
+    --gray-default: var(--gray-200);
+    --gray-50: 	240 11% 96%;
+    --gray-100: 240 4% 95%;
+    --gray-150: 220 5.88% 90%;
+    --gray-200: 225 3.92% 80%;
+    --gray-300: 231.43 4.58% 70%;
+    --gray-400: 232.5 3.92% 60%;
+    --gray-500: 229.09 4.31% 50%;
+    --gray-600: 232.5 3.92% 40%;
+    --gray-700: 231.43 4.58% 30%;
+    --gray-800: 225 3.92% 20%;
+    --gray-900: 220 5.88% 10%;
+    --gray-1000: 230 100% 2.35%;
+
+    --darkblue-default: var(--darkblue-700);
+    --darkblue-100: 231.67 100% 92.94%;
+    --darkblue-200: 232.41 100% 82.94%;
+    --darkblue-300: 232.61 100% 72.94%;
+    --darkblue-400: 232.38 100% 62.94%;
+    --darkblue-500: 232.5 100% 52.94%;
+    --darkblue-600: 232.6 100% 42.94%;
+    --darkblue-700: 232.5 100% 32.94%;
+    --darkblue-800: 232.31 100% 22.94%;
+    --darkblue-900: 232.73 100% 12.94%;
+
+    --blue-default: var(--blue-500);
+    --blue-100: 195 100% 90%;
+    --blue-200: 195 100% 85%;
+    --blue-300: 199 100% 75%;
+    --blue-400: 197 100% 65%;
+    --blue-500: 195 100% 40%;
+    --blue-600: 195 100% 30%;
+    --blue-700: 195 100% 25%;
+    --blue-800: 195 100% 20%;
+    --blue-900: 195 100% 13%;
+
+    --green-default: var(--green-500);
+    --green-100: 123 80% 88%;
+    --green-200: 123 80% 76%;
+    --green-300: 123 73% 68%;
+    --green-400: 123 73% 57%;
+    --green-500: 123 73% 46%;
+    --green-600: 123 76% 38%;
+    --green-700: 123 76% 27%;
+    --green-800: 122 79% 17%;
+    --green-900: 122 75% 13%;
+
+
+    --turquoise-default: var(--turquoise-500);
+    --turquoise-100: 164 100% 87%;
+    --turquoise-200: 164 100% 75%;
+    --turquoise-300: 164 100% 66%;
+    --turquoise-400: 164 100% 56%;
+    --turquoise-500: 167 100% 47%;
+    --turquoise-600: 167 100% 37%;
+    --turquoise-700: 167 100% 29%;
+    --turquoise-800: 167 100% 17%;
+    --turquoise-900: 167 100% 7%;
+
+    --red-default: var(--red-600);
+    --red-100: 6 88% 88%;
+    --red-200: 5 88% 76%;
+    --red-300: 5 88% 68%;
+    --red-400: 4 87% 58%;
+    --red-500: 4 87% 48%;
+    --red-600: 5 90% 38%;
+    --red-700: 5 91% 28%;
+    --red-800: 4 90% 18%;
+    --red-900: 4 92% 12%;
+
+    --orange-default: var(--orange-500);
+    --orange-100: 29 88% 87%;
+    --orange-200: 29 88% 76%;
+    --orange-300: 29 88% 68%;
+    --orange-400: 29 88% 59%;
+    --orange-500: 27 88% 48%;
+    --orange-600: 26 90% 38%;
+    --orange-700: 27 91% 28%;
+    --orange-800: 27 90% 18%;
+    --orange-900: 26 93% 12%;
+
+    --yellow-default: var(--yellow-400);
+    --yellow-100: 43 88% 88%;
+    --yellow-200: 43 88% 76%;
+    --yellow-300: 43 88% 69%;
+    --yellow-400: 43 88% 59%;
+    --yellow-500: 41 87% 49%;
+    --yellow-600: 43 90% 38%;
+    --yellow-700: 44 91% 28%;
+    --yellow-800: 42 90% 18%;
+    --yellow-900: 41 91% 12%;
+  }
+
+  .dark {
+    --background: var(--gray-1000);
+    --foreground: var(--gray-100);
+    --tw-prose-body: var(--gray-400);
+    --muted: 247 50% 12.9%;
+    --muted-foreground: 247 10% 54.3%;
+    --popover: 247 45% 5.59%;
+    --popover-foreground: 247 10% 97.15%;
+    --card: 247 45% 5.59%;
+    --card-foreground: 247 10% 97.15%;
+    --border: 247 50% 12.9%;
+    --input: 247 50% 12.9%;
+    --secondary: 247 50% 12.9%;
+    --secondary-foreground: 247 10% 97.15%;
+    --accent: 247 50% 12.9%;
+    --accent-foreground: 247 10% 97.15%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 247 10% 97.15%;
+    --ring: 247 100% 43%;
+    --radius: 0.3rem;
+
+    --page-background: var(--dark-100);
+    --box-background: #ffffff;
+    --primary-background: var(--blue-400);
+    --focus-background: var(--blue-900);
+    --focus-foreground: var(--primary-background);
+    --text-foreground: var(--light-100);
+    --secondary-text-foreground: var(--gray-300);
+    --text-inverted-foreground: var(--dark-100);
+
+    --border-strong: var(--gray-150);
+    --border-medium-strong: var(--gray-200);
+    --border-neutral: var(--gray-300);
+    --border-medium-light: var(--gray-700);
+    --border-light: var(--gray-800);
+    --border-focus: var(--blue-600);
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+    font-family: var(--font-ibm-plex-sans), system-ui, sans-serif;
+
+  }
+  h1,h2,h3,h4,h5,h6 {
+    font-family: var(--font-geologica), system-ui, sans-serif;
+  }
+  body {
+    @apply bg-background text-foreground;
+    font-size: 0.875rem;
+    line-height: 1.52;
+    letter-spacing: 0.0035rem;
+  }
+}