Add some Preview

libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/components/ElementButton.kt

@@ -16,16 +16,21 @@
 
 package io.element.android.libraries.designsystem.theme.components
 
+import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.RowScope
 import androidx.compose.material.ContentAlpha
 import androidx.compose.material.ProvideTextStyle
 import androidx.compose.material3.Button
 import androidx.compose.material3.ButtonDefaults
+import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.compositeOver
+import androidx.compose.ui.tooling.preview.Preview
 import io.element.android.libraries.designsystem.components.color.elementContentColorFor
+import io.element.android.libraries.designsystem.preview.ElementPreviewDark
+import io.element.android.libraries.designsystem.preview.ElementPreviewLight
 import io.element.android.libraries.designsystem.theme.ElementTheme
 
 @Composable
@@ -64,3 +69,23 @@ fun ElementButton(
         }
     )
 }
+
+@Preview
+@Composable
+fun ElementButtonsLightPreview() = ElementPreviewLight { ContentToPreview() }
+
+@Preview
+@Composable
+fun ElementButtonsDarkPreview() = ElementPreviewDark { ContentToPreview() }
+
+@Composable
+private fun ContentToPreview() {
+    Column {
+        ElementButton(onClick = {}, enabled = true) {
+            Text(text = "Click me! - Enabled")
+        }
+        ElementButton(onClick = {}, enabled = false) {
+            Text(text = "Click me! - Disabled")
+        }
+    }
+}

libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/components/ElementCheckbox.kt

@@ -17,6 +17,7 @@
 package io.element.android.libraries.designsystem.theme.components
 
 import androidx.compose.foundation.interaction.MutableInteractionSource
+import androidx.compose.foundation.layout.Column
 import androidx.compose.material3.Checkbox
 import androidx.compose.material3.CheckboxColors
 import androidx.compose.material3.CheckboxDefaults
@@ -24,6 +25,9 @@ import androidx.compose.runtime.Composable
 import androidx.compose.runtime.remember
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.tooling.preview.Preview
+import io.element.android.libraries.designsystem.preview.ElementPreviewDark
+import io.element.android.libraries.designsystem.preview.ElementPreviewLight
 import io.element.android.libraries.designsystem.theme.ElementTheme
 
 @Composable
@@ -53,3 +57,21 @@ fun ElementCheckbox(
         interactionSource = interactionSource,
     )
 }
+
+@Preview
+@Composable
+fun ElementCheckboxesLightPreview() = ElementPreviewLight { ContentToPreview() }
+
+@Preview
+@Composable
+fun ElementCheckboxesDarkPreview() = ElementPreviewDark { ContentToPreview() }
+
+@Composable
+private fun ContentToPreview() {
+    Column {
+        ElementCheckbox(onCheckedChange = {}, enabled = true, checked = true)
+        ElementCheckbox(onCheckedChange = {}, enabled = true, checked = false)
+        ElementCheckbox(onCheckedChange = {}, enabled = false, checked = true)
+        ElementCheckbox(onCheckedChange = {}, enabled = false, checked = false)
+    }
+}

libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/components/ElementOutlinedTextField.kt

@@ -17,6 +17,7 @@
 package io.element.android.libraries.designsystem.theme.components
 
 import androidx.compose.foundation.interaction.MutableInteractionSource
+import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.text.KeyboardActions
 import androidx.compose.foundation.text.KeyboardOptions
 import androidx.compose.foundation.text.selection.TextSelectionColors
@@ -32,7 +33,10 @@ import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.Shape
 import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.text.input.VisualTransformation
+import androidx.compose.ui.tooling.preview.Preview
 import io.element.android.libraries.designsystem.ElementGreen
+import io.element.android.libraries.designsystem.preview.ElementPreviewDark
+import io.element.android.libraries.designsystem.preview.ElementPreviewLight
 import io.element.android.libraries.designsystem.theme.ElementTheme
 
 @OptIn(ExperimentalMaterial3Api::class)
