@astryxdesign/native 0.7.5-canary.7e855c0 → 0.7.5-canary.85e48a0

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

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

@@ -1,33 +1,106 @@
 // 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)
+      .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/Theme/Generated/ButterTheme.swift

@@ -214,6 +214,11 @@ extension Theme {
         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(
@@ -423,6 +428,11 @@ extension Theme {
         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))]
       )
     )
   )

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

@@ -214,6 +214,11 @@ extension Theme {
         size: FontSizeTokens(base: 14, lg: 17, s2xl: 24, s2xs: 8, s3xl: 29, s3xs: 7, s4xl: 35, s4xs: 6, s5xl: 42, sm: 12, xl: 20, xs: 10),
         supporting: TypeStyleTokens(size: 12, weight: 400, leading: 1.6667),
         weight: FontWeightTokens(bold: 700, medium: 500, normal: 400, semibold: 600)
+      ),
+      shadow: ShadowTokens(
+        high: [ShadowLayer(x: 0, y: 4, blur: 6, color: Color(astryxRGBA: 0x4A35201A)), ShadowLayer(x: 0, y: 12, blur: 24, color: Color(astryxRGBA: 0x4A352026))],
+        low: [ShadowLayer(x: 0, y: 2, blur: 4, color: Color(astryxRGBA: 0x4A35200D)), ShadowLayer(x: 0, y: 4, blur: 8, color: Color(astryxRGBA: 0x4A35201A))],
+        med: [ShadowLayer(x: 0, y: 2, blur: 4, color: Color(astryxRGBA: 0x4A35200D)), ShadowLayer(x: 0, y: 4, blur: 12, color: Color(astryxRGBA: 0x4A35201A))]
       )
     ),
     dark: Tokens(
@@ -423,6 +428,11 @@ extension Theme {
         size: FontSizeTokens(base: 14, lg: 17, s2xl: 24, s2xs: 8, s3xl: 29, s3xs: 7, s4xl: 35, s4xs: 6, s5xl: 42, sm: 12, xl: 20, xs: 10),
         supporting: TypeStyleTokens(size: 12, weight: 400, leading: 1.6667),
         weight: FontWeightTokens(bold: 700, medium: 500, normal: 400, semibold: 600)
+      ),
+      shadow: ShadowTokens(
+        high: [ShadowLayer(x: 0, y: 4, blur: 6, color: Color(astryxRGBA: 0x4A35201A)), ShadowLayer(x: 0, y: 12, blur: 24, color: Color(astryxRGBA: 0x4A352026))],
+        low: [ShadowLayer(x: 0, y: 2, blur: 4, color: Color(astryxRGBA: 0x4A35200D)), ShadowLayer(x: 0, y: 4, blur: 8, color: Color(astryxRGBA: 0x4A35201A))],
+        med: [ShadowLayer(x: 0, y: 2, blur: 4, color: Color(astryxRGBA: 0x4A35200D)), ShadowLayer(x: 0, y: 4, blur: 12, color: Color(astryxRGBA: 0x4A35201A))]
       )
     )
   )

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

@@ -214,6 +214,11 @@ extension Theme {
         size: FontSizeTokens(base: 14, lg: 17, s2xl: 24, s2xs: 8, s3xl: 29, s3xs: 7, s4xl: 35, s4xs: 6, s5xl: 42, sm: 12, xl: 20, xs: 10),
         supporting: TypeStyleTokens(size: 12, weight: 400, leading: 1.6667),
         weight: FontWeightTokens(bold: 700, medium: 500, normal: 400, semibold: 600)
+      ),
+      shadow: ShadowTokens(
+        high: [ShadowLayer(x: 0, y: 2, blur: 2, color: Color(astryxRGBA: 0x0000001A)), ShadowLayer(x: 0, y: 8, blur: 24, color: Color(astryxRGBA: 0x0000001A))],
+        low: [ShadowLayer(x: 0, y: 1, blur: 1, color: Color(astryxRGBA: 0x0000001A)), ShadowLayer(x: 0, y: 2, blur: 8, color: Color(astryxRGBA: 0x0000001A))],
+        med: [ShadowLayer(x: 0, y: 1, blur: 2, color: Color(astryxRGBA: 0x0000001A)), ShadowLayer(x: 0, y: 2, blur: 12, color: Color(astryxRGBA: 0x0000001A))]
       )
     ),
     dark: Tokens(
@@ -423,6 +428,11 @@ extension Theme {
         size: FontSizeTokens(base: 14, lg: 17, s2xl: 24, s2xs: 8, s3xl: 29, s3xs: 7, s4xl: 35, s4xs: 6, s5xl: 42, sm: 12, xl: 20, xs: 10),
         supporting: TypeStyleTokens(size: 12, weight: 400, leading: 1.6667),
         weight: FontWeightTokens(bold: 700, medium: 500, normal: 400, semibold: 600)
+      ),
+      shadow: ShadowTokens(
+        high: [ShadowLayer(x: 0, y: 2, blur: 2, color: Color(astryxRGBA: 0x00000033)), ShadowLayer(x: 0, y: 8, blur: 24, color: Color(astryxRGBA: 0x0000004D))],
+        low: [ShadowLayer(x: 0, y: 1, blur: 1, color: Color(astryxRGBA: 0x00000033)), ShadowLayer(x: 0, y: 2, blur: 8, color: Color(astryxRGBA: 0x00000033))],
+        med: [ShadowLayer(x: 0, y: 1, blur: 2, color: Color(astryxRGBA: 0x00000033)), ShadowLayer(x: 0, y: 2, blur: 12, color: Color(astryxRGBA: 0x00000033))]
       )
     )
   )

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

