Concrete

https://github.com/yasanglass/concrete
Admin
Concrete is a work-in-progress design system for Compose Multiplatform that provides reusable UI...
Tokens:3,937
Snippets:21
Trust Score:8.1
License:Apache-2.0
Update:10 months ago
Show doc for...
Tokens:
Raw
### Gradle Setup for Compose Multiplatform Projects (Kotlin)

Source: https://context7.com/yasanglass/concrete/llms.txt

Configures the Concrete library in a Compose Multiplatform project. This setup ensures that Concrete is available across all supported platforms including Android, JVM, iOS, and Web (JavaScript/WasmJS).

```kotlin
// build.gradle.kts
plugins {
    alias(libs.plugins.jetbrains.kotlin.multiplatform)
    alias(libs.plugins.android.library) // or android.application
    alias(libs.plugins.jetbrains.compose)
    alias(libs.plugins.jetbrains.kotlin.compose)
}

kotlin {
    androidTarget()
    jvm()
    iosX64()
    iosArm64()
    iosSimulatorArm64()

    js {
        browser()
    }

    wasmJs {
        browser()
    }

    sourceSets {
        val commonMain by getting {
            dependencies {
                implementation("glass.yasan.concrete:foundation:1.0.0") // Check Maven Central for latest version
                implementation(compose.foundation)
                implementation(compose.material3)
                implementation(compose.runtime)
                implementation(compose.ui)
            }
        }
    }
}
```

--------------------------------

### Access theme colors and layers using ConcreteTheme

Source: https://context7.com/yasanglass/concrete/llms.txt

This example demonstrates how to access theme colors, such as accent and content colors, and layer components like background, midground, and foreground using `ConcreteTheme` properties. It also shows how to apply these to UI elements for consistent styling. Import necessary components from `glass.yasan.concrete.foundation.theme.ConcreteTheme` and `androidx.compose.ui.unit.dp`.

```kotlin
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.*
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import glass.yasan.concrete.foundation.theme.ConcreteTheme

@Composable
fun ColorShowcase() {
    ConcreteTheme {
        Column(
            modifier = Modifier
                .fillMaxSize()
                .background(ConcreteTheme.layer.background)
        ) {
            // Accent colors for primary actions
            Box(
                modifier = Modifier
                    .fillMaxWidth()
                    .height(60.dp)
                    .background(ConcreteTheme.accent.primary)
                    .padding(16.dp)
            ) {
                Text(
                    text = "Primary Accent",
                    color = ConcreteTheme.content.inverseMajor
                )
            }

            // Layer system for surfaces
            Box(
                modifier = Modifier
                    .fillMaxWidth()
                    .background(ConcreteTheme.layer.foreground)
                    .padding(16.dp)
            ) {
                Text(
                    text = "Foreground Layer",
                    color = ConcreteTheme.content.major
                )
            }

            Box(
                modifier = Modifier
                    .fillMaxWidth()
                    .background(ConcreteTheme.layer.midground)
                    .padding(16.dp)
            ) {
                Text(
                    text = "Midground Layer",
                    color = ConcreteTheme.content.minor
                )
            }
        }
    }
}
```

--------------------------------

### Use Dimensions System in Jetpack Compose (Kotlin)

Source: https://context7.com/yasanglass/concrete/llms.txt

Demonstrates how to access and apply consistent dimensions for borders, spacing, and sizing within a Jetpack Compose application using the Concrete theme. It shows examples of using default dimensions and customizing them.

```kotlin
import androidx.compose.foundation.border
import androidx.compose.foundation.layout.*
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import glass.yasan.concrete.foundation.dimension.dimensions
import glass.yasan.concrete.foundation.theme.ConcreteTheme

@Composable
fun DimensionsExample() {
    // Use default dimensions
    ConcreteTheme {
        Box(
            modifier = Modifier
                .size(100.dp)
                .border(
                    width = ConcreteTheme.dimensions.borderStrokeWidth,
                    color = ConcreteTheme.accent.primary
                )
        ) {
            Text("Bordered Box")
        }
    }

    // Or customize dimensions
    ConcreteTheme(
        dimensions = dimensions(borderStrokeWidth = 4.dp)
    ) {
        Box(
            modifier = Modifier
                .size(100.dp)
                .border(
                    width = ConcreteTheme.dimensions.borderStrokeWidth,
                    color = ConcreteTheme.accent.primary
                )
        ) {
            Text("Thick Border")
        }
    }
}
```

--------------------------------

### Implement dark mode support with ConcreteTheme

Source: https://context7.com/yasanglass/concrete/llms.txt

This example shows how to integrate automatic dark/light theme switching using `isSystemInDarkTheme()` and a mutable state for manual control. The `ConcreteTheme` composable takes an `isDark` parameter to apply the correct theme. Ensure imports for `isSystemInDarkTheme`, `remember`, `mutableStateOf`, and `ConcreteTheme` are present.

