Skip to content

Commit e1cd154

Browse files
tkoechertkoecher
authored
Merge branch 'develop' into feature/pre_commit_hooks
2 parents 210b0cb + d9b87a6 commit e1cd154

40 files changed

+2783
-9
lines changed

‎.gitignore

+1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
*.iml
22
.gradle
33
.idea
4+
.vscode
45
.kotlin
56

67
.env

‎app/.gitignore renamed to ‎components/.gitignore

File renamed without changes.

‎components/README.md

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
# :components module
2+
## Dependency graph
3+
4+
![Dependency graph](../docs/images/dependencies/dep_graph_components.svg)

‎components/build.gradle.kts

+50
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
plugins {
2+
alias(libs.plugins.com.android.library)
3+
alias(libs.plugins.jetbrains.kotlin.android)
4+
alias(libs.plugins.compose.compiler)
5+
}
6+
7+
android {
8+
namespace = "com.dbsystel.designsystem.components"
9+
compileSdk = 34
10+
11+
defaultConfig {
12+
minSdk = 30
13+
14+
testInstrumentationRunner = "androidx.test.runner.AndroidJUnitRunner"
15+
consumerProguardFiles("consumer-rules.pro")
16+
}
17+
18+
buildTypes {
19+
release {
20+
isMinifyEnabled = false
21+
proguardFiles(
22+
getDefaultProguardFile("proguard-android-optimize.txt"),
23+
"proguard-rules.pro"
24+
)
25+
}
26+
}
27+
compileOptions {
28+
sourceCompatibility = JavaVersion.VERSION_1_8
29+
targetCompatibility = JavaVersion.VERSION_1_8
30+
}
31+
buildFeatures {
32+
compose = true
33+
}
34+
kotlinOptions {
35+
jvmTarget = "1.8"
36+
}
37+
}
38+
39+
dependencies {
40+
implementation(libs.androidx.core.ktx)
41+
implementation(libs.androidx.appcompat)
42+
implementation(libs.material)
43+
implementation(platform(libs.androidx.compose.bom))
44+
implementation(libs.androidx.ui)
45+
implementation(libs.androidx.material3)
46+
implementation(project(":foundation"))
47+
testImplementation(libs.junit)
48+
androidTestImplementation(libs.androidx.junit)
49+
androidTestImplementation(libs.androidx.espresso.core)
50+
}

‎app/src/main/java/com/dbsystel/dbuxds/.gitkeep renamed to ‎components/consumer-rules.pro

File renamed without changes.

‎app/proguard-rules.pro renamed to ‎components/proguard-rules.pro

File renamed without changes.

‎app/src/androidTest/java/com/dbsystel/dbuxds/ExampleInstrumentedTest.kt renamed to ‎components/src/androidTest/java/com/dbsystel/designsystem/components/ExampleInstrumentedTest.kt

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
package com.dbsystel.dbuxds
1+
package com.dbsystel.designsystem.components
22

33
import androidx.test.platform.app.InstrumentationRegistry
44
import androidx.test.ext.junit.runners.AndroidJUnit4
@@ -19,6 +19,6 @@ class ExampleInstrumentedTest {
1919
fun useAppContext() {
2020
// Context of the app under test.
2121
val appContext = InstrumentationRegistry.getInstrumentation().targetContext
22-
assertEquals("com.dbsystel.dbuxds", appContext.packageName)
22+
assertEquals("com.dbsystel.designsystem.components.test", appContext.packageName)
2323
}
2424
}

‎components/src/main/AndroidManifest.xml

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
<?xml version="1.0" encoding="utf-8"?>
2+
<manifest xmlns:android="http://schemas.android.com/apk/res/android">
3+
4+
</manifest>

‎app/src/test/java/com/dbsystel/dbuxds/ExampleUnitTest.kt renamed to ‎components/src/test/java/com/dbsystel/designsystem/components/ExampleUnitTest.kt

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
package com.dbsystel.dbuxds
1+
package com.dbsystel.designsystem.components
22

33
import org.junit.Test
44

