@ezpg/app-ui 0.3.0 → 0.5.0

package/lib/typescript/src/theme/base.d.ts

@@ -3,18 +3,19 @@ export declare const semantic: {
         readonly background: "#ffffff";
         readonly foreground: "#0a0a0a";
         readonly muted: "#f5f5f5";
-        readonly mutedForeground: "#737373";
+        readonly mutedForeground: "#525252";
         readonly border: "#e5e5e5";
         readonly input: "#d4d4d4";
         readonly ring: "#a3a3a3";
         readonly primary: "#171717";
         readonly primaryForeground: "#fafafa";
-        readonly danger: "#dc2626";
+        readonly danger: "#b91c1c";
         readonly dangerForeground: "#ffffff";
         readonly success: "#15803d";
         readonly successForeground: "#ffffff";
         readonly warning: "#f59e0b";
         readonly warningForeground: "#0a0a0a";
+        readonly warningText: "#b45309";
         readonly info: "#2563eb";
         readonly infoForeground: "#ffffff";
     };
@@ -34,6 +35,7 @@ export declare const semantic: {
         readonly successForeground: "#0a0a0a";
         readonly warning: "#fbbf24";
         readonly warningForeground: "#0a0a0a";
+        readonly warningText: "#fbbf24";
         readonly info: "#60a5fa";
         readonly infoForeground: "#0a0a0a";
     };
@@ -63,6 +65,11 @@ export declare const typography: {
         readonly lineHeight: 16;
         readonly fontWeight: "400";
     };
