@ecohouse/ui 0.1.0 → 0.1.2

package/src/web/styles/typography.css

@@ -1,99 +1,21 @@
-@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;
-  }
+:root {
+  --font-sans: "Noto Sans Armenian", ui-sans-serif, system-ui, sans-serif;
+}
 
-  .typography-body-medium {
-    font-family: var(--font-sans, "Noto Sans Armenian", ui-sans-serif, system-ui, sans-serif);
+@layer components {
+  .typography-button-lg {
+    font-family: var(--font-sans);
     font-size: 14px;
-    line-height: 19px;
-    letter-spacing: 0;
-    font-weight: 500;
+    font-weight: 600;
+    line-height: 100%;
+    letter-spacing: 0.03em;
   }
 
-  .typography-caption {
-    font-family: var(--font-sans, "Noto Sans Armenian", ui-sans-serif, system-ui, sans-serif);
+  .typography-button-sm {
+    font-family: var(--font-sans);
     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;
+    font-weight: 600;
+    line-height: 100%;
+    letter-spacing: 0.03em;
   }
 }

package/src/components/Button.stories.tsx

@@ -1,135 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { fn } from "@storybook/test";
-import { View, StyleSheet, Text } from "react-native";
-import { Button } from "./Button";
-
-const meta = {
-  title: "Components/Button",
-  component: Button,
-  args: {
-    title: "Button",
-    onPress: fn(),
-    disabled: false,
-    variant: "primary",
-    size: "lg",
-    showIcon: false,
-  },
-  argTypes: {
-    onPress: { action: "pressed" },
-    variant: {
-      control: "select",
-      options: ["white", "primary", "green", "gray"],
-    },
-    size: {
-      control: "select",
-      options: ["lg", "sm"],
-    },
-  },
-} satisfies Meta<typeof Button>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {};
-
-export const WithIcon: Story = {
-  args: { showIcon: true, className: "w-full" },
-};
-
-export const WithCustomIcon: Story = {
-  args: {
-    title: "Custom icon",
-    showIcon: true,
-    icon: <Text style={{ fontSize: 16 }}>★</Text>,
-    className: "w-full",
-  },
-};
-
-export const WithClassName: Story = {
-  args: {
-    showIcon: true,
-    className: "w-full max-w-md",
-  },
-};
-
-export const AllVariants: Story = {
-  render: () => (
-    <View style={storyStyles.column}>
-      <Button title="Button" variant="gray" onPress={fn()} />
-      <Button title="Button" variant="white" onPress={fn()} />
-      <Button title="Button" variant="primary" onPress={fn()} />
-      <Button title="Button" variant="green" onPress={fn()} />
-    </View>
-  ),
-};
-
-export const AllVariantsWithIcon: Story = {
-  render: () => (
-    <View style={storyStyles.column}>
-      <Button title="Button" variant="gray" showIcon onPress={fn()} />
-      <Button title="Button" variant="white" showIcon onPress={fn()} />
-      <Button title="Button" variant="primary" showIcon onPress={fn()} />
-      <Button title="Button" variant="green" showIcon onPress={fn()} />
-    </View>
-  ),
-};
-
-export const Disabled: Story = {
-  render: () => (
-    <View style={storyStyles.grid}>
-      <View style={storyStyles.column}>
-        <Button title="Button" variant="gray" onPress={fn()} />
-        <Button title="Button" variant="white" onPress={fn()} />
-        <Button title="Button" variant="primary" onPress={fn()} />
-        <Button title="Button" variant="green" onPress={fn()} />
-      </View>
-      <View style={storyStyles.column}>
-        <Button title="Button" variant="gray" disabled onPress={fn()} />
-        <Button title="Button" variant="white" disabled onPress={fn()} />
-        <Button title="Button" variant="primary" disabled onPress={fn()} />
-        <Button title="Button" variant="green" disabled onPress={fn()} />
-      </View>
-    </View>
-  ),
-};
-
-export const DisabledWithIcon: Story = {
-  render: () => (
-    <View style={storyStyles.grid}>
-      <View style={storyStyles.column}>
-        <Button title="Button" variant="gray" showIcon onPress={fn()} />
-        <Button title="Button" variant="white" showIcon onPress={fn()} />
-        <Button title="Button" variant="primary" showIcon onPress={fn()} />
-        <Button title="Button" variant="green" showIcon onPress={fn()} />
-      </View>
-      <View style={storyStyles.column}>
-        <Button title="Button" variant="gray" showIcon disabled onPress={fn()} />
-        <Button title="Button" variant="white" showIcon disabled onPress={fn()} />
-        <Button title="Button" variant="primary" showIcon disabled onPress={fn()} />
-        <Button title="Button" variant="green" showIcon disabled onPress={fn()} />
-      </View>
-    </View>
-  ),
-};
-
-export const Sizes: Story = {
-  render: () => (
-    <View style={storyStyles.column}>
-      <Button title="Large" size="lg" showIcon onPress={fn()} />
-      <Button title="Small" size="sm" showIcon onPress={fn()} />
-      <Button title="Large" size="lg" onPress={fn()} />
-      <Button title="Small" size="sm" onPress={fn()} />
-    </View>
-  ),
-};
-
-const storyStyles = StyleSheet.create({
-  column: {
-    gap: 12,
-    width: 320,
-  },
-  grid: {
-    flexDirection: "row",
-    gap: 24,
-  },
-});

package/src/icons/arrowUpRightPath.ts

@@ -1 +0,0 @@
-export const ARROW_UP_RIGHT_PATH = "M14.1667 14.1668V5.8335H5.83333M14.1667 5.8335L5.83333 14.1668";

package/src/theme/tokens.test.ts

@@ -1,10 +0,0 @@
-import { describe, expect, it } from "vitest";
-import { buttonTypography, colors } from "../theme/tokens";
-
-describe("design tokens", () => {
-  it("exposes navy and button typography used by Button", () => {
-    expect(colors.navy).toMatch(/^#/);
-    expect(buttonTypography.lg.fontSize).toBe(14);
-    expect(buttonTypography.sm.fontSize).toBe(12);
-  });
-});

package/src/theme/tokens.ts

@@ -1,286 +0,0 @@
-/**
- * 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;