Add design tokens

.gitattributes

@@ -5,3 +5,5 @@
 
 CONTRIBUTORS.md merge=union
 app/src/main/res/values*/strings.xml merge=union
+
+design/src/main/kotlin/token/* linguist-generated

app/build.gradle.kts

@@ -87,6 +87,7 @@ tasks.register("versionTxt") {
 
 dependencies {
 	// Jellyfin
+	implementation(projects.design)
 	implementation(projects.playback.core)
 	implementation(projects.playback.jellyfin)
 	implementation(projects.playback.media3.exoplayer)

app/src/main/java/org/jellyfin/androidtv/ui/settings/screen/customization/subtitle/composable/SubtitleStylePreview.kt

@@ -10,7 +10,6 @@ import androidx.compose.foundation.layout.height
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
-import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.unit.dp
@@ -24,6 +23,7 @@ import androidx.media3.ui.SubtitleView
 import org.jellyfin.androidtv.R
 import org.jellyfin.androidtv.preference.UserPreferences
 import org.jellyfin.androidtv.ui.base.JellyfinTheme
+import org.jellyfin.design.Tokens
 
 @OptIn(UnstableApi::class)
 @Composable
@@ -36,8 +36,6 @@ fun SubtitleStylePreview(
 	subtitlesTextSize: Float = userPreferences[UserPreferences.subtitlesTextSize],
 ) {
 	val context = LocalContext.current
-	// TODO: Use design token when merged
-	val jfColorNeutralDark = Color(0xff151515)
 	SubtitleStylePreview(
 		text = stringResource(R.string.subtitle_preview_text),
 		textColor = subtitlesTextColor.toInt(),
@@ -47,7 +45,7 @@ fun SubtitleStylePreview(
 		edgeColor = subtitleTextStrokeColor.toInt(),
 		typeface = TypefaceCompat.create(context, Typeface.DEFAULT, subtitlesTextWeight, false),
 		modifier = Modifier
-			.background(jfColorNeutralDark, JellyfinTheme.shapes.large)
+			.background(Tokens.Color.colorNeutralDark, JellyfinTheme.shapes.large)
 			.fillMaxWidth()
 			.height(75.dp)
 			.clip(JellyfinTheme.shapes.large)

design/build.gradle.kts

@@ -0,0 +1,22 @@
+plugins {
+	id("com.android.library")
+	kotlin("android")
+}
+
+android {
+	namespace = "org.jellyfin.design"
+	compileSdk = libs.versions.android.compileSdk.get().toInt()
+
+	defaultConfig {
+		minSdk = libs.versions.android.minSdk.get().toInt()
+	}
+
+	lint {
+		lintConfig = file("$rootDir/android-lint.xml")
+		abortOnError = false
+	}
+}
+
+dependencies {
+	implementation(libs.androidx.compose.ui.graphics)
+}

design/src/main/kotlin/Tokens.kt

@@ -0,0 +1,13 @@
+package org.jellyfin.design
+
+import org.jellyfin.design.token.ColorTokens
+import org.jellyfin.design.token.RadiusTokens
+import org.jellyfin.design.token.SpaceTokens
+import org.jellyfin.design.token.TypographyTokens
+
+object Tokens {
+	val Color = ColorTokens
+	val Radius = RadiusTokens
+	val Space = SpaceTokens
+	val Typography = TypographyTokens
+}

design/src/main/kotlin/token/ColorTokens.kt

@@ -0,0 +1,56 @@
+
+
+
+package org.jellyfin.design.token
+
+import androidx.compose.ui.graphics.Color
+
+object ColorTokens {
+  val colorBlue100 = Color(0xffcff3ff)
+  val colorBlue200 = Color(0xff8ee2ff)
+  val colorBlue300 = Color(0xff46cfff)
+  val colorBlue400 = Color(0xff00b9fa)
+  val colorBlue500 = Color(0xff00a4dd)
+  val colorBlue600 = Color(0xff0094cc)
+  val colorBlue700 = Color(0xff0092d0)
+  val colorBlue800 = Color(0xff004f6a)
+  val colorBlue900 = Color(0xff00455d)
+  val colorGray100 = Color(0xfff0f0f0)
+  val colorGray200 = Color(0xffd2d2d2)
+  val colorGray300 = Color(0xffa1a1a1)
+  val colorGray400 = Color(0xff888888)
+  val colorGray500 = Color(0xff606060)
+  val colorGray600 = Color(0xff454545)
+  val colorGray700 = Color(0xff3b3b3b)
+  val colorGray800 = Color(0xff303030)
+  val colorGray900 = Color(0xff252525)
+  val colorLime100 = Color(0xfff0ffda)
+  val colorLime200 = Color(0xffd6ffc4)
+  val colorLime300 = Color(0xffcaff80)
+  val colorLime400 = Color(0xffb8ff55)
+  val colorLime500 = Color(0xff94d737)
+  val colorLime600 = Color(0xff69b400)
+  val colorLime700 = Color(0xff559200)
+  val colorLime800 = Color(0xff4a8000)
+  val colorLime900 = Color(0xff417000)
+  val colorNeutralDark = Color(0xff151515)
+  val colorNeutralLight = Color(0xffffffff)
+  val colorOrange100 = Color(0xffffdfcc)
+  val colorOrange200 = Color(0xffffccad)
+  val colorOrange300 = Color(0xffffb88c)
+  val colorOrange400 = Color(0xffff9a5c)
+  val colorOrange500 = Color(0xfff27223)
+  val colorOrange600 = Color(0xffe35a05)
+  val colorOrange700 = Color(0xffca4e00)
+  val colorOrange800 = Color(0xffb24400)
+  val colorOrange900 = Color(0xffa33f00)
+  val colorRed100 = Color(0xffffcccc)
+  val colorRed200 = Color(0xffffaaac)
+  val colorRed300 = Color(0xffff7e80)
+  val colorRed400 = Color(0xffff676a)
+  val colorRed500 = Color(0xfff43c3f)
+  val colorRed600 = Color(0xfff42023)
+  val colorRed700 = Color(0xffc80003)
+  val colorRed800 = Color(0xffb30003)
+  val colorRed900 = Color(0xff820002)
+}

design/src/main/kotlin/token/RadiusTokens.kt

@@ -0,0 +1,12 @@
+
+
+
+package org.jellyfin.design.token
+
+import androidx.compose.ui.unit.dp
+
+object RadiusTokens {
+  val radiusCircle = 15984.00.dp
+  val radiusDefault = 128.00.dp
+  val radiusNone = 0.00.dp
+}

design/src/main/kotlin/token/SpaceTokens.kt

@@ -0,0 +1,17 @@
+
+
+
+package org.jellyfin.design.token
+
+import androidx.compose.ui.unit.dp
+
+object SpaceTokens {
+  val space2xl = 40.00.dp
+  val space2xs = 2.00.dp
+  val space3xl = 48.00.dp
+  val spaceLg = 24.00.dp
+  val spaceMd = 16.00.dp
+  val spaceSm = 8.00.dp
+  val spaceXl = 32.00.dp
+  val spaceXs = 4.00.dp
+}

design/src/main/kotlin/token/TypographyTokens.kt

@@ -0,0 +1,26 @@
+
+
+
+package org.jellyfin.design.token
+
+import androidx.compose.ui.unit.dp
+
+object TypographyTokens {
+  val typographyFontSize2xl = 24.00.dp
+  val typographyFontSize2xs = 10.00.dp
+  val typographyFontSize3xl = 32.00.dp
+  val typographyFontSizeLg = 18.00.dp
+  val typographyFontSizeMd = 16.00.dp
+  val typographyFontSizeSm = 14.00.dp
+  val typographyFontSizeXl = 20.00.dp
+  val typographyFontSizeXs = 12.00.dp
+  val typographyWeight100 = 100
+  val typographyWeight200 = 200
+  val typographyWeight300 = 300
+  val typographyWeight400 = 400
+  val typographyWeight500 = 500
+  val typographyWeight600 = 600
+  val typographyWeight700 = 700
+  val typographyWeight800 = 800
+  val typographyWeight900 = 900
+}

gradle/libs.versions.toml

@@ -66,6 +66,7 @@ androidx-appcompat = { module = "androidx.appcompat:appcompat", version.ref = "a
 androidx-cardview = { module = "androidx.cardview:cardview", version.ref = "androidx-cardview" }
 androidx-compose-foundation = { module = "androidx.compose.foundation:foundation", version.ref = "androidx-compose-foundation" }
 androidx-compose-ui-tooling = { module = "androidx.compose.ui:ui-tooling", version.ref = "androidx-compose-ui" }
+androidx-compose-ui-graphics = { module = "androidx.compose.ui:ui-graphics", version.ref = "androidx-compose-ui" }
 androidx-constraintlayout = { module = "androidx.constraintlayout:constraintlayout", version.ref = "androidx-constraintlayout" }
 androidx-core = { module = "androidx.core:core-ktx", version.ref = "androidx-core" }
 androidx-fragment = { module = "androidx.fragment:fragment-ktx", version.ref = "androidx-fragment" }
@@ -135,6 +136,7 @@ acra = [
 ]
 androidx-compose = [
     "androidx-compose-foundation",
+    "androidx-compose-ui-graphics",
     "androidx-compose-ui-tooling",
 ]
 androidx-lifecycle = [

settings.gradle.kts

@@ -6,6 +6,7 @@ rootProject.name = "jellyfin-androidtv"
 include(":app")
 
 // Modules
+include(":design")
 include(":playback:core")
 include(":playback:jellyfin")
 include(":playback:media3:exoplayer")