Skip to content

Commit

Permalink
Update README.md
Browse files Browse the repository at this point in the history
  • Loading branch information
SmartToolFactory committed Apr 28, 2022
1 parent 758184d commit 775951f
Showing 1 changed file with 58 additions and 51 deletions.
109 changes: 58 additions & 51 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -14,8 +14,7 @@

| M2 Color Swatches | M3 Tone Palettes |
| ----------|-----------|
| <img src="./screenshots/material_design2.gif" width="450">
| <img src="./screenshots/screenshots/material_design3.gif" width="450"> |
| <img src="./screenshots/material_design2.gif" width="400">| <img src="./screenshots/material_design3.gif" width="400"> |

## Material Design 2 Colors && Swatches

Expand Down Expand Up @@ -52,18 +51,18 @@ primary color `Map<Int,Color>`

```kotlin
val red by lazy {
linkedMapOf(
50 to Color(0xffFFEBEE),
100 to Color(0xffFFCDD2),
200 to Color(0xffEF9A9A),
300 to Color(0xffE57373),
400 to Color(0xffEF5350),
500 to Color(0xffF44336),
600 to Color(0xffE53935),
700 to Color(0xffD32F2F),
800 to Color(0xffC62828),
900 to Color(0xffB71C1C)
)
linkedMapOf(
50 to Color(0xffFFEBEE),
100 to Color(0xffFFCDD2),
200 to Color(0xffEF9A9A),
300 to Color(0xffE57373),
400 to Color(0xffEF5350),
500 to Color(0xffF44336),
600 to Color(0xffE53935),
700 to Color(0xffD32F2F),
800 to Color(0xffC62828),
900 to Color(0xffB71C1C)
)
}
```

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

```kotlin
val primaryHeaderColors by lazy {
listOf(
Color(0xffF44336),
Color(0xffE91E63),
Color(0xff9C27B0),
Color(0xff673AB7),
Color(0xff3F51B5),
Color(0xff2196F3),
Color(0xff03A9F4),
Color(0xff00BCD4),
Color(0xff00ACC1),
Color(0xff4CAF50),
Color(0xff8BC34A),
Color(0xffCDDC39),
Color(0xffFFEB3B),
Color(0xffFFC107),
Color(0xffFF9800),
Color(0xffFF5722),
Color(0xff795548),
Color(0xff9E9E9E),
Color(0xff607D8B)
)
listOf(
Color(0xffF44336),
Color(0xffE91E63),
Color(0xff9C27B0),
Color(0xff673AB7),
Color(0xff3F51B5),
Color(0xff2196F3),
Color(0xff03A9F4),
Color(0xff00BCD4),
Color(0xff00ACC1),
Color(0xff4CAF50),
Color(0xff8BC34A),
Color(0xffCDDC39),
Color(0xffFFEB3B),
Color(0xffFFC107),
Color(0xffFF9800),
Color(0xffFF5722),
Color(0xff795548),
Color(0xff9E9E9E),
Color(0xff607D8B)
)
}
```

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

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.

| <img src="./screenshots/m3_tones.png" width="320">

From range 0 to 100

```kotlin
val material3ToneRange = listOf(
0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 95, 99, 100
0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 95, 99, 100
)

```

Call

```kotlin
fun getColorTonesList(color: Color): List< Color> {
fun getColorTonesList(color: Color): List<Color> {

val camColor = Cam16.fromInt(color.toArgb())
val palette: TonalPalette = TonalPalette.fromHueAndChroma(camColor.hue, max(48.0,camColor.chroma))
val toneList = mutableListOf<Color>()
val camColor = Cam16.fromInt(color.toArgb())
val palette: TonalPalette =
TonalPalette.fromHueAndChroma(camColor.hue, max(48.0, camColor.chroma))
val toneList = mutableListOf<Color>()

material3ToneRange.forEach { shade ->
toneList.add(Color(palette.tone(shade)))
}
material3ToneRange.forEach { shade ->
toneList.add(Color(palette.tone(shade)))
}

return toneList
return toneList
}
```

that returns list of colors or

```kotlin
fun getColorTonesMap(color: Color): Map<Int, Color> {
val palette: TonalPalette = TonalPalette.fromInt(color.toArgb())
val toneMap = linkedMapOf<Int, Color>()
val palette: TonalPalette = TonalPalette.fromInt(color.toArgb())
val toneMap = linkedMapOf<Int, Color>()

material3ToneRange.forEach { shade ->
toneMap[shade] = Color(palette.tone(shade))
}
material3ToneRange.forEach { shade ->
toneMap[shade] = Color(palette.tone(shade))
}

return toneMap
return toneMap
}

```

to get Map with tone keys

0 comments on commit 775951f

Please sign in to comment.