Stylish UI

Clear, Simple, Modern.

Stylish UI は、この3つを体現した Compose Multiplatform デザインシステムです。 Android・JVM Desktop・Web（Wasm）をサポートしており、iOS（iosArm64 / iosSimulatorArm64）は開発中です。

詳細は DESIGN.md のデザインチェックリストを参照してください。

dependencies {
    implementation("io.github.segnities007:stylish-ui:<version>")
}

StylishTheme(darkTheme = isSystemInDarkTheme()) {
    // コンポーネントを使う
    StylishConnectedCardGrid(
        items = listOf(
            StylishConnectedCardItem("操作可能", onClick = { }),
            StylishConnectedCardItem("表示専用"),
        ),
        columns = 2,
    )
}

デフォルトパラメータで Stylish UI の標準ルックが適用されます。 独自の UI を実現したい場合は、テーマまたはコンポーネントパラメータで上書きできます。

// グローバル上書き
StylishTheme(
    darkTheme = false,
    dimensions = StylishDimensions(
        connectedCornerRadius = 20.dp,
        connectedSpacing = 6.dp,
        outlineWidth = 1.dp,
    ),
) { ... }

// 個別上書き
StylishConnectedButtonRow(items = items, spacing = 8.dp)

コンポーネントは Atomic Design に従い、依存は一方向です。

patterns → organisms → molecules → atoms → foundation / theme / tokens

Atomic Design（合成の複雑さ）とは独立に、すべてのコードは「見た目がどれだけ決まっているか」という第2の軸に乗ります。依存は一方向（Finish → Structure → Foundation）です。

Finish  →  Structure  →  Foundation
(仕上げ)    (骨格)        (素材)

Stylish 接頭辞はスタイル済みFinish（StylishConnectedCardRow）、裸名はheadless Structure（ConnectedCardRow）を示します。Structureに自前のレンダラーを渡せば、同じ連結ジオメトリで独自スキンを組めます。

• atoms — StylishButton（Filled/Tonal/Outlined/Text/Elevated の variant・ローディング対応）, StylishIconButton, StylishRoundedIconButton, StylishFab（Regular/Small/Large）, StylishChip（Assist/Filter/Input/Suggestion）, StylishCard（Filled/Elevated/Outlined）, StylishConnectedCard, StylishSwitch, StylishCheckbox, StylishTriStateCheckbox, StylishRadioButton, StylishSlider, StylishRangeSlider, StylishAvatar, StylishBadge, StylishBadgedBox, StylishRating, StylishNumberInput, StylishPinInput, StylishKbd, StylishSpeedDial, StylishSectionTitle, StylishHorizontalDivider, StylishVerticalDivider, StylishCircularProgressIndicator, StylishLinearProgressIndicator, StylishSpacer, StylishDialogSurface, StylishFormTextField, StylishFilledTextField, StylishSecureTextField, StylishDropdownMenu / StylishDropdownMenuItem, StylishExposedDropdownMenu, StylishDragHandle, IconButton variants（Filled/FilledTonal/Outlined + Toggle）
• molecules — Connected Button (Row/Column/Grid), Connected Card (Row/Column/Grid + LazyColumn/LazyGrid), Connected Chip (Row/Column/Grid), Connected ListItem (Row/Column/Grid + LazyColumn/LazyGrid), StylishListItem, StylishSection, StylishAccordion, StylishStepper, StylishBreadcrumb, StylishPagination, StylishEditable, StylishStatistic, StylishTimeline, StylishTable, StylishDatePickerField, StylishTimePicker, StylishDateRangePicker, StylishEmptyState, StylishSnackbar, StylishSnackbarHost, StylishSwipeToDismissBox, StylishPullToRefresh, StylishCarousel, StylishSkeletonLine, StylishSkeletonAvatar, StylishSkeletonCard
• organisms — StylishConnectedSegmentedControl, StylishSegmentedButton 系列, StylishDialogActions, StylishDeleteConfirmDialog, StylishAlertDialog, StylishPopover, StylishNavigationBar, StylishNavigationRail, StylishShortNavigationBar, StylishNavigationDrawer（Modal/Dismissible/Permanent）, StylishTabBar, StylishSearchBar, StylishBottomSheet
• patterns — StylishTopAppBar（+ CenterAligned/Large/Medium）, StylishBottomAppBar, StylishBottomSheetScaffold, StylishHeader, StylishScaffold, StylishPageContent, StylishFooter
• structure（headless） — ConnectedCard / ConnectedButton / ConnectedChip / ConnectedListItem の Row/Column/Grid + LazyColumn/LazyGrid + 各 Connected*ItemContent スロット契約
• charts — SimplePieChart, SimpleBarChart, SimpleLineChart（すべて common で全プラットフォーム対応）
• theme — StylishTheme（dynamicColor / seedColor / shapes 対応）, StylishLightColorScheme, StylishDarkColorScheme, StylishTypography, StylishColorUtils
• tokens — StylishDimensions（Connectedジオメトリ + Rhythm間隔スケール + コンポーネントサイズ + elevation ラダー。テーマ経由でカスタマイズ可能）, StylishAnimationTokens（モーション）, StylishShapes

./gradlew jvmTest       # テスト
./gradlew assemble      # ビルド
./gradlew apiCheck      # ABI 互換性チェック
./gradlew apiDump       # ABI ダンプ更新（意図的な API 変更時）

Stylish UI の品質管理に関するドキュメントです。

ゴールデンテスト（src/jvmTest/.../visual/）は、明暗テーマの描画を ピクセル単位で検証します。初回実行でベースライン画像を記録し、以降は 比較して描画の回帰を検知します。ベースラインを更新するには対象の PNG を 削除して再実行してください。

main ブランチへの push で GitHub Pages に自動デプロイされます。

ローカルでの確認:

./gradlew :website-wasm:wasmJsBrowserRun   # ギャラリー
./gradlew dokkaGeneratePublicationHtml      # API ドキュメント

Release Please で自動化されています。 詳細は CONTRIBUTING.md を参照してください。

Apache License 2.0