Skip to content

Commit 29edd01

Browse files
SmartToolFactorySmartToolFactory
committed
add m3 library and samples
1 parent 85676db commit 29edd01

File tree

24 files changed

+7048
-18
lines changed

24 files changed

+7048
-18
lines changed

‎README.md‎

Lines changed: 135 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,4 +10,138 @@
1010
* Rotatable gradients by 45 degrees with aim to add rotation by any angle in the future Utility
1111

1212
* Functions to convert between `androidx.compose.ui.graphics.Color`, HSL, HSV, `RGB`, HCT, and
13-
colors with nearest **Name** based on distance is in 3D space using `Red`, `Green`, `Blue`.
13+
colors with nearest **Name** based on distance is in 3D space using `Red`, `Green`, `Blue`.
14+
15+
| M2 Color Swatches | M3 Tone Palettes | | ----------|-----------| -----------| -----------|
16+
| <img src="./screenshots/material_design2.gif" width="250">
17+
| <img src="./screenshots/colorpicker/material_design_3.gif" width="250"> |
18+
19+
## Material Design 2 Colors && Swatches
20+
21+
### Material Colors
22+
23+
<img src="https://i.stack.imgur.com/mteGN.png">
24+
25+
[Material Colors](material_design2.gif material_design3.gif) can be accessed from Red to Brown.
26+
Brown, Grey, and BlueGrey swatches only have primary colors.
27+
28+
```kotlin
29+
val Red50 = Color(0xffFFEBEE)
30+
val Red100 = Color(0xffFFCDD2)
31+
val Red200 = Color(0xffEF9A9A)
32+
val Red300 = Color(0xffE57373)
33+
val Red400 = Color(0xffEF5350)
34+
val Red500 = Color(0xffF44336)
35+
val Red600 = Color(0xffE53935)
36+
val Red700 = Color(0xffD32F2F)
37+
val Red800 = Color(0xffC62828)
38+
val Red900 = Color(0xffB71C1C)
39+
40+
// Accent Colors
41+
val RedA100 = Color(0xffFF8A80)
42+
val RedA200 = Color(0xffFF5252)
43+
val RedA400 = Color(0xffFF1744)
44+
val RedA700 = Color(0xffD50000)
45+
```
46+
47+
For material Swatches
48+
49+
Call any swatch from `ColorSwatch` for instance for Red500 with `ColorSwatch.red` which will return
50+
primary color `Map<Int,Color>`
51+
52+
```kotlin
53+
val red by lazy {
54+
linkedMapOf(
55+
50 to Color(0xffFFEBEE),
56+
100 to Color(0xffFFCDD2),
57+
200 to Color(0xffEF9A9A),
58+
300 to Color(0xffE57373),
59+
400 to Color(0xffEF5350),
60+
500 to Color(0xffF44336),
61+
600 to Color(0xffE53935),
62+
700 to Color(0xffD32F2F),
63+
800 to Color(0xffC62828),
64+
900 to Color(0xffB71C1C)
65+
)
66+
}
67+
```
68+
69+
to access any color from this map
70+
71+
```
72+
val redSwatch = ColorSwatch.red
73+
val red300 = redSwatch[300]!!
74+
```
75+
76+
Swatch that returns header(50 variants)
77+
78+
```kotlin
79+
val primaryHeaderColors by lazy {
80+
listOf(
81+
Color(0xffF44336),
82+
Color(0xffE91E63),
83+
Color(0xff9C27B0),
84+
Color(0xff673AB7),
85+
Color(0xff3F51B5),
86+
Color(0xff2196F3),
87+
Color(0xff03A9F4),
88+
Color(0xff00BCD4),
89+
Color(0xff00ACC1),
90+
Color(0xff4CAF50),
91+
Color(0xff8BC34A),
92+
Color(0xffCDDC39),
93+
Color(0xffFFEB3B),
94+
Color(0xffFFC107),
95+
Color(0xffFF9800),
96+
Color(0xffFF5722),
97+
Color(0xff795548),
98+
Color(0xff9E9E9E),
99+
Color(0xff607D8B)
100+
)
101+
}
102+
```
103+
104+
## Material Design 3 Tonal Palette
105+
A tonal palette consists of thirteen tones, including white and black. A tone value of 100 is equivalent to the idea of light at its maximum and results in white. Every tone value between 0 and 100 expresses the amount of light present in the color.
106+
107+
108+
| <img src="./screenshots/m3_tones.png" width="250">
109+
From range 0 to 100
110+
```kotlin
111+
val material3ToneRange = listOf(
112+
0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 95, 99, 100
113+
)
114+
115+
```
116+
117+
Call
118+
```kotlin
119+
fun getColorTonesList(color: Color): List< Color> {
120+
121+
val camColor = Cam16.fromInt(color.toArgb())
122+
val palette: TonalPalette = TonalPalette.fromHueAndChroma(camColor.hue, max(48.0,camColor.chroma))
123+
val toneList = mutableListOf<Color>()
124+
125+
material3ToneRange.forEach { shade ->
126+
toneList.add(Color(palette.tone(shade)))
127+
}
128+
129+
return toneList
130+
}
131+
```
132+
that returns list of colors or
133+
134+
```kotlin
135+
fun getColorTonesMap(color: Color): Map<Int, Color> {
136+
val palette: TonalPalette = TonalPalette.fromInt(color.toArgb())
137+
val toneMap = linkedMapOf<Int, Color>()
138+
139+
material3ToneRange.forEach { shade ->
140+
toneMap[shade] = Color(palette.tone(shade))
141+
}
142+
143+
return toneMap
144+
}
145+
146+
```
147+
to get Map with tone keys

