@multiplatform.one/theme 6.0.0

package/src/theme/createThemes.ts

@@ -0,0 +1,286 @@
+import * as Colors from "@tamagui/colors";
+import {
+  createThemes as tamaguiCreateThemes,
+  type CreateThemesProps,
+} from "@tamagui/theme-builder";
+import { themes as tamaguiThemes } from "@tamagui/themes";
+
+const grayTheme = {
+  dark_gray: tamaguiThemes.dark,
+  dark_gray_active: tamaguiThemes.dark_active,
+  dark_gray_alt1: tamaguiThemes.dark_alt1,
+  dark_gray_alt2: tamaguiThemes.dark_alt2,
+  light_gray: tamaguiThemes.light,
+  light_gray_active: tamaguiThemes.light_active,
+  light_gray_alt1: tamaguiThemes.light_alt1,
+  light_gray_alt2: tamaguiThemes.light_alt2,
+};
+
+export interface Shadows {
+  shadow1: string;
+  shadow2: string;
+  shadow3: string;
+  shadow4: string;
+  shadow5: string;
+  shadow6: string;
+}
+
+export interface ThemeBuilderDefinition<
+  DarkPalette extends string[] = string[],
+  LightPalette extends string[] = string[],
+> {
+  darkPalette: DarkPalette;
+  lightPalette: LightPalette;
+}
+
+export interface BaseThemeBuilderDefinition<
+  DarkPalette extends string[] = string[],
+  LightPalette extends string[] = string[],
+  DarkShadows extends Shadows = Shadows,
+  LightShadows extends Shadows = Shadows,
+> extends ThemeBuilderDefinition<DarkPalette, LightPalette> {
+  darkShadows?: DarkShadows;
+  lightShadows?: LightShadows;
+}
+
+export interface GetThemeProps {
+  name: string;
+  theme: Record<string, string>;
+  scheme?: "light" | "dark";
+  parentName: string;
+  parentNames: string[];
+  level: number;
+  palette?: string[];
+}
+
+export interface CreateThemesBuilderOptions {
+  grandChildrenThemes?: CreateThemesProps["grandChildrenThemes"];
+  getTheme?: (props: GetThemeProps) => Record<string, string | number>;
+}
+
+const defaultLightShadows: Shadows = {
+  shadow1: "rgba(0,0,0,0.12)",
+  shadow2: "rgba(0,0,0,0.16)",
+  shadow3: "rgba(0,0,0,0.22)",
+  shadow4: "rgba(0,0,0,0.28)",
+  shadow5: "rgba(0,0,0,0.34)",
+  shadow6: "rgba(0,0,0,0.4)",
+};
+
+const defaultDarkShadows: Shadows = {
+  shadow1: "rgba(0,0,0,0.2)",
+  shadow2: "rgba(0,0,0,0.3)",
+  shadow3: "rgba(0,0,0,0.4)",
+  shadow4: "rgba(0,0,0,0.5)",
+  shadow5: "rgba(0,0,0,0.6)",
+  shadow6: "rgba(0,0,0,0.7)",
+};
+
+export function createThemesBuilder(
+  baseTheme: BaseThemeBuilderDefinition,
+  accentTheme: ThemeBuilderDefinition,
+  options?: CreateThemesBuilderOptions,
+) {
+  const base = {
+    palette: {
+      dark: baseTheme.darkPalette,
+      light: baseTheme.lightPalette,
+    },
+    extra: {
+      light: {
+        ...Colors.amber,
+        ...Colors.amberA,
+        ...Colors.blue,
+        ...Colors.blueA,
+        ...Colors.bronze,
+        ...Colors.bronzeA,
+        ...Colors.brown,
+        ...Colors.brownA,
+        ...Colors.crimson,
+        ...Colors.crimsonA,
+        ...Colors.cyan,
+        ...Colors.cyanA,
+        ...Colors.gold,
+        ...Colors.goldA,
+        ...Colors.grass,
+        ...Colors.grassA,
+        ...Colors.gray,
+        ...Colors.grayA,
+        ...Colors.green,
+        ...Colors.greenA,
+        ...Colors.indigo,
+        ...Colors.indigoA,
+        ...Colors.lime,
+        ...Colors.limeA,
+        ...Colors.mauve,
+        ...Colors.mauveA,
+        ...Colors.mint,
+        ...Colors.mintA,
+        ...Colors.olive,
+        ...Colors.oliveA,
+        ...Colors.orange,
+        ...Colors.orangeA,
+        ...Colors.pink,
+        ...Colors.pinkA,
+        ...Colors.plum,
+        ...Colors.plumA,
+        ...Colors.purple,
+        ...Colors.purpleA,
+        ...Colors.red,
+        ...Colors.redA,
+        ...Colors.sage,
+        ...Colors.sageA,
+        ...Colors.sand,
+        ...Colors.sandA,
+        ...Colors.sky,
+        ...Colors.skyA,
+        ...Colors.slate,
+        ...Colors.slateA,
+        ...Colors.teal,
+        ...Colors.tealA,
+        ...Colors.tomato,
+        ...Colors.tomatoA,
+        ...Colors.violet,
+        ...Colors.violetA,
+        ...Colors.yellow,
+        ...Colors.yellowA,
+        ...baseTheme.lightShadows,
+        shadowColor: baseTheme.lightShadows?.shadow1 || defaultLightShadows.shadow1,
+      },
+      dark: {
+        ...Colors.amberDark,
+        ...Colors.amberDarkA,
+        ...Colors.blueDark,
+        ...Colors.blueDarkA,
+        ...Colors.bronzeDark,
+        ...Colors.bronzeDarkA,
+        ...Colors.brownDark,
+        ...Colors.brownDarkA,
+        ...Colors.crimsonDark,
+        ...Colors.crimsonDarkA,
+        ...Colors.cyanDark,
+        ...Colors.cyanDarkA,
+        ...Colors.goldDark,
+        ...Colors.goldDarkA,
+        ...Colors.grassDark,
+        ...Colors.grassDarkA,
+        ...Colors.grayDark,
+        ...Colors.grayDarkA,
+        ...Colors.greenDark,
+        ...Colors.greenDarkA,
+        ...Colors.indigoDark,
+        ...Colors.indigoDarkA,
+        ...Colors.limeDark,
+        ...Colors.limeDarkA,
+        ...Colors.mauveDark,
+        ...Colors.mauveDarkA,
+        ...Colors.mintDark,
+        ...Colors.mintDarkA,
+        ...Colors.oliveDark,
+        ...Colors.oliveDarkA,
+        ...Colors.orangeDark,
+        ...Colors.orangeDarkA,
+        ...Colors.pinkDark,
+        ...Colors.pinkDarkA,
+        ...Colors.plumDark,
+        ...Colors.plumDarkA,
+        ...Colors.purpleDark,
+        ...Colors.purpleDarkA,
+        ...Colors.redDark,
+        ...Colors.redDarkA,
+        ...Colors.sageDark,
+        ...Colors.sageDarkA,
+        ...Colors.sandDark,
+        ...Colors.sandDarkA,
+        ...Colors.skyDark,
+        ...Colors.skyDarkA,
+        ...Colors.slateDark,
+        ...Colors.slateDarkA,
+        ...Colors.tealDark,
+        ...Colors.tealDarkA,
+        ...Colors.tomatoDark,
+        ...Colors.tomatoDarkA,
+        ...Colors.violetDark,
+        ...Colors.violetDarkA,
+        ...Colors.yellowDark,
+        ...Colors.yellowDarkA,
+        ...baseTheme.darkShadows,
+        shadowColor: baseTheme.darkShadows?.shadow1 || defaultDarkShadows.shadow1,
+      },
+    },
+  };
+  const childrenThemes = {
+    warning: {
+      palette: {
+        dark: Object.values(Colors.yellowDark),
+        light: Object.values(Colors.yellow),
+      },
+    },
+    error: {
+      palette: {
+        dark: Object.values(Colors.redDark),
+        light: Object.values(Colors.red),
+      },
+    },
+    success: {
+      palette: {
+        dark: Object.values(Colors.greenDark),
+        light: Object.values(Colors.green),
+      },
+    },
+  };
+  const createThemesProps: Record<string, unknown> = {
+    base,
+    childrenThemes,
+    accent: {
+      palette: {
+        dark: accentTheme.darkPalette,
+        light: accentTheme.lightPalette,
+      },
+    },
+  };
+  if (options?.grandChildrenThemes) {
+    createThemesProps.grandChildrenThemes = options.grandChildrenThemes;
+  }
+  if (options?.getTheme) {
+    createThemesProps.getTheme = options.getTheme;
+  }
+  const initialTheme = tamaguiCreateThemes(
+    createThemesProps as Parameters<typeof tamaguiCreateThemes>[0],
+  );
+  const themes = {
+    ...grayTheme,
+    ...tamaguiThemes,
+    ...initialTheme,
+  };
+  return {
+    themes() {
+      return themes;
+    },
+    addTheme<K extends string>(name: K, theme: ThemeBuilderDefinition) {
+      const addThemeProps: Record<string, unknown> = {
+        base,
+        childrenThemes,
+        accent: {
+          palette: {
+            dark: theme.darkPalette,
+            light: theme.lightPalette,
+          },
+        },
+      };
+      if (options?.grandChildrenThemes) {
+        addThemeProps.grandChildrenThemes = options.grandChildrenThemes;
+      }
+      if (options?.getTheme) {
+        addThemeProps.getTheme = options.getTheme;
+      }
+      const createdTheme = tamaguiCreateThemes(
+        addThemeProps as Parameters<typeof tamaguiCreateThemes>[0],
+      );
+      return {
+        [`dark_${name}`]: createdTheme.dark_accent,
+        [`light_${name}`]: createdTheme.light_accent,
+      } as Record<`dark_${K}` | `light_${K}`, typeof createdTheme.dark_accent>;
+    },
+  };
+}

