From 2446f2c733b8168100b954f05f53d9fecffefc2b Mon Sep 17 00:00:00 2001 From: Jonathan Summers-Muir Date: Tue, 30 Jul 2024 01:13:15 +0800 Subject: [PATCH] combined dark theme so classic-dark does not break on other sites --- apps/docs/styles/main.scss | 3 +- apps/studio/styles/main.scss | 2 +- apps/www/styles/index.css | 3 +- .../ui/build/css/themes/dark-combined.css | 67 +++++++++++++++++++ 4 files changed, 70 insertions(+), 5 deletions(-) create mode 100644 packages/ui/build/css/themes/dark-combined.css diff --git a/apps/docs/styles/main.scss b/apps/docs/styles/main.scss index d66c3e7a4a3..e1dde0f01ec 100644 --- a/apps/docs/styles/main.scss +++ b/apps/docs/styles/main.scss @@ -3,8 +3,7 @@ @tailwind utilities; @import './../../../packages/ui/build/css/source/global.css'; -@import './../../../packages/ui/build/css/themes/dark.css'; -@import './../../../packages/ui/build/css/themes/classic-dark.css'; +@import './../../../packages/ui/build/css/themes/dark-combined.css'; @import './../../../packages/ui/build/css/themes/light.css'; @font-face { diff --git a/apps/studio/styles/main.scss b/apps/studio/styles/main.scss index 3809c6a8c3e..45d68861e71 100644 --- a/apps/studio/styles/main.scss +++ b/apps/studio/styles/main.scss @@ -4,8 +4,8 @@ @import '~ui/build/css/source/global.css'; @import '~ui/build/css/themes/dark.css'; -@import '~ui/build/css/themes/classic-dark.css'; @import '~ui/build/css/themes/light.css'; +@import '~ui/build/css/themes/classic-dark.css'; @layer utilities { .btn-primary { diff --git a/apps/www/styles/index.css b/apps/www/styles/index.css index 0a1032adcd9..6d1d820f0a0 100644 --- a/apps/www/styles/index.css +++ b/apps/www/styles/index.css @@ -5,8 +5,7 @@ @import url(../pages/launch-week/launchWeek.css); @import './../../../packages/ui/build/css/source/global.css'; -@import './../../../packages/ui/build/css/themes/dark.css'; -@import './../../../packages/ui/build/css/themes/classic-dark.css'; +@import './../../../packages/ui/build/css/themes/dark-combined.css'; @import './../../../packages/ui/build/css/themes/light.css'; @layer utilities { diff --git a/packages/ui/build/css/themes/dark-combined.css b/packages/ui/build/css/themes/dark-combined.css new file mode 100644 index 00000000000..5f141c0219e --- /dev/null +++ b/packages/ui/build/css/themes/dark-combined.css @@ -0,0 +1,67 @@ +[data-theme='classic-dark'], +.classic-dark, +[data-theme='dark'], +.dark { + --helpers-os-appearance: Dark; + --code-block-5: 13.8deg 89.7% 69.6%; + --code-block-4: 276.1deg 67.7% 74.5%; + --code-block-3: 83.8deg 61.7% 63.1%; + --code-block-2: 33.2deg 90.3% 75.7%; + --code-block-1: 170.8deg 43.1% 61.4%; + --secondary-default: 247.8deg 100% 70%; + --secondary-400: 248.3deg 54.5% 25.9%; + --secondary-200: 248deg 53.6% 11%; + --brand-link: 155deg 100% 38.6%; + --brand-button: 154.9deg 100% 19.2%; + --brand-default: 153.1deg 60.2% 52.7%; + --brand-600: 154.9deg 59.5% 70%; + --brand-500: 154.9deg 100% 19.2%; + --brand-400: 155.5deg 100% 9.6%; + --brand-300: 155.1deg 100% 8%; + --brand-200: 162deg 100% 2%; + --warning-default: 38.9deg 100% 42.9%; + --warning-600: 38.9deg 100% 42.9%; + --warning-500: 34.8deg 90.9% 21.6%; + --warning-400: 33.2deg 100% 14.5%; + --warning-300: 32.3deg 100% 10.2%; + --warning-200: 36.6deg 100% 8%; + --destructive-default: 10.2deg 77.9% 53.9%; + --destructive-600: 9.7deg 85.2% 62.9%; + --destructive-500: 7.9deg 71.6% 29%; + --destructive-400: 6.7deg 60% 20.6%; + --destructive-300: 7.5deg 51.3% 15.3%; + --destructive-200: 10.9deg 23.4% 9.2%; + --border-stronger: 0deg 0% 27.1%; + --border-strong: 0deg 0% 21.2%; + --border-alternative: 0deg 0% 26.7%; + --border-control: 0deg 0% 22.4%; + --border-overlay: 0deg 0% 20%; + --border-secondary: 0deg 0% 14.1%; + --border-muted: 0deg 0% 14.1%; + --border-default: 0deg 0% 18%; + --background-dash-canvas: 0deg 0% 7.1%; + --background-dash-sidebar: 0deg 0% 9%; + --background-dialog-default: 0deg 0% 7.1%; + --background-muted: 0deg 0% 14.1%; + --background-overlay-hover: 0deg 0% 18%; + --background-overlay-default: 0deg 0% 14.1%; + --background-surface-400: 0deg 0% 16.1%; + --background-surface-300: 0deg 0% 16.1%; + --background-surface-200: 0deg 0% 12.9%; + --background-surface-100: 0deg 0% 12.2%; + --background-surface-75: 0deg 0% 9%; + --background-control: 0deg 0% 14.1%; + --background-selection: 0deg 0% 19.2%; + --background-alternative-default: 0deg 0% 5.9%; + --background-default: 0deg 0% 7.1%; + --background-200: 0deg 0% 9%; + --foreground-contrast: 0deg 0% 8.6%; + --foreground-muted: 0deg 0% 30.2%; + --foreground-lighter: 0deg 0% 53.7%; + --foreground-light: 0deg 0% 70.6%; + --foreground-default: 0deg 0% 98%; + --border-button-hover: var(--colors-gray-dark-800); + --border-button-default: var(--colors-gray-dark-700); + --background-button-default: var(--colors-gray-dark-500); + --background-alternative-200: var(--colors-gray-dark-200); +}