flemming-it
c6400302dd
Adds a dedicated BrandWordmark widget that splits 'Recl∆Im'
into three TextSpans and tints the middle ∆I in the petrol
signal colour. The fai_web universe uses this same accent rule
for the F∆I and Ch∆In glyphs — Recl∆Im now follows it, so
the brand stays visually coherent across every F∆I surface.
Where it lands:
- Landing page: large DeltaMark (96 px) and BrandWordmark
(56 px) sit on a single row, the wordmark to the right of
the mark. The two together carry the brand identity that
a viewer sees first when opening the app.
- NavigationRail leading: the muted 'Recl∆Im' Text line is
replaced with the petrol-accented BrandWordmark (18 px),
keeping the vendor tag 'F∆I' as a small muted line under it.
widget_test.dart adapts: the literal 'Recl∆Im'-find no longer
matches because the wordmark is now three text spans, so the
test checks for BrandWordmark by type — equivalent assertion,
robust to glyph-level splits.
Signed-off-by: flemming-it <sf@flemming.it>
55 lines
1.5 KiB
Dart
55 lines
1.5 KiB
Dart
import 'package:flutter/material.dart';
|
|
|
|
import '../theme/reclaim_tokens.dart';
|
|
|
|
/// "Recl∆Im" wordmark with the ∆I glyphs petrol-coloured — the
|
|
/// brand rule of thumb in the fai_web universe: wherever the name
|
|
/// stands as a brand, the ∆I tinted petrol carries the F∆I-family
|
|
/// identity. As plain text it would all share the surrounding ink
|
|
/// colour.
|
|
///
|
|
/// Pass [size] for the base font size; the ∆I scales relative.
|
|
class BrandWordmark extends StatelessWidget {
|
|
const BrandWordmark({
|
|
super.key,
|
|
this.size = 24,
|
|
this.fontWeight = FontWeight.w600,
|
|
this.color,
|
|
this.letterSpacing = -0.5,
|
|
});
|
|
|
|
final double size;
|
|
final FontWeight fontWeight;
|
|
|
|
/// Color of the non-∆I letters. Defaults to the surface's
|
|
/// onSurface so the wordmark reads against whichever ink/paper
|
|
/// backdrop it sits on.
|
|
final Color? color;
|
|
final double letterSpacing;
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
final base = color ?? Theme.of(context).colorScheme.onSurface;
|
|
final style = TextStyle(
|
|
fontSize: size,
|
|
fontWeight: fontWeight,
|
|
fontFamily: ReclaimTypography.display,
|
|
color: base,
|
|
letterSpacing: letterSpacing,
|
|
height: 1.0,
|
|
);
|
|
return RichText(
|
|
text: TextSpan(
|
|
style: style,
|
|
children: [
|
|
const TextSpan(text: 'Recl'),
|
|
TextSpan(
|
|
text: '∆I',
|
|
style: style.copyWith(color: ReclaimColors.signal),
|
|
),
|
|
const TextSpan(text: 'm'),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
}
|