‎app/src/main/java/com/smarttoolfactory/composecolorsextended/MainActivity.kt‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,8 @@ import com.smarttoolfactory.composecolorsextended.demo.GradientAngleDemo
2121
import com.smarttoolfactory.composecolorsextended.demo.MD2ColorSelectionDemo
2222
import com.smarttoolfactory.composecolorsextended.demo.MD3ColorShadeSelectionDemo
2323
import com.smarttoolfactory.composecolorsextended.ui.theme.ComposeColorsExtendedTheme
24+
import com.smarttoolfactory.extendedcolors.ColorSwatch
25+
import com.smarttoolfactory.extendedcolors.util.colorToHSL
2426
import kotlinx.coroutines.launch
2527

2628
@OptIn(ExperimentalPagerApi::class)
@@ -50,12 +52,12 @@ class MainActivity : ComponentActivity() {
5052
@OptIn(ExperimentalAnimationApi::class)
5153
@Composable
5254
private fun HomeContent() {
55+
val systemUiController = rememberSystemUiController()
5356

5457
val pagerState: PagerState = rememberPagerState(initialPage = 0)
55-
var backgroundColor by remember { mutableStateOf(Color(0xff03a9f4)) }
56-
var contentColor by remember { mutableStateOf(Color.White) }
57-
58-
val systemUiController = rememberSystemUiController()
58+
var backgroundColor by remember { mutableStateOf(Color(0xffF44336)) }
59+
val lightness = colorToHSL(backgroundColor)[2]
60+
val contentColor = if (lightness < .6f) Color.White else Color.Black
5961

6062
systemUiController.setStatusBarColor(
6163
color = backgroundColor
@@ -107,7 +109,5 @@ internal val tabList =
107109
listOf(
108110
"Material Design2",
109111
"Material You/3",
110-
"Color Names",
111-
"Gradient Angles",
112-
"Color Conversions",
112+
"Gradient Angles"
113113
)

‎app/src/main/java/com/smarttoolfactory/composecolorsextended/MaterialColorPicker.kt‎

Lines changed: 35 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,10 @@ import androidx.compose.foundation.lazy.itemsIndexed
88
import androidx.compose.foundation.shape.CircleShape
99
import androidx.compose.foundation.shape.RoundedCornerShape
1010
import androidx.compose.material.Divider
11+
import androidx.compose.material.Icon
1112
import androidx.compose.material.Text
13+
import androidx.compose.material.icons.Icons
14+
import androidx.compose.material.icons.filled.Check
1215
import androidx.compose.runtime.*
1316
import androidx.compose.ui.Alignment
1417
import androidx.compose.ui.Modifier
@@ -33,8 +36,8 @@ fun MaterialColorPicker(onColorChange: (Color) -> Unit) {
3336
verticalArrangement = Arrangement.spacedBy(8.dp),
3437
contentPadding = PaddingValues(horizontal = 8.dp, vertical = 8.dp)
3538
) {
36-
itemsIndexed(ColorSwatch.HeaderColors) { index: Int, item: Color ->
37-
Header(
39+
itemsIndexed(ColorSwatch.primaryHeaderColors) { index: Int, item: Color ->
40+
ColorDisplay(
3841
modifier = Modifier
3942
.padding(horizontal = 2.dp)
4043
.clip(CircleShape)
@@ -108,13 +111,42 @@ fun MaterialColorPicker(onColorChange: (Color) -> Unit) {
108111
}
109112

110113
@Composable
111-
fun Header(modifier: Modifier, color: Color) {
114+
fun ColorDisplay(modifier: Modifier, color: Color) {
112115
Box(
113116
modifier = modifier
114117
.background(color)
115118
)
116119
}
117120

121+
@Composable
122+
fun ColorDisplayWithTitle(
123+
modifier: Modifier,
124+
title: String,
125+
selected: Boolean,
126+
textColor: Color,
127+
color: Color
128+
) {
129+
Box(
130+
contentAlignment = Alignment.Center
131+
) {
132+
Box(
133+
modifier = modifier
134+
.background(color)
135+
)
136+
137+
Text(text = title, color = textColor, fontSize = 16.sp)
138+
139+
if (selected) {
140+
Icon(
141+
imageVector = Icons.Default.Check,
142+
contentDescription = "check",
143+
modifier = modifier.background(textColor.copy(alpha = .5f)),
144+
tint = Color.Green
145+
)
146+
}
147+
}
148+
}
149+
118150
@Composable
119151
fun ColorRowWithInfo(
120152
modifier: Modifier,

0 commit comments

Comments
 (0)