Common ui updates for storybook

edgedb · Oct 8, 2024 · bf6579b · bf6579b
1 parent d783a39
commit bf6579b
Show file tree

Hide file tree

Showing 4 changed files with 71 additions and 10 deletions.
diff --git a/shared/common/hooks/useTheme/index.tsx b/shared/common/hooks/useTheme/index.tsx
@@ -22,7 +22,10 @@ export function ThemeProvider({
   children,
   localStorageKey,
   forceTheme,
-}: PropsWithChildren<{localStorageKey?: string; forceTheme?: Theme}>) {
+}: PropsWithChildren<{
+  localStorageKey?: string;
+  forceTheme?: Theme.light | Theme.dark;
+}>) {
   if (typeof window === "undefined") {
     return (
       <div
@@ -69,15 +72,19 @@ export function ThemeProvider({
 
   return (
     <div
-      className={resolvedTheme === Theme.light ? "light-theme" : "dark-theme"}
+      className={
+        (forceTheme ?? resolvedTheme) === Theme.light
+          ? "light-theme"
+          : "dark-theme"
+      }
       style={{
         display: "contents",
       }}
     >
       <themeContext.Provider
         value={[
-          theme,
-          resolvedTheme,
+          forceTheme ?? theme,
+          forceTheme ?? resolvedTheme,
           (theme) => {
             localStorage.setItem(localStorageKey ?? "appTheme", theme);
             setTheme(theme);

diff --git a/shared/common/newui/select/index.tsx b/shared/common/newui/select/index.tsx
@@ -1,13 +1,14 @@
 import cn from "@edgedb/common/utils/classNames";
-import {Select as _Select, SelectProps} from "@edgedb/common/ui/select";
+import {
+  Select as _Select,
+  SelectProps as _SelectProps,
+} from "@edgedb/common/ui/select";
 
 import styles from "./select.module.scss";
 
-export function Select<T>({
-  className,
-  label,
-  ...props
-}: SelectProps<T> & {label?: string}) {
+export type SelectProps<T = any> = _SelectProps<T> & {label?: string};
+
+export function Select<T>({className, label, ...props}: SelectProps) {
   if (label != null) {
     return (
       <label className={cn(styles.selectField, className)}>

diff --git a/shared/common/newui/select/select.module.scss b/shared/common/newui/select/select.module.scss
@@ -1,6 +1,7 @@
 @import "@edgedb/common/mixins.scss";
 
 .select {
+  font-family: "Roboto Flex Variable", "Roboto", sans-serif;
   line-height: 24px;
   border: 1px solid #e1e1e1;
   background: #fff;

diff --git a/shared/common/newui/theme.module.scss b/shared/common/newui/theme.module.scss
@@ -0,0 +1,52 @@
+@import "../mixins.scss";
+
+.theme {
+  // Base colors
+  --Grey6: #0f0f0f;
+  --Grey8: #141414;
+  --Grey10: #1a1a1a;
+  --Grey12: #1f1f1f;
+  --Grey14: #242424;
+  --Grey16: #292929;
+  --Grey18: #2e2e2e;
+  --Grey20: #333333;
+  --Grey22: #363636;
+  --Grey25: #404040;
+  --Grey30: #4d4d4d;
+  --Grey40: #666666;
+  --Grey45: #737373;
+  --Grey50: #808080;
+  --Grey55: #8c8c8c;
+  --Grey60: #999999;
+  --Grey65: #a6a6a6;
+  --Grey70: #b3b3b3;
+  --Grey75: #bfbfbf;
+  --Grey80: #cccccc;
+  --Grey85: #d9d9d9;
+  --Grey90: #e6e6e6;
+  --Grey93: #ededed;
+  --Grey95: #f2f2f2;
+  --Grey97: #f7f7f7;
+  --Grey99: #fcfcfc;
+
+  // Semantic colors
+  --page_background: var(--Grey93);
+  --app_panel_background: var(--Grey97);
+  --panel_background: #fff;
+  --panel_border: var(--Grey90);
+
+  --main_text_color: var(--Grey30);
+  --secondary_text_color: var(--Grey40);
+  --tertiary_text_color: var(--Grey50);
+
+  @include darkTheme {
+    --page_background: var(--Grey8);
+    --app_panel_background: var(--Grey14);
+    --panel_background: var(--Grey22);
+    --panel_border: var(--Grey30);
+
+    --main_text_color: var(--Grey80);
+    --secondary_text_color: var(--Grey70);
+    --tertiary_text_color: var(--Grey60);
+  }
+}