@@ -115,3 +119,24 @@ fun ElementOutlinedTextField(
     )
 }
 
+@Preview
+@Composable
+fun ElementOutlinedTextFieldsLightPreview() = ElementPreviewLight { ContentToPreview() }
+
+@Preview
+@Composable
+fun ElementOutlinedTextFieldsDarkPreview() = ElementPreviewDark { ContentToPreview() }
+
+@Composable
+private fun ContentToPreview() {
+    Column {
+        ElementOutlinedTextField(onValueChange = {}, value = "Content", isError = false, enabled = true, readOnly = true)
+        ElementOutlinedTextField(onValueChange = {}, value = "Content", isError = false, enabled = true, readOnly = false)
+        ElementOutlinedTextField(onValueChange = {}, value = "Content", isError = false, enabled = false, readOnly = true)
+        ElementOutlinedTextField(onValueChange = {}, value = "Content", isError = false, enabled = false, readOnly = false)
+        ElementOutlinedTextField(onValueChange = {}, value = "Content", isError = true, enabled = true, readOnly = true)
+        ElementOutlinedTextField(onValueChange = {}, value = "Content", isError = true, enabled = true, readOnly = false)
+        ElementOutlinedTextField(onValueChange = {}, value = "Content", isError = true, enabled = false, readOnly = true)
+        ElementOutlinedTextField(onValueChange = {}, value = "Content", isError = true, enabled = false, readOnly = false)
+    }
+}

libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/components/ElementSlider.kt

@@ -17,12 +17,16 @@
 package io.element.android.libraries.designsystem.theme.components
 
 import androidx.compose.foundation.interaction.MutableInteractionSource
+import androidx.compose.foundation.layout.Column
 import androidx.compose.material3.Slider
 import androidx.compose.material3.SliderColors
 import androidx.compose.material3.SliderDefaults
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.remember
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.tooling.preview.Preview
+import io.element.android.libraries.designsystem.preview.ElementPreviewDark
+import io.element.android.libraries.designsystem.preview.ElementPreviewLight
 import io.element.android.libraries.designsystem.theme.ElementTheme
 
 @Composable
@@ -41,11 +45,11 @@ fun ElementSlider(
         activeTickColor = ElementTheme.colors.primary,
         inactiveTrackColor = ElementTheme.colors.primary,
         inactiveTickColor = ElementTheme.colors.primary,
-        disabledThumbColor = ElementTheme.colors.primary,
+        disabledThumbColor = ElementTheme.colors.primary.copy(alpha = 0.40f),
-        disabledActiveTrackColor = ElementTheme.colors.primary,
+        disabledActiveTrackColor = ElementTheme.colors.primary.copy(alpha = 0.40f),
-        disabledActiveTickColor = ElementTheme.colors.primary,
+        disabledActiveTickColor = ElementTheme.colors.primary.copy(alpha = 0.40f),
-        disabledInactiveTrackColor = ElementTheme.colors.primary,
+        disabledInactiveTrackColor = ElementTheme.colors.primary.copy(alpha = 0.40f),
-        disabledInactiveTickColor = ElementTheme.colors.primary,
+        disabledInactiveTickColor = ElementTheme.colors.primary.copy(alpha = 0.40f),
     ),
     interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }
 ) {
@@ -61,3 +65,19 @@ fun ElementSlider(
         interactionSource = interactionSource,
     )
 }
+
+@Preview
+@Composable
+fun ElementSlidersLightPreview() = ElementPreviewLight { ContentToPreview() }
+
+@Preview
+@Composable
+fun ElementSlidersDarkPreview() = ElementPreviewDark { ContentToPreview() }
+
+@Composable
+private fun ContentToPreview() {
+    Column {
+        ElementSlider(onValueChange = {}, value = 0.33f, enabled = true)
+        ElementSlider(onValueChange = {}, value = 0.33f, enabled = false)
+    }
+}