@@ -214,6 +214,11 @@ extension Theme {
         size: FontSizeTokens(base: 16, lg: 20, s2xl: 31, s2xs: 8, s3xl: 39, s3xs: 7, s4xl: 49, s4xs: 5, s5xl: 61, sm: 13, xl: 25, xs: 10),
         supporting: TypeStyleTokens(size: 13, weight: 400, leading: 1.5385),
         weight: FontWeightTokens(bold: 700, medium: 500, normal: 400, semibold: 600)
+      ),
+      shadow: ShadowTokens(
+        high: [ShadowLayer(x: 0, y: 4, blur: 6, color: Color(astryxRGBA: 0x00000040)), ShadowLayer(x: 0, y: 12, blur: 24, color: Color(astryxRGBA: 0x0000004D))],
+        low: [ShadowLayer(x: 0, y: 2, blur: 4, color: Color(astryxRGBA: 0x00000033)), ShadowLayer(x: 0, y: 4, blur: 8, color: Color(astryxRGBA: 0x00000040))],
+        med: [ShadowLayer(x: 0, y: 2, blur: 4, color: Color(astryxRGBA: 0x00000033)), ShadowLayer(x: 0, y: 4, blur: 12, color: Color(astryxRGBA: 0x00000040))]
       )
     ),
     dark: Tokens(
@@ -423,6 +428,11 @@ extension Theme {
         size: FontSizeTokens(base: 16, lg: 20, s2xl: 31, s2xs: 8, s3xl: 39, s3xs: 7, s4xl: 49, s4xs: 5, s5xl: 61, sm: 13, xl: 25, xs: 10),
         supporting: TypeStyleTokens(size: 13, weight: 400, leading: 1.5385),
         weight: FontWeightTokens(bold: 700, medium: 500, normal: 400, semibold: 600)
+      ),
+      shadow: ShadowTokens(
+        high: [ShadowLayer(x: 0, y: 4, blur: 6, color: Color(astryxRGBA: 0x00000040)), ShadowLayer(x: 0, y: 12, blur: 24, color: Color(astryxRGBA: 0x0000004D))],
+        low: [ShadowLayer(x: 0, y: 2, blur: 4, color: Color(astryxRGBA: 0x00000033)), ShadowLayer(x: 0, y: 4, blur: 8, color: Color(astryxRGBA: 0x00000040))],
+        med: [ShadowLayer(x: 0, y: 2, blur: 4, color: Color(astryxRGBA: 0x00000033)), ShadowLayer(x: 0, y: 4, blur: 12, color: Color(astryxRGBA: 0x00000040))]
       )
     )
   )

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