```kotlin
import androidx.compose.foundation.isSystemInDarkTheme
import androidx.compose.material3.Button
import androidx.compose.material3.Text
import androidx.compose.runtime.*
import glass.yasan.concrete.foundation.theme.ConcreteTheme

@Composable
fun ThemeToggleApp() {
    var useDarkMode by remember { mutableStateOf<Boolean?>(null) }
    val systemDark = isSystemInDarkTheme()
    val effectiveDark = useDarkMode ?: systemDark

    ConcreteTheme(isDark = effectiveDark) {
        Column {
            Text(
                text = "Current theme: ${if (effectiveDark) "Dark" else "Light"}",
                color = ConcreteTheme.content.major
            )

            Button(onClick = { useDarkMode = true }) {
                Text("Force Dark")
            }

            Button(onClick = { useDarkMode = false }) {
                Text("Force Light")
            }

            Button(onClick = { useDarkMode = null }) {
                Text("Use System")
            }
        }
    }
}
```

--------------------------------

### Android Activity Integration with Concrete Theme (Kotlin)

Source: https://context7.com/yasanglass/concrete/llms.txt

Integrates the YasanGlass Concrete theme into an Android Activity, enabling edge-to-edge display. This setup ensures that your application uses the Concrete theme's styling and colors consistently from the start.

```kotlin
import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.activity.enableEdgeToEdge
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material3.Surface
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import glass.yasan.concrete.foundation.theme.ConcreteTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        enableEdgeToEdge()
        super.onCreate(savedInstanceState)

        setContent {
            ConcreteTheme {
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = ConcreteTheme.layer.background
                ) {
                    MyApp() 
                }
            }
        }
    }
}

@Composable
fun MyApp() {
    // Your app content here
}
```

--------------------------------

### Complete Sample App UI with Theming (Kotlin)

Source: https://context7.com/yasanglass/concrete/llms.txt

Demonstrates a full Jetpack Compose application using the Concrete design system. It includes theming capabilities, custom font application for titles, and displays various UI components like Text, Button, and color swatches. The app allows toggling between light and dark modes.

```kotlin
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.*
import androidx.compose.material3.Button
import androidx.compose.material3.Text
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import glass.yasan.concrete.foundation.font.rubikMonoFontFamily
import glass.yasan.concrete.foundation.theme.ConcreteTheme

@Composable
fun CompleteSampleApp() {
    var isDark by remember { mutableStateOf(false) }

    ConcreteTheme(
        primary = Color(0xFF006970),
        secondary = Color(0xFF00A896),
        tertiary = Color(0xFF02C39A),
        isDark = isDark
    ) {
        Box(
            contentAlignment = Alignment.Center,
            modifier = Modifier
                .fillMaxSize()
                .background(ConcreteTheme.layer.background)
        ) {
            Column(
                horizontalAlignment = Alignment.CenterHorizontally,
                modifier = Modifier
                    .fillMaxWidth()
                    .background(ConcreteTheme.layer.foreground)
                    .padding(24.dp),
                verticalArrangement = Arrangement.spacedBy(16.dp)
            ) {
                // Title with custom font
                Text(
                    text = "CONCRETE DESIGN",
                    fontFamily = rubikMonoFontFamily(),
                    color = ConcreteTheme.accent.primary,
                    style = androidx.compose.material3.MaterialTheme.typography.headlineLarge
                )

                // Subtitle
                Text(
                    text = "Compose Multiplatform Design System",
                    color = ConcreteTheme.content.major,
                    style = androidx.compose.material3.MaterialTheme.typography.bodyLarge
                )

                // Description
                Text(
                    text = "A work-in-progress design system with theming support",
                    color = ConcreteTheme.content.minor,
                    style = androidx.compose.material3.MaterialTheme.typography.bodyMedium
                )

                Spacer(modifier = Modifier.height(16.dp))

                // Color showcases
                Row(
                    horizontalArrangement = Arrangement.spacedBy(8.dp)
                ) {
                    ColorBox(ConcreteTheme.accent.primary, "Primary")
                    ColorBox(ConcreteTheme.accent.secondary, "Secondary")
                    ColorBox(ConcreteTheme.accent.tertiary, "Tertiary")
                }

                Spacer(modifier = Modifier.height(16.dp))

                // Theme toggle button
                Button(
                    onClick = { isDark = !isDark },
                    modifier = Modifier.fillMaxWidth()
                ) {
                    Text("Toggle ${if (isDark) "Light" else "Dark"} Mode")
                }
            }
        }
    }
}

@Composable
fun ColorBox(color: Color, label: String) {
    Box(
        contentAlignment = Alignment.Center,
        modifier = Modifier
            .size(80.dp)
            .background(color)
            .padding(8.dp)
    ) {
        Text(
            text = label,
            color = ConcreteTheme.content.inverseMajor,
            style = androidx.compose.material3.MaterialTheme.typography.labelSmall
        )
    }
}

```

--------------------------------

### ColorTokens: Predefined Color Palette

Source: https://context7.com/yasanglass/concrete/llms.txt

