@astryxdesign/native 0.7.5-canary.174300f → 0.7.5-canary.1e84ea4

package/apple/README.md

@@ -51,17 +51,15 @@ apple/
   that also imports SwiftUI, write `Astryx.Button` and `SwiftUI.Button`. A
   component's parameters use core's prop names
   and values (`variant: .primary`, `size: .lg`, `isLoading`), so code reads
-  the same across web and native. `Text` and `Heading` take the generated
-  `TextProps` and `HeadingProps`, as AST-093 FR5 asks; the others keep five
-  exceptions, the interim shape FR5 exempts until they move onto the generated
+  the same across web and native. `Text`, `Heading`, and `Card` take the
+  generated `TextProps`, `HeadingProps`, and `CardProps`, as AST-093 FR5 asks;
+  the others keep four exceptions, the interim shape FR5 exempts until they move onto the generated
   contracts:
   - `Button` takes `action` where core has `onClick`.
   - `Button` takes `fillsWidth` where core has `width="100%"`.
   - `Button` takes `icon` as a shared icon name (`"search"`), which the
     generated `ButtonProps` does not carry yet.
   - `TextInput` takes a `Binding` where core has `value` and `onChange`.
-  - `Card` takes `padding` as a whole spacing step, so it cannot spell
-    core's `0.5` and `1.5` steps.
 - **`Templates/`** holds one folder per page template, named after the
   `astryx template` id. Templates are clone-only, as on the web: you copy a
   template's folder into your app and own it from then on. They are a
@@ -100,8 +98,10 @@ size.
 Components read every color, size, and font from the `astryx` environment
 value, never from a constant of their own. `astryx.tokens` holds the theme's
 tokens in the current mode as typed members (`tokens.color.textPrimary`,
-`tokens.space.s4`, `tokens.font.bodySize`), so a misspelled token fails to
-compile. Text sizes grow with Dynamic Type. The components still read some
+`tokens.space.s4`, `tokens.font.body.size`), so a misspelled token fails to
+compile. Font tokens come grouped: each type style (`tokens.font.body`,
+`tokens.font.heading1`) holds its `size`, `weight`, and `leading`, and
+`tokens.font.family`, `.size`, and `.weight` hold the scales. Text sizes grow with Dynamic Type. The components still read some
 tokens by core's name (`astryx.color("color-accent")`); moving them onto the
 typed members comes next.
 

package/apple/Sources/Astryx/Card/Card.swift

