Ios26 Liquid Glass Spacing Research

Nghiên Cứu: iOS 26 Liquid Glass — Radius / Gap / Padding / Sizing

Date: 2026-03-12 Status: 📋 RESEARCH — Phân tích hệ thống spacing iOS 26 & đánh giá áp dụng cho Prisma Builds on: density-apple-android-comparison.md

1. iOS 26: Cái Gì Thực Sự Thay Đổi?

1.1 Liquid Glass — Tổng quan

iOS 26 (WWDC 2025) giới thiệu Liquid Glass, visual overhaul lớn nhất từ iOS 7:

[!IMPORTANT] iOS 26 thay đổi triết lý spacing — từ "compact and dense" sang "airy and floating". Padding tăng đáng kể, elements có nhiều không gian thở hơn.

1.2 Ba loại Shape mới

1.3 Concentric Radius Formula

R_outer = R_inner + Padding

╔═══════════════════════════════════╗
║  Outer container (R=20)          ║
║  ┌───────────────────────────┐   ║
║  │  Inner content (R=12)     │   ║  ← padding = 8
║  │                           │   ║  → R_inner = 20 - 8 = 12 ✓
║  └───────────────────────────┘   ║
╚═══════════════════════════════════╝

Đây là thay đổi lớn nhất ảnh hưởng đến Prisma: radius không còn là giá trị tĩnh, mà liên kết trực tiếp với padding.

2. Metric Cụ Thể iOS 26

2.1 Component Sizing (pt = points)

2.2 Spacing Values (Gathered from HIG + Community)

2.3 Corner Radius Values

3. Đánh Giá: Prisma Hiện Tại vs iOS 26

3.1 Radius — Gap Analysis

[!CAUTION] Capsule radius là thay đổi lớn nhất: iOS 26 prefer capsule shape cho buttons/inputs, nghĩa là border-radius: 9999px (full pill). Prisma comp.radius = 8px không match.

3.2 Padding — Gap Analysis

3.3 Sizing — Gap Analysis

3.4 Tính năng iOS 26 mà Prisma thiếu

4. Đề Xuất: Prisma Áp Dụng iOS 26

Plan A: Incremental Updates ← ⭐ Khuyến nghị

Thêm tokens mới, giữ backward compatible.

4A.1 Thêm Capsule Radius Token

// Thêm vào mobile.tokens.json
{
    "comp": {
        "radius": { "$value": "var(--radius-xs)", "$description": "8px — fixed small" },
        "radius-capsule": { "$value": "9999px", "$description": "Capsule/pill — iOS 26 primary button shape" },
        "radius-fixed": { "$value": "var(--radius-sm)", "$description": "12px — iOS 26 fixed shape for inputs" }
    }
}

Kết quả: Dev chọn giữa comp.radius (fixed nhỏ), comp.radius-fixed (fixed lớn hơn, iOS 26 aligned), hoặc comp.radius-capsule (pill shape).

4A.2 Thêm Concentric Radius Calc

/* CSS approach — calc inner radius từ outer */
:root {
    --radius-concentric: calc(var(--group-radius-default) - var(--group-padding-default));
    /* Ví dụ: 12px - 16px = -4px → clamp to 0 */
    /* Cần clamp: max(0px, calc(outer - padding)) */
}

/* Token approach */
.card {
    border-radius: var(--group-radius-default);  /* outer: 12px */
    padding: var(--group-padding-default);        /* 16px */
}
.card > .button {
    /* Concentric: inner = max(0, outer - padding) */
    border-radius: max(0px, calc(var(--group-radius-default) - var(--group-padding-default)));
}

[!NOTE] Concentric radius trong CSS cần max() function để tránh negative values. Trường hợp padding > radius → inner radius = 0. Hoàn toàn khả thi với CSS.

4A.3 Nâng Comp Radius Default

4A.4 Tăng Spacing Nhẹ (iOS 26 "airy" feel)

4A.5 Thêm Layout Component Tokens

{
    "layout": {
        "tab-bar-height": { "$value": "68px", "$description": "iOS 26 floating tab bar" },
        "nav-bar-height": { "$value": "44px", "$description": "iOS 26 floating nav bar" },
        "safe-area-bottom": { "$value": "34px", "$description": "iPhone home indicator" }
    }
}

Plan B: iOS 26 Style Mode — ⭐⭐ Tham vọng hơn

Tạo một style JSON mới ios26.json riêng, giống cách đã có ios17.json:

design-system/tokens/styles/
├── ios17.json       ← hiện tại
├── ios26.json       ← MỚI — Liquid Glass palette + radius overrides
├── material.json
└── shadcn.json

ios26.json sẽ chứa:

• Liquid Glass colors (translucent fills, glass tints)
• Capsule radius defaults
• Concentric radius CSS custom properties
• Increased padding values
• Updated component heights (tab bar 68pt, etc.)

Pros:

• Không breaking change — chỉ thêm option
• Dev chọn data-brand="ios26" để activate
• Có thể A/B test iOS 17 vs iOS 26 look

Cons:

• Cần thời gian build
• Glass effect khó simulate perfectly bằng CSS (blur + refraction)

Plan C: Density × Style Intersection

Kết hợp density token với style token:

ios26 style + mobile density = app mode iOS 26
ios26 style + web density = web mode iOS 26

Yêu cầu: density tokens phải tương thích với ios26 radius logic. Hiện tại chưa — cần thêm capsule/concentric tokens vào density layer.

5. So Sánh Tổng Hợp: iOS 17 → iOS 26 → Prisma

5.1 Radius Comparison

5.2 Padding Comparison

5.3 Sizing Comparison

6. Priority Roadmap

7. Kết Luận

Có áp dụng cho app được không?

✅ Có — nhưng cần bổ sung, không cần rebuild lại.

iOS 26 thay đổi chủ yếu ở 3 điểm mà Prisma cần update:

1. Capsule shapes — Thêm 1 token radius-capsule: 9999px, dev opt-in khi muốn iOS 26 button style
2. Concentric radius — Thêm CSS helper function, không cần thay đổi token architecture
3. Spacious padding — Tăng nhẹ comp padding trên mobile (12→16px) — breaking nhưng nhỏ

Phần lớn layout spacing không đổi (screen margin 16pt, card padding 16pt vẫn vậy). Thay đổi lớn là ở visual (glass material, floating controls) hơn là metrics.

Rủi ro

8. Quyết Định Cần Xác Nhận

[!IMPORTANT] Cần confirm trước khi implement:

1. Capsule shape default? — Có muốn comp.radius bằng capsule (9999px) cho iOS 26 mode, hay giữ fixed và thêm comp.radius-capsule riêng?
2. Comp padding nâng? — Mobile comp.padding-default 12→16px: đồng ý? Sẽ ảnh hưởng tất cả button/input size
3. Priority? — Bắt đầu với Plan A (incremental adds) hay Plan B (tạo ios26.json style riêng)?
4. Form gap? — comp.stack-gap-default 4→8px: chấp nhận breaking?
5. Concentric radius — Thêm CSS utility class hay chỉ document convention cho dev tự calc?