Skip to content

Commit 775951f

Browse files
Update README.md
1 parent 758184d commit 775951f

File tree

1 file changed

+58
-51
lines changed

1 file changed

+58
-51
lines changed

README.md

Lines changed: 58 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,7 @@
1414

1515
| M2 Color Swatches | M3 Tone Palettes |
1616
| ----------|-----------|
17-
| <img src="./screenshots/material_design2.gif" width="450">
18-
| <img src="./screenshots/screenshots/material_design3.gif" width="450"> |
17+
| <img src="./screenshots/material_design2.gif" width="400">| <img src="./screenshots/material_design3.gif" width="400"> |
1918

2019
## Material Design 2 Colors && Swatches
2120

@@ -52,18 +51,18 @@ primary color `Map<Int,Color>`
5251

5352
```kotlin
5453
val red by lazy {
55-
linkedMapOf(
56-
50 to Color(0xffFFEBEE),
57-
100 to Color(0xffFFCDD2),
58-
200 to Color(0xffEF9A9A),
59-
300 to Color(0xffE57373),
60-
400 to Color(0xffEF5350),
61-
500 to Color(0xffF44336),
62-
600 to Color(0xffE53935),
63-
700 to Color(0xffD32F2F),
64-
800 to Color(0xffC62828),
65-
900 to Color(0xffB71C1C)
66-
)
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+
)
6766
}
6867
```
6968

@@ -78,71 +77,79 @@ Swatch that returns header(50 variants)
7877

7978
```kotlin
8079
val primaryHeaderColors by lazy {
81-
listOf(
82-
Color(0xffF44336),
83-
Color(0xffE91E63),
84-
Color(0xff9C27B0),
85-
Color(0xff673AB7),
86-
Color(0xff3F51B5),
87-
Color(0xff2196F3),
88-
Color(0xff03A9F4),
89-
Color(0xff00BCD4),
90-
Color(0xff00ACC1),
91-
Color(0xff4CAF50),
92-
Color(0xff8BC34A),
93-
Color(0xffCDDC39),
94-
Color(0xffFFEB3B),
95-
Color(0xffFFC107),
96-
Color(0xffFF9800),
97-
Color(0xffFF5722),
98-
Color(0xff795548),
99-
Color(0xff9E9E9E),
100-
Color(0xff607D8B)
101-
)
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+
)
102101
}
103102
```
104103

105104
## Material Design 3 Tonal Palette
106-
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.
107105

106+
A tonal palette consists of thirteen tones, including white and black. A tone value of 100 is
107+
equivalent to the idea of light at its maximum and results in white. Every tone value between 0 and
108+
100 expresses the amount of light present in the color.
108109

109110
| <img src="./screenshots/m3_tones.png" width="320">
111+
110112
From range 0 to 100
113+
111114
```kotlin
112115
val material3ToneRange = listOf(
113-
0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 95, 99, 100
116+
0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 95, 99, 100
114117
)
115118

116119
```
117120

118121
Call
122+
119123
```kotlin
120-
fun getColorTonesList(color: Color): List< Color> {
124+
fun getColorTonesList(color: Color): List<Color> {
121125

122-
val camColor = Cam16.fromInt(color.toArgb())
123-
val palette: TonalPalette = TonalPalette.fromHueAndChroma(camColor.hue, max(48.0,camColor.chroma))
124-
val toneList = mutableListOf<Color>()
126+
val camColor = Cam16.fromInt(color.toArgb())
127+
val palette: TonalPalette =
128+
TonalPalette.fromHueAndChroma(camColor.hue, max(48.0, camColor.chroma))
129+
val toneList = mutableListOf<Color>()
125130

126-
material3ToneRange.forEach { shade ->
127-
toneList.add(Color(palette.tone(shade)))
128-
}
131+
material3ToneRange.forEach { shade ->
132+
toneList.add(Color(palette.tone(shade)))
133+
}
129134

130-
return toneList
135+
return toneList
131136
}
132137
```
138+
133139
that returns list of colors or
134140

135141
```kotlin
136142
fun getColorTonesMap(color: Color): Map<Int, Color> {
137-
val palette: TonalPalette = TonalPalette.fromInt(color.toArgb())
138-
val toneMap = linkedMapOf<Int, Color>()
143+
val palette: TonalPalette = TonalPalette.fromInt(color.toArgb())
144+
val toneMap = linkedMapOf<Int, Color>()
139145

140-
material3ToneRange.forEach { shade ->
141-
toneMap[shade] = Color(palette.tone(shade))
142-
}
146+
material3ToneRange.forEach { shade ->
147+
toneMap[shade] = Color(palette.tone(shade))
148+
}
143149

144-
return toneMap
150+
return toneMap
145151
}
146152

147153
```
154+
148155
to get Map with tone keys

0 commit comments

Comments
 (0)