@ecohouse/ui 0.1.0

package/src/theme/tokens.ts

@@ -0,0 +1,286 @@
+/**
+ * EcoHouse design tokens — aligned with the shared design system
+ * (navy / storm gray / slate-blue palette).
+ */
+
+/** Storm Gray scale — Figma steps 0 → 8.5 */
+export const stormGray = {
+  "0": "#fbfcfc",
+  "0.5": "#eceef0",
+  "1": "#dadde0",
+  "1.5": "#c7cdd1",
+  "2": "#b5bcc1",
+  "3": "#8f9aa3",
+  "4": "#6a7984",
+  "5": "#455765",
+  "6": "#374651",
+  "7": "#29343d",
+  "8": "#1c2328",
+  "8.5": "#151a1e",
+} as const;
+
+export type StormGrayStep = keyof typeof stormGray;
+
+/** Navy scale — Figma steps 0 → 8.5 */
+export const navy = {
+  "0": "#f6fafe",
+  "0.5": "#dee5eb",
+  "1": "#c6d0d8",
+  "1.5": "#afbac5",
+  "2": "#97a5b2",
+  "3": "#677b8c",
+  "4": "#385066",
+  "5": "#082640",
+  "6": "#061e33",
+  "7": "#051726",
+  "8": "#030f1a",
+  "8.5": "#020b13",
+} as const;
+
+export type NavyStep = keyof typeof navy;
+
+/** Ruby Red scale — Figma steps 0 → 8.5 */
+export const rubyRed = {
+  "0": "#fff5f6",
+  "0.5": "#f7dddf",
+  "1": "#efc4c8",
+  "1.5": "#e7acb1",
+  "2": "#df939a",
+  "3": "#ce626d",
+  "4": "#be313f",
+  "5": "#ae0011",
+  "6": "#8b000e",
+  "7": "#68000a",
+  "8": "#460007",
+  "8.5": "#340005",
+} as const;
+
+export type RubyRedStep = keyof typeof rubyRed;
+
+/** Emerald Green scale — Figma steps 0 → 8.5 */
+export const emeraldGreen = {
+  "0": "#f0fbf5",
+  "0.5": "#dcf2e5",
+  "1": "#c8e8d5",
+  "1.5": "#b4dfc5",
+  "2": "#a0d5b5",
+  "3": "#77c394",
+  "4": "#4fb074",
+  "5": "#279d54",
+  "6": "#1f7e43",
+  "7": "#175e32",
+  "8": "#103f22",
+  "8.5": "#0c2f19",
+} as const;
+
+export type EmeraldGreenStep = keyof typeof emeraldGreen;
+
+/** Figma brand palette — primary swatch per color family */
+export const brand = {
+  slateBlue: "#182e3c",
+  stormGray: stormGray["5"],
+  navy: navy["5"],
+  rubyRed: rubyRed["5"],
+  emeraldGreen: emeraldGreen["5"],
+} as const;
+
+export const colors = {
+  // Brand colors
+  slateBlue: brand.slateBlue,
+
+  // Emerald Green — Figma scale + brand swatch
+  emeraldGreen0: emeraldGreen["0"],
+  emeraldGreen50: emeraldGreen["0.5"],
+  emeraldGreen100: emeraldGreen["1"],
+  emeraldGreen150: emeraldGreen["1.5"],
+  emeraldGreen200: emeraldGreen["2"],
+  emeraldGreen300: emeraldGreen["3"],
+  emeraldGreen400: emeraldGreen["4"],
+  emeraldGreen500: emeraldGreen["5"],
+  emeraldGreen600: emeraldGreen["6"],
+  emeraldGreen700: emeraldGreen["7"],
+  emeraldGreen800: emeraldGreen["8"],
+  emeraldGreen850: emeraldGreen["8.5"],
+
+  /** Primary brand emerald green — Figma Emerald Green 5 */
+  emeraldGreen: brand.emeraldGreen,
+
+  // Ruby Red — Figma scale + brand swatch
+  rubyRed0: rubyRed["0"],
+  rubyRed50: rubyRed["0.5"],
+  rubyRed100: rubyRed["1"],
+  rubyRed150: rubyRed["1.5"],
+  rubyRed200: rubyRed["2"],
+  rubyRed300: rubyRed["3"],
+  rubyRed400: rubyRed["4"],
+  rubyRed500: rubyRed["5"],
+  rubyRed600: rubyRed["6"],
+  rubyRed700: rubyRed["7"],
+  rubyRed800: rubyRed["8"],
+  rubyRed850: rubyRed["8.5"],
+
+  /** Primary brand ruby red — Figma Ruby Red 5 */
+  rubyRed: brand.rubyRed,
+
+  // Navy — Figma scale + brand swatch
+  navy0: navy["0"],
+  navy50: navy["0.5"],
+  navy100: navy["1"],
+  navy150: navy["1.5"],
+  navy200: navy["2"],
+  navy300: navy["3"],
+  navy400: navy["4"],
+  navy500: navy["5"],
+  navy600: navy["6"],
+  navy700: navy["7"],
+  navy800: navy["8"],
+  navy850: navy["8.5"],
+
+  /** Primary brand navy — Figma Navy 5 */
+  navy: brand.navy,
+
+  // Storm Gray — Figma scale + brand swatch
+  stormGray0: stormGray["0"],
+  stormGray50: stormGray["0.5"],
+  stormGray100: stormGray["1"],
+  stormGray150: stormGray["1.5"],
+  stormGray200: stormGray["2"],
+  stormGray300: stormGray["3"],
+  stormGray400: stormGray["4"],
+  stormGray500: stormGray["5"],
+  /** Figma brand swatch "Storm Gray" — same as `stormGray500` */
+  stormGrayBrand: brand.stormGray,
+  stormGray600: stormGray["6"],
+  stormGray700: stormGray["7"],
+  stormGray800: stormGray["8"],
+  stormGray850: stormGray["8.5"],
+
+  /** @deprecated Use `stormGray0` */
+  storm0: stormGray["0"],
+  /** @deprecated Use `stormGray50` */
+  storm50: stormGray["0.5"],
+  /** @deprecated Use `stormGray200` */
+  storm200: stormGray["2"],
+  /** @deprecated Use `stormGray300` */
+  storm300: stormGray["3"],
+  /** @deprecated Use `stormGray500` */
+  storm500: stormGray["5"],
+  /** @deprecated Use `stormGray700` */
+  storm700: stormGray["7"],
+  /** @deprecated Use `stormGray850` */
+  storm900: stormGray["8.5"],
+
+  countrySelectorSelectedBg: `${stormGray["0.5"]}99`,
+
+  white: "#ffffff",
+  error: "#dc2626",
+  errorDark: "#b3261e",
+  errorLight: "#fee2e2",
+  /** @deprecated Use `rubyRed` */
+  inputError: brand.rubyRed,
+  inputOutlineFocus: navy["0.5"],
+  inputOutlineError: rubyRed["0.5"],
+  warning: "#92400e",
+  warningBg: "#fef3c7",
+  success: "#28a745",
+  successMuted: "#9fd4a8",
+  /** @deprecated Use `emeraldGreen` */
+  green: brand.emeraldGreen,
+  transparent: "transparent",
+} as const;
+
+export const radii = {
+  sm: 8,
+  md: 12,
+  lg: 16,
+  xl: 20,
+  full: 9999,
+} as const;
+
+export const spacing = {
+  xs: 4,
+  sm: 8,
+  md: 12,
+  lg: 16,
+  xl: 24,
+  xxl: 32,
+} as const;
+
+export const fontSize = {
+  xs: 11,
+  sm: 12,
+  md: 14,
+  base: 16,
+  lg: 18,
+  xl: 24,
+  xxl: 32,
+} as const;
+
+/**
+ * Canonical Homepad type scale (matches `.typography-*` in `src/web/styles/typography.css`).
+ * font-size / line-height pairs:
+ * 12/16 · 14/19 · 18/24 · 20/27 · 24/25 · 32/34
+ */
+export const typographyScale = {
+  12: { fontSize: 12, lineHeight: 16 },
+  14: { fontSize: 14, lineHeight: 19 },
+  18: { fontSize: 18, lineHeight: 24 },
+  20: { fontSize: 20, lineHeight: 27 },
+  24: { fontSize: 24, lineHeight: 25 },
+  32: { fontSize: 32, lineHeight: 34 },
+} as const;
+
+export const fontWeight = {
+  regular: "400" as const,
+  medium: "500" as const,
+  semibold: "600" as const,
+  bold: "700" as const,
+};
+
+export const fonts = {
+  sans: "Noto Sans Armenian",
+} as const;
+
+/** Input label typography — Medium, typography-12 scale. */
+export const labelTypography = {
+  fontFamily: fonts.sans,
+  fontSize: typographyScale[12].fontSize,
+  fontWeight: fontWeight.medium,
+  lineHeight: typographyScale[12].lineHeight,
+  letterSpacing: 0,
+} as const;
+
+/** Button label typography — SemiBold. */
+export const buttonTypography = {
+  lg: {
+    fontFamily: fonts.sans,
+    fontSize: typographyScale[14].fontSize,
+    fontWeight: fontWeight.semibold,
+    lineHeight: typographyScale[14].lineHeight,
+    letterSpacing: 0,
+  },
+  sm: {
+    fontFamily: fonts.sans,
+    fontSize: typographyScale[12].fontSize,
+    fontWeight: fontWeight.semibold,
+    lineHeight: typographyScale[12].lineHeight,
+    letterSpacing: 0,
+  },
+} as const;
+
+export const shadows = {
+  card: {
+    shadowColor: colors.navy,
+    shadowOffset: { width: 0, height: 4 },
+    shadowOpacity: 0.05,
+    shadowRadius: 20,
+    elevation: 2,
+  },
+  cardLg: {
+    shadowColor: colors.navy,
+    shadowOffset: { width: 0, height: 4 },
+    shadowOpacity: 0.1,
+    shadowRadius: 20,
+    elevation: 4,
+  },
+} as const;