@@ -1,33 +1,109 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 
-import SwiftUI
-
-/// A card: one independent item on the theme's card ground, with a hairline
-/// border and the container radius.
+/// A card: one independent item on the theme's card ground. It takes core's
+/// Card props (`CardProps`) and stacks its content top to bottom, as children
+/// flow inside core's Card.
 public struct Card<Content: View>: View {
-  let padding: Int
+  public let props: CardProps
   let content: Content
   @Environment(\.astryx) private var astryx
 
-  /// - Parameter padding: a step on the spacing ladder, as core's `padding`.
-  public init(padding: Int = 4, @ViewBuilder content: () -> Content) {
-    self.padding = padding
+  /// - Parameters:
+  ///   - padding: core's `padding`, a step on the spacing scale; step 4 when
+  ///     nil.
+  ///   - variant: core's `variant`: the card ground, or `transparent` for none.
+  ///     Only `default` draws a border.
+  ///   - elevation: core's `elevation`, the theme's shadow at that depth.
+  ///   - base: core's base props.
+  ///   - content: core's `children`.
+  public init(
+    padding: CardPadding? = nil,
+    variant: CardVariant? = nil,
+    elevation: CardElevation? = nil,
+    base: AstryxBaseProps = AstryxBaseProps(),
+    @ViewBuilder content: () -> Content
+  ) {
+    self.props = CardProps(padding: padding, variant: variant, elevation: elevation, base: base)
     self.content = content()
   }
 
   public var body: some View {
-    let shape = RoundedRectangle(
-      cornerRadius: astryx.size("radius-container", 12),
-      style: .continuous
-    )
-    // Several child views stack in one card, top to bottom with no gap of
-    // their own, as children flow inside core's Card.
-    VStack(alignment: .leading, spacing: 0) { content }
-      .padding(astryx.space(padding))
+    let shape = RoundedRectangle(cornerRadius: astryx.tokens.radius.container, style: .continuous)
+    let variant = props.variant ?? .default
+    // The border sits inside the padding, so the content's inset is the
+    // padding step, as in core.
+    SwiftUI.VStack(alignment: .leading, spacing: 0) { content }
+      .padding(padding)
       .frame(maxWidth: .infinity, alignment: .leading)
-      .background(shape.fill(astryx.color("color-background-card")))
-      .overlay(
-        shape.strokeBorder(astryx.color("color-border"), lineWidth: astryx.size("border-width", 1))
+      .background(shape.fill(Self.ground(variant, astryx.tokens.color)))
+      .overlay {
+        if variant == .default {
+          shape.strokeBorder(astryx.tokens.color.border, lineWidth: astryx.tokens.size.borderWidth)
+        }
+      }
+      .astryxShadow(
+        Self.shadow(props.elevation ?? .none, astryx.tokens.shadow), in: shape,
+        borderWidth: variant == .default ? astryx.tokens.size.borderWidth : 0
       )
+      .astryxBase(props.base)
+  }
+
+  var padding: CGFloat {
+    let space = astryx.tokens.space
+    switch props.padding ?? .v4 {
+    case .v0: return space.s0
+    case .v0_5: return space.s0_5
+    case .v1: return space.s1
+    case .v1_5: return space.s1_5
+    case .v2: return space.s2
+    case .v3: return space.s3
+    case .v4: return space.s4
+    case .v5: return space.s5
+    case .v6: return space.s6
+    case .v8: return space.s8
+    case .v10: return space.s10
+    }
+  }
+
+  /// The ground core's Card draws for a variant.
+  static func ground(_ variant: CardVariant, _ color: ColorTokens) -> Color {
+    switch variant {
+    case .default: color.backgroundCard
+    case .transparent: .clear
+    case .muted: color.backgroundMuted
+    case .blue: color.backgroundBlue
+    case .cyan: color.backgroundCyan
+    case .gray: color.backgroundGray
+    case .green: color.backgroundGreen
+    case .orange: color.backgroundOrange
+    case .pink: color.backgroundPink
+    case .purple: color.backgroundPurple
+    case .red: color.backgroundRed
+    case .teal: color.backgroundTeal
+    case .yellow: color.backgroundYellow
+    }
+  }
+
+  /// The theme's shadow at an elevation.
+  static func shadow(_ elevation: CardElevation, _ shadow: ShadowTokens) -> [ShadowLayer] {
+    switch elevation {
+    case .none: []
+    case .low: shadow.low
+    case .med: shadow.med
+    case .high: shadow.high
+    }
+  }
+}
+
+extension Card where Content == AstryxNodeList {
+  /// A card from core's props, with its children as the wire tree a logic
+  /// core sends; `send` carries the children's callbacks back to the core.
+  public init(
+    _ props: CardProps,
+    children: [AstryxNode],
+    send: @escaping @Sendable (AstryxAction) -> Void
+  ) {
+    self.props = props
+    self.content = AstryxNodeList(nodes: children, send: send)
   }
 }

package/apple/Sources/Astryx/Heading/Heading.swift

@@ -68,7 +68,7 @@ public struct Heading: View {
   func styled(_ text: SwiftUI.Text) -> SwiftUI.Text {
     var style = typeStyle
     if let weight = props.weight {
-      style.weight = astryx.tokens.font.weight(named: weight.rawValue)
+      style.weight = astryx.tokens.font.weight.value(named: weight.rawValue)
     }
     var text = text.font(astryx.font(style))
     if let color = astryx.tokens.color.text(named: (props.color ?? .primary).rawValue) {
@@ -82,22 +82,22 @@ public struct Heading: View {
   /// theme's heading family.
   var typeStyle: TypeStyle {
     let font = astryx.tokens.font
-    let (size, weight): (CGFloat, CGFloat) =
+    let style: TypeStyleTokens =
       switch props.type {
-      case .display1: (font.display1Size, font.display1Weight)
-      case .display2: (font.display2Size, font.display2Weight)
-      case .display3: (font.display3Size, font.display3Weight)
+      case .display1: font.display1
+      case .display2: font.display2
+      case .display3: font.display3
       case nil:
         switch props.level {
-        case .v1: (font.heading1Size, font.heading1Weight)
-        case .v2: (font.heading2Size, font.heading2Weight)
-        case .v3: (font.heading3Size, font.heading3Weight)
-        case .v4: (font.heading4Size, font.heading4Weight)
-        case .v5: (font.heading5Size, font.heading5Weight)
-        case .v6: (font.heading6Size, font.heading6Weight)
+        case .v1: font.heading1
+        case .v2: font.heading2
+        case .v3: font.heading3
+        case .v4: font.heading4
+        case .v5: font.heading5
+        case .v6: font.heading6
         }
       }
-    return TypeStyle(size: size, weight: weight, families: font.familyHeading)
+    return TypeStyle(style, families: font.family.heading)
   }
 
   /// The traits assistive technology gets: a header.

package/apple/Sources/Astryx/Text/Text.swift

@@ -71,17 +71,17 @@ public struct Text: View {
     let type = props.type ?? .body
     if let style = font.style(type) {
       var style = style
-      if let size = props.size { style.size = font.size(size) }
-      if let weight = props.weight { style.weight = font.weight(named: weight.rawValue) }
+      if let size = props.size { style.size = font.size.value(for: size) }
+      if let weight = props.weight { style.weight = font.weight.value(named: weight.rawValue) }
       text = text.font(astryx.font(style))
     } else if let size = props.size {
       // `inherit` with a size: SwiftUI cannot change only the size of an
       // inherited font, so it draws the body family at normal weight (or the
       // given weight) at that size, a documented gap.
-      let weight = font.weight(named: props.weight?.rawValue ?? "normal")
-      text = text.font(astryx.font(TypeStyle(size: font.size(size), weight: weight, families: font.familyBody)))
+      let weight = font.weight.value(named: props.weight?.rawValue ?? "normal")
+      text = text.font(astryx.font(TypeStyle(size: font.size.value(for: size), weight: weight, families: font.family.body)))
     } else if let weight = props.weight {
-      text = text.fontWeight(astryx.fontWeight(font.weight(named: weight.rawValue)))
+      text = text.fontWeight(astryx.fontWeight(font.weight.value(named: weight.rawValue)))
     }
     if let color = astryx.tokens.color.text(named: (props.color ?? Self.defaultColor(type)).rawValue) {
       text = text.foregroundStyle(color)

package/apple/Sources/Astryx/Text/TypeStyle.swift

@@ -8,48 +8,59 @@ struct TypeStyle: Equatable {
   var families: [String]
 }
 
+extension TypeStyle {
+  /// A theme type style drawn in a family stack.
+  init(_ tokens: TypeStyleTokens, families: [String]) {
+    self.init(size: tokens.size, weight: tokens.weight, families: families)
+  }
+}
+
 extension FontTokens {
   /// The style core's Text draws for a type, or nil for `inherit`. Display
   /// types draw in the heading family, as core's type scale sets them.
   func style(_ type: TextType) -> TypeStyle? {
     switch type {
-    case .body: TypeStyle(size: bodySize, weight: bodyWeight, families: familyBody)
-    case .large: TypeStyle(size: largeSize, weight: largeWeight, families: familyBody)
-    case .label: TypeStyle(size: labelSize, weight: labelWeight, families: familyBody)
-    case .supporting: TypeStyle(size: supportingSize, weight: supportingWeight, families: familyBody)
-    case .code: TypeStyle(size: codeSize, weight: codeWeight, families: familyCode)
-    case .display1: TypeStyle(size: display1Size, weight: display1Weight, families: familyHeading)
-    case .display2: TypeStyle(size: display2Size, weight: display2Weight, families: familyHeading)
-    case .display3: TypeStyle(size: display3Size, weight: display3Weight, families: familyHeading)
+    case .body: TypeStyle(body, families: family.body)
+    case .large: TypeStyle(large, families: family.body)
+    case .label: TypeStyle(label, families: family.body)
+    case .supporting: TypeStyle(supporting, families: family.body)
+    case .code: TypeStyle(code, families: family.code)
+    case .display1: TypeStyle(display1, families: family.heading)
+    case .display2: TypeStyle(display2, families: family.heading)
+    case .display3: TypeStyle(display3, families: family.heading)
     case .inherit: nil
     }
   }
+}
 
+extension FontSizeTokens {
   /// The font size core's Text draws for an explicit `size`. Core spells the
   /// extra-small size `xsm`; its token is `font-size-xs`.
-  func size(_ size: TextSize) -> CGFloat {
+  func value(for size: TextSize) -> CGFloat {
     switch size {
-    case .v4xs: size4xs
-    case .v3xs: size3xs
-    case .v2xs: size2xs
-    case .xsm: sizeXs
-    case .sm: sizeSm
-    case .base: sizeBase
-    case .lg: sizeLg
-    case .xl: sizeXl
-    case .v2xl: size2xl
-    case .v3xl: size3xl
-    case .v4xl: size4xl
+    case .v4xs: s4xs
+    case .v3xs: s3xs
+    case .v2xs: s2xs
+    case .xsm: xs
+    case .sm: sm
+    case .base: base
+    case .lg: lg
+    case .xl: xl
+    case .v2xl: s2xl
+    case .v3xl: s3xl
+    case .v4xl: s4xl
     }
   }
+}
 
+extension FontWeightTokens {
   /// The numeric weight behind one of core's weight names.
-  func weight(named name: String) -> CGFloat {
+  func value(named name: String) -> CGFloat {
     switch name {
-    case "medium": weightMedium
-    case "semibold": weightSemibold
-    case "bold": weightBold
-    default: weightNormal
+    case "medium": medium
+    case "semibold": semibold
+    case "bold": bold
+    default: normal
     }
   }
 }

package/apple/Sources/Astryx/Theme/Generated/ButterTheme.swift

@@ -197,67 +197,28 @@ extension Theme {
         elementSm: 32
       ),
       font: FontTokens(
-        bodyLeading: 1.4286,
-        bodySize: 14,
-        bodyWeight: 400,
-        codeLeading: 1.4286,
-        codeSize: 14,
-        codeWeight: 400,
-        display1Leading: 1.283,
-        display1Size: 53,
-        display1Weight: 400,
-        display2Leading: 1.2093,
-        display2Size: 43,
-        display2Weight: 400,
-        display3Leading: 1.2941,
-        display3Size: 34,
-        display3Weight: 400,
-        familyBody: ["Outfit", "-apple-system", "BlinkMacSystemFont", "Segoe UI", "Roboto", "Helvetica", "Arial", "sans-serif"],
-        familyCode: ["JetBrains Mono", "SF Mono", "Monaco", "Consolas", "monospace"],
-        familyHeading: ["Outfit", "-apple-system", "BlinkMacSystemFont", "Segoe UI", "Roboto", "Helvetica", "Arial", "sans-serif"],
-        heading1Leading: 1.3333,
-        heading1Size: 27,
-        heading1Weight: 600,
-        heading2Leading: 1.4545,
-        heading2Size: 22,
-        heading2Weight: 600,
-        heading3Leading: 1.5556,
-        heading3Size: 18,
-        heading3Weight: 700,
-        heading4Leading: 1.4286,
-        heading4Size: 14,
-        heading4Weight: 700,
-        heading5Leading: 1.4545,
-        heading5Size: 11,
-        heading5Weight: 600,
-        heading6Leading: 1.7778,
-        heading6Size: 9,
-        heading6Weight: 600,
-        labelLeading: 1.4286,
-        labelSize: 14,
-        labelWeight: 500,
-        largeLeading: 1.5556,
-        largeSize: 18,
-        largeWeight: 600,
-        size2xl: 27,
-        size2xs: 7,
-        size3xl: 34,
-        size3xs: 6,
-        size4xl: 43,
-        size4xs: 5,
-        size5xl: 53,
-        sizeBase: 14,
-        sizeLg: 18,
-        sizeSm: 11,
-        sizeXl: 22,
-        sizeXs: 9,
-        supportingLeading: 1.4545,
-        supportingSize: 12,
-        supportingWeight: 400,
-        weightBold: 700,
-        weightMedium: 500,
-        weightNormal: 400,
-        weightSemibold: 600
+        body: TypeStyleTokens(size: 14, weight: 400, leading: 1.4286),
+        code: TypeStyleTokens(size: 14, weight: 400, leading: 1.4286),
+        display1: TypeStyleTokens(size: 53, weight: 400, leading: 1.283),
+        display2: TypeStyleTokens(size: 43, weight: 400, leading: 1.2093),
+        display3: TypeStyleTokens(size: 34, weight: 400, leading: 1.2941),
+        family: FontFamilyTokens(body: ["Outfit", "-apple-system", "BlinkMacSystemFont", "Segoe UI", "Roboto", "Helvetica", "Arial", "sans-serif"], code: ["JetBrains Mono", "SF Mono", "Monaco", "Consolas", "monospace"], heading: ["Outfit", "-apple-system", "BlinkMacSystemFont", "Segoe UI", "Roboto", "Helvetica", "Arial", "sans-serif"]),
+        heading1: TypeStyleTokens(size: 27, weight: 600, leading: 1.3333),
+        heading2: TypeStyleTokens(size: 22, weight: 600, leading: 1.4545),
+        heading3: TypeStyleTokens(size: 18, weight: 700, leading: 1.5556),
+        heading4: TypeStyleTokens(size: 14, weight: 700, leading: 1.4286),
+        heading5: TypeStyleTokens(size: 11, weight: 600, leading: 1.4545),
+        heading6: TypeStyleTokens(size: 9, weight: 600, leading: 1.7778),
+        label: TypeStyleTokens(size: 14, weight: 500, leading: 1.4286),
+        large: TypeStyleTokens(size: 18, weight: 600, leading: 1.5556),
+        size: FontSizeTokens(base: 14, lg: 18, s2xl: 27, s2xs: 7, s3xl: 34, s3xs: 6, s4xl: 43, s4xs: 5, s5xl: 53, sm: 11, xl: 22, xs: 9),
+        supporting: TypeStyleTokens(size: 12, weight: 400, leading: 1.4545),
+        weight: FontWeightTokens(bold: 700, medium: 500, normal: 400, semibold: 600)
+      ),
+      shadow: ShadowTokens(
+        high: [ShadowLayer(x: 0, y: 4, blur: 6, color: Color(astryxRGBA: 0x1D1C111A)), ShadowLayer(x: 0, y: 12, blur: 24, color: Color(astryxRGBA: 0x1D1C1126))],
+        low: [ShadowLayer(x: 0, y: 2, blur: 4, color: Color(astryxRGBA: 0x1D1C110D)), ShadowLayer(x: 0, y: 4, blur: 8, color: Color(astryxRGBA: 0x1D1C111A))],
+        med: [ShadowLayer(x: 0, y: 2, blur: 4, color: Color(astryxRGBA: 0x1D1C110D)), ShadowLayer(x: 0, y: 4, blur: 12, color: Color(astryxRGBA: 0x1D1C111A))]
       )
     ),
     dark: Tokens(
@@ -450,67 +411,28 @@ extension Theme {
         elementSm: 32
       ),
       font: FontTokens(
-        bodyLeading: 1.4286,
-        bodySize: 14,
-        bodyWeight: 400,
-        codeLeading: 1.4286,
-        codeSize: 14,
-        codeWeight: 400,
-        display1Leading: 1.283,
-        display1Size: 53,
-        display1Weight: 400,
-        display2Leading: 1.2093,
-        display2Size: 43,
-        display2Weight: 400,
-        display3Leading: 1.2941,
-        display3Size: 34,
-        display3Weight: 400,
-        familyBody: ["Outfit", "-apple-system", "BlinkMacSystemFont", "Segoe UI", "Roboto", "Helvetica", "Arial", "sans-serif"],
-        familyCode: ["JetBrains Mono", "SF Mono", "Monaco", "Consolas", "monospace"],
-        familyHeading: ["Outfit", "-apple-system", "BlinkMacSystemFont", "Segoe UI", "Roboto", "Helvetica", "Arial", "sans-serif"],
-        heading1Leading: 1.3333,
-        heading1Size: 27,
-        heading1Weight: 600,
-        heading2Leading: 1.4545,
-        heading2Size: 22,
-        heading2Weight: 600,
-        heading3Leading: 1.5556,
-        heading3Size: 18,
-        heading3Weight: 700,
-        heading4Leading: 1.4286,
-        heading4Size: 14,
-        heading4Weight: 700,
-        heading5Leading: 1.4545,
-        heading5Size: 11,
-        heading5Weight: 600,
-        heading6Leading: 1.7778,
-        heading6Size: 9,
-        heading6Weight: 600,
-        labelLeading: 1.4286,
-        labelSize: 14,
-        labelWeight: 500,
-        largeLeading: 1.5556,
-        largeSize: 18,
-        largeWeight: 600,
-        size2xl: 27,
-        size2xs: 7,
-        size3xl: 34,
-        size3xs: 6,
-        size4xl: 43,
-        size4xs: 5,
-        size5xl: 53,
-        sizeBase: 14,
-        sizeLg: 18,
-        sizeSm: 11,
-        sizeXl: 22,
-        sizeXs: 9,
-        supportingLeading: 1.4545,
-        supportingSize: 12,
-        supportingWeight: 400,
-        weightBold: 700,
-        weightMedium: 500,
-        weightNormal: 400,
-        weightSemibold: 600
+        body: TypeStyleTokens(size: 14, weight: 400, leading: 1.4286),
+        code: TypeStyleTokens(size: 14, weight: 400, leading: 1.4286),
+        display1: TypeStyleTokens(size: 53, weight: 400, leading: 1.283),
+        display2: TypeStyleTokens(size: 43, weight: 400, leading: 1.2093),
+        display3: TypeStyleTokens(size: 34, weight: 400, leading: 1.2941),
+        family: FontFamilyTokens(body: ["Outfit", "-apple-system", "BlinkMacSystemFont", "Segoe UI", "Roboto", "Helvetica", "Arial", "sans-serif"], code: ["JetBrains Mono", "SF Mono", "Monaco", "Consolas", "monospace"], heading: ["Outfit", "-apple-system", "BlinkMacSystemFont", "Segoe UI", "Roboto", "Helvetica", "Arial", "sans-serif"]),
+        heading1: TypeStyleTokens(size: 27, weight: 600, leading: 1.3333),
+        heading2: TypeStyleTokens(size: 22, weight: 600, leading: 1.4545),
+        heading3: TypeStyleTokens(size: 18, weight: 700, leading: 1.5556),
+        heading4: TypeStyleTokens(size: 14, weight: 700, leading: 1.4286),
+        heading5: TypeStyleTokens(size: 11, weight: 600, leading: 1.4545),
+        heading6: TypeStyleTokens(size: 9, weight: 600, leading: 1.7778),
+        label: TypeStyleTokens(size: 14, weight: 500, leading: 1.4286),
+        large: TypeStyleTokens(size: 18, weight: 600, leading: 1.5556),
+        size: FontSizeTokens(base: 14, lg: 18, s2xl: 27, s2xs: 7, s3xl: 34, s3xs: 6, s4xl: 43, s4xs: 5, s5xl: 53, sm: 11, xl: 22, xs: 9),
+        supporting: TypeStyleTokens(size: 12, weight: 400, leading: 1.4545),
+        weight: FontWeightTokens(bold: 700, medium: 500, normal: 400, semibold: 600)
+      ),
+      shadow: ShadowTokens(
+        high: [ShadowLayer(x: 0, y: 4, blur: 6, color: Color(astryxRGBA: 0x1D1C111A)), ShadowLayer(x: 0, y: 12, blur: 24, color: Color(astryxRGBA: 0x1D1C1126))],
+        low: [ShadowLayer(x: 0, y: 2, blur: 4, color: Color(astryxRGBA: 0x1D1C110D)), ShadowLayer(x: 0, y: 4, blur: 8, color: Color(astryxRGBA: 0x1D1C111A))],
+        med: [ShadowLayer(x: 0, y: 2, blur: 4, color: Color(astryxRGBA: 0x1D1C110D)), ShadowLayer(x: 0, y: 4, blur: 12, color: Color(astryxRGBA: 0x1D1C111A))]
       )
     )
   )