-
-
Notifications
You must be signed in to change notification settings - Fork 12
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #46 from Danil0v3s/feat/design-system
[Feat] Design System
- Loading branch information
Showing
69 changed files
with
1,781 additions
and
1,211 deletions.
There are no files selected for viewing
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,9 @@ | ||
plugins { | ||
kotlin("jvm") | ||
alias(libs.plugins.jetbrainsCompose) | ||
alias(libs.plugins.compose.compiler) | ||
} | ||
|
||
dependencies { | ||
implementation(compose.desktop.currentOs) | ||
} |
226 changes: 226 additions & 0 deletions
226
core/design-system/src/main/kotlin/app/cleanmeter/core/designsystem/ColorScheme.kt
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,226 @@ | ||
package app.cleanmeter.core.designsystem | ||
|
||
import androidx.compose.runtime.Immutable | ||
import androidx.compose.ui.graphics.Brush | ||
import androidx.compose.ui.graphics.Color | ||
|
||
@Immutable | ||
data class ColorScheme( | ||
val background: Background, | ||
val text: Text, | ||
val border: Border, | ||
val icon: Icon, | ||
val gradient: Gradient, | ||
) { | ||
@Immutable | ||
data class Background( | ||
val surface: Color, | ||
val surfaceRaised: Color, | ||
val surfaceOverlay: Color, | ||
val surfaceSunken: Color, | ||
val surfaceSunkenSubtle: Color, | ||
|
||
val brand: Color, | ||
val brandSubtle: Color, | ||
val brandHover: Color, | ||
val brandActive: Color, | ||
|
||
val success: Color, | ||
val successSubtle: Color, | ||
val successHover: Color, | ||
val successActive: Color, | ||
|
||
val warning: Color, | ||
val warningSubtle: Color, | ||
val warningHover: Color, | ||
val warningActive: Color, | ||
|
||
val danger: Color, | ||
val dangerSubtle: Color, | ||
val dangerHover: Color, | ||
val dangerActive: Color, | ||
) | ||
|
||
@Immutable | ||
data class Text( | ||
val heading: Color, | ||
val subHeading: Color, | ||
|
||
val paragraph1: Color, | ||
val paragraph2: Color, | ||
|
||
val disabled: Color, | ||
val disabledLighter: Color, | ||
|
||
val inverse: Color, | ||
val inverseSubtler: Color, | ||
|
||
val success: Color, | ||
val danger: Color, | ||
val warning: Color, | ||
) | ||
|
||
@Immutable | ||
data class Border( | ||
val subtler: Color, | ||
val inverse: Color, | ||
val subtle: Color, | ||
val bold: Color, | ||
val bolder: Color, | ||
|
||
val brand: Color, | ||
val brandSubtle: Color, | ||
|
||
val success: Color, | ||
val successDarker: Color, | ||
val danger: Color, | ||
val warning: Color, | ||
) | ||
|
||
@Immutable | ||
data class Icon( | ||
val bolder: Color, | ||
val bolderHover: Color, | ||
val bolderActive: Color, | ||
val bold: Color, | ||
val boldHover: Color, | ||
val boldActive: Color, | ||
|
||
val subtler: Color, | ||
val subtlerHover: Color, | ||
val subtlerActive: Color, | ||
val subtle: Color, | ||
val subtleHover: Color, | ||
val subtleActive: Color, | ||
|
||
val disabled: Color, | ||
val inverse: Color, | ||
val inverseHover: Color, | ||
val inverseActive: Color, | ||
|
||
val success: Color, | ||
val danger: Color, | ||
val warning: Color, | ||
) | ||
|
||
@Immutable | ||
data class Gradient( | ||
val gradient1: Brush | ||
) | ||
} | ||
|
||
internal val defaultColorScheme = ColorScheme( | ||
background = ColorScheme.Background( | ||
surface = Primitives.Gray.Gray100, | ||
surfaceRaised = Primitives.Plain.PlainWhite, | ||
surfaceOverlay = Primitives.Plain.PlainWhite, | ||
surfaceSunken = Primitives.Gray.Gray300, | ||
surfaceSunkenSubtle = Primitives.Gray.Gray50, | ||
brand = Primitives.Gray.Gray950, | ||
brandSubtle = Primitives.Gray.Gray900, | ||
brandHover = Primitives.Gray.Gray500, | ||
brandActive = Primitives.Gray.Gray600, | ||
success = Primitives.Green.Green700, | ||
successSubtle = Primitives.Green.Green50, | ||
successHover = Primitives.Green.Green500, | ||
successActive = Primitives.Green.Green600, | ||
warning = Primitives.Yellow.Yellow700, | ||
warningSubtle = Primitives.Yellow.Yellow50, | ||
warningHover = Primitives.Yellow.Yellow300, | ||
warningActive = Primitives.Yellow.Yellow400, | ||
danger = Primitives.Red.Red700, | ||
dangerSubtle = Primitives.Red.Red50, | ||
dangerHover = Primitives.Red.Red500, | ||
dangerActive = Primitives.Red.Red600, | ||
), | ||
text = ColorScheme.Text( | ||
heading = Primitives.Gray.Gray950, | ||
subHeading = Primitives.Gray.Gray800, | ||
paragraph1 = Primitives.Gray.Gray600, | ||
paragraph2 = Primitives.Gray.Gray500, | ||
disabled = Primitives.Gray.Gray400, | ||
disabledLighter = Primitives.Gray.Gray300, | ||
inverse = Primitives.Plain.PlainWhite, | ||
inverseSubtler = Primitives.Gray.Gray50, | ||
success = Primitives.Green.Green900, | ||
danger = Primitives.Red.Red900, | ||
warning = Primitives.Yellow.Yellow900 | ||
), | ||
border = ColorScheme.Border( | ||
subtler = Primitives.Gray.Gray100, | ||
inverse = Primitives.Plain.PlainWhite, | ||
subtle = Primitives.Gray.Gray200, | ||
bold = Primitives.Gray.Gray300.copy(alpha = 0.5f), | ||
bolder = Primitives.Gray.Gray300, | ||
brand = Primitives.Gray.Gray950, | ||
brandSubtle = Primitives.Gray.Gray950.copy(alpha = 0.1f), | ||
success = Primitives.Green.Green600, | ||
successDarker = Primitives.Green.Green700, | ||
danger = Primitives.Red.Red600, | ||
warning = Primitives.Yellow.Yellow600, | ||
), | ||
icon = ColorScheme.Icon( | ||
bolder = Primitives.Gray.Gray950, | ||
bolderHover = Primitives.Gray.Gray500, | ||
bolderActive = Primitives.Gray.Gray600, | ||
bold = Primitives.Gray.Gray800, | ||
boldHover = Primitives.Gray.Gray500, | ||
boldActive = Primitives.Gray.Gray600, | ||
subtler = Primitives.Gray.Gray600, | ||
subtlerHover = Primitives.Gray.Gray400, | ||
subtlerActive = Primitives.Gray.Gray500, | ||
subtle = Primitives.Gray.Gray500, | ||
subtleHover = Primitives.Gray.Gray300, | ||
subtleActive = Primitives.Gray.Gray400, | ||
disabled = Primitives.Gray.Gray400, | ||
inverse = Primitives.Plain.PlainWhite, | ||
inverseHover = Primitives.Gray.Gray50, | ||
inverseActive = Primitives.Gray.Gray200, | ||
success = Primitives.Green.Green500, | ||
danger = Primitives.Red.Red500, | ||
warning = Primitives.Yellow.Yellow300, | ||
), | ||
gradient = ColorScheme.Gradient( | ||
gradient1 = Brush.verticalGradient( | ||
listOf(Color(0xFF404040), Color(0xFF303030)) | ||
) | ||
) | ||
) | ||
|
||
internal val darkColorScheme = defaultColorScheme.copy( | ||
background = defaultColorScheme.background.copy( | ||
surface = Primitives.Gray.Gray950, | ||
surfaceRaised = Primitives.Gray.Gray800, | ||
surfaceSunken = Primitives.Gray.Gray600, | ||
surfaceSunkenSubtle = Primitives.Gray.Gray900, | ||
brand = Primitives.Gray.Gray25, | ||
brandSubtle = Primitives.Gray.Gray200, | ||
brandHover = Primitives.Gray.Gray100, | ||
brandActive = Primitives.Gray.Gray200, | ||
success = Primitives.Green.Green100, | ||
successSubtle = Primitives.Green.Green400, | ||
), | ||
text = defaultColorScheme.text.copy( | ||
heading = Primitives.Gray.Gray25, | ||
subHeading = Primitives.Gray.Gray600, | ||
paragraph1 = Primitives.Gray.Gray500, | ||
paragraph2 = Primitives.Gray.Gray600, | ||
disabled = Primitives.Gray.Gray600, | ||
inverse = Primitives.Gray.Gray950, | ||
inverseSubtler = Primitives.Gray.Gray300, | ||
), | ||
border = defaultColorScheme.border.copy( | ||
subtle = Primitives.Gray.Gray700, | ||
bold = Primitives.Gray.Gray300.copy(alpha = 0.3f), // todo correct primitive is #5F6169 | ||
bolder = Primitives.Gray.Gray600, | ||
brand = Primitives.Gray.Gray25, | ||
), | ||
icon = defaultColorScheme.icon.copy( | ||
inverse = Primitives.Gray.Gray950, | ||
), | ||
gradient = defaultColorScheme.gradient.copy( | ||
gradient1 = Brush.verticalGradient( | ||
listOf(Color(0xFFF0F1F1), Color(0xFFECECED)) | ||
) | ||
) | ||
) |
102 changes: 102 additions & 0 deletions
102
core/design-system/src/main/kotlin/app/cleanmeter/core/designsystem/Primitives.kt
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,102 @@ | ||
package app.cleanmeter.core.designsystem | ||
|
||
import androidx.compose.ui.graphics.Color | ||
|
||
object Primitives { | ||
object Gray { | ||
val Gray25 = Color(0xFFfafafa) | ||
val Gray50 = Color(0xFFf5f5f6) | ||
val Gray100 = Color(0xFFf0f1f1) | ||
val Gray200 = Color(0xFFececed) | ||
val Gray300 = Color(0xFFcecfd2) | ||
val Gray400 = Color(0xFF94969c) | ||
val Gray500 = Color(0xFF85888e) | ||
val Gray600 = Color(0xFF61646c) | ||
val Gray700 = Color(0xFF333741) | ||
val Gray800 = Color(0xFF1f242f) | ||
val Gray900 = Color(0xFF161b26) | ||
val Gray950 = Color(0xFF0c111d) | ||
|
||
} | ||
|
||
object Red { | ||
val Red25 = Color(0xFFfffbfa) | ||
val Red50 = Color(0xFFfef3f2) | ||
val Red100 = Color(0xFFfee4e2) | ||
val Red200 = Color(0xFFfecdca) | ||
val Red300 = Color(0xFFfda29b) | ||
val Red400 = Color(0xFFf97066) | ||
val Red500 = Color(0xFFf04438) | ||
val Red600 = Color(0xFFd92d20) | ||
val Red700 = Color(0xFFb42318) | ||
val Red800 = Color(0xFF912018) | ||
val Red900 = Color(0xFF7a271a) | ||
val Red950 = Color(0xFF55160c) | ||
|
||
} | ||
|
||
object Yellow { | ||
val Yellow25 = Color(0xFFfffcf5) | ||
val Yellow50 = Color(0xFFfffaeb) | ||
val Yellow100 = Color(0xFFfef0c7) | ||
val Yellow200 = Color(0xFFfedf89) | ||
val Yellow300 = Color(0xFFfec84b) | ||
val Yellow400 = Color(0xFFfdb022) | ||
val Yellow500 = Color(0xFFf79009) | ||
val Yellow600 = Color(0xFFdc6803) | ||
val Yellow700 = Color(0xFFb54708) | ||
val Yellow800 = Color(0xFF93370d) | ||
val Yellow900 = Color(0xFF7a2e0e) | ||
val Yellow950 = Color(0xFF4e1d09) | ||
} | ||
|
||
object Green { | ||
val Green25 = Color(0xFFf6fef9) | ||
val Green50 = Color(0xFFecfdf3) | ||
val Green100 = Color(0xFFdcfae6) | ||
val Green200 = Color(0xFFabefc6) | ||
val Green300 = Color(0xFF75e0a7) | ||
val Green400 = Color(0xFF47cd89) | ||
val Green500 = Color(0xFF17b26a) | ||
val Green600 = Color(0xFF079455) | ||
val Green700 = Color(0xFF067647) | ||
val Green800 = Color(0xFF085d3a) | ||
val Green900 = Color(0xFF074d31) | ||
val Green950 = Color(0xFF053321) | ||
|
||
} | ||
|
||
object Emerald { | ||
val Emerald25 = Color(0xFFf6fefc) | ||
val Emerald50 = Color(0xFFf0fdf9) | ||
val Emerald100 = Color(0xFFccfbef) | ||
val Emerald200 = Color(0xFF99f6e0) | ||
val Emerald300 = Color(0xFF5fe9d0) | ||
val Emerald400 = Color(0xFF2ed3b7) | ||
val Emerald500 = Color(0xFF15b79e) | ||
val Emerald600 = Color(0xFF0e9384) | ||
val Emerald700 = Color(0xFF107569) | ||
val Emerald800 = Color(0xFF125d56) | ||
val Emerald900 = Color(0xFF134e48) | ||
val Emerald950 = Color(0xFF0a2926) | ||
} | ||
|
||
object Purple { | ||
val Purple25 = Color(0xFFfbfaff) | ||
val Purple50 = Color(0xFFf5f3ff) | ||
val Purple100 = Color(0xFFece9fe) | ||
val Purple200 = Color(0xFFddd6fe) | ||
val Purple300 = Color(0xFFc3b5fd) | ||
val Purple400 = Color(0xFFa48afb) | ||
val Purple500 = Color(0xFF875bf7) | ||
val Purple600 = Color(0xFF7839ee) | ||
val Purple700 = Color(0xFF6927da) | ||
val Purple800 = Color(0xFF5720b7) | ||
val Purple900 = Color(0xFF491c96) | ||
val Purple950 = Color(0xFF2e125e) | ||
} | ||
|
||
object Plain { | ||
val PlainWhite = Color(0xFFffffff) | ||
} | ||
} |
14 changes: 14 additions & 0 deletions
14
core/design-system/src/main/kotlin/app/cleanmeter/core/designsystem/Theme.kt
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,14 @@ | ||
package app.cleanmeter.core.designsystem | ||
|
||
import androidx.compose.runtime.staticCompositionLocalOf | ||
import app.cleanmeter.core.designsystem.Theme.Light | ||
|
||
object Theme { | ||
|
||
val Light: ColorScheme = defaultColorScheme | ||
val Dark: ColorScheme = darkColorScheme | ||
val Typography = Typography() | ||
} | ||
|
||
val LocalColorScheme = staticCompositionLocalOf { Light } | ||
val LocalTypography = staticCompositionLocalOf { Theme.Typography } |
Oops, something went wrong.