Sky state background

1<AppSkyState state="starrySkies" note="Clear and dark" />

1/** SkyStateBackground: the illustrated sky at half opacity under the blue wash, with its state name. */2export function AppSkyState({ state, note }: { state: SkyStateKey; note?: string }) {3  const { image, label } = SKY_STATE_ASSETS[state];4  return (5    <div className="app-ui app-state">6      {/* eslint-disable-next-line @next/next/no-img-element */}7      <img src={`/app/${image}.jpg`} alt="" />8      <div>9        <div className="app-heading">{label}</div>10        {note && <div className="app-label-sm">{note}</div>}11      </div>12    </div>13  );14}

1.app-state {2  position: relative;3  overflow: hidden;4  flex: 1 1 var(--spacing-f144);5  min-height: var(--spacing-f144);6  border-radius: var(--radius-f21);7  background: var(--c-ink);8  border: var(--spacing-f1) solid var(--hair-strong);9  box-shadow: var(--highlight);10}1112.app-state img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: var(--mag-1); }1314.app-state::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, color-mix(in srgb, var(--c-accent) var(--mag-4), transparent), transparent); pointer-events: none; }1516.app-state > div { position: absolute; left: var(--spacing-f13); right: var(--spacing-f13); bottom: var(--spacing-f13); z-index: 1; }

1SkyStateBackground(skyState: SkyState.starrySkies)

1/// The glass surface for cards: a sheen over the surface and a hairline edge.2/// Cards do not glow; glow belongs to buttons and tiles. Mini cards are3/// [AstrSpace.f144] wide and 144 + 21 tall.4class AstrGlassCard extends StatelessWidget {5  const AstrGlassCard({6    super.key,7    required this.child,8    this.width,9    this.height,10  });1112  final Widget child;13  final double? width;14  final double? height;1516  @override17  Widget build(BuildContext context) {18    final Color text = AstrColors.spaceGrey[50]!;19    final BorderRadius radius = BorderRadius.circular(AstrRadius.f21);2021    return RepaintBoundary(22      child: ClipRRect(23        borderRadius: radius,24        child: BackdropFilter(25          filter: ImageFilter.blur(sigmaX: AstrSpace.f13, sigmaY: AstrSpace.f13),26          child: Container(27            width: width,28            height: height,29            padding: const EdgeInsets.all(AstrSpace.f13),30            decoration: BoxDecoration(31              borderRadius: radius,32              border: Border.all(color: text.withValues(alpha: Mag.m5)),33              color: _ink.withValues(alpha: Mag.m1),34              gradient: LinearGradient(35                begin: Alignment.topLeft,36                end: Alignment.bottomRight,37                colors: <Color>[38                  text.withValues(alpha: Mag.m5),39                  text.withValues(alpha: Mag.m8),40                ],41              ),42            ),43            child: child,44          ),45        ),46      ),47    );48  }49}

1class SkyStateBackground extends StatelessWidget {2  const SkyStateBackground({3    super.key,4    required this.skyState,5  });67  final SkyState skyState;89  @override10  Widget build(BuildContext context) {11    return Stack(12      fit: StackFit.expand,13      children: <Widget>[14        const ColoredBox(color: AppColors.surface),15        Image.asset(16          SkyStateAssets.pathFor(skyState),17          fit: BoxFit.cover,18          opacity: const AlwaysStoppedAnimation<double>(0.5),19        ),20        const DecoratedBox(21          decoration: BoxDecoration(22            gradient: LinearGradient(23              begin: Alignment.topCenter,24              end: Alignment.bottomCenter,25              colors: <Color>[26                Color(0x33448AFF),27                Colors.transparent,28              ],29            ),30          ),31        ),32      ],33    );34  }35}

1class SkyStateAssets {2  const SkyStateAssets._();34  static String pathFor(SkyState state) {5    return switch (state) {6      SkyState.milkyWayVisible => 'assets/img/milky_way.jpg',7      SkyState.starrySkies => 'assets/img/starry_sky.jpg',8      SkyState.planetsVisible => 'assets/img/planets.jpg',9      SkyState.fewStars => 'assets/img/few_stars.jpg',10      SkyState.cloudy => 'assets/img/cloudy.jpg',11      SkyState.tooMuchLight => 'assets/img/excessive_light_pollution.jpg',12    };13  }14}