Icon tile

1<AppIconTile glyph="moon" tone="deep-space" label="Moon" />2<AppIconTile glyph="graph" tone="aurora-green" label="Graphs" pressed />

1/** Glass icon tile. Pass `pressed` for a toggle; `label` is the accessible name. */2export function AppIconTile({3  glyph,4  tone = "deep-space",5  size,6  label,7  pressed,8  disabled,9}: {10  glyph: GlyphName;11  tone?: TileTone;12  size?: "sm" | "lg";13  label: string;14  pressed?: boolean;15  disabled?: boolean;16}) {17  return (18    <button19      type="button"20      className={`app-ui app-tile${size ? ` is-${size}` : ""}`}21      style={{ ["--tone" as string]: toneVar(tone) }}22      aria-label={label}23      aria-pressed={pressed}24      disabled={disabled}25    >26      <Glyph name={glyph} />27    </button>28  );29}

1export const Glyph = ({ name }: { name: GlyphName }) => (2  <svg viewBox="0 0 24 24" aria-hidden="true">3    <path d={GLYPHS[name]} fillRule="evenodd" />4  </svg>5);

1.app-tile {2  --tone: var(--color-deep-space-200);3  --tile-size: var(--spacing-f55);4  position: relative;5  display: inline-grid;6  place-items: center;7  width: var(--tile-size);8  aspect-ratio: 1;9  border-radius: calc(var(--tile-size) * var(--phi-inverse-squared));10  border: var(--spacing-f1) solid color-mix(in srgb, var(--tone) var(--mag-3), transparent);11  color: var(--tone);12  cursor: pointer;13  overflow: hidden;14  isolation: isolate;15  background:16    radial-gradient(circle at 50% 115%, color-mix(in srgb, var(--tone) var(--mag-1), transparent), transparent 65%),17    linear-gradient(160deg, color-mix(in srgb, var(--tone) var(--mag-4), var(--c-ink)), color-mix(in srgb, var(--tone) var(--mag-6), var(--c-ink)));18  box-shadow: var(--highlight), 0 var(--spacing-f13) var(--spacing-f34) calc(var(--spacing-f13) * -1) color-mix(in srgb, var(--tone) var(--mag-1), transparent);19  transition: transform 0.4s cubic-bezier(0.215, 0.61, 0.355, 1), box-shadow 0.4s;20}2122.app-tile svg { width: calc(var(--tile-size) * var(--phi-inverse-squared)); height: calc(var(--tile-size) * var(--phi-inverse-squared)); fill: currentColor; filter: drop-shadow(0 0 var(--spacing-f8) color-mix(in srgb, var(--tone) var(--mag-1), transparent)); }2324.app-tile:hover { transform: translateY(calc(var(--spacing-f3) * -1)); }2526.app-tile[aria-pressed="true"] { background: var(--tone); color: var(--c-ink); box-shadow: var(--highlight), 0 var(--spacing-f13) var(--spacing-f34) calc(var(--spacing-f8) * -1) var(--tone); }2728.app-tile.is-sm { --tile-size: var(--spacing-f34); }2930.app-tile.is-lg { --tile-size: var(--spacing-f89); }

1AstrGlassTile(2icon: Icons.nightlight_round,3label: 'Moon',4tone: AstrTone.deepSpace,5size: AstrTileSize.md, // 556selected: false,7onPressed: () {},8)

1/// The five accent tones for glass tiles and buttons, named by the colour they2/// are. Each is a stop from [AstrColors], so a tone can never drift from the3/// colour system.4enum AstrTone {5  deepSpace,6  auroraGreen,7  auroraPink,8  sodiumAirglow,9  oxygenAirglow;1011  Color get color => switch (this) {12        AstrTone.deepSpace => AstrColors.deepSpace[200]!,13        AstrTone.auroraGreen => AstrColors.auroraGreen[400]!,14        AstrTone.auroraPink => AstrColors.auroraPink[400]!,15        AstrTone.sodiumAirglow => AstrColors.sodiumAirglow[400]!,16        AstrTone.oxygenAirglow => AstrColors.oxygenAirglow[400]!,17      };18}

1/// Tile edge lengths: the Fibonacci steps 34, 55 and 89. The corner radius is2/// the golden minor part of the edge (0.382), which lands on the next3/// Fibonacci radius down: 13, 21 and 34.4enum AstrTileSize {5  sm(AstrSpace.f34),6  md(AstrSpace.f55),7  lg(AstrSpace.f89);89  const AstrTileSize(this.edge);10  final double edge;11}

1/// A tinted glass square holding one glyph, with a bloom of its tone along the2/// bottom edge. When [selected] the tile fills with the tone. Pressed, it3/// squeezes slightly and its glow grows, like the hover state on the web.4class AstrGlassTile extends StatefulWidget {5  const AstrGlassTile({6    super.key,7    required this.icon,8    required this.label,9    this.tone = AstrTone.deepSpace,10    this.size = AstrTileSize.md,11    this.selected = false,12    this.onPressed,13  });1415  final IconData icon;1617  /// Accessible name, read by screen readers.18  final String label;19  final AstrTone tone;20  final AstrTileSize size;21  final bool selected;22  final VoidCallback? onPressed;2324  @override25  State<AstrGlassTile> createState() => _AstrGlassTileState();26}