@@ -214,6 +214,11 @@ extension Theme {
         size: FontSizeTokens(base: 16, lg: 20, s2xl: 31, s2xs: 8, s3xl: 39, s3xs: 7, s4xl: 49, s4xs: 5, s5xl: 61, sm: 13, xl: 25, xs: 10),
         supporting: TypeStyleTokens(size: 13, weight: 400, leading: 1.5385),
         weight: FontWeightTokens(bold: 700, medium: 500, normal: 400, semibold: 600)
+      ),
+      shadow: ShadowTokens(
+        high: [ShadowLayer(x: 0, y: 4, blur: 6, color: Color(astryxRGBA: 0x3E481D1A)), ShadowLayer(x: 0, y: 12, blur: 24, color: Color(astryxRGBA: 0x3E481D26))],
+        low: [ShadowLayer(x: 0, y: 2, blur: 4, color: Color(astryxRGBA: 0x3E481D0D)), ShadowLayer(x: 0, y: 4, blur: 8, color: Color(astryxRGBA: 0x3E481D1A))],
+        med: [ShadowLayer(x: 0, y: 2, blur: 4, color: Color(astryxRGBA: 0x3E481D0D)), ShadowLayer(x: 0, y: 4, blur: 12, color: Color(astryxRGBA: 0x3E481D1A))]
       )
     ),
     dark: Tokens(
@@ -423,6 +428,11 @@ extension Theme {
         size: FontSizeTokens(base: 16, lg: 20, s2xl: 31, s2xs: 8, s3xl: 39, s3xs: 7, s4xl: 49, s4xs: 5, s5xl: 61, sm: 13, xl: 25, xs: 10),
         supporting: TypeStyleTokens(size: 13, weight: 400, leading: 1.5385),
         weight: FontWeightTokens(bold: 700, medium: 500, normal: 400, semibold: 600)
+      ),
+      shadow: ShadowTokens(
+        high: [ShadowLayer(x: 0, y: 4, blur: 6, color: Color(astryxRGBA: 0x3E481D1A)), ShadowLayer(x: 0, y: 12, blur: 24, color: Color(astryxRGBA: 0x3E481D26))],
+        low: [ShadowLayer(x: 0, y: 2, blur: 4, color: Color(astryxRGBA: 0x3E481D0D)), ShadowLayer(x: 0, y: 4, blur: 8, color: Color(astryxRGBA: 0x3E481D1A))],
+        med: [ShadowLayer(x: 0, y: 2, blur: 4, color: Color(astryxRGBA: 0x3E481D0D)), ShadowLayer(x: 0, y: 4, blur: 12, color: Color(astryxRGBA: 0x3E481D1A))]
       )
     )
   )

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

@@ -214,6 +214,11 @@ extension Theme {
         size: FontSizeTokens(base: 14, lg: 17, s2xl: 24, s2xs: 8, s3xl: 29, s3xs: 7, s4xl: 35, s4xs: 6, s5xl: 42, sm: 12, xl: 20, xs: 10),
         supporting: TypeStyleTokens(size: 12, weight: 400, leading: 1.6667),
         weight: FontWeightTokens(bold: 700, medium: 500, normal: 400, semibold: 600)
+      ),
+      shadow: ShadowTokens(
+        high: [ShadowLayer(x: 0, y: 4, blur: 6, color: Color(astryxRGBA: 0x0000001A)), ShadowLayer(x: 0, y: 12, blur: 24, color: Color(astryxRGBA: 0x00000026)), ShadowLayer(x: 0, y: 0, blur: 0, spread: 1, isInset: true, color: Color(astryxRGBA: 0x00000000))],
+        low: [ShadowLayer(x: 0, y: 2, blur: 4, color: Color(astryxRGBA: 0x0000000D)), ShadowLayer(x: 0, y: 4, blur: 8, color: Color(astryxRGBA: 0x0000001A)), ShadowLayer(x: 0, y: 0, blur: 0, spread: 1, isInset: true, color: Color(astryxRGBA: 0x00000000))],
+        med: [ShadowLayer(x: 0, y: 2, blur: 4, color: Color(astryxRGBA: 0x0000000D)), ShadowLayer(x: 0, y: 4, blur: 12, color: Color(astryxRGBA: 0x0000001A)), ShadowLayer(x: 0, y: 0, blur: 0, spread: 1, isInset: true, color: Color(astryxRGBA: 0x00000000))]
       )
     ),
     dark: Tokens(
@@ -423,6 +428,11 @@ extension Theme {
         size: FontSizeTokens(base: 14, lg: 17, s2xl: 24, s2xs: 8, s3xl: 29, s3xs: 7, s4xl: 35, s4xs: 6, s5xl: 42, sm: 12, xl: 20, xs: 10),
         supporting: TypeStyleTokens(size: 12, weight: 400, leading: 1.6667),
         weight: FontWeightTokens(bold: 700, medium: 500, normal: 400, semibold: 600)
+      ),
+      shadow: ShadowTokens(
+        high: [ShadowLayer(x: 0, y: 4, blur: 6, color: Color(astryxRGBA: 0x00000080)), ShadowLayer(x: 0, y: 12, blur: 24, color: Color(astryxRGBA: 0x000000B3)), ShadowLayer(x: 0, y: 0, blur: 0, spread: 1, isInset: true, color: Color(astryxRGBA: 0xFFFFFF26))],
+        low: [ShadowLayer(x: 0, y: 2, blur: 4, color: Color(astryxRGBA: 0x00000040)), ShadowLayer(x: 0, y: 4, blur: 8, color: Color(astryxRGBA: 0x00000066)), ShadowLayer(x: 0, y: 0, blur: 0, spread: 1, isInset: true, color: Color(astryxRGBA: 0xFFFFFF14))],
+        med: [ShadowLayer(x: 0, y: 2, blur: 4, color: Color(astryxRGBA: 0x00000059)), ShadowLayer(x: 0, y: 4, blur: 12, color: Color(astryxRGBA: 0x00000080)), ShadowLayer(x: 0, y: 0, blur: 0, spread: 1, isInset: true, color: Color(astryxRGBA: 0xFFFFFF1F))]
       )
     )
   )

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

