tech/sxchnge

0 Fork 0

Files

T

Stephan D d9318053e8 Prepare product layout and reusable Flutter theme

Relocate the existing Astro website and preserve its assets and hosting configuration. Add the consumer/backend scaffold and themed Flutter package with consumer tests. Related to #1.

2026-09-11 15:36:58 +02:00

3.1 KiB

Raw Permalink Blame History

sxchnge_theme

Installable SXCHNGE theme package for Flutter 3.47+ / Dart 3.13+. It provides light and dark Material 3 themes, website brand colors, and bundled Onest typography with Latin and Cyrillic support. No runtime network requests or third-party packages are needed.

Install

From an application at frontend/app, add:

dependencies:
  flutter:
    sdk: flutter
  sxchnge_theme:
    path: ../packages/sxchnge_theme

Adjust the path relative to your app's pubspec.yaml, then run flutter pub get. This is a private package (publish_to: none), ready for local use; it has not been published to pub.dev.

Apply

import 'package:flutter/material.dart';
import 'package:sxchnge_theme/sxchnge_theme.dart';

MaterialApp(
  theme: SxchngeTheme.light(),
  darkTheme: SxchngeTheme.dark(),
  themeMode: ThemeMode.system,
  home: const Scaffold(body: Center(child: Text('Hello, sxchnge'))),
);

Onest is declared by the package and the theme uses its package-qualified font family, so the consuming app needs no additional font declarations. The bundled SIL Open Font License is in assets/fonts/OFL.txt. Follow Flutter's TextStyle package font guidance when creating standalone text styles outside the theme.

Use Theme.of(context).colorScheme and textTheme for normal application widgets. SxchngeBrand exposes the original palette for intentional brand treatments. Customize locally with SxchngeTheme.light().copyWith(...).

Design mapping

Ink, mint, lime, paper, and forest match website/design/tokens.json version 1.
Light mode uses ink actions on paper; dark mode uses mint actions on ink.
Mint and lime containers use ink foregrounds. Lime is a brand accent, not a success or transaction status.
Onest body text starts at 16 logical pixels, with 14-pixel secondary text. Text scaling is preserved.
Cards and dialogs use 24-pixel corners, fields use 14-pixel corners, and buttons use pill shapes with at least 48-pixel minimum height.
Error colors remain Material semantic roles. A future product status system should define success, warning, and information roles separately.

The palette is a package-owned snapshot: website builds do not modify this package. Deliberate brand updates should update the snapshot and package version together. Campaign layout, rotation, marquee, and decorative motion are not part of the application theme.

Example and validation

example/lib/main.dart is a minimal consumer gallery with English/Russian text, cards, inputs, validation errors, and enabled/disabled buttons. To launch it, generate the platform runner you need from example/, for example flutter create --platforms=web ., then flutter run -d chrome. Platform runners are not included in this theme-only package.

From the repository root:

make test-frontend

From this package and its example/ folder, run flutter analyze. Tests cover core brand synchronization in this repository, foreground contrast in both modes, package font/license bundling in an independent consumer, and rendering/input on a narrow screen at 200% text scale.

3.1 KiB Raw Permalink Blame History