Merge pull request #55 from element-hq/bma/highContrast

Sync with compound-design-tokens

README.md

@@ -18,7 +18,7 @@ All tokens can be accessed through the `ElementTheme` object, which contains the
 
 ## Adding new tokens
 
-All new tokens **should** come from Compound and added to the `compound.generated` package. To map the literal tokens to the semantic ones, you'll have to update both `compoundColorsLight` and `compoundColorsDark` in `CompoundColors.kt`.
+All new tokens **should** come from Compound and added to the `compound.generated` package. Same thing for the value of `compoundColorsLight`, `compoundColorsDark`, `compoundColorsHcLight` and `compoundColorsHcDark`.
 
 ## Unit tests
 

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

@@ -31,16 +31,15 @@ import androidx.compose.runtime.Composable
 import androidx.compose.runtime.CompositionLocalProvider
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.ReadOnlyComposable
-import androidx.compose.runtime.remember
 import androidx.compose.runtime.staticCompositionLocalOf
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.toArgb
 import androidx.compose.ui.platform.LocalContext
-import io.element.android.compound.tokens.compoundColorsDark
-import io.element.android.compound.tokens.compoundColorsLight
 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
 
 /**
  * Inspired from https://medium.com/@lucasyujideveloper/54cbcbde1ace

compound/src/main/kotlin/io/element/android/compound/tokens/generated/CompoundIcons.kt

@@ -14,6 +14,14 @@
  * limitations under the License.
  */
 
+/**
+ * !!! WARNING !!!
+ * 
+ * THIS IS AN AUTOGENERATED FILE.
+ * DO NOT EDIT MANUALLY.
+ */
+
+
 
 @file:Suppress("all")
 package io.element.android.compound.tokens.generated
