From 72f69b8169bfbe22b555785c6761a93fc435c0cb Mon Sep 17 00:00:00 2001 From: Cedric van Putten Date: Thu, 26 Sep 2024 14:40:47 +0200 Subject: [PATCH] refactor(ui): drop light theme and always enable dark mode (#76) * chore: add expo dark from expo style guide * chore: drop unsupported css imports from expo dark * chore: remove the expo light theme * chore: finalize the forced dark mode and remove light mode --- packages/expo-atlas-ui/app/_layout.tsx | 23 --- packages/expo-atlas-ui/metro.config.js | 2 +- packages/expo-atlas-ui/providers/theme.tsx | 27 ++- .../{global.css => styles/expo-dark.css} | 154 +----------------- packages/expo-atlas-ui/styles/global.css | 33 ++++ packages/expo-atlas-ui/tailwind.config.js | 1 + 6 files changed, 57 insertions(+), 183 deletions(-) rename packages/expo-atlas-ui/{global.css => styles/expo-dark.css} (50%) create mode 100644 packages/expo-atlas-ui/styles/global.css diff --git a/packages/expo-atlas-ui/app/_layout.tsx b/packages/expo-atlas-ui/app/_layout.tsx index ba104a4..dc0c71e 100644 --- a/packages/expo-atlas-ui/app/_layout.tsx +++ b/packages/expo-atlas-ui/app/_layout.tsx @@ -1,5 +1,3 @@ -import '~/global.css'; - import { Slot } from 'expo-router'; import { BundleProvider } from '~/providers/bundle'; @@ -9,27 +7,6 @@ import { ThemeProvider } from '~/providers/theme'; import { ToastProvider } from '~/ui/Toast'; import { TooltipProvider } from '~/ui/Tooltip'; -// Import the Expo-required radix styles -import '@radix-ui/colors/green.css'; -import '@radix-ui/colors/greenDark.css'; -import '@radix-ui/colors/yellow.css'; -import '@radix-ui/colors/yellowDark.css'; -import '@radix-ui/colors/red.css'; -import '@radix-ui/colors/redDark.css'; -import '@radix-ui/colors/blue.css'; -import '@radix-ui/colors/blueDark.css'; -import '@radix-ui/colors/orange.css'; -import '@radix-ui/colors/orangeDark.css'; -import '@radix-ui/colors/purple.css'; -import '@radix-ui/colors/purpleDark.css'; -import '@radix-ui/colors/pink.css'; -import '@radix-ui/colors/pinkDark.css'; -import '@radix-ui/colors/slate.css'; -import '@radix-ui/colors/slateDark.css'; -// NOTE(cedric): these are not imported by `@expo/styleguide/dist/expo-theme.css`, but they are required for the syntax highlighting -import '@radix-ui/colors/gray.css'; -import '@radix-ui/colors/grayDark.css'; - export default function RootLayout() { return ( diff --git a/packages/expo-atlas-ui/metro.config.js b/packages/expo-atlas-ui/metro.config.js index 66f2068..bbcb9a5 100644 --- a/packages/expo-atlas-ui/metro.config.js +++ b/packages/expo-atlas-ui/metro.config.js @@ -5,7 +5,7 @@ const path = require('path'); // Load Expo's default config, with NativeWind support const config = withNativeWind(getDefaultConfig(__dirname, { isCSSEnabled: true }), { - input: './global.css', + input: './styles/global.css', }); // Move the Metro cache to `node_modules/.cache` diff --git a/packages/expo-atlas-ui/providers/theme.tsx b/packages/expo-atlas-ui/providers/theme.tsx index 4d5775c..d8492db 100644 --- a/packages/expo-atlas-ui/providers/theme.tsx +++ b/packages/expo-atlas-ui/providers/theme.tsx @@ -1,16 +1,25 @@ +import '~/styles/global.css'; +import '~/styles/expo-dark.css'; + +// Import the Expo-required radix styles from `@expo/style-guide/dist/expo-theme.css` +import '@radix-ui/colors/greenDark.css'; +import '@radix-ui/colors/yellowDark.css'; +import '@radix-ui/colors/redDark.css'; +import '@radix-ui/colors/blueDark.css'; +import '@radix-ui/colors/orangeDark.css'; +import '@radix-ui/colors/purpleDark.css'; +import '@radix-ui/colors/pinkDark.css'; +import '@radix-ui/colors/slateDark.css'; +import '@radix-ui/colors/grayDark.css'; // NOTE(cedric): this is required for syntax highlighting + import { useColorScheme } from 'nativewind'; -import { useEffect, type PropsWithChildren } from 'react'; +import type { PropsWithChildren } from 'react'; export function ThemeProvider({ children }: PropsWithChildren) { - const { colorScheme } = useColorScheme(); + const { setColorScheme } = useColorScheme(); - useEffect(() => { - // Keep the prefered color scheme synced with the `body` class name - if (document.body && colorScheme) { - document.body.classList.remove('light-theme', 'dark-theme'); - document.body.className = `${colorScheme}-theme`; - } - }, [colorScheme]); + // Force Atlas into dark mode + setColorScheme('dark'); return children; } diff --git a/packages/expo-atlas-ui/global.css b/packages/expo-atlas-ui/styles/expo-dark.css similarity index 50% rename from packages/expo-atlas-ui/global.css rename to packages/expo-atlas-ui/styles/expo-dark.css index e2483d4..c4b8cf4 100644 --- a/packages/expo-atlas-ui/global.css +++ b/packages/expo-atlas-ui/styles/expo-dark.css @@ -1,39 +1,4 @@ -@tailwind base; -@tailwind components; -@tailwind utilities; - -body { - background-color: var(--expo-theme-background-screen); - color: var(--expo-theme-text-default); -} - -html, body, #root { - height: auto; - min-height: 100vh; - margin: 0; - padding: 0; -} - -#root { - display: flex; -} - -@layer components { - .shiki code { - @apply grid grid-cols-[auto,1fr]; - } - - .shiki .line-number { - @apply px-4 text-right select-none; - } - - .shiki .line { - @apply pr-4; - } -} - -/* This is a copy without the radix imports, which are not supported in Expo Router */ -:root { +:root, .dark-theme { --expo-color-white: #fff; --expo-color-black: #000; @@ -51,120 +16,6 @@ html, body, #root { --expo-color-app-light-green: #6aa72a; --expo-color-app-dark-green: #3a8e39; - /* Backgrounds */ - --expo-theme-background-default: var(--expo-color-white); - --expo-theme-background-screen: var(--slate1); - --expo-theme-background-subtle: var(--slate2); - --expo-theme-background-element: var(--slate3); - --expo-theme-background-hover: var(--slate4); - --expo-theme-background-selected: var(--slate5); - --expo-theme-background-overlay: var(--expo-color-white); - --expo-theme-background-success: var(--green3); - --expo-theme-background-warning: var(--yellow3); - --expo-theme-background-danger: var(--red3); - --expo-theme-background-info: var(--blue3); - - /* Icons */ - --expo-theme-icon-default: var(--slate11); - --expo-theme-icon-secondary: var(--slate10); - --expo-theme-icon-tertiary: var(--slate9); - --expo-theme-icon-quaternary: var(--slate8); - --expo-theme-icon-success: var(--green10); - --expo-theme-icon-warning: var(--yellow11); - --expo-theme-icon-danger: var(--red10); - --expo-theme-icon-info: var(--blue10); - - /* Text */ - --expo-theme-text-default: var(--slate12); - --expo-theme-text-secondary: var(--slate11); - --expo-theme-text-tertiary: var(--slate10); - --expo-theme-text-quaternary: var(--slate9); - --expo-theme-text-link: var(--blue11); - --expo-theme-text-success: var(--green11); - --expo-theme-text-warning: var(--yellow11); - --expo-theme-text-danger: var(--red11); - --expo-theme-text-info: var(--blue11); - - /* Borders */ - --expo-theme-border-default: var(--slate7); - --expo-theme-border-secondary: var(--slate6); - --expo-theme-border-success: var(--green7); - --expo-theme-border-warning: var(--yellow7); - --expo-theme-border-danger: var(--red7); - --expo-theme-border-info: var(--blue7); - - /* Buttons */ - --expo-theme-button-primary-background: var(--blue10); - --expo-theme-button-primary-border: var(--blue10); - --expo-theme-button-primary-hover: var(--blue11); - --expo-theme-button-primary-icon: var(--blue3); - --expo-theme-button-primary-text: var(--expo-color-white); - --expo-theme-button-primary-disabled-background: var(--blue7); - --expo-theme-button-primary-disabled-border: var(--blue7); - --expo-theme-button-primary-disabled-text: var(--expo-color-white); - - --expo-theme-button-secondary-background: var(--expo-color-white); - --expo-theme-button-secondary-border: var(--slate8); - --expo-theme-button-secondary-hover: var(--slate3); - --expo-theme-button-secondary-icon: var(--slate11); - --expo-theme-button-secondary-text: var(--slate12); - --expo-theme-button-secondary-disabled-background: var(--expo-color-white); - --expo-theme-button-secondary-disabled-border: var(--slate6); - --expo-theme-button-secondary-disabled-text: var(--slate9); - - --expo-theme-button-tertiary-background: transparent; - --expo-theme-button-tertiary-border: transparent; - --expo-theme-button-tertiary-hover: var(--blue4); - --expo-theme-button-tertiary-icon: var(--blue9); - --expo-theme-button-tertiary-text: var(--blue10); - --expo-theme-button-tertiary-disabled-background: transparent; - --expo-theme-button-tertiary-disabled-border: transparent; - --expo-theme-button-tertiary-disabled-text: var(--blue8); - - --expo-theme-button-quaternary-background: transparent; - --expo-theme-button-quaternary-border: transparent; - --expo-theme-button-quaternary-hover: var(--slate4); - --expo-theme-button-quaternary-icon: var(--slate11); - --expo-theme-button-quaternary-text: var(--slate12); - --expo-theme-button-quaternary-disabled-background: transparent; - --expo-theme-button-quaternary-disabled-border: transparent; - --expo-theme-button-quaternary-disabled-text: var(--slate9); - - --expo-theme-button-primary-destructive-background: var(--red10); - --expo-theme-button-primary-destructive-border: var(--red10); - --expo-theme-button-primary-destructive-hover: var(--red11); - --expo-theme-button-primary-destructive-icon: var(--red3); - --expo-theme-button-primary-destructive-text: var(--expo-color-white); - --expo-theme-button-primary-destructive-disabled-background: var(--red7); - --expo-theme-button-primary-destructive-disabled-border: var(--red7); - --expo-theme-button-primary-destructive-disabled-text: var(--expo-color-white); - - --expo-theme-button-secondary-destructive-background: var(--expo-color-white); - --expo-theme-button-secondary-destructive-border: var(--red7); - --expo-theme-button-secondary-destructive-hover: var(--red3); - --expo-theme-button-secondary-destructive-icon: var(--red9); - --expo-theme-button-secondary-destructive-text: var(--red11); - --expo-theme-button-secondary-destructive-disabled-background: var(--expo-color-white); - --expo-theme-button-secondary-destructive-disabled-border: var(--red5); - --expo-theme-button-secondary-destructive-disabled-text: var(--red8); - - /* Light shadows */ - --expo-theme-shadows-none: 0 0 transparent; - --expo-theme-shadows-xs: 0 1px 3px rgba(0, 0, 0, 0.025), - 0 1px 2px rgba(0, 0, 0, 0.05); - --expo-theme-shadows-sm: 0 3px 6px rgba(0, 0, 0, 0.08), - 0 2px 4px rgba(0, 0, 0, 0.07); - --expo-theme-shadows-md: 0 10px 20px rgba(0, 0, 0, 0.1), - 0 3px 6px rgba(0, 0, 0, 0.05); - --expo-theme-shadows-lg: 0 15px 25px rgba(0, 0, 0, 0.12), - 0 5px 10px rgba(0, 0, 0, 0.05); - --expo-theme-shadows-xl: 0 20px 40px rgba(0, 0, 0, 0.15); - - /* Heading Font sizing */ - --expo-theme-heading-base-font-size: 12px; -} - -.dark-theme { /* Backgrounds */ --expo-theme-background-default: var(--slate1); --expo-theme-background-screen: #0C0D0E; @@ -273,6 +124,9 @@ html, body, #root { --expo-theme-shadows-lg: 0 15px 25px rgba(0, 0, 0, 0.5), 0 5px 10px rgba(0, 0, 0, 0.25); --expo-theme-shadows-xl: 0 20px 40px rgba(0, 0, 0, 0.5); + + /* Heading Font sizing */ + --expo-theme-heading-base-font-size: 12px; } @media (min-width: 401px) { diff --git a/packages/expo-atlas-ui/styles/global.css b/packages/expo-atlas-ui/styles/global.css new file mode 100644 index 0000000..52a9d87 --- /dev/null +++ b/packages/expo-atlas-ui/styles/global.css @@ -0,0 +1,33 @@ +@tailwind base; +@tailwind components; +@tailwind utilities; + +body { + background-color: var(--expo-theme-background-screen); + color: var(--expo-theme-text-default); +} + +html, body, #root { + height: auto; + min-height: 100vh; + margin: 0; + padding: 0; +} + +#root { + display: flex; +} + +@layer components { + .shiki code { + @apply grid grid-cols-[auto,1fr]; + } + + .shiki .line-number { + @apply px-4 text-right select-none; + } + + .shiki .line { + @apply pr-4; + } +} diff --git a/packages/expo-atlas-ui/tailwind.config.js b/packages/expo-atlas-ui/tailwind.config.js index 8e084dd..a832cc5 100644 --- a/packages/expo-atlas-ui/tailwind.config.js +++ b/packages/expo-atlas-ui/tailwind.config.js @@ -3,6 +3,7 @@ const expoTheme = require('@expo/styleguide/tailwind'); /** @type {import('tailwindcss').Config} */ module.exports = { ...expoTheme, + darkMode: ['class', 'dark-theme'], content: ['./{app,components,providers,ui,utils}**/*.{js,jsx,ts,tsx}'], presets: [require('nativewind/preset')], plugins: [require('tailwindcss-animate'), require('tailwind-gradient-mask-image')],