@@ -214,6 +214,11 @@ extension Theme {
         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: 0x25252A1A)), ShadowLayer(x: 0, y: 12, blur: 24, color: Color(astryxRGBA: 0x25252A26))],
+        low: [ShadowLayer(x: 0, y: 2, blur: 4, color: Color(astryxRGBA: 0x25252A0D)), ShadowLayer(x: 0, y: 4, blur: 8, color: Color(astryxRGBA: 0x25252A1A))],
+        med: [ShadowLayer(x: 0, y: 2, blur: 4, color: Color(astryxRGBA: 0x25252A0D)), ShadowLayer(x: 0, y: 4, blur: 12, color: Color(astryxRGBA: 0x25252A1A))]
       )
     ),
     dark: Tokens(
@@ -423,6 +428,11 @@ extension Theme {
         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: 0x25252A1A)), ShadowLayer(x: 0, y: 12, blur: 24, color: Color(astryxRGBA: 0x25252A26))],
+        low: [ShadowLayer(x: 0, y: 2, blur: 4, color: Color(astryxRGBA: 0x25252A0D)), ShadowLayer(x: 0, y: 4, blur: 8, color: Color(astryxRGBA: 0x25252A1A))],
+        med: [ShadowLayer(x: 0, y: 2, blur: 4, color: Color(astryxRGBA: 0x25252A0D)), ShadowLayer(x: 0, y: 4, blur: 12, color: Color(astryxRGBA: 0x25252A1A))]
       )
     )
   )

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

@@ -11,19 +11,44 @@ public struct Tokens: Equatable, Sendable {
   public var radius: RadiusTokens
   public var size: SizeTokens
   public var font: FontTokens
+  public var shadow: ShadowTokens
 
   public init(
     color: ColorTokens,
     space: SpaceTokens,
     radius: RadiusTokens,
     size: SizeTokens,
-    font: FontTokens
+    font: FontTokens,
+    shadow: ShadowTokens
   ) {
     self.color = color
     self.space = space
     self.radius = radius
     self.size = size
     self.font = font
+    self.shadow = shadow
+  }
+}
+
+/// One layer of a theme's shadow, as CSS `box-shadow` draws it: a drop
+/// shadow (an offset and a blur), or an inset ring `spread` points wide.
+public struct ShadowLayer: Equatable, Sendable {
+  public var x: CGFloat
+  public var y: CGFloat
+  public var blur: CGFloat
+  public var spread: CGFloat
+  public var isInset: Bool
+  public var color: Color
+
+  public init(
+    x: CGFloat, y: CGFloat, blur: CGFloat, spread: CGFloat = 0, isInset: Bool = false, color: Color
+  ) {
+    self.x = x
+    self.y = y
+    self.blur = blur
+    self.spread = spread
+    self.isInset = isInset
+    self.color = color
   }
 }
 
@@ -1260,3 +1285,34 @@ public struct FontWeightTokens: Equatable, Sendable {
     self.semibold = semibold
   }
 }
+
+/// The theme's `shadow` tokens, one typed member per token.
+public struct ShadowTokens: Equatable, Sendable {
+  /// `--shadow-high`
+  public var high: [ShadowLayer]
+  /// `--shadow-low`
+  public var low: [ShadowLayer]
+  /// `--shadow-med`
+  public var med: [ShadowLayer]
+
+  public init(
+    high: [ShadowLayer],
+    low: [ShadowLayer],
+    med: [ShadowLayer]
+  ) {
+    self.high = high
+    self.low = low
+    self.med = med
+  }
+
+  /// A token by its CSS name, for code that only has the name. Components
+  /// read the typed members instead.
+  func value(named token: String) -> [ShadowLayer]? {
+    switch token {
+    case "shadow-high": high
+    case "shadow-low": low
+    case "shadow-med": med
+    default: nil
+    }
+  }
+}

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