‎docs/adr/adr-01-colors.md

+106
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
# ADR-01 - Integration of Color Tokens from Theme Builder
2+
3+
## Decision and justification
4+
We will integrate color tokens exported by the `theme-builder` (https://github.com/db-ui/theme-builder) into our Compose library. These tokens will be defined as `Color` instances prefixed with the exported theme name and used in different color schemes through adaptive themes.
5+
6+
## Problem description and context
7+
We want to ensure that color definitions from the theme-builder are efficiently integrated into our Compose library. The color tokens should be adaptable to different color modes (e.g., light and dark mode). The structure for colors and themes should be easy to understand and maintain.
8+
9+
## General conditions and decision criteria
10+
11+
### General conditions
12+
- The color tokens must be easily imported from the theme-builder export.
13+
- The naming and mapping of tokens to color schemes should be consistent and clear.
14+
- The structure must be flexible enough to accommodate future changes or expansions.
15+
16+
### Decision criteria
17+
- **Clarity**: The integration of color tokens should be clear and understandable.
18+
- **Consistency**: The naming and structure of color tokens and themes should be uniform.
19+
- **Flexibility**: The structure should be easy to extend.
20+
- **Performance**: The implementation should be performant and should not consume unnecessary resources.
21+
22+
## Alternatives
23+
24+
### A - Direct definition of color tokens in code
25+
26+
#### Evaluation
27+
- **Pros:** Simple implementation without additional tools or dependencies.
28+
- **Cons:** Less flexible for changes and not automatically synchronized with the `theme-builder`.
29+
30+
### B - Using the export from the `theme-builder`
31+
32+
#### Evaluation
33+
- **Pros:** Direct adoption of color tokens from the `theme-builder`, simple maintenance and synchronization.
34+
- **Cons:** Dependency on the `theme-builder` and its export structure.
35+
36+
## Decision
37+
We choose **Alternative B - Using the export from the `theme-builder`** to directly adopt the color tokens. This ensures simple maintenance and synchronization of color definitions.
38+
39+
## Consequences
40+
- **Positive:** Using the `theme-builder` export allows for consistent and easy updates of color tokens. The structure enables simple customization and expansion of themes.
41+
- **Negative:** There is a dependency on the `theme-builder` and its export functions.
42+
43+
By implementing this approach, we ensure that our color tokens are clear, consistent and scalable, providing a solid foundation for the color schemes in our design system and facilitating seamless updates.
44+
45+
## Links
46+
- [Theme-Builder GitHub Repository](https://github.com/db-ui/theme-builder)
47+
- [Jetpack Compose Theming Documentation](https://developer.android.com/jetpack/compose/themes)
48+
49+
## Sample Code
50+
51+
1. **Import Color Tokens:**
52+
```kotlin
53+
val DeutscheBahnColorMap = mapOf(
54+
"neutral0" to Color(0xff070709),
55+
"neutral1" to Color(0xff0d0e11),
56+
"neutral2" to Color(0xff121316),
57+
"neutral3" to Color(0xff1a1c1f),
58+
"neutral4" to Color(0xff2e3036),
59+
"neutral5" to Color(0xff43474e),
60+
// ... Add more color tokens as needed
61+
)
62+
```
63+
64+
2. **Define ColorScheme Using Color Tokens:**
65+
```kotlin
66+
class DSColorVariant private constructor(
67+
val bgBasicLevel1Default: Color,
68+
val bgBasicLevel1Hovered: Color,
69+
val bgBasicLevel1Pressed: Color,
70+
val bgBasicLevel2Default: Color,
71+
val bgBasicLevel2Hovered: Color,
72+
val bgBasicLevel2Pressed: Color,
73+
val bgBasicLevel3Default: Color,
74+
// ...
75+
) {
76+
companion object {
77+
fun dark(colorName: String) = DSColorVariant(
78+
DBColorMap.getValue(colorName + "3"),
79+
DBColorMap.getValue(colorName + "4"),
80+
DBColorMap.getValue(colorName + "5"),
81+
DBColorMap.getValue(colorName + "2"),
82+
DBColorMap.getValue(colorName + "3"),
83+
DBColorMap.getValue(colorName + "4"),
84+
DBColorMap.getValue(colorName + "1"),
85+
// ...
86+
)
87+
fun light(colorName: String) = DSColorVariant(
88+
DBColorMap.getValue(colorName + "14"),
89+
DBColorMap.getValue(colorName + "13"),
90+
DBColorMap.getValue(colorName + "12"),
91+
DBColorMap.getValue(colorName + "13"),
92+
DBColorMap.getValue(colorName + "12"),
93+
DBColorMap.getValue(colorName + "11"),
94+
DBColorMap.getValue(colorName + "12"),
95+
// ...
96+
)
97+
}
98+
}
99+
```
100+
101+
3. **Instantiate ColorScheme:**
102+
```kotlin
103+
val NeutralColorsDark = DSColorVariant.dark("neutral")
104+
val BrandColorsDark = DSColorVariant.dark("brand")
105+
val InformationalColorsDark = DSColorVariant.dark("informational")
106+
```

‎docs/adr/adr-02-accessor.md

+160
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,160 @@
1+
# ADR-02 - Accessor Strategy for Component Styling
2+
3+
## Decision and justification
4+
We need to decide on an accessor strategy for styling components, such as adaptive color or density, throughout our Jetpack Compose library and the app-project.
5+
6+
## Problem description and context
7+
We require a flexible and consistent method to apply styling to our Compose components. The settings, adaptive color and density, must be adjustable and independently set. The structure for colors and themes should be easy to understand and maintain. Apply another density results in adaptive typography and dimensions, such as sizing, spacing and border.
8+
9+
## General conditions and decision criteria
10+
11+
### General conditions
12+
- The styling approach must allow easy adjustment of color and density parameters.
13+
- Each styling parameter should be set independently.
14+
- The styling approach must cosider all adaptive tokens: color, typography and dimensions.
15+
- Components should support adaptive identifier that use specific color schemes based on the current theme.
16+
- The solution should balance performance, scalability, flexibility, and maintainability.
17+
18+
### Decision criteria
19+
- **Performance:** Minimal performance overhead.
20+
- **Scalability:** Capable of future extensions.
21+
- **Maintainability:** Easy to maintain and understand.
22+
- **Consistency:** Reliable and consistent application of styles.
23+
- **Usability:** Simple for developers to use and integrate with existing Jetpack Compose components.
24+
25+
## Alternatives
26+
27+
### A - Hardcoded Styling in Components
28+
29+
#### Evaluation
30+
- **Performance:** High, no additional processing required.
31+
- **Scalability:** Poor, difficult to extend.
32+
- **Maintainability:** Low, hard to manage and update styles.
33+
- **Consistency:** Low, prone to discrepancies.
34+
- **Usability:** Low, not flexible for developers.
35+
36+
### B - Centralized Style Accessors
37+
38+
#### Evaluation
39+
- **Performance:** Moderate, slight overhead for accessing centralized styles.
40+
- **Scalability:** High, easy to extend with new styles.
41+
- **Maintainability:** High, centralized management of styles.
42+
- **Consistency:** High, uniform application of styles.
43+
- **Usability:** High, provides a flexible and consistent styling interface for developers.
44+
- **Inheritance:** Moderate, needs explicit handling of inheritance for adaptive flags.
45+
46+
### C - Dynamic Styling via Composition Local
47+
48+
#### Evaluation
49+
- **Performance:** Moderate, with minor overhead from Composition Local lookups.
50+
- **Scalability:** High, easily extendable by adding more Composition Local providers.
51+
- **Maintainability:** High, centralized management of styles with local overrides as needed.
52+
- **Consistency:** High, ensures uniform styling with the flexibility of local overrides.
53+
- **Usability:** High, provides a flexible and consistent interface for developers.
54+
- **Inheritance:** High, naturally supports hierarchical inheritance and adaptive flags.
55+
56+
## Decision
57+
We choose **Alternative C - Dynamic Styling via Composition Local**. This approach provides the best support for hierarchical inheritance and adaptive flags, ensuring consistent and flexible styling management. It leverages the Composition Local mechanism for efficient state management and propagation through the Compose tree.
58+
59+
## Consequences
60+
- **Positive:** Utilizes Composition Local to provide dynamic and inheritable styling. It simplifies the process of applying complex styling configurations and allows for easy updates and extensions. Ensures adaptive flags are consistently applied through the hierarchy.
61+
- **Negative:** There could be minor performance overhead due to Composition Local lookups, but this is offset by the flexibility and maintainability benefits.
62+
63+
## Links
64+
- [Theme-Builder GitHub Repository](https://github.com/db-ui/theme-builder)
65+
- [Jetpack Compose Theming Documentation](https://developer.android.com/jetpack/compose/themes)
66+
- [Composition Local Documentation](https://developer.android.com/jetpack/compose/compositionlocal)
67+
68+
## Sample Code
69+
70+
1. **Define Composition Local Providers:**
71+
```kotlin
72+
val LocalColors = staticCompositionLocalOf { getColorSchemeLight() }
73+
val LocalActiveColor = staticCompositionLocalOf { getColorSchemeLight().neutral }
74+
```
75+
76+
2. **Make it accessible via theme accessor:**
77+
```kotlin
78+
object DesignSystemTheme {
79+
val colors: DesignSystemColorScheme
80+
@Composable
81+
@ReadOnlyComposable
82+
get() = LocalColors.current
83+
84+
val activeColor: DSColorVariant
85+
@Composable
86+
@ReadOnlyComposable
87+
get() = LocalActiveColor.current
88+
89+
// Same for other stylings, such as typography and dimensions
90+
}
91+
92+
@Composable
93+
fun DesignSystemTheme(
94+
density: DSDensity = DSDensity.REGULAR,
95+
darkTheme: Boolean = isSystemInDarkTheme(),
96+
content: @Composable () -> Unit
97+
) {
98+
// Use density to choose correct style for typography and dimensions
99+
100+
// colors
101+
val colorScheme: DesignSystemColorScheme = when {
102+
darkTheme -> getColorSchemeDark()
103+
else -> getColorSchemeLight()
104+
}
105+
CompositionLocalProvider(
106+
LocalColors provides colorScheme,
107+
LocalActiveColor provides colorScheme.neutral,
108+
// Same for typography and dimensions
109+
) {
110+
content()
111+
}
112+
}
113+
```
114+
115+
3. **Apply Styles in Composable Functions:**
116+
```kotlin
117+
@Composable
118+
fun StyledText(text: String) {
119+
Box(
120+
modifier = Modifier.padding(DesignSystemTheme.dimensions.spacing.fixedMd),
121+
) {
122+
Text(
123+
text = text,
124+
color = DesignSystemTheme.activeColor.onBgBasicEmphasis100Default,
125+
)
126+
}
127+
}
128+
```
129+
130+
4. **Provide Composable to switch between styles:**
131+
```kotlin
132+
@Composable
133+
fun AdaptiveLayout(
134+
density: DSDensity = DSDensity.REGULAR,
135+
activeColor: DSColorVariant = DesignSystemTheme.colors.neutral,
136+
content: @Composable () -> Unit,
137+
) {
138+
// Same logic for typography and density as shown in 2.
139+
140+
CompositionLocalProvider(
141+
LocalActiveColor provides activeColor,
142+
// Same for typography and dimensions
143+
) {
144+
content()
145+
}
146+
}
147+
```
148+
149+
5. **Provide Adaptive Values in the Composition:**
150+
```kotlin
151+
@Composable
152+
fun CriticalExpressiveView() {
153+
AdaptiveLayout(
154+
density = DSDensity.EXPRESSIVE,
155+
activeColor = DesignSystemTheme.colors.critical,
156+
) {
157+
StyledText("Hello world!")
158+
}
159+
}
160+
```

0 commit comments

Comments
 (0)