Demonstrates the usage of predefined color tokens for theming, showcasing accent colors and variants for light and dark themes. Relies on the `glass.yasan.concrete.foundation.color.ColorTokens` object.

```kotlin
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.*
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import glass.yasan.concrete.foundation.color.ColorTokens

@Composable
fun ColorPalette() {
    Column {
        // Access predefined accent color
        Box(
            modifier = Modifier
                .size(100.dp)
                .background(ColorTokens.accentPrimary)
        ) {
            Text("Accent Primary")
        }

        // Light theme colors
        Box(
            modifier = Modifier
                .fillMaxWidth()
                .background(ColorTokens.layerLight.foreground)
                .padding(16.dp)
        ) {
            Text(
                text = "Light Foreground",
                color = ColorTokens.contentLight.major
            )
        }

        // Dark theme colors
        Box(
            modifier = Modifier
                .fillMaxWidth()
                .background(ColorTokens.layerDark.foreground)
                .padding(16.dp)
        ) {
            Text(
                text = "Dark Foreground",
                color = ColorTokens.contentDark.major
            )
        }
    }
}
```

--------------------------------

### Custom Typography: Font Families and Styles

Source: https://context7.com/yasanglass/concrete/llms.txt

Shows how to implement custom typography using different font families (like Rubik) and Material 3 text styles within the `ConcreteTheme`. Imports from `glass.yasan.concrete.foundation.theme`, `typography`, and `font` modules are necessary.

```kotlin
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.text.font.FontFamily
import glass.yasan.concrete.foundation.theme.ConcreteTheme
import glass.yasan.concrete.foundation.typography.typography
import glass.yasan.concrete.foundation.typography.rubikTypography
import glass.yasan.concrete.foundation.font.rubikFontFamily
import glass.yasan.concrete.foundation.font.rubikMonoFontFamily

@Composable
fun CustomTypographyApp() {
    // Use built-in Rubik typography
    ConcreteTheme(typography = rubikTypography()) {
        Text("Rubik Font", style = androidx.compose.material3.MaterialTheme.typography.headlineLarge)
    }

    // Or create custom typography with your own font
    ConcreteTheme(
        typography = typography(fontFamily = rubikMonoFontFamily())
    ) {
        Column {
            Text(
                text = "Headline",
                style = androidx.compose.material3.MaterialTheme.typography.headlineLarge
            )
            Text(
                text = "Body text",
                style = androidx.compose.material3.MaterialTheme.typography.bodyMedium
            )
            Text(
                text = "Label",
                style = androidx.compose.material3.MaterialTheme.typography.labelSmall
            )
        }
    }
}
```

--------------------------------

### contentColor: Auto-Contrasted Text Utility

Source: https://context7.com/yasanglass/concrete/llms.txt

Illustrates the `contentColor` function, which automatically selects black or white text color for optimal readability based on the background color's luminance. Requires importing `glass.yasan.concrete.foundation.color.contentColor`.

```kotlin
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.*
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import glass.yasan.concrete.foundation.color.contentColor

@Composable
fun ContrastText() {
    Column {
        // Light background gets dark text
        Box(
            modifier = Modifier
                .fillMaxWidth()
                .background(Color(0xFFFFEB3B))
                .padding(16.dp)
        ) {
            Text(
                text = "Auto-contrasted text",
                color = contentColor(Color(0xFFFFEB3B))
            )
        }

        // Dark background gets light text
        Box(
            modifier = Modifier
                .fillMaxWidth()
                .background(Color(0xFF1A237E))
                .padding(16.dp)
        ) {
            Text(
                text = "Auto-contrasted text",
                color = contentColor(Color(0xFF1A237E))
            )
        }
    }
}
```

--------------------------------

### Set up ConcreteTheme for your application

Source: https://context7.com/yasanglass/concrete/llms.txt

The `ConcreteTheme` composable is the main wrapper that initializes the design system's composition locals for colors, typography, and dimensions. It integrates with Material 3 and accepts customizable theme parameters like primary, secondary, tertiary colors, and dark mode preference. Ensure `glass.yasan.concrete.foundation.theme.ConcreteTheme` is imported.

```kotlin
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.graphics.Color
import glass.yasan.concrete.foundation.theme.ConcreteTheme

@Composable
fun App() {
    ConcreteTheme(
        primary = Color(0xFF006970),
        secondary = Color(0xFF00A896),
        tertiary = Color(0xFF02C39A),
        isDark = false
    ) {
        // Your app content with full theme access
        Text(
            text = "Hello Concrete",
            color = ConcreteTheme.content.major
        )
    }
}
```

--------------------------------

### Add Foundation Dependency (Gradle)

Source: https://github.com/yasanglass/concrete/blob/main/README.md

This snippet shows how to add the foundation module of the YasanGlass Concrete design system to your project's Gradle build file. This module provides core components and utilities essential for the design system. Ensure you replace '<version>' with the actual latest version available.

```kotlin
implementation("glass.yasan.concrete:foundation:<version>")
```
Tokens:
Raw