+    readonly label: {
+        readonly fontSize: 14;
+        readonly lineHeight: 20;
+        readonly fontWeight: "400";
+    };
     readonly body: {
         readonly fontSize: 15;
         readonly lineHeight: 22;
@@ -78,6 +85,11 @@ export declare const typography: {
         readonly lineHeight: 28;
         readonly fontWeight: "600";
     };
+    readonly screenTitle: {
+        readonly fontSize: 24;
+        readonly lineHeight: 32;
+        readonly fontWeight: "700";
+    };
     readonly display: {
         readonly fontSize: 28;
         readonly lineHeight: 34;
@@ -103,4 +115,25 @@ export declare const touch: {
     readonly ios: 44;
     readonly android: 48;
 };
+export declare const layout: {
+    readonly screenX: 16;
+    readonly screenTop: 24;
+    readonly titleGap: 24;
+    readonly sectionGap: 32;
+    readonly groupGap: 12;
+    readonly itemGap: 8;
+    readonly footerTop: 12;
+    readonly footerBottom: 16;
+};
+export declare const controlSize: {
+    readonly sm: 44;
+    readonly md: 48;
+    readonly lg: 52;
+};
+export declare const frame: {
+    readonly header: 52;
+    readonly listRow: 56;
+    readonly listRow2: 72;
+    readonly listRow3: 88;
+};
 //# sourceMappingURL=base.d.ts.map

package/lib/typescript/src/theme/base.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"base.d.ts","sourceRoot":"","sources":["../../../../src/theme/base.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuCX,CAAC;AAEX,eAAO,MAAM,KAAK;;;;;;;;;;;;CAYR,CAAC;AAEX,eAAO,MAAM,MAAM;;;;;CAKT,CAAC;AAEX,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;CA0Bb,CAAC;AAEX,eAAO,MAAM,MAAM;;;CAGT,CAAC;AAEX,eAAO,MAAM,MAAM;;CAET,CAAC;AAEX,eAAO,MAAM,OAAO;;;CAGV,CAAC;AAEX,eAAO,MAAM,QAAQ;;;CAGX,CAAC;AAEX,eAAO,MAAM,KAAK;;;CAGR,CAAC"}
+{"version":3,"file":"base.d.ts","sourceRoot":"","sources":["../../../../src/theme/base.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyCX,CAAC;AAEX,eAAO,MAAM,KAAK;;;;;;;;;;;;CAYR,CAAC;AAEX,eAAO,MAAM,MAAM;;;;;CAKT,CAAC;AAEX,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoCb,CAAC;AAEX,eAAO,MAAM,MAAM;;;CAGT,CAAC;AAEX,eAAO,MAAM,MAAM;;CAET,CAAC;AAEX,eAAO,MAAM,OAAO;;;CAGV,CAAC;AAEX,eAAO,MAAM,QAAQ;;;CAGX,CAAC;AAEX,eAAO,MAAM,KAAK;;;CAGR,CAAC;AAEX,eAAO,MAAM,MAAM;;;;;;;;;CAST,CAAC;AAEX,eAAO,MAAM,WAAW;;;;CAId,CAAC;AAEX,eAAO,MAAM,KAAK;;;;;CAKR,CAAC"}

package/lib/typescript/src/theme/contract.d.ts

@@ -0,0 +1,7 @@
+export declare const TONES: readonly ["neutral", "info", "success", "warning", "danger", "primary"];
+export type Tone = (typeof TONES)[number];
+export declare const BUTTON_VARIANTS: readonly ["primary", "secondary", "outline", "ghost", "danger"];
+export type ButtonVariant = (typeof BUTTON_VARIANTS)[number];
+export declare const BUTTON_SIZES: readonly ["sm", "md", "lg"];
+export type ButtonSize = (typeof BUTTON_SIZES)[number];
+//# sourceMappingURL=contract.d.ts.map

package/lib/typescript/src/theme/contract.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"contract.d.ts","sourceRoot":"","sources":["../../../../src/theme/contract.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,KAAK,yEAOR,CAAC;AACX,MAAM,MAAM,IAAI,GAAG,CAAC,OAAO,KAAK,CAAC,CAAC,MAAM,CAAC,CAAC;AAE1C,eAAO,MAAM,eAAe,iEAMlB,CAAC;AACX,MAAM,MAAM,aAAa,GAAG,CAAC,OAAO,eAAe,CAAC,CAAC,MAAM,CAAC,CAAC;AAE7D,eAAO,MAAM,YAAY,6BAA8B,CAAC;AACxD,MAAM,MAAM,UAAU,GAAG,CAAC,OAAO,YAAY,CAAC,CAAC,MAAM,CAAC,CAAC"}

package/lib/typescript/src/theme/tokens.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../../../../src/theme/tokens.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,mBAAU,CAAC;AAatE,eAAO,MAAM,MAAM,EAAE,MAAM,CAAC,WAAW,EAAE,WAAW,CAAY,CAAC;AAEjE,eAAO,MAAM,MAAM,EAAE,WAWpB,CAAC"}
+{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../../../../src/theme/tokens.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,mBAAU,CAAC;AAgBtE,eAAO,MAAM,MAAM,EAAE,MAAM,CAAC,WAAW,EAAE,WAAW,CAAY,CAAC;AAEjE,eAAO,MAAM,MAAM,EAAE,WAmBpB,CAAC"}

package/lib/typescript/src/types/index.d.ts

@@ -16,10 +16,11 @@ export type ThemeColors = {
     successForeground: string;
     warning: string;
     warningForeground: string;
+    warningText: string;
     info: string;
     infoForeground: string;
 };
-export type TypographyVariant = 'caption' | 'body' | 'bodyLg' | 'title' | 'display';
+export type TypographyVariant = 'caption' | 'label' | 'body' | 'bodyLg' | 'title' | 'screenTitle' | 'display';
 export type TypographyToken = {
     fontSize: number;
     lineHeight: number;
@@ -64,6 +65,27 @@ export type ThemeTokens = {
         md: number;
     };
     minTouchSize: number;
+    layout: {
+        screenX: number;
+        screenTop: number;
+        titleGap: number;
+        sectionGap: number;
+        groupGap: number;
+        itemGap: number;
+        footerTop: number;
+        footerBottom: number;
+    };
+    controlSize: {
+        sm: number;
+        md: number;
+        lg: number;
+    };
+    headerHeight: number;
+    listRow: {
+        oneLine: number;
+        twoLine: number;
+        threeLine: number;
+    };
 };
 export type Theme = ThemeTokens & {
     scheme: ColorScheme;

package/lib/typescript/src/types/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/types/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/types/index.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ezpg/app-ui",
-  "version": "0.3.0",
+  "version": "0.5.0",
   "description": "React Native UI components for EZPG partner apps",
   "main": "./lib/module/index.js",
   "types": "./lib/typescript/src/index.d.ts",

package/src/blocks/brand-profile-card/brand-profile-card.tsx

@@ -24,12 +24,12 @@ export type BrandProfileCardProps = {
 const useStyles = makeStyles((t) => ({
   head: { flexDirection: 'row', alignItems: 'center', gap: t.space[3] },
   logo: { width: 56 },
-  title: { flex: 1, gap: 2 },
+  title: { flex: 1, gap: t.space[1] },
   row: { flexDirection: 'row', flexWrap: 'wrap', gap: t.space[2] },
   dot: {
     width: 20,
     height: 20,
-    borderRadius: 10,
+    borderRadius: t.radius.full,
     borderWidth: 1,
     borderColor: t.colors.border,
   },

package/src/blocks/bulk-ship-list/bulk-ship-list.tsx

@@ -66,7 +66,7 @@ const useStyles = makeStyles((t) => ({
     height: FIELD_HEIGHT,
     alignItems: 'center',
     justifyContent: 'center',
-    borderRadius: 10,
+    borderRadius: t.radius.md,
     borderWidth: 1,
     borderColor: t.colors.input,
     backgroundColor: t.colors.background,

package/src/blocks/claim-row/claim-row.tsx

@@ -1,3 +1,4 @@
+import { deadlineTone } from '../internal/format';
 import { View, type StyleProp, type ViewStyle } from 'react-native';
 import { formatPrice } from '../../components/price/price';
 import { Text } from '../../components/text/text';
@@ -73,8 +74,16 @@ function formatDday(days: number): string {
 const useStyles = makeStyles((t) => ({
   row: { flexDirection: 'row', alignItems: 'center', gap: t.space[2] },
   grow: { flex: 1 },
-  head: { fontSize: 16, lineHeight: 24, fontVariant: ['tabular-nums'] },
-  deadline: { fontSize: 14, lineHeight: 20, fontVariant: ['tabular-nums'] },
+  head: {
+    fontSize: t.typography.bodyLg.fontSize,
+    lineHeight: t.typography.bodyLg.lineHeight,
+    fontVariant: ['tabular-nums'],
+  },
+  deadline: {
+    fontSize: t.typography.label.fontSize,
+    lineHeight: t.typography.label.lineHeight,
+    fontVariant: ['tabular-nums'],
+  },
 }));
 
 export function ClaimRow({
@@ -112,7 +121,7 @@ export function ClaimRow({
           {deadline ? (
             <Text
               weight="bold"
-              tone={days !== null && days <= 1 ? 'danger' : 'muted'}
+              tone={days === null ? 'muted' : deadlineTone(days)}
               style={s.deadline}
             >
               {deadline}

package/src/blocks/color-swatch-picker/color-swatch-picker.tsx

@@ -54,7 +54,11 @@ const useStyles = makeStyles((t) => ({
     alignItems: 'center',
     justifyContent: 'center',
   },
-  line: { height: 6, borderRadius: 3, backgroundColor: t.colors.muted },
+  line: {
+    height: 6,
+    borderRadius: t.radius.full,
+    backgroundColor: t.colors.muted,
+  },
   long: { width: '70%' },
   short: { width: '45%' },
 }));

package/src/blocks/copy-variant-picker/copy-variant-picker.tsx

@@ -38,8 +38,8 @@ const useStyles = makeStyles((t) => ({
   radio: {
     width: 18,
     height: 18,
-    marginTop: 2,
-    borderRadius: 9,
+    marginTop: t.space[1],
+    borderRadius: t.radius.full,
     borderWidth: 2,
     borderColor: t.colors.border,
     alignItems: 'center',
@@ -49,7 +49,7 @@ const useStyles = makeStyles((t) => ({
   radioDot: {
     width: 8,
     height: 8,
-    borderRadius: 4,
+    borderRadius: t.radius.full,
     backgroundColor: t.colors.primary,
   },
   body: { flex: 1, gap: t.space[2] },

package/src/blocks/credit-wallet/credit-wallet.tsx

@@ -26,7 +26,7 @@ const useStyles = makeStyles((t) => ({
     flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'space-between',
-    minHeight: 44,
+    minHeight: t.controlSize.sm,
     paddingHorizontal: t.space[3],
     borderRadius: t.radius.md,
     backgroundColor: `${t.colors.warning}24`,

package/src/blocks/image-grid/image-grid.tsx

@@ -45,14 +45,18 @@ const useStyles = makeStyles((t) => ({
     borderRadius: RADIUS,
   },
   dim: { backgroundColor: `${t.colors.background}B3` },
-  light: { gap: 2, backgroundColor: `${t.colors.background}D9` },
-  failed: { fontSize: 12, lineHeight: 16, color: t.colors.danger },
+  light: { gap: t.space[1], backgroundColor: `${t.colors.background}D9` },
+  failed: {
+    fontSize: t.typography.caption.fontSize,
+    lineHeight: t.typography.caption.lineHeight,
+    color: t.colors.danger,
+  },
   cover: {
     position: 'absolute',
     left: 0,
     right: 0,
     bottom: 0,
-    paddingVertical: 2,
+    paddingVertical: t.space[1],
     borderBottomLeftRadius: RADIUS,
     borderBottomRightRadius: RADIUS,
     backgroundColor: 'rgba(0, 0, 0, 0.6)',
@@ -62,15 +66,15 @@ const useStyles = makeStyles((t) => ({
     position: 'absolute',
     top: 0,
     right: 0,
-    width: 44,
-    height: 44,
+    width: t.minTouchSize,
+    height: t.minTouchSize,
     alignItems: 'flex-end',
     padding: t.space[1],
   },
   removeDot: {
     width: 22,
     height: 22,
-    borderRadius: 11,
+    borderRadius: t.radius.full,
     alignItems: 'center',
     justifyContent: 'center',
     backgroundColor: t.colors.foreground,
@@ -79,13 +83,16 @@ const useStyles = makeStyles((t) => ({
     aspectRatio: 1,
     alignItems: 'center',
     justifyContent: 'center',
-    gap: 2,
+    gap: t.space[1],
     borderRadius: RADIUS,
     borderWidth: 1,
     borderColor: t.colors.input,
     backgroundColor: t.colors.muted,
   },
-  count: { fontSize: 13, fontVariant: ['tabular-nums'] },
+  count: {
+    fontSize: t.typography.label.fontSize,
+    fontVariant: ['tabular-nums'],
+  },
 }));
 
 const g = StyleSheet.create({

package/src/blocks/internal/format.ts

@@ -13,6 +13,11 @@ export function changeRate(current: number, previous: number): number | null {
   return ((current - previous) / Math.abs(previous)) * 100;
 }
 
+export function deadlineTone(days: number): 'danger' | 'warning' | 'muted' {
+  if (days < 0) return 'danger';
+  return days === 0 ? 'warning' : 'muted';
+}
+
 export function formatDeadline(days: number): string | null {
   if (days < 0) return '기한 지남';
   return ['오늘 마감', '내일 마감', '모레 마감'][days] ?? null;

package/src/blocks/invoice-row/invoice-row.tsx

@@ -25,7 +25,11 @@ export type InvoiceRowProps = {
 const useStyles = makeStyles((t) => ({
   row: { flexDirection: 'row', alignItems: 'center', gap: t.space[2] },
   grow: { flex: 1 },
-  head: { fontSize: 16, lineHeight: 24, fontVariant: ['tabular-nums'] },
+  head: {
+    fontSize: t.typography.bodyLg.fontSize,
+    lineHeight: t.typography.bodyLg.lineHeight,
+    fontVariant: ['tabular-nums'],
+  },
   action: { flex: 1 },
 }));
 

package/src/blocks/logo-candidate-grid/logo-candidate-grid.tsx

@@ -41,7 +41,7 @@ const useStyles = makeStyles((t) => ({
     right: t.space[2],
     width: 24,
     height: 24,
-    borderRadius: 12,
+    borderRadius: t.radius.lg,
     alignItems: 'center',
     justifyContent: 'center',
     backgroundColor: t.colors.primary,

package/src/blocks/oauth-buttons/oauth-buttons.tsx

@@ -47,12 +47,16 @@ const useStyles = makeStyles((t) => ({
     justifyContent: 'center',
     gap: t.space[2],
     paddingHorizontal: t.space[4],
-    borderRadius: 12,
+    borderRadius: t.radius.lg,
     borderWidth: 1,
     borderColor: 'transparent',
   },
   icon: { position: 'absolute', left: t.space[4] },
-  label: { fontSize: 15, fontWeight: '600', fontFamily: t.fontFamily },
+  label: {
+    fontSize: t.typography.body.fontSize,
+    fontWeight: '600',
+    fontFamily: t.fontFamily,
+  },
 }));
 
 export function OAuthButtons({

package/src/blocks/option-editor/option-editor.tsx

@@ -49,12 +49,12 @@ const useStyles = makeStyles((t) => ({
     width: 20,
     height: t.minTouchSize,
     justifyContent: 'center',
-    gap: 4,
+    gap: t.space[1],
   },
   bar: {
     height: 2,
-    marginHorizontal: 3,
-    borderRadius: 1,
+    marginHorizontal: t.space[1],
+    borderRadius: t.radius.full,
     backgroundColor: t.colors.mutedForeground,
   },
 }));

package/src/blocks/order-card/index.ts

@@ -2,9 +2,13 @@ export {
   OrderCard,
   OrderSection,
   orderStatusLabel,
+  orderStatusText,
+  orderStatusTone,
   summarizeItems,
   type OrderAction,
   type OrderCardProps,
+  type OrderFulfillment,
+  type OrderStatusInput,
   type OrderItem,
   type OrderSectionProps,
   type OrderStatus,

package/src/blocks/order-card/order-card.tsx

@@ -1,3 +1,4 @@
+import type { StatusBadgeTone } from '../../components/status-badge/status-badge';
 import type { ReactNode } from 'react';
 import { View, type StyleProp, type ViewStyle } from 'react-native';
 import { Button, type ButtonVariant } from '../../components/button/button';
@@ -7,7 +8,7 @@ import { ChevronGlyph } from '../../internal/glyphs';
 import { useTheme } from '../../theme/theme-provider';
 import { makeStyles } from '../../utils/styles';
 import { Card } from '../internal/card';
-import { formatDeadline } from '../internal/format';
+import { deadlineTone, formatDeadline } from '../internal/format';
 
 export type OrderStatus =
   | 'pending_payment'
@@ -21,13 +22,46 @@ export type OrderStatus =
 export const orderStatusLabel: Record<OrderStatus, string> = {
   pending_payment: '결제 대기',
   paid: '신규',
-  preparing: '배송 준비',
+  preparing: '상품 준비 중',
   shipped: '배송 중',
   delivered: '배송 완료',
   completed: '구매 확정',
-  canceled: '취소',
+  canceled: '주문 취소',
 };
 
+export type OrderFulfillment = 'ship' | 'pickup' | 'local' | 'visit' | 'none';
+
+export type OrderStatusInput = {
+  status: OrderStatus;
+  fulfillment?: OrderFulfillment;
+  readyAt?: string | null;
+  awaitingDeposit?: boolean;
+};
+
+export const orderStatusTone: Record<OrderStatus, StatusBadgeTone> = {
+  pending_payment: 'neutral',
+  paid: 'warning',
+  preparing: 'warning',
+  shipped: 'info',
+  delivered: 'success',
+  completed: 'neutral',
+  canceled: 'neutral',
+};
+
+export function orderStatusText({
+  status,
+  fulfillment = 'ship',
+  readyAt,
+  awaitingDeposit,
+}: OrderStatusInput): string {
+  if (status === 'pending_payment' && awaitingDeposit) return '입금 대기';
+  if (fulfillment === 'pickup') {
+    if (status === 'preparing' && readyAt) return '픽업 준비 완료';
+    if (status === 'delivered') return '수령 완료';
+  }
+  return orderStatusLabel[status];
+}
+
 export type OrderItem = { name: string; option?: string; quantity: number };
 
 export type OrderAction = {
@@ -51,9 +85,15 @@ export type OrderCardProps = {
 const useStyles = makeStyles((t) => ({
   row: { flexDirection: 'row', alignItems: 'center', gap: t.space[2] },
   grow: { flex: 1 },
-  title: { fontSize: 16, lineHeight: 24 },
+  title: {
+    fontSize: t.typography.bodyLg.fontSize,
+    lineHeight: t.typography.bodyLg.lineHeight,
+  },
   amount: { fontVariant: ['tabular-nums'] },
-  deadline: { fontSize: 14, lineHeight: 20 },
+  deadline: {
+    fontSize: t.typography.label.fontSize,
+    lineHeight: t.typography.label.lineHeight,
+  },
   action: { flex: 1 },
   compact: {
     flexDirection: 'row',
@@ -128,7 +168,11 @@ export function OrderCard({
         </Text>
       </View>
       {deadline ? (
-        <Text weight="bold" tone="danger" style={s.deadline}>
+        <Text
+          weight={deadlineTone(dueInDays!) === 'muted' ? 'regular' : 'bold'}
+          tone={deadlineTone(dueInDays!)}
+          style={s.deadline}
+        >
           {deadline}
         </Text>
       ) : null}

package/src/blocks/plan-card/plan-card.tsx

@@ -36,7 +36,7 @@ const useStyles = makeStyles((t) => ({
   },
   head: { flexDirection: 'row', alignItems: 'center', gap: t.space[2] },
   name: { flex: 1 },
-  list: { gap: 6 },
+  list: { gap: t.space[2] },
   feature: { flexDirection: 'row', alignItems: 'center', gap: t.space[2] },
   change: {
     flexDirection: 'row',
@@ -136,7 +136,7 @@ export function PlanCard({
       {!current && onSelect ? (
         <Button
           size="lg"
-          variant={recommended ? 'solid' : 'outline'}
+          variant={recommended ? 'primary' : 'outline'}
           onPress={onSelect}
         >
           {proratedAmount !== undefined && proratedAmount > 0

package/src/blocks/product-list-empty/product-list-empty.tsx

@@ -61,16 +61,23 @@ const useStyles = makeStyles((t) => ({
     position: 'absolute',
     top: t.space[3],
     left: t.space[3],
-    paddingHorizontal: 10,
+    paddingHorizontal: t.space[2],
     paddingVertical: t.space[1],
     borderRadius: t.radius.full,
     backgroundColor: t.colors.foreground,
   },
-  badgeLabel: { color: t.colors.background, fontSize: 14 },
+  badgeLabel: {
+    color: t.colors.background,
+    fontSize: t.typography.label.fontSize,
+  },
   body: { gap: t.space[1], padding: t.space[4] },
   actions: { flexDirection: 'row', gap: t.space[2], marginTop: t.space[3] },
-  edit: { flex: 1, height: 48 },
-  dismiss: { width: 48, height: 48, paddingHorizontal: 0 },
+  edit: { flex: 1, height: t.controlSize.md },
+  dismiss: {
+    width: t.controlSize.md,
+    height: t.controlSize.md,
+    paddingHorizontal: 0,
+  },
 }));
 
 export function ProductListEmpty({

package/src/blocks/review-row/review-row.tsx

@@ -29,40 +29,43 @@ export type HiddenReviewsRowProps = {
 };
 
 const useStyles = makeStyles((t) => ({
-  root: { gap: 10, paddingVertical: t.space[4] },
+  root: { gap: t.space[2], paddingVertical: t.space[4] },
   head: { flexDirection: 'row', alignItems: 'center', gap: t.space[2] },
   stars: { letterSpacing: 1 },
-  author: { flexShrink: 1, fontSize: 14 },
+  author: { flexShrink: 1, fontSize: t.typography.label.fontSize },
   more: {
-    width: 44,
-    height: 44,
+    width: t.minTouchSize,
+    height: t.minTouchSize,
     marginVertical: -t.space[3],
     marginLeft: 'auto',
     alignItems: 'center',
     justifyContent: 'center',
   },
-  dots: { flexDirection: 'row', gap: 3 },
-  dot: { width: 3.5, height: 3.5, borderRadius: 2 },
+  dots: { flexDirection: 'row', gap: t.space[1] },
+  dot: { width: 3.5, height: 3.5, borderRadius: t.radius.full },
   photos: { flexDirection: 'row', gap: t.space[2] },
   photo: { width: 72 },
   reply: {
     gap: t.space[1],
     marginLeft: t.space[3],
     paddingVertical: t.space[3],
-    paddingHorizontal: 14,
-    borderRadius: 10,
+    paddingHorizontal: t.space[4],
+    borderRadius: t.radius.lg,
     backgroundColor: t.colors.muted,
   },
-  replyTitle: { fontSize: 13, lineHeight: 18 },
+  replyTitle: {
+    fontSize: t.typography.label.fontSize,
+    lineHeight: t.typography.label.lineHeight,
+  },
   replyButton: { alignSelf: 'flex-start' },
   hidden: {
     flexDirection: 'row',
     alignItems: 'center',
     gap: t.space[2],
-    minHeight: 52,
-    paddingLeft: 14,
+    minHeight: t.controlSize.lg,
+    paddingLeft: t.space[4],
     paddingRight: t.space[2],
-    borderRadius: 10,
+    borderRadius: t.radius.lg,
     backgroundColor: t.colors.muted,
   },
   hiddenLabel: { flex: 1 },
@@ -184,18 +187,26 @@ export type ReviewSummaryProps = {
 const useSummaryStyles = makeStyles((t) => ({
   root: { flexDirection: 'row', alignItems: 'center', gap: t.space[5] },
   score: { alignItems: 'center', gap: t.space[1] },
-  average: { fontSize: 36, lineHeight: 40, fontVariant: ['tabular-nums'] },
+  average: {
+    fontSize: t.typography.display.fontSize,
+    lineHeight: t.typography.display.lineHeight,
+    fontVariant: ['tabular-nums'],
+  },
   bars: { flex: 1, gap: t.space[1] },
   bar: { flexDirection: 'row', alignItems: 'center', gap: t.space[2] },
   digit: { width: 8, fontVariant: ['tabular-nums'] },
   track: {
     flex: 1,
     height: 6,
-    borderRadius: 3,
+    borderRadius: t.radius.full,
     overflow: 'hidden',
     backgroundColor: t.colors.muted,
   },
-  fill: { height: 6, borderRadius: 3, backgroundColor: t.colors.warning },
+  fill: {
+    height: 6,
+    borderRadius: t.radius.full,
+    backgroundColor: t.colors.warning,
+  },
 }));
 
 export function ReviewSummary({

package/src/blocks/sales-chart/sales-chart.tsx

@@ -33,10 +33,10 @@ const useStyles = makeStyles((t) => ({
     flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'space-between',
-    minHeight: 44,
+    minHeight: t.controlSize.sm,
   },
   divided: { borderBottomWidth: 1, borderBottomColor: t.colors.border },
-  net: { minHeight: 56 },
+  net: { minHeight: t.listRow.oneLine },
   netValue: { flexDirection: 'row', alignItems: 'baseline', gap: t.space[2] },
   down: { color: t.colors.info },
 }));