package/src/utils/useApplyWebClassName.ts

@@ -0,0 +1,83 @@
+import { useLayoutEffect } from "react";
+import { Platform } from "react-native";
+
+interface ClassListElement {
+  classList: {
+    add: (...classes: string[]) => void;
+    remove: (...classes: string[]) => void;
+  };
+}
+
+function hasClassList(node: unknown): node is ClassListElement {
+  return (
+    typeof node === "object" &&
+    node !== null &&
+    "classList" in node &&
+    typeof (node as ClassListElement).classList?.add === "function"
+  );
+}
+
+function resolveWebElement(ref: React.RefObject<unknown>): ClassListElement | null {
+  const node = ref.current;
+  if (!node) return null;
+
+  if (hasClassList(node)) return node;
+
+  const host = node as {
+    _touchableNode?: unknown;
+    getScrollableNode?: () => unknown;
+  };
+
+  if (hasClassList(host._touchableNode)) return host._touchableNode;
+
+  if (typeof host.getScrollableNode === "function") {
+    const scrollNode = host.getScrollableNode();
+    if (hasClassList(scrollNode)) return scrollNode;
+  }
+
+  return null;
+}
+
+/**
+ * Applies CSS class names to the underlying DOM node on web.
+ * Keeps TouchableOpacity/Text as the render path so default RN styles stay intact.
+ *
+ * Retries via rAF when the host node is not ready yet — otherwise classes like
+ * `h-13` / `w-full` would only land after a later re-render (e.g. typing in a form),
+ * which visibly changes button size.
+ */
+export function useApplyWebClassName(
+  ref: React.RefObject<unknown>,
+  className?: string,
+  enabled = true,
+): void {
+  useLayoutEffect(() => {
+    if (!enabled || Platform.OS !== "web" || !className?.trim()) return;
+
+    let cancelled = false;
+    let rafId = 0;
+    let appliedElement: ClassListElement | null = null;
+    const classes = className.trim().split(/\s+/);
+
+    const apply = () => {
+      if (cancelled) return;
+
+      const element = resolveWebElement(ref);
+      if (!element) {
+        rafId = requestAnimationFrame(apply);
+        return;
+      }
+
+      appliedElement = element;
+      element.classList.add(...classes);
+    };
+
+    apply();
+
+    return () => {
+      cancelled = true;
+      if (rafId) cancelAnimationFrame(rafId);
+      appliedElement?.classList.remove(...classes);
+    };
+  }, [ref, className, enabled]);
+}