@@ -169,6 +177,9 @@ object CompoundIcons {
     @Composable fun Extensions(): ImageVector {
         return ImageVector.vectorResource(R.drawable.ic_compound_extensions)
     }
+    @Composable fun ExtensionsSolid(): ImageVector {
+        return ImageVector.vectorResource(R.drawable.ic_compound_extensions_solid)
+    }
     @Composable fun Favourite(): ImageVector {
         return ImageVector.vectorResource(R.drawable.ic_compound_favourite)
     }
@@ -283,6 +294,12 @@ object CompoundIcons {
     @Composable fun LockSolid(): ImageVector {
         return ImageVector.vectorResource(R.drawable.ic_compound_lock_solid)
     }
+    @Composable fun MarkAsRead(): ImageVector {
+        return ImageVector.vectorResource(R.drawable.ic_compound_mark_as_read)
+    }
+    @Composable fun MarkAsUnread(): ImageVector {
+        return ImageVector.vectorResource(R.drawable.ic_compound_mark_as_unread)
+    }
     @Composable fun MarkerReadReceipts(): ImageVector {
         return ImageVector.vectorResource(R.drawable.ic_compound_marker_read_receipts)
     }
@@ -304,6 +321,9 @@ object CompoundIcons {
     @Composable fun MicOnSolid(): ImageVector {
         return ImageVector.vectorResource(R.drawable.ic_compound_mic_on_solid)
     }
+    @Composable fun Minus(): ImageVector {
+        return ImageVector.vectorResource(R.drawable.ic_compound_minus)
+    }
     @Composable fun Mobile(): ImageVector {
         return ImageVector.vectorResource(R.drawable.ic_compound_mobile)
     }
@@ -573,6 +593,7 @@ object CompoundIcons {
         Expand(),
         ExportArchive(),
         Extensions(),
+        ExtensionsSolid(),
         Favourite(),
         FavouriteSolid(),
         FileError(),
@@ -611,13 +632,16 @@ object CompoundIcons {
         Lock(),
         LockOff(),
         LockSolid(),
+        MarkAsRead(),
+        MarkAsUnread(),
         MarkerReadReceipts(),
         Mention(),
         Menu(),
         MicOff(),
         MicOffSolid(),
         MicOn(),
         MicOnSolid(),
+        Minus(),
         Mobile(),
         Notifications(),
         NotificationsOff(),
@@ -742,6 +766,7 @@ object CompoundIcons {
         R.drawable.ic_compound_expand,
         R.drawable.ic_compound_export_archive,
         R.drawable.ic_compound_extensions,
+        R.drawable.ic_compound_extensions_solid,
         R.drawable.ic_compound_favourite,
         R.drawable.ic_compound_favourite_solid,
         R.drawable.ic_compound_file_error,
@@ -780,13 +805,16 @@ object CompoundIcons {
         R.drawable.ic_compound_lock,
         R.drawable.ic_compound_lock_off,
         R.drawable.ic_compound_lock_solid,
+        R.drawable.ic_compound_mark_as_read,
+        R.drawable.ic_compound_mark_as_unread,
         R.drawable.ic_compound_marker_read_receipts,
         R.drawable.ic_compound_mention,
         R.drawable.ic_compound_menu,
         R.drawable.ic_compound_mic_off,
         R.drawable.ic_compound_mic_off_solid,
         R.drawable.ic_compound_mic_on,
         R.drawable.ic_compound_mic_on_solid,
+        R.drawable.ic_compound_minus,
         R.drawable.ic_compound_mobile,
         R.drawable.ic_compound_notifications,
         R.drawable.ic_compound_notifications_off,

compound/src/main/kotlin/io/element/android/compound/tokens/generated/SemanticColors.kt

@@ -15,15 +15,25 @@
  */
 
 @file:Suppress("all")
-
 package io.element.android.compound.tokens.generated
 
 import androidx.compose.runtime.Immutable
 import androidx.compose.ui.graphics.Color
 
+
 /**
- * This class holds all the semantic tokens of the Compound theme.
+ * !!! WARNING !!!
+ * 
+ * THIS IS AN AUTOGENERATED FILE.
+ * DO NOT EDIT MANUALLY.
  */
+
+
+
+
+/**
+  * This class holds all the semantic tokens of the Compound theme.
+  */
 @Immutable
 data class SemanticColors(
     /** Background colour for accent or brand actions. State: Hover */
@@ -46,7 +56,8 @@ data class SemanticColors(
     val bgActionSecondaryPressed: Color,
     /** Background colour for secondary actions. State: Rest. */
     val bgActionSecondaryRest: Color,
-    /** Default global background for the user interface. Elevation: Default (Level 0) */
+    /** Default global background for the user interface.
+Elevation: Default (Level 0) */
     val bgCanvasDefault: Color,
     /** Default background for disabled elements. There's no minimum contrast requirement. */
     val bgCanvasDisabled: Color,
@@ -72,9 +83,11 @@ data class SemanticColors(
     val bgDecorative6: Color,
     /** Subtle background colour for informational elements. State: Rest. */
     val bgInfoSubtle: Color,
-    /** Medium contrast surfaces. Elevation: Default (Level 2). */
+    /** Medium contrast surfaces.
+Elevation: Default (Level 2). */
     val bgSubtlePrimary: Color,
-    /** Low contrast surfaces. Elevation: Default (Level 1). */
+    /** Low contrast surfaces.
+Elevation: Default (Level 1). */
     val bgSubtleSecondary: Color,
     /** Subtle background colour for success state elements. State: Rest. */
     val bgSuccessSubtle: Color,
@@ -98,6 +111,8 @@ data class SemanticColors(
     val borderInteractiveSecondary: Color,
     /** Subtle border colour for success state elements. */
     val borderSuccessSubtle: Color,
+    /** Highest contrast accessible accent icons. */
+    val iconAccentPrimary: Color,
     /** Lowest contrast accessible accent icons. */
     val iconAccentTertiary: Color,
     /** High-contrast icon for critical state. State: Rest. */

compound/src/main/kotlin/io/element/android/compound/tokens/generated/SemanticColorsDark.kt

@@ -0,0 +1,105 @@
+/*
+ * Copyright (c) 2024 New Vector Ltd
+ *
+ * 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.
+ */
+/**
+ * !!! WARNING !!!
+ * 
+ * THIS IS AN AUTOGENERATED FILE.
+ * DO NOT EDIT MANUALLY.
+ */
+
+
+
+@file:Suppress("all")
+package io.element.android.compound.tokens.generated
+
+import io.element.android.compound.annotations.CoreColorToken
+import io.element.android.compound.tokens.generated.internal.DarkColorTokens
+
+/**
+ * Semantic colors for the dark Compound theme.
+ */
+@OptIn(CoreColorToken::class)
+val compoundColorsDark = SemanticColors(
+    bgAccentHovered = DarkColorTokens.colorGreen1000,
+    bgAccentPressed = DarkColorTokens.colorGreen1100,
+    bgAccentRest = DarkColorTokens.colorGreen900,
+    bgActionPrimaryDisabled = DarkColorTokens.colorGray700,
+    bgActionPrimaryHovered = DarkColorTokens.colorGray1200,
+    bgActionPrimaryPressed = DarkColorTokens.colorGray1100,
+    bgActionPrimaryRest = DarkColorTokens.colorGray1400,
+    bgActionSecondaryHovered = DarkColorTokens.colorAlphaGray200,
+    bgActionSecondaryPressed = DarkColorTokens.colorAlphaGray300,
+    bgActionSecondaryRest = DarkColorTokens.colorThemeBg,
+    bgCanvasDefault = DarkColorTokens.colorThemeBg,
+    bgCanvasDisabled = DarkColorTokens.colorGray200,
+    bgCriticalHovered = DarkColorTokens.colorRed1000,
+    bgCriticalPrimary = DarkColorTokens.colorRed900,
+    bgCriticalSubtle = DarkColorTokens.colorRed200,
+    bgCriticalSubtleHovered = DarkColorTokens.colorRed300,
+    bgDecorative1 = DarkColorTokens.colorLime300,
+    bgDecorative2 = DarkColorTokens.colorCyan300,
+    bgDecorative3 = DarkColorTokens.colorFuchsia300,
+    bgDecorative4 = DarkColorTokens.colorPurple300,
+    bgDecorative5 = DarkColorTokens.colorPink300,
+    bgDecorative6 = DarkColorTokens.colorOrange300,
+    bgInfoSubtle = DarkColorTokens.colorBlue200,
+    bgSubtlePrimary = DarkColorTokens.colorGray400,
+    bgSubtleSecondary = DarkColorTokens.colorGray300,
+    bgSuccessSubtle = DarkColorTokens.colorGreen200,
+    borderCriticalHovered = DarkColorTokens.colorRed1000,
+    borderCriticalPrimary = DarkColorTokens.colorRed900,
+    borderCriticalSubtle = DarkColorTokens.colorRed500,
+    borderDisabled = DarkColorTokens.colorGray500,
+    borderFocused = DarkColorTokens.colorBlue900,
+    borderInfoSubtle = DarkColorTokens.colorBlue500,
+    borderInteractiveHovered = DarkColorTokens.colorGray1100,
+    borderInteractivePrimary = DarkColorTokens.colorGray800,
+    borderInteractiveSecondary = DarkColorTokens.colorGray600,
+    borderSuccessSubtle = DarkColorTokens.colorGreen500,
+    iconAccentPrimary = DarkColorTokens.colorGreen900,
+    iconAccentTertiary = DarkColorTokens.colorGreen800,
+    iconCriticalPrimary = DarkColorTokens.colorRed900,
+    iconDisabled = DarkColorTokens.colorGray700,
+    iconInfoPrimary = DarkColorTokens.colorBlue900,
+    iconOnSolidPrimary = DarkColorTokens.colorThemeBg,
+    iconPrimary = DarkColorTokens.colorGray1400,
+    iconPrimaryAlpha = DarkColorTokens.colorAlphaGray1400,
+    iconQuaternary = DarkColorTokens.colorGray700,
+    iconQuaternaryAlpha = DarkColorTokens.colorAlphaGray700,
+    iconSecondary = DarkColorTokens.colorGray900,
+    iconSecondaryAlpha = DarkColorTokens.colorAlphaGray900,
+    iconSuccessPrimary = DarkColorTokens.colorGreen900,
+    iconTertiary = DarkColorTokens.colorGray800,
+    iconTertiaryAlpha = DarkColorTokens.colorAlphaGray800,
+    textActionAccent = DarkColorTokens.colorGreen900,
+    textActionPrimary = DarkColorTokens.colorGray1400,
+    textCriticalPrimary = DarkColorTokens.colorRed900,
+    textDecorative1 = DarkColorTokens.colorLime1100,
+    textDecorative2 = DarkColorTokens.colorCyan1100,
+    textDecorative3 = DarkColorTokens.colorFuchsia1100,
+    textDecorative4 = DarkColorTokens.colorPurple1100,
+    textDecorative5 = DarkColorTokens.colorPink1100,
+    textDecorative6 = DarkColorTokens.colorOrange1100,
+    textDisabled = DarkColorTokens.colorGray800,
+    textInfoPrimary = DarkColorTokens.colorBlue900,
+    textLinkExternal = DarkColorTokens.colorBlue900,
+    textOnSolidPrimary = DarkColorTokens.colorThemeBg,
+    textPlaceholder = DarkColorTokens.colorGray800,
+    textPrimary = DarkColorTokens.colorGray1400,
+    textSecondary = DarkColorTokens.colorGray900,
+    textSuccessPrimary = DarkColorTokens.colorGreen900,
+    isLight = false,
+)