Skip to content

Theming #1298

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 5 commits into from
Oct 22, 2025
Merged

Theming #1298

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
ad1268f
Add Material3-based Processing theme and typography
Stefterv Oct 21, 2025
408b87f
Refactor to use Material3 and update theme usage
Stefterv Oct 21, 2025
38a990f
Add Space Grotesk font files and license
Stefterv Oct 21, 2025
77c12a4
Update markdown renderer to m3 and adjust UI
Stefterv Oct 21, 2025
266dba0
Merge remote-tracking branch 'upstream/welcome-screen' into base-theme
Stefterv Oct 21, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 8 additions & 5 deletions app/build.gradle.kts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ plugins{

alias(libs.plugins.compose.compiler)
alias(libs.plugins.jetbrainsCompose)

alias(libs.plugins.serialization)
alias(libs.plugins.download)
}
Expand Down Expand Up @@ -60,7 +61,7 @@ compose.desktop {
).map { "-D${it.first}=${it.second}" }.toTypedArray())

nativeDistributions{
modules("jdk.jdi", "java.compiler", "jdk.accessibility", "java.management.rmi", "java.scripting", "jdk.httpserver")
modules("jdk.jdi", "java.compiler", "jdk.accessibility", "jdk.zipfs", "java.management.rmi", "java.scripting", "jdk.httpserver")
targetFormats(TargetFormat.Dmg, TargetFormat.Msi, TargetFormat.Deb)
packageName = "Processing"

Expand Down Expand Up @@ -108,27 +109,29 @@ dependencies {

implementation(compose.runtime)
implementation(compose.foundation)
implementation(compose.material)
implementation(compose.ui)
implementation(compose.components.resources)
implementation(compose.components.uiToolingPreview)
implementation(compose.materialIconsExtended)

implementation(compose.desktop.currentOs)
implementation(libs.material3)

implementation(libs.compottie)
implementation(libs.kaml)
implementation(libs.markdown)
implementation(libs.markdownJVM)

implementation(libs.clikt)
implementation(libs.kotlinxSerializationJson)

@OptIn(ExperimentalComposeLibrary::class)
testImplementation(compose.uiTest)
testImplementation(kotlin("test"))
testImplementation(libs.mockitoKotlin)
testImplementation(libs.junitJupiter)
testImplementation(libs.junitJupiterParams)

implementation(libs.clikt)
implementation(libs.kotlinxSerializationJson)

}

tasks.test {
Expand Down
85 changes: 20 additions & 65 deletions app/src/processing/app/ui/WelcomeToBeta.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,11 +5,11 @@ import androidx.compose.animation.core.animateFloatAsState
import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.*
import androidx.compose.material.MaterialTheme
import androidx.compose.material.MaterialTheme.colors
import androidx.compose.material.MaterialTheme.typography
import androidx.compose.material.Surface
import androidx.compose.material.Text
import androidx.compose.material3.Button
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.MaterialTheme.typography
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.ExperimentalComposeUiApi
Expand All @@ -31,17 +31,16 @@ import androidx.compose.ui.window.application
import androidx.compose.ui.window.rememberWindowState
import com.formdev.flatlaf.util.SystemInfo
import com.mikepenz.markdown.compose.Markdown
import com.mikepenz.markdown.m2.markdownColor
import com.mikepenz.markdown.m2.markdownTypography
import com.mikepenz.markdown.m3.markdownColor
import com.mikepenz.markdown.m3.markdownTypography
import com.mikepenz.markdown.model.MarkdownColors
import com.mikepenz.markdown.model.MarkdownTypography
import processing.app.Preferences
import processing.app.Base.getRevision
import processing.app.Base.getVersionName
import processing.app.ui.theme.LocalLocale
import processing.app.ui.theme.LocalTheme
import processing.app.ui.theme.Locale
import processing.app.ui.theme.ProcessingTheme
import processing.app.ui.theme.PDETheme
import java.awt.Cursor
import java.awt.Dimension
import java.awt.event.KeyAdapter
Expand All @@ -54,7 +53,7 @@ import javax.swing.SwingUtilities

class WelcomeToBeta {
companion object{
val windowSize = Dimension(400, 200)
val windowSize = Dimension(400, 250)
val windowTitle = Locale()["beta.window.title"]

@JvmStatic
Expand All @@ -72,7 +71,7 @@ class WelcomeToBeta {
contentPane.add(ComposePanel().apply {
size = windowSize
setContent {
ProcessingTheme {
PDETheme(darkTheme = false) {
Box(modifier = Modifier.padding(top = if (mac) 22.dp else 0.dp)) {
welcomeToBeta(close)
}
Expand All @@ -99,7 +98,7 @@ class WelcomeToBeta {
Row(
modifier = Modifier
.padding(20.dp, 10.dp)
.size(windowSize.width.dp, windowSize.height.dp),
.fillMaxSize(),
horizontalArrangement = Arrangement
.spacedBy(20.dp)
){
Expand All @@ -109,7 +108,7 @@ class WelcomeToBeta {
contentDescription = locale["beta.logo"],
modifier = Modifier
.align(Alignment.CenterVertically)
.size(100.dp, 100.dp)
.size(120.dp)
.offset(0.dp, (-25).dp)
)
Column(
Expand All @@ -123,88 +122,44 @@ class WelcomeToBeta {
) {
Text(
text = locale["beta.title"],
style = typography.subtitle1,
style = typography.titleLarge,
)
val text = locale["beta.message"]
.replace('$' + "version", getVersionName())
.replace('$' + "revision", getRevision().toString())
Markdown(
text,
colors = markdownColor(),
typography = markdownTypography(text = typography.body1, link = typography.body1.copy(color = colors.primary)),
typography = markdownTypography(),
modifier = Modifier.background(Color.Transparent).padding(bottom = 10.dp)
)
Row {
Spacer(modifier = Modifier.weight(1f))
PDEButton(onClick = {
Button(onClick = {
close()
}) {
Text(
text = locale["beta.button"],
color = colors.onPrimary
color = MaterialTheme.colorScheme.onPrimary
)
}
}
}
}
}
@OptIn(ExperimentalComposeUiApi::class)
@Composable
fun PDEButton(onClick: () -> Unit, content: @Composable BoxScope.() -> Unit) {
val theme = LocalTheme.current

var hover by remember { mutableStateOf(false) }
var clicked by remember { mutableStateOf(false) }
val offset by animateFloatAsState(if (hover) -5f else 5f)
val color by animateColorAsState(if(clicked) colors.primaryVariant else colors.primary)

Box(modifier = Modifier.padding(end = 5.dp, top = 5.dp)) {
Box(
modifier = Modifier
.offset((-offset).dp, (offset).dp)
.background(theme.getColor("toolbar.button.pressed.field"))
.matchParentSize()
)
Box(
modifier = Modifier
.onPointerEvent(PointerEventType.Press) {
clicked = true
}
.onPointerEvent(PointerEventType.Release) {
clicked = false
onClick()
}
.onPointerEvent(PointerEventType.Enter) {
hover = true
}
.onPointerEvent(PointerEventType.Exit) {
hover = false
}
.pointerHoverIcon(PointerIcon(Cursor(Cursor.HAND_CURSOR)))
.background(color)
.padding(10.dp)
.sizeIn(minWidth = 100.dp),
contentAlignment = Alignment.Center,
content = content
)
}
}


@JvmStatic
fun main(args: Array<String>) {
application {
val windowState = rememberWindowState(
size = DpSize.Unspecified,
size = windowSize.let { DpSize(it.width.dp, it.height.dp) },
position = WindowPosition(Alignment.Center)
)

Window(onCloseRequest = ::exitApplication, state = windowState, title = windowTitle) {
ProcessingTheme {
Surface(color = colors.background) {
welcomeToBeta {
exitApplication()
}
PDETheme(darkTheme = false) {
welcomeToBeta {
exitApplication()
}
}
}
Expand Down
134 changes: 134 additions & 0 deletions app/src/processing/app/ui/theme/Colors.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,134 @@
package processing.app.ui.theme

import androidx.compose.material.Colors
import androidx.compose.material3.darkColorScheme
import androidx.compose.material3.lightColorScheme
import androidx.compose.ui.graphics.Color

class ProcessingColors{
companion object{
val blue = Color(0xFF0251c8)
val lightBlue = Color(0xFF82AFFF)

val deepBlue = Color(0xFF1e32aa)
val darkBlue = Color(0xFF0F195A)

val white = Color(0xFFFFFFFF)
val lightGray = Color(0xFFF5F5F5)
val gray = Color(0xFFDBDBDB)
val darkGray = Color(0xFF898989)
val darkerGray = Color(0xFF727070)
val veryDarkGray = Color(0xFF1E1E1E)
val black = Color(0xFF0D0D0D)

val error = Color(0xFFFF5757)
val errorContainer = Color(0xFFFFA6A6)

val p5Light = Color(0xFFfd9db9)
val p5Mid = Color(0xFFff4077)
val p5Dark = Color(0xFFaf1f42)

val foundationLight = Color(0xFFd4b2fe)
val foundationMid = Color(0xFF9c4bff)
val foundationDark = Color(0xFF5501a4)

val downloadInactive = Color(0xFF8890B3)
val downloadBackgroundActive = Color(0x14508BFF)
}
}

@Deprecated("Use PDE3LightColor instead")
val PDE2LightColors = Colors(
primary = ProcessingColors.blue,
primaryVariant = ProcessingColors.lightBlue,
onPrimary = ProcessingColors.white,

secondary = ProcessingColors.deepBlue,
secondaryVariant = ProcessingColors.darkBlue,
onSecondary = ProcessingColors.white,

background = ProcessingColors.white,
onBackground = ProcessingColors.darkBlue,

surface = ProcessingColors.lightGray,
onSurface = ProcessingColors.darkerGray,

error = ProcessingColors.error,
onError = ProcessingColors.white,

isLight = true,
)

@Deprecated("Use PDE3DarkColor instead")
val PDE2DarkColors = Colors(
primary = ProcessingColors.deepBlue,
primaryVariant = ProcessingColors.darkBlue,
onPrimary = ProcessingColors.white,

secondary = ProcessingColors.lightBlue,
secondaryVariant = ProcessingColors.blue,
onSecondary = ProcessingColors.white,

background = ProcessingColors.veryDarkGray,
onBackground = ProcessingColors.white,

surface = ProcessingColors.darkerGray,
onSurface = ProcessingColors.lightGray,

error = ProcessingColors.error,
onError = ProcessingColors.white,

isLight = false,
)

val PDELightColor = lightColorScheme(
primary = ProcessingColors.blue,
onPrimary = ProcessingColors.white,

primaryContainer = ProcessingColors.downloadBackgroundActive,
onPrimaryContainer = ProcessingColors.darkBlue,

secondary = ProcessingColors.deepBlue,
onSecondary = ProcessingColors.white,

secondaryContainer = ProcessingColors.downloadInactive,
onSecondaryContainer = ProcessingColors.white,

tertiary = ProcessingColors.p5Mid,
onTertiary = ProcessingColors.white,

tertiaryContainer = ProcessingColors.p5Light,
onTertiaryContainer = ProcessingColors.p5Dark,

background = ProcessingColors.white,
onBackground = ProcessingColors.darkBlue,

surface = ProcessingColors.lightGray,
onSurface = ProcessingColors.darkerGray,

error = ProcessingColors.error,
onError = ProcessingColors.white,

errorContainer = ProcessingColors.errorContainer,
onErrorContainer = ProcessingColors.white
)

val PDEDarkColor = darkColorScheme(
primary = ProcessingColors.deepBlue,
onPrimary = ProcessingColors.white,

secondary = ProcessingColors.lightBlue,
onSecondary = ProcessingColors.white,

tertiary = ProcessingColors.blue,
onTertiary = ProcessingColors.white,

background = ProcessingColors.veryDarkGray,
onBackground = ProcessingColors.white,

surface = ProcessingColors.darkerGray,
onSurface = ProcessingColors.lightGray,

error = ProcessingColors.error,
onError = ProcessingColors.white,
)
Loading