package/src/web/styles/typography.css

@@ -0,0 +1,99 @@
+@layer components {
+  .typography-12 {
+    font-family: var(--font-sans, "Noto Sans Armenian", ui-sans-serif, system-ui, sans-serif);
+    font-size: 12px;
+    line-height: 16px;
+    letter-spacing: 0;
+  }
+
+  .typography-14 {
+    font-family: var(--font-sans, "Noto Sans Armenian", ui-sans-serif, system-ui, sans-serif);
+    font-size: 14px;
+    line-height: 19px;
+    letter-spacing: 0;
+  }
+
+  .typography-18 {
+    font-family: var(--font-sans, "Noto Sans Armenian", ui-sans-serif, system-ui, sans-serif);
+    font-size: 18px;
+    line-height: 24px;
+    letter-spacing: 0;
+  }
+
+  .typography-20 {
+    font-family: var(--font-sans, "Noto Sans Armenian", ui-sans-serif, system-ui, sans-serif);
+    font-size: 20px;
+    line-height: 27px;
+    letter-spacing: 0;
+  }
+
+  .typography-24 {
+    font-family: var(--font-sans, "Noto Sans Armenian", ui-sans-serif, system-ui, sans-serif);
+    font-size: 24px;
+    line-height: 25px;
+    letter-spacing: 0;
+  }
+
+  .typography-32 {
+    font-family: var(--font-sans, "Noto Sans Armenian", ui-sans-serif, system-ui, sans-serif);
+    font-size: 32px;
+    line-height: 34px;
+    letter-spacing: 0;
+  }
+
+  .typography-body {
+    font-family: var(--font-sans, "Noto Sans Armenian", ui-sans-serif, system-ui, sans-serif);
+    font-size: 14px;
+    line-height: 19px;
+    letter-spacing: 0;
+    font-weight: 400;
+  }
+
+  .typography-body-medium {
+    font-family: var(--font-sans, "Noto Sans Armenian", ui-sans-serif, system-ui, sans-serif);
+    font-size: 14px;
+    line-height: 19px;
+    letter-spacing: 0;
+    font-weight: 500;
+  }
+
+  .typography-caption {
+    font-family: var(--font-sans, "Noto Sans Armenian", ui-sans-serif, system-ui, sans-serif);
+    font-size: 12px;
+    line-height: 16px;
+    letter-spacing: 0;
+    font-weight: 400;
+  }
+
+  .typography-title-sm {
+    font-family: var(--font-sans, "Noto Sans Armenian", ui-sans-serif, system-ui, sans-serif);
+    font-size: 18px;
+    line-height: 24px;
+    letter-spacing: 0;
+    font-weight: 700;
+  }
+
+  .typography-title {
+    font-family: var(--font-sans, "Noto Sans Armenian", ui-sans-serif, system-ui, sans-serif);
+    font-size: 20px;
+    line-height: 27px;
+    letter-spacing: 0;
+    font-weight: 700;
+  }
+
+  .typography-title-lg {
+    font-family: var(--font-sans, "Noto Sans Armenian", ui-sans-serif, system-ui, sans-serif);
+    font-size: 24px;
+    line-height: 25px;
+    letter-spacing: 0;
+    font-weight: 700;
+  }
+
+  .typography-display {
+    font-family: var(--font-sans, "Noto Sans Armenian", ui-sans-serif, system-ui, sans-serif);
+    font-size: 32px;
+    line-height: 34px;
+    letter-spacing: 0;
+    font-weight: 700;
+  }
+}