From b08c35e44c085442ad7be829b9f7b6bb7033aeb3 Mon Sep 17 00:00:00 2001 From: Jean-Philippe Kha Date: Mon, 1 Jul 2024 10:27:16 +0200 Subject: [PATCH] [filigran-ui] Add dark theme in the css bundle --- packages/filigran-ui/src/dark.css | 193 ++++++++++++++++++++++++++++++ 1 file changed, 193 insertions(+) create mode 100644 packages/filigran-ui/src/dark.css diff --git a/packages/filigran-ui/src/dark.css b/packages/filigran-ui/src/dark.css new file mode 100644 index 0000000..842b1f1 --- /dev/null +++ b/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; + } +}