Mugen (無限)

A modern, multiplatform, token-driven Compose design system built on complete separation of Visual Identity (Tokens), Drawing Engines (Renderers), and Component Layout Defaults.

Supported platforms: Android, Desktop (JVM), Web (JS & WasmJs), and iOS (ARM64, Simulator, X64).

Mugen is built around three core architectural tenets:

1. MugenLook (Who the UI is): A pure visual identity carrying the 6 fundamental token families:

   • colors (MugenColors)
   • shapes (MugenShapes)
   • motion (MugenMotion)
   • typography (MugenTypography)
   • spacing (MugenSpacing)
   • elevation (MugenElevation)

2. MugenRendererSet (How the UI is drawn): The pluggable drawing layer. Decoupled from tokens:

   • PlainRenderers: Built-in zero-dependency clean drawing engine.
   • HazeRendererSet: Glassmorphic, glowing, corner-morphing drawing engine.
   • MaterialRendererSet: Material-3 surfaces and ripple drawing engine.

3. MugenDefaultsRegistry (Zero magic numbers in core): Core provides pure @Immutable component data class contracts. Individual Looks own and register their bespoke component dimensions, paddings, and metrics via mugenDefaults { register(...) }. Resolutions are dynamically resolved on demand and cached in MugenDefaultsContainer to eliminate memory allocations during recompositions.

Mugen/
├── mugen-core/                # Core Multiplatform Library (Tokens, Contracts, Components, PlainLook)
├── mugen-look-haze/           # Glassmorphic Haze Look & RendererSet (HazeTheme)
├── mugen-look-material/       # Material-3 Themed Look & RendererSet (MugenMaterialTheme)
├── samples/
│   └── mugen-playground/     # Multiplatform Showcase (Android, Desktop, Web JS/Wasm, iOS)
├── iosApp/                    # Xcode iOS Application
└── build-logic/               # Convention Plugins (mugen.cmp.library, mugen.cmp.application)

Mugen is published to Maven Central. Ensure mavenCentral() is declared in your repository list (e.g. in settings.gradle.kts):

dependencyResolutionManagement {
    repositories {
        mavenCentral()
    }
}

[versions]
mugen = "0.0.0-indev01"

[libraries]
mugen-core = { module = "pro.jayeshseth.mugen:mugen-core", version.ref = "mugen" }
# Optional Looks:
mugen-look-haze = { module = "pro.jayeshseth.mugen:mugen-look-haze", version.ref = "mugen" }
mugen-look-material = { module = "pro.jayeshseth.mugen:mugen-look-material", version.ref = "mugen" }

Add mugen-core to your module's commonMain dependencies:

kotlin {
    sourceSets {
        commonMain.dependencies {
            implementation(libs.mugen.core)

            // Optional Looks:
            // implementation(libs.mugen.look.haze)
            // implementation(libs.mugen.look.material)
        }
    }
}

Or using direct coordinate string:

implementation("pro.jayeshseth.mugen:mugen-core:0.0.0-indev01")

Wrap your application in MugenTheme:

// Using the built-in zero-dependency Plain Look:
MugenTheme(
    look = PlainLook(),
    renderers = PlainRenderers
) {
    MugenButton(onClick = { /* ... */ }) {
        MugenText("Hello Mugen")
    }
}

Or use pre-bundled convenience themes:

// Signature Glassmorphic Theme:
HazeTheme {
    MugenCard {
        MugenText("Glassmorphic Card")
    }
}

// Material 3 Theme:
MugenMaterialTheme {
    MugenButton(onClick = { /* ... */ }) {
        MugenText("Material Action")
    }
}

Override component defaults at the theme level without writing a new Look:

MugenTheme(
    look = PlainLook(),
    overrides = MugenOverrides.build {
        button { it.copy(minHeight = 56.dp) }
        card { it.copy(shape = RoundedCornerShape(24.dp)) }
    }
) {
    // ...
}

./gradlew :samples:mugen-playground:run

./gradlew :samples:mugen-playground:wasmJsBrowserDevelopmentRun
# or
./gradlew :samples:mugen-playground:jsBrowserDevelopmentRun

./gradlew :samples:mugen-playground:assembleDebug

./gradlew :samples:mugen-playground:compileKotlinIosSimulatorArm64