Carry the library design across the rest of the app
Every screen now speaks the paper vocabulary rather than only the bookmarks screen: Search, Sources, Podcasts and the player, Settings, Add/Edit, Smart Collections, Ask, Onboarding, the browser toolbar, the Siri snippets, and the share extension's save card. The change is mostly a design system rather than per-screen tweaks. LibraryKit gains: - Semantic colors — secondary/tertiary/faint text, `raised` surfaces, and accent/alarm/affirm, so screens stop reaching for .secondary, systemGray, .blue, .red and .green. The three status colors come out of the palette (the swatch blue, vermilion and forest) rather than from the system set, so the design keeps spending one set of inks. - PaperType — the two voices made explicit. Prose (titles, summaries, anything a person wrote) is serif; anything the machine contributes (domains, dates, counts, tags, labels, buttons) is monospaced. Keeping that split strict is what makes the design read as archival rather than as decoration. - paperSurface() / paperField() / paperCard() for grounds, inputs and raised blocks. - PaperEmptyState, because ContentUnavailableView can't be restyled — it draws its own bold system type and grey, which was the loudest remaining system voice once the screens moved onto the sheet. All nine usages are converted. The app also sets one accent for the system chrome it doesn't draw — tab bar, search fields, switches, swipe actions — which otherwise stayed system blue around paper screens. BookmarkRow is deleted. Once Search moved to the library row and TagBookmarksView was gone, nothing passed .classic, so the style fork in BookmarkListRow went with it. There is one bookmark row now. The share extension compiles LibraryKit directly, since its save card is a user-facing surface and should not be the one place still using system styling. Verified on device in both color schemes; screens toured with a temporary UI test harness (removed). Suite passes. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01JgLHztZGaEHvS3KNeGQmRM
This commit is contained in:
co-authored by
Claude Opus 5
parent
8a777ffc83
commit
fffb3999bf
@@ -17,6 +17,29 @@ enum Paper {
|
||||
static let ink = dynamic(light: 0x14110C, dark: 0xF1ECE1)
|
||||
static var rule: Color { ink.opacity(0.28) }
|
||||
|
||||
/// Text weights, named by role so screens stop hand-picking opacities.
|
||||
static var secondary: Color { ink.opacity(0.6) }
|
||||
static var tertiary: Color { ink.opacity(0.45) }
|
||||
static var faint: Color { ink.opacity(0.3) }
|
||||
|
||||
/// A raised surface on the sheet — cards, fields, banners. Barely separated
|
||||
/// from the ground on purpose: this palette does contrast with rules and
|
||||
/// type, not with stacked greys.
|
||||
static let raised = dynamic(light: 0xFFFDF8, dark: 0x201C16)
|
||||
|
||||
/// The one non-palette color the design spends, for genuinely interactive
|
||||
/// affordances (links, progress, selection). It is the palette's own blue
|
||||
/// rather than the system blue, so it belongs to the paper.
|
||||
static let accent = dynamic(light: 0x115AB5, dark: 0x5B8FD0)
|
||||
|
||||
/// Destructive actions still need to read as dangerous; the vermilion
|
||||
/// swatch does that without importing systemRed.
|
||||
static let alarm = dynamic(light: 0xC03A18, dark: 0xE07A5C)
|
||||
|
||||
/// "Done / played / complete." The forest swatch, so success still comes
|
||||
/// out of the palette rather than from systemGreen.
|
||||
static let affirm = dynamic(light: 0x2F6B34, dark: 0x6FA772)
|
||||
|
||||
/// Swatches lifted from the reference, each paired with a dark-mode
|
||||
/// counterpart. Order matters — items hash into it.
|
||||
///
|
||||
@@ -73,6 +96,95 @@ enum Paper {
|
||||
}
|
||||
}
|
||||
|
||||
// MARK: Type
|
||||
|
||||
/// The library's two voices. Prose — titles, summaries, anything a person
|
||||
/// wrote — is serif. Everything the machine contributes — domains, dates,
|
||||
/// counts, tags, labels, buttons — is monospaced. Keeping the split strict is
|
||||
/// what makes the design read as archival rather than as decoration.
|
||||
enum PaperType {
|
||||
/// Screen titles that aren't the navigation bar's.
|
||||
static let display = Font.system(size: 28, design: .serif)
|
||||
static let title = Font.system(size: 21, design: .serif)
|
||||
static let heading = Font.system(size: 18, weight: .medium, design: .serif)
|
||||
static let body = Font.system(size: 18, design: .serif)
|
||||
static let quote = Font.system(size: 16.5, design: .serif)
|
||||
|
||||
/// Machine voice.
|
||||
static let label = Font.system(size: 16.5, design: .monospaced)
|
||||
static let meta = Font.system(size: 15, design: .monospaced)
|
||||
static let micro = Font.system(size: 12, design: .monospaced)
|
||||
/// Section headers and anything that wants to read as a stamp.
|
||||
static let stamp = Font.system(size: 12, weight: .medium, design: .monospaced)
|
||||
}
|
||||
|
||||
// MARK: Surfaces
|
||||
|
||||
extension View {
|
||||
/// Puts a screen on the paper ground: clears the system list/scroll
|
||||
/// background so the sheet shows through, and tints the bar to match so a
|
||||
/// large title doesn't sit on a white strip above the content.
|
||||
func paperSurface() -> some View {
|
||||
self
|
||||
.scrollContentBackground(.hidden)
|
||||
.background(Paper.sheet.ignoresSafeArea())
|
||||
.toolbarBackground(Paper.sheet, for: .navigationBar)
|
||||
}
|
||||
|
||||
/// Editable text. Monospaced, because in this design anything you type is
|
||||
/// data rather than prose — which is also what the reference's form screen
|
||||
/// did with every field.
|
||||
func paperField() -> some View {
|
||||
self
|
||||
.font(PaperType.label)
|
||||
.foregroundStyle(Paper.ink)
|
||||
.tint(Paper.accent)
|
||||
}
|
||||
|
||||
/// A raised block — settings groups, banners, editor fields.
|
||||
func paperCard(cornerRadius: CGFloat = 8) -> some View {
|
||||
self
|
||||
.background(
|
||||
RoundedRectangle(cornerRadius: cornerRadius).fill(Paper.raised)
|
||||
)
|
||||
.overlay(
|
||||
RoundedRectangle(cornerRadius: cornerRadius)
|
||||
.stroke(Paper.rule.opacity(0.5), lineWidth: 0.6)
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
// MARK: - Empty state
|
||||
|
||||
/// The paper equivalent of `ContentUnavailableView`, which can't be restyled —
|
||||
/// it draws its own bold system type and grey, which was the loudest remaining
|
||||
/// system voice once every screen moved onto the sheet.
|
||||
struct PaperEmptyState: View {
|
||||
let title: String
|
||||
let systemImage: String
|
||||
var message: String?
|
||||
|
||||
var body: some View {
|
||||
VStack(spacing: 12) {
|
||||
Image(systemName: systemImage)
|
||||
.font(.system(size: 34, weight: .ultraLight))
|
||||
.foregroundStyle(Paper.faint)
|
||||
Text(title)
|
||||
.font(PaperType.title)
|
||||
.foregroundStyle(Paper.secondary)
|
||||
if let message {
|
||||
Text(message)
|
||||
.font(PaperType.meta)
|
||||
.foregroundStyle(Paper.tertiary)
|
||||
.multilineTextAlignment(.center)
|
||||
.frame(maxWidth: 280)
|
||||
}
|
||||
}
|
||||
.padding(32)
|
||||
.frame(maxWidth: .infinity, maxHeight: .infinity)
|
||||
}
|
||||
}
|
||||
|
||||
extension UIColor {
|
||||
convenience init(rgb: UInt32) {
|
||||
self.init(
|
||||
|
||||
Reference in New Issue
Block a user