package/src/theme/devtools/ColorLineVisualizer.tsx

@@ -0,0 +1,261 @@
+/**
+ * Color palette visualizer for devtools.
+ *
+ * Shows the 12-step color scale with semantic group brackets (Background,
+ * UI Background, Border, Primary, Text) all on a single row above the bar.
+ */
+
+import React, { useEffect, useMemo, useState, type CSSProperties } from "react";
+import { semanticGroups } from "../colorRules";
+import type { Knobs } from "../knobs";
+import { contrastTextFor, cellSize } from "./vizConstants";
+
+// ── Helpers ──────────────────────────────────────────────────
+
+function readColorsFromElement(el: Element): string[] | null {
+  const style = getComputedStyle(el);
+  const result: string[] = [];
+  let found = false;
+  for (let i = 1; i <= 12; i++) {
+    let color = style.getPropertyValue(`--color${i}`).trim();
+    if (!color) color = style.getPropertyValue(`--color-${i}`).trim();
+    if (color) {
+      found = true;
+      result.push(color);
+    } else {
+      result.push(fallbackGradient()[i - 1]);
+    }
+  }
+  return found ? result : null;
+}
+
+function useDomThemeColors(): string[] {
+  const [colors, setColors] = useState<string[]>(() => fallbackGradient());
+
+  useEffect(() => {
+    const readColors = () => {
+      let result = readColorsFromElement(document.documentElement);
+      if (!result && document.body) {
+        result = readColorsFromElement(document.body);
+      }
+      if (!result) {
+        const themed = document.querySelector('[class*="t_"]');
+        if (themed) result = readColorsFromElement(themed);
+      }
+      if (!result) {
+        const root = document.getElementById("root") || document.getElementById("__next");
+        if (root) result = readColorsFromElement(root);
+      }
+      if (result) setColors(result);
+    };
+
+    readColors();
+    const observer = new MutationObserver(readColors);
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ["class", "style"],
+    });
+    if (document.body) {
+      observer.observe(document.body, {
+        attributes: true,
+        attributeFilter: ["class", "style"],
+        subtree: true,
+      });
+    }
+    return () => observer.disconnect();
+  }, []);
+
+  return colors;
+}
+
+function fallbackGradient(): string[] {
+  return Array.from({ length: 12 }, (_, i) => {
+    const t = i / 11;
+    const v = Math.round(240 - t * 200);
+    return `rgb(${v},${v},${v})`;
+  });
+}
+
+// ── Sub-components ──────────────────────────────────────────
+
+function NumberLineRow({
+  colorFor,
+  compact,
+}: {
+  colorFor: (step: number) => string;
+  compact?: boolean;
+}) {
+  const h = compact ? Math.round(cellSize / 2) : cellSize;
+  return (
+    <div style={{ display: "flex", gap: 0 }}>
+      {Array.from({ length: 12 }, (_, i) => {
+        const step = i + 1;
+        const background = colorFor(step);
+        return (
+          <div
+            key={step}
+            style={{
+              width: cellSize,
+              height: h,
+              flexShrink: 0,
+              background: background,
+              color: contrastTextFor(background),
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              fontSize: compact ? 9 : 11,
+              fontWeight: 700,
+            }}
+            title={`$color${step}`}
+          >
+            {step}
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+/** All semantic group brackets rendered on a single row above the color bar. */
+function SemanticBrackets() {
+  const totalWidth = 12 * cellSize;
+  return (
+    <div style={{ position: "relative", height: 24, width: totalWidth, marginBottom: 2 }}>
+      {semanticGroups.map((g) => {
+        const leftPx = (g.from - 1) * cellSize;
+        const widthPx = (g.to - g.from + 1) * cellSize;
+        return (
+          <div
+            key={g.key}
+            style={{
+              position: "absolute",
+              left: leftPx,
+              width: widthPx,
+              bottom: 0,
+              display: "flex",
+              flexDirection: "column",
+            }}
+          >
+            <div
+              style={{
+                textAlign: "center",
+                fontSize: 9,
+                fontWeight: 600,
+                color: g.color,
+                lineHeight: 1.2,
+                whiteSpace: "nowrap",
+              }}
+            >
+              {g.label}
+            </div>
+            <div
+              style={{
+                height: 6,
+                borderLeft: `2px solid ${g.color}`,
+                borderRight: `2px solid ${g.color}`,
+                borderTop: `2px solid ${g.color}`,
+                borderRadius: "3px 3px 0 0",
+              }}
+            />
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+// ── Styles ──────────────────────────────────────────────────
+
+function createVizStyles(isDark: boolean) {
+  const border = isDark ? "#333" : "#ddd";
+  const mutedText = isDark ? "#888" : "#999";
+  const foreground = isDark ? "#e8e8e8" : "#1a1a1a";
+  const cardBackground = isDark ? "#1e1e1e" : "#fafafa";
+
+  return {
+    container: {
+      display: "flex" as const,
+      flexDirection: "column" as const,
+      gap: 6,
+      padding: "8px 10px",
+      borderRadius: 8,
+      border: `1px solid ${border}`,
+      background: cardBackground,
+      width: "fit-content" as const,
+      fontSize: 11,
+      fontFamily: "system-ui, -apple-system, sans-serif",
+      color: foreground,
+    },
+    title: {
+      fontSize: 13,
+      fontWeight: 600,
+      textTransform: "uppercase" as const,
+      letterSpacing: "0.06em",
+      color: mutedText,
+    },
+  };
+}
+
+// ── Main component ──────────────────────────────────────────
+
+export interface ColorLineVisualizerProps {
+  knobs: Knobs;
+  isDark: boolean;
+  themeColors?: string[];
+  oppositeThemeColors?: string[];
+  accentColors?: string[];
+  oppositeAccentColors?: string[];
+}
+
+export function ColorLineVisualizer({
+  knobs: _knobs,
+  isDark,
+  themeColors: propColors,
+  oppositeThemeColors: propOppositeColors,
+  accentColors: propAccentColors,
+  oppositeAccentColors: propOppositeAccentColors,
+}: ColorLineVisualizerProps) {
+  const domColors = useDomThemeColors();
+  const themeColors = propColors && propColors.length === 12 ? propColors : domColors;
+  const styles = useMemo(() => createVizStyles(isDark), [isDark]);
+
+  const toColorFn =
+    (arr: string[]) =>
+    (step: number): string =>
+      arr[Math.min(11, Math.max(0, step - 1))];
+
+  const colorFor = toColorFn(themeColors);
+  const oppositeColors =
+    propOppositeColors && propOppositeColors.length === 12 ? propOppositeColors : null;
+  const accentColors = propAccentColors && propAccentColors.length === 12 ? propAccentColors : null;
+  const oppositeAccentColors =
+    propOppositeAccentColors && propOppositeAccentColors.length === 12
+      ? propOppositeAccentColors
+      : null;
+
+  return (
+    <div style={styles.container}>
+      <div style={styles.title as CSSProperties}>Theme</div>
+      <SemanticBrackets />
+      <NumberLineRow colorFor={colorFor} />
+      {oppositeColors && <NumberLineRow colorFor={toColorFn(oppositeColors)} compact />}
+      {accentColors && (
+        <>
+          <div
+            style={{
+              ...(styles.title as CSSProperties),
+              fontSize: 11,
+              marginTop: 6,
+            }}
+          >
+            accent
+          </div>
+          <NumberLineRow colorFor={toColorFn(accentColors)} />
+          {oppositeAccentColors && (
+            <NumberLineRow colorFor={toColorFn(oppositeAccentColors)} compact />
+          )}
+        </>
+      )}
+    </div>
+  );
+}