plinth_core 0.2.1

Design tokens and theme foundation for Plinth UI — colors, spacing, radius, typography.

Changelog

All notable changes to this package will be documented in this file.

The format follows Keep a Changelog, and this project intends to adhere to Semantic Versioning once it reaches a 1.0.0 release. Versions before 1.0.0 may include breaking changes without a major version bump.

0.2.1

Added

• An example/, so pub.dev's Example tab shows how to register the theme and read tokens from it rather than sending people to the repo. Since this package has no widgets, the example is plain Flutter styled entirely from PlinthTheme — including shaded, contrastingOn, and readableOn, which are the parts hardest to infer from the API alone.

0.2.0

Added

• Contrast-aware color resolution. Measured against WCAG, the palette was failing badly in three separate ways, and each needed a different fix:

  • contrastingOn(background) picks a foreground by the fill's lightness. White on yellow measured 2.12:1 and on teal 1.82:1, against the 4.5:1 AA asks for — a filled button whose label you could see but not read. Which way it should fall depends on the fill, not the theme.
  • shaded(name, shade) and shadeFor(shade) mirror a shade for the theme's brightness. A shade-0 wash is nearly white behind a dark alert, and a shade-6 accent measured 1.97:1 as text on the dark surface. Mirroring keeps each shade's role while flipping its lightness.
  • readableOn(name, background) walks the ramp for a shade that clears a contrast threshold. Mirroring can't fix this half: the ramps differ in intrinsic lightness, so no single index serves every hue — violet at shade 6 reads comfortably on white where cyan at shade 6 lands at 2.19:1.

  Use shaded for fills, contrastingOn for what sits on them, and readableOn for a palette colour used as text or an icon.

• onFilledInverse, the dark counterpart to onFilled, for fills too light to carry white text.

Changed

• Components resolving a palette colour now go through these rather than a fixed shade 6. Colours that already met contrast — blue, red, violet, indigo, grape, pink — are unaffected; the lighter half of the palette changes appearance, which is the point.

0.1.0

Added

• Dark mode. PlinthTheme.darkTheme sits alongside defaultTheme, and a brightness field says which is which:

  MaterialApp(
    theme: ThemeData(extensions: [PlinthTheme.defaultTheme]),
    darkTheme: ThemeData(extensions: [PlinthTheme.darkTheme]),
  )
  

  The color ramps are shared rather than darkened — a blue button is the same blue in either theme, as in Mantine. What changes is the neutral chrome the ramps never covered.

• Surface, text, and border tokens for that chrome: surface, surfaceMuted, surfaceSunken, border, borderMuted, text, textMuted, textDisabled, plus onFilled, shadow, and scrim.

  onFilled deliberately does not follow brightness: a filled button is saturated in either theme, so its label stays light in both. Flipping it with the theme is how you get dark text on a dark-blue button.

  The light values are exactly the literals components hardcoded before, so registering defaultTheme renders identically to 0.0.1.

• Nine more color ramps in PlinthTheme.defaultTheme, bringing it to Mantine's standard set: pink, grape, violet, indigo, cyan, teal, lime, yellow, and orange join gray, red, blue, and green.

  This fixes colors that silently rendered as the primary blue. color() falls back to primaryColor for an unrecognized name, so a palette missing a color callers reasonably expect doesn't fail — it quietly renders the wrong thing, which is harder to spot than an error. PlinthBadge(color: 'grape') was blue; it is now grape.

• PlinthTheme.hasColor(name), for telling a real ramp from one that would fall back — useful when offering swatches rather than rendering one.

Changed

• PlinthMark now picks up the real yellow ramp instead of its literal amber fallback, since the theme defines yellow at last. Its highlight shifts slightly as a result.

0.0.1 — Initial development release

• PlinthTheme: a ThemeExtension<PlinthTheme> holding the design-token layer every Plinth component reads from — color palettes, spacing, corner radius, and font-size scales, keyed by PlinthSize.
• Color-shade generator: produces a 10-shade ramp (PlinthColorShades) from a single base color, using non-linear lightness stops and shade-dependent saturation rather than plain linear interpolation, so light shades read as soft tints and dark shades stay rich.
• context.plinth extension for convenient theme access from any BuildContext.
• Shared tokens: PlinthSize (xs–xl) and PlinthVariant (filled, light, outline, subtle, transparent, defaultVariant) used consistently across every component in plinth_components.