Light theme reintroduced

+ default value for lambdas
massivemadness · Feb 5, 2025 · dba9e8d · dba9e8d
1 parent 4d3dfc6
commit dba9e8d
Show file tree

Hide file tree

Showing 50 changed files with 511 additions and 494 deletions.
diff --git a/common-ui/src/main/kotlin/com/blacksquircle/ui/ds/Color.kt b/common-ui/src/main/kotlin/com/blacksquircle/ui/ds/Color.kt
@@ -35,13 +35,25 @@ class Colors internal constructor(
     val colorBackgroundSecondary: Color,
     val colorBackgroundTertiary: Color,
     val colorTextAndIconPrimary: Color,
+    val colorTextAndIconPrimaryInverse: Color,
     val colorTextAndIconSecondary: Color,
     val colorTextAndIconDisabled: Color,
 ) {
 
     companion object {
 
-        fun lightColors() = darkColors() // TODO
+        fun lightColors() = Colors(
+            colorPrimary = Color(0xFF3E73B9),
+            colorOutline = Color(0xFFE0E0E0),
+            colorError = Color(0xFFCD0000),
+            colorBackgroundPrimary = Color(0xFFFFFFFF),
+            colorBackgroundSecondary = Color(0xFFFFFFFF),
+            colorBackgroundTertiary = Color(0xFFF0F1F4),
+            colorTextAndIconPrimary = Color(0xFF000000),
+            colorTextAndIconPrimaryInverse = Color(0xFFFFFFFF),
+            colorTextAndIconSecondary = Color(0xFF7F8290),
+            colorTextAndIconDisabled = Color(0xFFA9ADBC),
+        )
 
         fun darkColors() = Colors(
             colorPrimary = Color(0xFFFF8000),
@@ -51,6 +63,7 @@ class Colors internal constructor(
             colorBackgroundSecondary = Color(0xFF2B2D30),
             colorBackgroundTertiary = Color(0xFF434448),
             colorTextAndIconPrimary = Color(0xFFFFFFFF),
+            colorTextAndIconPrimaryInverse = Color(0xFF000000),
             colorTextAndIconSecondary = Color(0xFFBCBCBC),
             colorTextAndIconDisabled = Color(0xFF6E6E6E),
         )

diff --git a/common-ui/src/main/kotlin/com/blacksquircle/ui/ds/Preview.kt b/common-ui/src/main/kotlin/com/blacksquircle/ui/ds/Preview.kt
@@ -0,0 +1,33 @@
+/*
+ * Copyright 2023 Squircle CE contributors.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+package com.blacksquircle.ui.ds
+
+import androidx.compose.foundation.isSystemInDarkTheme
+import androidx.compose.material.Surface
+import androidx.compose.runtime.Composable
+
+@Composable
+fun PreviewBackground(
+    darkTheme: Boolean = isSystemInDarkTheme(),
+    content: @Composable () -> Unit
+) {
+    SquircleTheme(darkTheme = darkTheme) {
+        Surface {
+            content()
+        }
+    }
+}
diff --git a/common-ui/src/main/kotlin/com/blacksquircle/ui/ds/button/FloatingButton.kt b/common-ui/src/main/kotlin/com/blacksquircle/ui/ds/button/FloatingButton.kt
@@ -21,7 +21,8 @@ import androidx.compose.material.Icon
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.res.painterResource
-import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.tooling.preview.PreviewLightDark
+import com.blacksquircle.ui.ds.PreviewBackground
 import com.blacksquircle.ui.ds.R
 import com.blacksquircle.ui.ds.SquircleTheme
 
@@ -38,15 +39,15 @@ fun FloatingButton(
         Icon(
             painter = painterResource(iconResId),
             contentDescription = null,
-            tint = SquircleTheme.colors.colorTextAndIconPrimary,
+            tint = SquircleTheme.colors.colorTextAndIconPrimaryInverse,
         )
     }
 }
 
-@Preview
+@PreviewLightDark
 @Composable
 private fun FloatingButtonPreview() {
-    SquircleTheme {
+    PreviewBackground {
         FloatingButton(
             iconResId = R.drawable.ic_edit,
             onClick = {},

diff --git a/common-ui/src/main/kotlin/com/blacksquircle/ui/ds/button/IconButton.kt b/common-ui/src/main/kotlin/com/blacksquircle/ui/ds/button/IconButton.kt
@@ -29,7 +29,10 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.semantics.Role
+import androidx.compose.ui.tooling.preview.PreviewLightDark
 import androidx.compose.ui.unit.dp
+import com.blacksquircle.ui.ds.PreviewBackground
+import com.blacksquircle.ui.ds.R
 import com.blacksquircle.ui.ds.SquircleTheme
 
 @Composable
@@ -83,4 +86,15 @@ enum class IconButtonSize {
     S,
     M,
     L,
+}
+
+@PreviewLightDark
+@Composable
+private fun IconButtonPreview() {
+    PreviewBackground {
+        IconButton(
+            iconResId = R.drawable.ic_edit,
+            onClick = {},
+        )
+    }
 }
diff --git a/common-ui/src/main/kotlin/com/blacksquircle/ui/ds/button/OutlinedButton.kt b/common-ui/src/main/kotlin/com/blacksquircle/ui/ds/button/OutlinedButton.kt
@@ -30,8 +30,9 @@ import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
 import androidx.compose.ui.semantics.Role
-import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.tooling.preview.PreviewLightDark
 import androidx.compose.ui.unit.dp
+import com.blacksquircle.ui.ds.PreviewBackground
 import com.blacksquircle.ui.ds.SquircleTheme
 
 @Composable
@@ -81,10 +82,10 @@ fun OutlinedButton(
     }
 }
 
-@Preview
+@PreviewLightDark
 @Composable
 private fun OutlinedButtonEnabledPreview() {
-    SquircleTheme {
+    PreviewBackground {
         OutlinedButton(
             text = "Outlined Button",
             onClick = {},
@@ -93,10 +94,10 @@ private fun OutlinedButtonEnabledPreview() {
     }
 }
 
-@Preview
+@PreviewLightDark
 @Composable
 private fun OutlinedButtonDisabledPreview() {
-    SquircleTheme {
+    PreviewBackground {
         OutlinedButton(
             text = "Outlined Button",
             onClick = {},

diff --git a/common-ui/src/main/kotlin/com/blacksquircle/ui/ds/button/TextButton.kt b/common-ui/src/main/kotlin/com/blacksquircle/ui/ds/button/TextButton.kt
@@ -29,8 +29,9 @@ import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
 import androidx.compose.ui.semantics.Role
-import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.tooling.preview.PreviewLightDark
 import androidx.compose.ui.unit.dp
+import com.blacksquircle.ui.ds.PreviewBackground
 import com.blacksquircle.ui.ds.SquircleTheme
 
 @Composable
@@ -74,10 +75,10 @@ fun TextButton(
     }
 }
 
-@Preview
+@PreviewLightDark
 @Composable
 private fun TextButtonEnabledPreview() {
-    SquircleTheme {
+    PreviewBackground {
         TextButton(
             text = "Text Button",
             onClick = {},
@@ -86,10 +87,10 @@ private fun TextButtonEnabledPreview() {
     }
 }
 
-@Preview
+@PreviewLightDark
 @Composable
 private fun TextButtonDisabledPreview() {
-    SquircleTheme {
+    PreviewBackground {
         TextButton(
             text = "Text Button",
             onClick = {},

diff --git a/common-ui/src/main/kotlin/com/blacksquircle/ui/ds/checkbox/CheckBox.kt b/common-ui/src/main/kotlin/com/blacksquircle/ui/ds/checkbox/CheckBox.kt
@@ -30,8 +30,9 @@ import androidx.compose.runtime.remember
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.text.style.TextOverflow
-import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.tooling.preview.PreviewLightDark
 import androidx.compose.ui.unit.dp
+import com.blacksquircle.ui.ds.PreviewBackground
 import com.blacksquircle.ui.ds.SquircleTheme
 
 @Composable
@@ -62,7 +63,7 @@ fun CheckBox(
                 colors = CheckboxDefaults.colors(
                     checkedColor = SquircleTheme.colors.colorPrimary,
                     uncheckedColor = SquircleTheme.colors.colorTextAndIconSecondary,
-                    checkmarkColor = SquircleTheme.colors.colorTextAndIconPrimary,
+                    checkmarkColor = SquircleTheme.colors.colorTextAndIconPrimaryInverse,
                     disabledColor = SquircleTheme.colors.colorTextAndIconDisabled,
                     disabledIndeterminateColor = SquircleTheme.colors.colorTextAndIconDisabled,
                 )
@@ -85,32 +86,32 @@ fun CheckBox(
     }
 }
 
-@Preview
+@PreviewLightDark
 @Composable
 private fun CheckBoxCheckedPreview() {
-    SquircleTheme {
+    PreviewBackground {
         CheckBox(
             title = "CheckBox",
             checked = true,
         )
     }
 }
 
-@Preview
+@PreviewLightDark
 @Composable
 private fun CheckBoxUncheckedPreview() {
-    SquircleTheme {
+    PreviewBackground {
         CheckBox(
             title = "CheckBox",
             checked = false,
         )
     }
 }
 
-@Preview
+@PreviewLightDark
 @Composable
 private fun CheckBoxCheckedDisabledPreview() {
-    SquircleTheme {
+    PreviewBackground {
         CheckBox(
             title = "CheckBox",
             checked = true,
@@ -119,10 +120,10 @@ private fun CheckBoxCheckedDisabledPreview() {
     }
 }
 
-@Preview
+@PreviewLightDark
 @Composable
 private fun CheckBoxUncheckedDisabledPreview() {
-    SquircleTheme {
+    PreviewBackground {
         CheckBox(
             title = "CheckBox",
             checked = false,

diff --git a/common-ui/src/main/kotlin/com/blacksquircle/ui/ds/dialog/AlertDialog.kt b/common-ui/src/main/kotlin/com/blacksquircle/ui/ds/dialog/AlertDialog.kt
@@ -34,10 +34,11 @@ import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.text.style.TextOverflow
-import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.tooling.preview.PreviewLightDark
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.window.Dialog
 import androidx.compose.ui.window.DialogProperties
+import com.blacksquircle.ui.ds.PreviewBackground
 import com.blacksquircle.ui.ds.SquircleTheme
 import com.blacksquircle.ui.ds.button.TextButton
 
@@ -128,10 +129,10 @@ fun AlertDialog(
     }
 }
 
-@Preview
+@PreviewLightDark
 @Composable
 private fun AlertDialogPreview() {
-    SquircleTheme {
+    PreviewBackground {
         AlertDialog(
             title = "Alert Dialog",
             content = {

diff --git a/common-ui/src/main/kotlin/com/blacksquircle/ui/ds/dialog/ColorPickerDialog.kt b/common-ui/src/main/kotlin/com/blacksquircle/ui/ds/dialog/ColorPickerDialog.kt
@@ -27,20 +27,20 @@ import androidx.compose.foundation.layout.width
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
-import androidx.compose.runtime.saveable.rememberSaveable
+import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 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.tooling.preview.Preview
+import androidx.compose.ui.tooling.preview.PreviewLightDark
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
 import androidx.compose.ui.window.DialogProperties
 import androidx.core.graphics.toColorInt
-import com.blacksquircle.ui.ds.SquircleTheme
+import com.blacksquircle.ui.ds.PreviewBackground
 import com.blacksquircle.ui.ds.extensions.toHexString
 import com.blacksquircle.ui.ds.textfield.TextField
 import com.github.skydoves.colorpicker.compose.AlphaSlider
@@ -63,7 +63,7 @@ fun ColorPickerDialog(
     properties: DialogProperties = DialogProperties(),
 ) {
     val controller = rememberColorPickerController()
-    var textColor by rememberSaveable {
+    var textColor by remember {
         mutableStateOf(initialColor.toHexString())
     }
 
@@ -75,7 +75,7 @@ fun ColorPickerDialog(
                     initialColor = initialColor,
                     onColorChanged = { colorEnvelope ->
                         if (colorEnvelope.fromUser) {
-                            textColor = "#" + colorEnvelope.hexCode
+                            textColor = colorEnvelope.color.toHexString()
                         }
                     },
                     controller = controller,
@@ -140,12 +140,14 @@ fun ColorPickerDialog(
     )
 }
 
-@Preview
+@PreviewLightDark
 @Composable
 private fun ColorPickerDialogPreview() {
-    SquircleTheme {
+    PreviewBackground {
         ColorPickerDialog(
             title = "Color Picker",
+            confirmButton = "Select",
+            dismissButton = "Cancel",
             onDismiss = {},
         )
     }

diff --git a/common-ui/src/main/kotlin/com/blacksquircle/ui/ds/divider/HorizontalDivider.kt b/common-ui/src/main/kotlin/com/blacksquircle/ui/ds/divider/HorizontalDivider.kt
@@ -23,8 +23,10 @@ import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.geometry.Offset
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.tooling.preview.PreviewLightDark
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
+import com.blacksquircle.ui.ds.PreviewBackground
 import com.blacksquircle.ui.ds.SquircleTheme
 
 @Composable
@@ -33,12 +35,22 @@ fun HorizontalDivider(
     thickness: Dp = 1.dp,
     color: Color = SquircleTheme.colors.colorOutline,
 ) {
-    Canvas(modifier.fillMaxWidth().height(thickness)) {
+    Canvas(modifier
+        .fillMaxWidth()
+        .height(thickness)) {
         drawLine(
             color = color,
             strokeWidth = thickness.toPx(),
             start = Offset(0f, thickness.toPx() / 2),
             end = Offset(size.width, thickness.toPx() / 2),
         )
     }
+}
+
+@PreviewLightDark
+@Composable
+private fun HorizontalDividerPreview() {
+    PreviewBackground {
+        HorizontalDivider()
+    }
 }