|
12 | 12 | * Functions to convert between `androidx.compose.ui.graphics.Color`, HSL, HSV, `RGB`, HCT, and |
13 | 13 | colors with nearest **Name** based on distance is in 3D space using `Red`, `Green`, `Blue`. |
14 | 14 |
|
15 | | -| M2 Color Swatches | M3 Tone Palettes | |
16 | | -| ----------|-----------| |
17 | | -| <img src="./screenshots/material_design2.gif" width="400">| <img src="./screenshots/material_design3.gif" width="400"> | |
| 15 | +| M2 Color Swatches | M3 Tone Palettes | Gradient Rotation| |
| 16 | +| ----------|-----------| -----------| |
| 17 | +| <img src="./screenshots/material_design2.gif" width="300">| <img src="./screenshots/material_design3.gif" width="300"> | <img src="./screenshots/gradient_rotation.gif" width="300"> | |
18 | 18 |
|
19 | 19 | ## Material Design 2 Colors & Swatches |
20 | 20 |
|
21 | 21 | ### Material Colors |
22 | 22 |
|
23 | 23 | <img src="./screenshots/m2_palette.png"> |
24 | 24 |
|
25 | | -[Material Colors](material_design2.gif material_design3.gif) can be accessed from Red to Brown. |
| 25 | +[Material Colors](https://materialui.co/colors/) can be accessed from Red to Brown. |
26 | 26 | Brown, Grey, and BlueGrey swatches only have primary colors. |
27 | 27 |
|
28 | 28 | ```kotlin |
@@ -153,3 +153,62 @@ fun getColorTonesMap(color: Color): Map<Int, Color> { |
153 | 153 | ``` |
154 | 154 |
|
155 | 155 | to get Map with tone keys |
| 156 | + |
| 157 | +## Gradient Rotation |
| 158 | +Gradients can be rotate by 45, in the future this can be expanded to any angle, |
| 159 | +with |
| 160 | + |
| 161 | +Create a `GradientOffset`with |
| 162 | + |
| 163 | +```kotlin |
| 164 | +var gradientOffset by remember { |
| 165 | + mutableStateOf(GradientOffset(GradientAngle.CW0)) |
| 166 | +} |
| 167 | +``` |
| 168 | + |
| 169 | +```kotlin |
| 170 | +fun GradientOffset(angle: GradientAngle = GradientAngle.CW0): GradientOffset { |
| 171 | + return when (angle) { |
| 172 | + GradientAngle.CW45 -> GradientOffset( |
| 173 | + start = Offset.Zero, |
| 174 | + end = Offset.Infinite |
| 175 | + ) |
| 176 | + GradientAngle.CW90 -> GradientOffset( |
| 177 | + start = Offset.Zero, |
| 178 | + end = Offset(0f, Float.POSITIVE_INFINITY) |
| 179 | + ) |
| 180 | + GradientAngle.CW135 -> GradientOffset( |
| 181 | + start = Offset(Float.POSITIVE_INFINITY, 0f), |
| 182 | + end = Offset(0f, Float.POSITIVE_INFINITY) |
| 183 | + ) |
| 184 | + GradientAngle.CW180 -> GradientOffset( |
| 185 | + start = Offset(Float.POSITIVE_INFINITY, 0f), |
| 186 | + end = Offset.Zero, |
| 187 | + ) |
| 188 | + GradientAngle.CW225 -> GradientOffset( |
| 189 | + start = Offset.Infinite, |
| 190 | + end = Offset.Zero |
| 191 | + ) |
| 192 | + GradientAngle.CW270 -> GradientOffset( |
| 193 | + start = Offset(0f, Float.POSITIVE_INFINITY), |
| 194 | + end = Offset.Zero |
| 195 | + ) |
| 196 | + GradientAngle.CW315 -> GradientOffset( |
| 197 | + start = Offset(0f, Float.POSITIVE_INFINITY), |
| 198 | + end = Offset(Float.POSITIVE_INFINITY, 0f) |
| 199 | + ) |
| 200 | + else -> GradientOffset( |
| 201 | + start = Offset.Zero, |
| 202 | + end = Offset(Float.POSITIVE_INFINITY, 0f) |
| 203 | + ) |
| 204 | + } |
| 205 | +} |
| 206 | +``` |
| 207 | +Set start and end of `Brush` with |
| 208 | +```kotlin |
| 209 | +val redGreenGradient = Brush.linearGradient( |
| 210 | + colors = listOf(Color.Red, Color.Green, Color.Blue), |
| 211 | + start = gradientOffset.start, |
| 212 | + end = gradientOffset.end |
| 213 | +) |
| 214 | +``` |
0 commit comments