Jetpack Compose

Compose 向けのライブラリは、コンポーザブル、TanreiTheme、生成されたトークンのオブジェクトを提供します。Material のコンポーネントライブラリではなく Compose Foundation に依存しているので、アプリに 2 つ目のデザインシステムを持ち込むことはありません。

まだ公開していません

io.github.chnotchy:tanrei はまだ Maven Central にありません。プラットフォームは現在の仕様に追従してから公開し、それまで Jetpack Compose の CI は止めてあります。下の「ソースから」は chnotchy/tanrei からパッケージを加える方法、「公開後」は公開されてからの導入方法です。

インストール

ソースから

現在はビルドできません

Compose のライブラリは、現在の仕様とトークンに追従していません。ソースは以前の版の生成されたトークンコードに合わせて書かれていて、現在のコードではコンパイルできません。追従するまで CI は止めてあり、ステータスページではそのコンポーネントを追従待ちとしています。以下はアプリに追加する手順で、ライブラリが追従すれば動きます。

リポジトリをアプリの隣にクローンし、その Gradle ビルドをインクルードします。ライブラリはそのビルドの中でプロジェクト :tanrei になっています。

// settings.gradle.kts
includeBuild("../tanrei/packages/compose") {
  dependencySubstitution {
    substitute(module("io.github.chnotchy:tanrei")).using(project(":tanrei"))
  }
}

// build.gradle.kts
dependencies {
  implementation("io.github.chnotchy:tanrei")
}

公開後

// build.gradle.kts
dependencies {
  implementation("io.github.chnotchy:tanrei:<version>")
}

使い方

ルートの近くで一度だけ、コンテンツを TanreiTheme で包みます。

import io.github.chnotchy.tanrei.components.TanreiButton
import io.github.chnotchy.tanrei.theme.TanreiTheme
import io.github.chnotchy.tanrei.tokens.TanreiButtonVariant

@Composable
fun DeployScreen(isDeploying: Boolean, onDeploy: () -> Unit) {
  TanreiTheme {
    TanreiButton(
      text = "デプロイ",
      onClick = onDeploy,
      variant = TanreiButtonVariant.Filled,
      enabled = !isDeploying,
    )
  }
}

Compose の慣習は肯定形のフラグ enabled なので、Tanrei もそれを使います。仕様の disabled プロパティは、その逆に対応します。テキストのラベル以上のものが必要なときは、content ラムダを受け取るスロット版のオーバーロードを使います。

テーマとコントラスト

TanreiTheme は、既定ではシステムのダークテーマと、システムのコントラスト設定に従います。どちらも固定できます。

TanreiTheme(theme = TanreiThemeMode.Dark, contrast = TanreiContrast.High) {
  App()
}

フォント

既定では、タイプスケールはプラットフォームの既定のフォントファミリーに解決されます。アプリのフォントリソースにある Inter（および Noto Sans JP、Roboto Mono）を使うには、自分の TanreiFontFamilies を TanreiTheme に渡します。テキストスタイルは階層で名付けられています（TanreiTheme.tokens.typescale.heading2、.body、.label。.toTextStyle() で Compose の TextStyle に変換できます）。TanreiTheme.tokens.typescale.heading1.emphasized() は、同じスタイルを、その太さに見出しのファミリーの強調のステップを足した太さにしたものです（コンポジションの外では emphasized(system.typescale.emphasis)）。

ソースコードと Issue（GitHub）