@@ -214,6 +214,11 @@ extension Theme {
         size: FontSizeTokens(base: 16, lg: 20, s2xl: 31, s2xs: 8, s3xl: 39, s3xs: 7, s4xl: 49, s4xs: 5, s5xl: 61, sm: 13, xl: 25, xs: 10),
         supporting: TypeStyleTokens(size: 12, weight: 400, leading: 1.5385),
         weight: FontWeightTokens(bold: 700, medium: 500, normal: 400, semibold: 600)
+      ),
+      shadow: ShadowTokens(
+        high: [ShadowLayer(x: 0, y: 4, blur: 6, color: Color(astryxRGBA: 0x2D241B1A)), ShadowLayer(x: 0, y: 12, blur: 24, color: Color(astryxRGBA: 0x2D241B26))],
+        low: [ShadowLayer(x: 0, y: 2, blur: 4, color: Color(astryxRGBA: 0x2D241B0D)), ShadowLayer(x: 0, y: 4, blur: 8, color: Color(astryxRGBA: 0x2D241B1A))],
+        med: [ShadowLayer(x: 0, y: 2, blur: 4, color: Color(astryxRGBA: 0x2D241B0D)), ShadowLayer(x: 0, y: 4, blur: 12, color: Color(astryxRGBA: 0x2D241B1A))]
       )
     ),
     dark: Tokens(
@@ -423,6 +428,11 @@ extension Theme {
         size: FontSizeTokens(base: 16, lg: 20, s2xl: 31, s2xs: 8, s3xl: 39, s3xs: 7, s4xl: 49, s4xs: 5, s5xl: 61, sm: 13, xl: 25, xs: 10),
         supporting: TypeStyleTokens(size: 12, weight: 400, leading: 1.5385),
         weight: FontWeightTokens(bold: 700, medium: 500, normal: 400, semibold: 600)
+      ),
+      shadow: ShadowTokens(
+        high: [ShadowLayer(x: 0, y: 4, blur: 6, color: Color(astryxRGBA: 0x2D241B1A)), ShadowLayer(x: 0, y: 12, blur: 24, color: Color(astryxRGBA: 0x2D241B26))],
+        low: [ShadowLayer(x: 0, y: 2, blur: 4, color: Color(astryxRGBA: 0x2D241B0D)), ShadowLayer(x: 0, y: 4, blur: 8, color: Color(astryxRGBA: 0x2D241B1A))],
+        med: [ShadowLayer(x: 0, y: 2, blur: 4, color: Color(astryxRGBA: 0x2D241B0D)), ShadowLayer(x: 0, y: 4, blur: 12, color: Color(astryxRGBA: 0x2D241B1A))]
       )
     )
   )

package/apple/Sources/Astryx/Theme/Shadow.swift

@@ -0,0 +1,39 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+extension View {
+  /// Draws a theme shadow around this view's shape, as CSS `box-shadow` does:
+  /// drop layers only outside the shape, so a see-through view shows no
+  /// shadow beneath it, and inset rings inside its edge.
+  func astryxShadow<S: InsettableShape>(_ layers: [ShadowLayer], in shape: S) -> some View {
+    background {
+      ZStack {
+        ForEach(Array(layers.enumerated()), id: \.offset) { _, layer in
+          if !layer.isInset {
+            // A CSS blur is twice SwiftUI's shadow radius.
+            shape.fill(.black)
+              .shadow(color: layer.color, radius: layer.blur / 2, x: layer.x, y: layer.y)
+          }
+        }
+      }
+      .mask {
+        // Everything but the shape itself.
+        Rectangle()
+          .padding(-Self.shadowReach(layers))
+          .overlay(shape.fill(.black).blendMode(.destinationOut))
+          .compositingGroup()
+      }
+    }
+    .overlay {
+      ForEach(Array(layers.enumerated()), id: \.offset) { _, layer in
+        if layer.isInset {
+          shape.strokeBorder(layer.color, lineWidth: layer.spread)
+        }
+      }
+    }
+  }
+
+  /// How far past the shape the layers can draw.
+  fileprivate static func shadowReach(_ layers: [ShadowLayer]) -> CGFloat {
+    layers.map { $0.blur + max(abs($0.x), abs($0.y)) }.max().map { $0 + 4 } ?? 0
+  }
+}