daybreak-tokens

Defines NearlyStop's Daybreak design tokens as Flutter ThemeExtensions with contrast-tested color, shape, elevation, and motion slots.

Updated Aug 22, 2026
One-click install
npx skills add https://github.com/zakariaf/NearlyStop --skill daybreak-tokens-zakariaf
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: daybreak-tokens
Source: https://github.com/zakariaf/NearlyStop/tree/main/.claude/skills/daybreak-tokens
Command: npx skills add https://github.com/zakariaf/NearlyStop --skill daybreak-tokens-zakariaf

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Flutter apps without a token system scatter raw hex colors, shadows, and durations across widgets, making dark mode, contrast compliance, and reskinning error-prone. This Skill pins every Daybreak design value into lib/theme/ as a single-source primitive pool plus typed ThemeExtension slots, so widgets never hardcode a color, shadow, gradient, or duration. ## Core Features & Use Cases - Two-tier token architecture: A primitives.dart file (the only file allowed raw Color values, named by hue family + CIE L*) feeding DaybreakColors, DaybreakShapes, DaybreakElevation, and DaybreakMotion ThemeExtensions with copyWith, lerp, and an asserting of(context). - Hand-authored light and dark ColorSchemes: No ColorScheme.fromSeed, no dynamic_color, no google_fonts; outline maps to borderStrong so controls keep visible boundaries, and #F97350 primary is enforced as fill-only (2.76:1) with primaryDeep for text. - Contrast budget gate: Nineteen measured foreground/background pairs in both themes, verified by a unit test using the WCAG relative-luminance formula, with documented decorative-only carve-outs. - Use Case: When adding a new screen or reviewing a widget that renders a hex, BoxShadow, LinearGradient, or Duration, apply this Skill to route every value through a named slot, keep the sunrise gradient RTL-safe via AlignmentDirectional, and land any new token with its contrast-budget row and test in the same commit. ## Quick Start Ask the AI to apply the daybreak-tokens rules while editing a file under lib/theme/ or building a widget that needs a Daybreak color, radius, shadow, gradient, or duration.

Frequently Asked Questions about daybreak-tokens

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create custom theme tokens in Flutter with ThemeExtension?

Define a ThemeExtension subclass holding your token fields with copyWith and a lerp covering every field, attach it to ThemeData, and expose an of(context) accessor that asserts rather than falling back. Widgets then read named slots like DaybreakColors.of(context).ink instead of raw colors.

How do I check color contrast ratios in Flutter tests?

Use Color.computeLuminance() for both colors, apply the WCAG formula (hi + 0.05) / (lo + 0.05), and assert each declared pair meets its floor: 4.5:1 for text and 3.0:1 for control boundaries and state marks. Run the test against both light and dark theme instances.

Why should I avoid ColorScheme.fromSeed for a custom design system?

ColorScheme.fromSeed derives every role from one seed color, so the resulting roles are unmeasured for contrast and may fail accessibility floors. Hand-authoring both ColorSchemes with a fixed role map keeps every foreground/background pair verified by a contrast test.

How do I make a LinearGradient mirror correctly in RTL Flutter layouts?

Use AlignmentDirectional instead of Alignment for begin and end so the gradient mirrors with the text direction. Alignment does not resolve directionality, so in RTL locales like Persian the light would fall from the wrong corner.

Can I use google_fonts in an offline Flutter app?

No, google_fonts fetches fonts over HTTP at runtime by default, which breaks offline-only apps. Bundle font files like Nunito and Vazirmatn as assets, register their licenses, and declare them in pubspec.yaml instead.

Why does a CSS blur value look wrong as a Flutter BoxShadow blurRadius?

CSS blur b corresponds to sigma b/2, while Flutter's blurRadius r maps to sigma 0.57735*r + 0.5, so writing the CSS number directly makes shadows about 15% too tight. Convert with r approximately 0.866*(b-1) for matching softness.