Make settings section separators visible in black theme (#7039)

* Make settings section separators visible in black theme

In the Black (OLED) theme the canvas is forced to pure black while the
section-separator divider keeps its standard-dark colour (outlineVariant,
~10% alpha white), leaving dividers in Settings and related screens almost
invisible. Add an OLED-aware listSectionDivider alias that lightens the
divider only when the black theme is active, and use it for the
ListSectionHeader divider. Light and standard-dark themes are unchanged.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Signed-off-by: Matt Van Horn <455140+mvanhorn@users.noreply.github.com>

* Set separatorSecondary for Black theme instead of a custom divider alias

Following review feedback: now that the global HorizontalDivider uses
separatorSecondary (#7054), give the Black/OLED theme a visible
separatorSecondary value in ElementTheme instead of carrying a bespoke
listSectionDivider alias. This fixes all separators on pure black, not
just section headers. The exact color is pending design confirmation.

* chore(theme): remove in-code design discussion comment

Move design discussion out of the code per review; the divider color
decision lives in the PR thread.

* Update screenshots

Signed-off-by: Matt Van Horn <455140+mvanhorn@users.noreply.github.com>

---------

Signed-off-by: Matt Van Horn <455140+mvanhorn@users.noreply.github.com>
Co-authored-by: Matt Van Horn <455140+mvanhorn@users.noreply.github.com>
Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Co-authored-by: ElementBot <android@element.io>
Co-authored-by: Jorge Martin Espinosa <jorgem@element.io>

libraries/compound/src/main/kotlin/io/element/android/compound/theme/ElementTheme.kt

@@ -33,11 +33,13 @@ import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.toArgb
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.unit.dp
+import io.element.android.compound.annotations.CoreColorToken
 import io.element.android.compound.tokens.compoundTypography
 import io.element.android.compound.tokens.generated.SemanticColors
 import io.element.android.compound.tokens.generated.TypographyTokens
 import io.element.android.compound.tokens.generated.compoundColorsDark
 import io.element.android.compound.tokens.generated.compoundColorsLight
+import io.element.android.compound.tokens.generated.internal.DarkColorTokens
 
 /**
  * Inspired from https://medium.com/@lucasyujideveloper/54cbcbde1ace
@@ -94,6 +96,7 @@ internal val LocalCompoundColors = staticCompositionLocalOf { compoundColorsLigh
  * @param typography the Material 3 [Typography] tokens to use. It'll use [compoundTypography] by default.
  * @param content the content to apply the theme to.
  */
+@OptIn(CoreColorToken::class)
 @Composable
 fun ElementTheme(
     theme: Theme = if (isSystemInDarkTheme()) Theme.Dark else Theme.Light,
@@ -111,7 +114,10 @@ fun ElementTheme(
     val darkTheme = theme.isDark()
     val currentCompoundColor = when {
         darkTheme -> if (theme == Theme.Black) {
-            compoundDark.copy(bgCanvasDefault = Color.Black)
+            compoundDark.copy(
+                bgCanvasDefault = Color.Black,
+                separatorSecondary = DarkColorTokens.colorGray400,
+            )
         } else {
             compoundDark
         }