Skip to content

feat: Compose theme from the Daycompass design system - #9

Merged
mikahatdichlieb merged 5 commits into
mainfrom
feat/design-system-theme
Oct 26, 2026
Merged

mikahatdichlieb merged 5 commits into
mainfrom
feat/design-system-theme

Conversation

@mikahatdichlieb

Copy link
Copy Markdown
Contributor

Closes #8

What

Brings the Daycompass design system into the app, ahead of the pairing screen (#5).

  • Colors: light and dark tokens in DcColors, mapped onto the Material 3 ColorScheme and available as Dc.colors. The hover tokens are left out because there is no pointer on a phone. Surface tint is disabled, and the window background matches bg in both themes so nothing flashes white on start.
  • Type: the full scale in Dc.type, set in Fredoka and Nunito variable fonts. The number styles use tabular figures, and sizes are in sp so they follow the system text size.
  • Tokens: DcSpacing, DcRadius and DcSize.
  • DcButton: primary, secondary and neutral variants. The bottom edge collapses on press (80 ms). There is a keyboard focus ring, disabled buttons sit already pressed, and while loading a spinner replaces the label without changing the width.
  • DcTextField: the label is always visible above the field. Errors show an icon and are exposed to accessibility services. The focus halo is always laid out, so focusing does not shift anything.
  • Launcher icon: an adaptive icon with a #23202E background and the compass at the same scale as app-icon-1024.svg, plus a monochrome layer from the mono symbol for themed icons.

Deviations from the design system

  • The design system README targets Flutter; its tokens and rules are translated to Compose here.
  • The fonts are the full variable TTFs from google/fonts at e7db6ca603fd4862010383ff17ffd6cc4ffac1c0, not the design system's woff2 files: Android cannot read woff2, and those files look subset. This adds about 436 KB to the APK.
  • The error icon is the single Phosphor warning-circle (Regular) icon as a VectorDrawable. No new library is added.

Licensing and config

  • The OFL texts (Fredoka, Nunito) and the MIT text (Phosphor) ship in the APK under assets/licenses/. There is no in-app license screen yet.
  • config/detekt/detekt.yml: LongParameterList now ignores composables, like LongMethod already does. MagicNumber is suppressed file-wide in DcColors.kt only, where the hex literals are the token values.
  • No dependency changes, so gradle/verification-metadata.xml is untouched.
  • Nothing is loaded from the network.

Tests

DcColorsContrastTest checks 13 contrast pairs from the design system's accessibility table in both themes. The UI itself has not been checked on a device or emulator yet.

Taken from google/fonts at e7db6ca603fd4862010383ff17ffd6cc4ffac1c0, so
nothing is fetched at runtime. The license texts ship in the APK.
Light and dark color tokens mapped onto Material 3, the type scale in
Fredoka and Nunito, spacing, radius and size tokens. The window
background matches the bg token in both themes.
DcButton has the chunky bottom edge that collapses on press, a keyboard
focus ring, disabled and loading states. DcTextField keeps its label
visible, shows errors with an icon and exposes them to accessibility
services. Detekt's LongParameterList now ignores composables, like
LongMethod already does.
@mikahatdichlieb
mikahatdichlieb merged commit d20817f into main Oct 26, 2026
6 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Compose theme from the Daycompass design system

1 participant