@ecohouse/ui 0.1.13 → 0.1.15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ecohouse/ui",
-  "version": "0.1.13",
+  "version": "0.1.15",
   "type": "module",
   "private": false,
   "description": "Cross-platform presentation-only UI components for EcoHouse (React Native + React Native Web)",

package/src/theme/colors.test.ts

@@ -1,6 +1,12 @@
 import { describe, expect, it } from "vitest";
 import { colors } from "./colors";
-import { buttonTypography } from "./typography";
+import {
+  buttonTypography,
+  inputTypography,
+  segmentedToggleTypography,
+  selectTypography,
+  textareaTypography,
+} from "./typography";
 
 describe("design tokens", () => {
   it("exposes primary and button typography used by Button", () => {
@@ -15,5 +21,20 @@ describe("design tokens", () => {
     expect(colors.whiteAlpha5).toBe("#FFFFFF0D");
     expect(buttonTypography.lg.fontSize).toBe(14);
     expect(buttonTypography.lg.fontWeight).toBe("600");
+    expect(segmentedToggleTypography.fontSize).toBe(12);
+    expect(segmentedToggleTypography.lineHeight).toBe(12);
+  });
+
+  it("keeps Input, Select, and Textarea field text aligned", () => {
+    const fieldTypography = {
+      fontSize: 12,
+      fontWeight: "400",
+      letterSpacing: 0.36,
+      lineHeight: 12,
+    };
+
+    expect(inputTypography.field).toMatchObject(fieldTypography);
+    expect(selectTypography.field).toMatchObject(fieldTypography);
+    expect(textareaTypography.field).toMatchObject(fieldTypography);
   });
 });

package/src/theme/typography.ts

@@ -38,12 +38,12 @@ export const statCardTypography = {
   letterSpacing: 0,
 } as const;
 
-/** Segmented toggle label — Medium 14, line-height 100%, letter-spacing 0. */
+/** Segmented toggle label — Medium 12, line-height 100%, letter-spacing 0. */
 export const segmentedToggleTypography = {
   fontFamily: fonts.sans,
-  fontSize: 14,
+  fontSize: 12,
   fontWeight: "500" as const,
-  lineHeight: 14,
+  lineHeight: 12,
   letterSpacing: 0,
 } as const;
 
@@ -117,10 +117,10 @@ export const inputTypography = {
   },
   field: {
     fontFamily: fonts.sans,
-    fontSize: 14,
+    fontSize: 12,
     fontWeight: "400" as const,
-    lineHeight: 19,
-    letterSpacing: 0,
+    lineHeight: 12,
+    letterSpacing: 0.36,
   },
   hint: {
     fontFamily: fonts.sans,
@@ -131,7 +131,7 @@ export const inputTypography = {
   },
 } as const;
 
-/** Select label / field / hint typography — Medium/Regular 12–14, letter-spacing 3%. */
+/** Select label / field / hint typography — Medium/Regular 12, letter-spacing 3%. */
 export const selectTypography = {
   label: {
     fontFamily: fonts.sans,
@@ -142,10 +142,10 @@ export const selectTypography = {
   },
   field: {
     fontFamily: fonts.sans,
-    fontSize: 14,
+    fontSize: 12,
     fontWeight: "400" as const,
-    lineHeight: 19,
-    letterSpacing: 0,
+    lineHeight: 12,
+    letterSpacing: 0.36,
   },
   hint: {
     fontFamily: fonts.sans,
@@ -221,7 +221,7 @@ export const datePickerTypography = {
   },
 } as const;
 
-/** Textarea label / field / hint typography — Medium/Regular 12–14, letter-spacing 3%. */
+/** Textarea label / field / hint typography — Medium/Regular 12, letter-spacing 3%. */
 export const textareaTypography = {
   label: {
     fontFamily: fonts.sans,
@@ -232,10 +232,10 @@ export const textareaTypography = {
   },
   field: {
     fontFamily: fonts.sans,
-    fontSize: 14,
+    fontSize: 12,
     fontWeight: "400" as const,
-    lineHeight: 19,
-    letterSpacing: 0,
+    lineHeight: 12,
+    letterSpacing: 0.36,
   },
   hint: {
     fontFamily: fonts.sans,