Merge pull request #305 from JetBrains/textfields

Textfields

examples/intelliJPlugin/src/main/kotlin/com/jetbrains/compose/ComposeDemoAction.kt

@@ -5,6 +5,8 @@ import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.fillMaxHeight
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.material.Surface
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.unit.IntSize
 import com.intellij.openapi.actionSystem.AnActionEvent
@@ -12,6 +14,7 @@ import com.intellij.openapi.project.DumbAwareAction
 import com.intellij.openapi.project.Project
 import com.intellij.openapi.ui.DialogWrapper
 import com.intellij.ui.layout.panel
+import com.jetbrains.compose.theme.WidgetTheme
 import com.jetbrains.compose.widgets.Buttons
 import com.jetbrains.compose.widgets.LazyScrollable
 import com.jetbrains.compose.widgets.Loaders
@@ -45,18 +48,23 @@ class ComposeDemoAction : DumbAwareAction() {
                         panel = this,
                         preferredSize = IntSize(800, 600)
                     ) {
-                        Row {
+                        WidgetTheme(darkTheme = true) {
-                            Column(
+                            Surface(modifier = Modifier.fillMaxSize()) {
-                                modifier = Modifier.fillMaxHeight().weight(1f)
+                                Row {
-                            ) {
+                                    Column(
-                                Buttons()
+                                        modifier = Modifier.fillMaxHeight().weight(1f)
-                                Loaders()
+                                    ) {
-                                Toggles()
+                                        Buttons()
-                            }
+                                        Loaders()
-                            Box(
+                                        TextInputs()
-                                modifier = Modifier.fillMaxHeight().weight(1f)
+                                        Toggles()
-                            ) {
+                                    }
-                                LazyScrollable()
+                                    Box(
+                                        modifier = Modifier.fillMaxHeight().weight(1f)
+                                    ) {
+                                        LazyScrollable()
+                                    }
+                                }
                             }
                         }
                     }

examples/intelliJPlugin/src/main/kotlin/com/jetbrains/compose/theme/Color.kt

@@ -0,0 +1,9 @@
+package com.jetbrains.compose.theme
+
+import androidx.compose.ui.graphics.Color
+
+val green200 = Color(0xffa5d6a7)
+val green500 = Color(0xff4caf50)
+val green700 = Color(0xff388e3c)
+
+val teal200 = Color(0xff80deea)

examples/intelliJPlugin/src/main/kotlin/com/jetbrains/compose/theme/Shape.kt

@@ -0,0 +1,11 @@
+package com.jetbrains.compose.theme
+
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material.Shapes
+import androidx.compose.ui.unit.dp
+
+val shapes = Shapes(
+    small = RoundedCornerShape(4.dp),
+    medium = RoundedCornerShape(4.dp),
+    large = RoundedCornerShape(0.dp)
+)

examples/intelliJPlugin/src/main/kotlin/com/jetbrains/compose/theme/Theme.kt

@@ -0,0 +1,47 @@
+package com.jetbrains.compose.theme
+
+import androidx.compose.material.MaterialTheme
+import androidx.compose.material.darkColors
+import androidx.compose.material.lightColors
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.graphics.Color
+
+private val DarkGreenColorPalette = darkColors(
+    primary = green200,
+    primaryVariant = green700,
+    secondary = teal200,
+    background = Color.Black,
+    surface = Color(74, 74, 74),
+    onPrimary = Color.Black,
+    onSecondary = Color.White,
+    onBackground = Color.White,
+    onSurface = Color.White,
+    error = Color.Red,
+)
+
+private val LightGreenColorPalette = lightColors(
+    primary = green500,
+    primaryVariant = green700,
+    secondary = teal200,
+    background = Color.White,
+    surface = Color.White,
+    onPrimary = Color.White,
+    onSecondary = Color.Black,
+    onBackground = Color.Black,
+    onSurface = Color.Black
+)
+
+@Composable
+fun WidgetTheme(
+    darkTheme: Boolean = false,
+    content: @Composable() () -> Unit,
+) {
+    val colors = if (darkTheme) DarkGreenColorPalette else LightGreenColorPalette
+
+    MaterialTheme(
+        colors = colors,
+        typography = typography,
+        shapes = shapes,
+        content = content
+    )
+}

examples/intelliJPlugin/src/main/kotlin/com/jetbrains/compose/theme/Type.kt

@@ -0,0 +1,43 @@
+package com.jetbrains.compose.theme
+
+import androidx.compose.material.Typography
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.text.font.FontFamily
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.unit.sp
+
+val typography = Typography(
+    body1 = TextStyle(
+        fontFamily = FontFamily.Default,
+        fontWeight = FontWeight.Normal,
+        fontSize = 16.sp
+    ),
+    body2 = TextStyle(
+        fontFamily = FontFamily.Default,
+        fontWeight = FontWeight.Normal,
+        fontSize = 14.sp
+    ),
+    button = TextStyle(
+        fontFamily = FontFamily.Default,
+        fontWeight = FontWeight.W500,
+        fontSize = 14.sp
+    ),
+    caption = TextStyle(
+        fontFamily = FontFamily.Default,
+        fontWeight = FontWeight.Normal,
+        fontSize = 12.sp,
+    ),
+    subtitle1 = TextStyle(
+        fontFamily = FontFamily.Default,
+        fontWeight = FontWeight.Normal,
+        fontSize = 16.sp,
+        color = Color.Gray
+    ),
+    subtitle2 = TextStyle(
+        fontFamily = FontFamily.Default,
+        fontWeight = FontWeight.Normal,
+        fontSize = 14.sp,
+        color = Color.Gray
+    ),
+)

examples/intelliJPlugin/src/main/kotlin/com/jetbrains/compose/widgets/LazyScrollable.kt

@@ -13,9 +13,11 @@ import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.rememberScrollbarAdapter
+import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.foundation.VerticalScrollbar
 import androidx.compose.material.Text
 import androidx.compose.material.MaterialTheme
+import androidx.compose.material.Surface
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.graphics.Color
@@ -29,7 +31,6 @@ fun LazyScrollable() {
         DesktopTheme {
             Box(
                 modifier = Modifier.fillMaxSize()
-                    .background(color = Color(180, 180, 180))
                     .padding(10.dp)
             ) {
 
@@ -57,13 +58,17 @@ fun LazyScrollable() {
 
 @Composable
 private fun TextBox(text: String = "Item") {
-    Box(
+    Surface(
-        modifier = Modifier.height(32.dp)
+        color = Color(135, 135, 135, 40),
-            .fillMaxWidth()
+        shape = RoundedCornerShape(4.dp)
-            .background(color = Color(0, 0, 0, 20))
-            .padding(start = 10.dp),
-        contentAlignment = Alignment.CenterStart
     ) {
-        Text(text = text)
+        Box(
+            modifier = Modifier.height(32.dp)
+                .fillMaxWidth()
+                .padding(start = 10.dp),
+            contentAlignment = Alignment.CenterStart
+        ) {
+            Text(text = text)
+        }
     }
 }

examples/intelliJPlugin/src/main/kotlin/com/jetbrains/compose/widgets/TextInputs.kt

@@ -16,6 +16,8 @@ import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.text.font.FontFamily
+import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.unit.dp
 
 @Composable
@@ -26,21 +28,21 @@ fun TextInputs() {
         var name by remember { mutableStateOf(TextFieldValue("")) }
         var password by remember { mutableStateOf(TextFieldValue("")) }
 
-        // TextInputs() // TODO: causes exceptions on Windows OS
         TextField(
             value = name,
             onValueChange = { newValue -> name = newValue },
             modifier = Modifier.padding(8.dp).fillMaxWidth(),
+            textStyle = TextStyle(fontFamily = FontFamily.SansSerif),
             label = { Text("Account:") },
             placeholder = { Text("account name") }
         )
 
-        // TextInputs() // TODO: causes exceptions on Windows OS
         OutlinedTextField(
             value = password,
             modifier = Modifier.padding(8.dp).fillMaxWidth(),
             label = { Text(text = "Password:") },
             placeholder = { Text(text = "your password") },
+            textStyle = TextStyle(fontFamily = FontFamily.SansSerif),
             visualTransformation = PasswordVisualTransformation(),
             onValueChange = {
                 password = it