Initial compound-based SC theme bringup

matrix-react-sdk

@@ -1 +1 @@
-Subproject commit d3777969edf2d708afcbe8b66f843f57a8f03e97
+Subproject commit d160a1bbdef8a93a2139e0e159a5fc5eb7c8ed7a

patches/element-desktop/0002-Add-back-schildi-fetch-package.ts-modifications.patch

@@ -58,5 +58,5 @@ index 54da3f3..354f039 100644
      if (!haveDeploy) {
          const outPath = path.join(pkgDir, filename);
 -- 
-2.46.2
+2.47.0
 

patches/matrix-js-sdk/0001-Add-fields-for-media-caption-support.patch

@@ -52,5 +52,5 @@ index 1128b40d3..d85526642 100644
  
  /**
 -- 
-2.46.2
+2.47.0
 

patches/matrix-react-sdk/0001-Disable-sticky-rooms.patch

@@ -25,5 +25,5 @@ index c3450d70cf..e296676149 100644
      }
  
 -- 
-2.46.2
+2.47.0
 

patches/matrix-react-sdk/0002-Bring-back-unified-room-list.patch

@@ -259,5 +259,5 @@ index 50cecda665..8efc2d040d 100644
      DefaultTagID.Conference,
      DefaultTagID.Untagged,
 -- 
-2.46.2
+2.47.0
 

patches/matrix-react-sdk/0003-Don-t-sort-muted-rooms-to-bottom-I-still-want-to-see.patch

@@ -21,5 +21,5 @@ index 67ee1ca084..67dcaa3855 100644
  
      /**
 -- 
-2.46.2
+2.47.0
 

patches/matrix-react-sdk/0004-Add-support-for-rendering-captions-in-media-messages.patch

@@ -100,5 +100,5 @@ index 194cb31d20..0c0aec2138 100644
          // file extension.
          text = content.body;
 -- 
-2.46.2
+2.47.0
 

patches/matrix-react-sdk/0005-Don-t-preview-reactions.patch

@@ -25,5 +25,5 @@ index e0e06ec980..7ee27f8402 100644
          isState: false,
          previewer: new PollStartEventPreview(),
 -- 
-2.46.2
+2.47.0
 

patches/matrix-react-sdk/0006-Hide-the-mute-notification-state-the-same-way-as-the.patch

@@ -26,5 +26,5 @@ index 93fb42f447..09df8eaac9 100644
  
          return (
 -- 
-2.46.2
+2.47.0
 

patches/matrix-react-sdk/0007-Allow-muted-rooms-to-render-as-unread.patch

@@ -21,5 +21,5 @@ index cc027c9682..c4c31a51cb 100644
      }
  
 -- 
-2.46.2
+2.47.0
 

patches/matrix-react-sdk/0008-Increase-default-visible-tiles.patch

@@ -21,5 +21,5 @@ index ff60309e08..275b6d330b 100644
  
      public tilesWithPadding(n: number, paddingPx: number): number {
 -- 
-2.46.2
+2.47.0
 

patches/matrix-react-sdk/0009-Bring-back-showSpaceDMBadges-setting-force-enabled-f.patch

@@ -88,5 +88,5 @@ index 90358f3310..60df05478a 100644
                          const newValue = SettingsStore.getValue("Spaces.enabledMetaSpaces");
                          const enabledMetaSpaces = metaSpaceOrder.filter((k) => newValue[k]);
 -- 
-2.46.2
+2.47.0
 

patches/matrix-react-sdk/0010-Squashed-Freeform-reactions-from-tadzik-freeform-rea.patch

@@ -130,5 +130,5 @@ index 2c2eb442a0..62bfd2ea0f 100644
                  isEmojiDisabled={this.isEmojiDisabled}
                  onFinished={this.props.onFinished}
 -- 
-2.46.2
+2.47.0
 

patches/matrix-react-sdk/0011-Allow-reactions-to-take-more-space.patch

@@ -28,5 +28,5 @@ index f2e3885de4..2a8bb9224e 100644
          white-space: nowrap;
          text-overflow: ellipsis;
 -- 
-2.46.2
+2.47.0
 

patches/matrix-react-sdk/0012-On-space-switch-don-t-automatically-show-last-opened.patch

@@ -75,5 +75,5 @@ index 60df05478a..0be7ba190a 100644
                  cliSpace?.getMyMembership() !== KnownMembership.Invite &&
                  this.matrixClient.getRoom(roomId)?.getMyMembership() === KnownMembership.Join &&
 -- 
-2.46.2
+2.47.0
 

patches/matrix-react-sdk/0013-Exclude-spaces-from-breadcrumbs.patch

@@ -20,5 +20,5 @@ index 9859f24015..957b54286c 100644
          const rooms = (this.state.rooms || []).slice(); // cheap clone
          const msc3946ProcessDynamicPredecessor = SettingsStore.getValue("feature_dynamic_room_predecessors");
 -- 
-2.46.2
+2.47.0
 

patches/matrix-react-sdk/0014-Stop-the-search-bar-wobble.patch

@@ -20,5 +20,5 @@ index 05a3dac067..7861af6381 100644
  
  /* FIXME THEME - Tint by CSS rather than referencing a duplicate asset */
 -- 
-2.46.2
+2.47.0
 

patches/matrix-react-sdk/0016-Import-SC-compound-theme-overrides.patch

@@ -0,0 +1,34 @@
+From 8b2c552f798e64974d0a0380f55cadb4f72dd67c Mon Sep 17 00:00:00 2001
+From: SpiritCroc <dev@spiritcroc.de>
+Date: Sun, 13 Oct 2024 11:23:54 +0200
+Subject: Import SC compound theme overrides
+
+---
+ res/css/_common.pcss         | 1 +
+ res/css/sc-cpd-overrides.css | 1 +
+ 2 files changed, 2 insertions(+)
+ create mode 120000 res/css/sc-cpd-overrides.css
+
+diff --git a/res/css/_common.pcss b/res/css/_common.pcss
+index 7861af6381..f7a660a339 100644
+--- a/res/css/_common.pcss
++++ b/res/css/_common.pcss
+@@ -11,6 +11,7 @@ Please see LICENSE files in the repository root for full details.
+ 
+ @import url("@vector-im/compound-design-tokens/assets/web/css/compound-design-tokens.css") layer(compound);
+ @import url("@vector-im/compound-web/dist/style.css");
++@import "./sc-cpd-overrides.css";
+ @import "./_font-sizes.pcss";
+ @import "./_animations.pcss";
+ @import "./_spacing.pcss";
+diff --git a/res/css/sc-cpd-overrides.css b/res/css/sc-cpd-overrides.css
+new file mode 120000
+index 0000000000..532e96fddc
+--- /dev/null
++++ b/res/css/sc-cpd-overrides.css
+@@ -0,0 +1 @@
++../../../res/css/sc-cpd-overrides.css
+\ No newline at end of file
+-- 
+2.47.0
+

res/css/sc-cpd-overrides.css

@@ -0,0 +1,172 @@
+/*
+ * Upstream file for reference:
+ * - Dark: https://github.com/element-hq/compound-design-tokens/blob/main/assets/web/css/cpd-theme-dark-base.css
+ * - Light: https://github.com/element-hq/compound-design-tokens/blob/main/assets/web/css/cpd-theme-light-base.css
+ */
+
+.cpd-theme-dark.cpd-theme-dark {
+  /* TODO?
+  --cpd-color-alpha-green-1400: hsla(152, 88%, 94%, 0.96);
+  --cpd-color-alpha-green-1300: hsla(152, 93%, 88%, 0.91);
+  --cpd-color-alpha-green-1200: hsla(156, 97%, 76%, 0.83);
+  --cpd-color-alpha-green-1100: hsla(162, 98%, 57%, 0.74);
+  --cpd-color-alpha-green-1000: hsla(163, 99%, 55%, 0.65);
+  --cpd-color-alpha-green-900: hsla(164, 98%, 53%, 0.58);
+  --cpd-color-alpha-green-800: hsl(168, 100%, 24%, 1);
+  --cpd-color-alpha-green-700: hsl(165, 100%, 18%, 1);
+  --cpd-color-alpha-green-600: hsl(162, 100%, 14%, 1);
+  --cpd-color-alpha-green-500: hsl(160, 100%, 12%, 1);
+  --cpd-color-alpha-green-400: hsl(155, 100%, 9%, 1);
+  --cpd-color-alpha-green-300: hsl(151, 100%, 7%, 1);
+  --cpd-color-alpha-green-200: hsl(147, 100%, 6%, 1);
+  --cpd-color-alpha-green-100: hsl(144, 100%, 6%, 1);
+
+  --cpd-color-alpha-gray-1400: hsla(214, 78%, 98%, 0.95);
+  --cpd-color-alpha-gray-1300: hsla(213, 73%, 97%, 0.89);
+  --cpd-color-alpha-gray-1200: hsla(215, 74%, 96%, 0.79);
+  --cpd-color-alpha-gray-1100: hsla(215, 92%, 95%, 0.68);
+  --cpd-color-alpha-gray-1000: hsla(213, 93%, 94%, 0.61);
+  --cpd-color-alpha-gray-900: hsla(211, 94%, 94%, 0.54);
+  --cpd-color-alpha-gray-800: hsla(216, 100%, 94%, 0.41);
+  --cpd-color-alpha-gray-700: hsla(213, 85%, 95%, 0.27);
+  --cpd-color-alpha-gray-600: hsla(225, 46%, 95%, 0.2);
+  --cpd-color-alpha-gray-500: hsla(214, 41%, 97%, 0.15);
+  --cpd-color-alpha-gray-400: hsla(270, 37%, 93%, 0.1);
+  --cpd-color-alpha-gray-200: hsla(286, 31%, 82%, 0.04);
+  --cpd-color-alpha-gray-100: hsla(214, 10%, 86%, 0.02);
+  */
+  /* Hover of room list items, search bar bg, space icon bg */
+  --cpd-color-alpha-gray-300: rgba(255, 255, 255, 0.06);
+
+  /* TODO more accent variants? */
+  --cpd-color-green-1400: #F1F8E9;
+  --cpd-color-green-1300: #DCEDC8;
+  --cpd-color-green-1200: #C5E1A5;
+  --cpd-color-green-1100: #AED581;
+  --cpd-color-green-1000: #9CCC65;
+  --cpd-color-green-900: #8BC34A;
+  --cpd-color-green-800: #8BC34A;
+  --cpd-color-green-700: #8BC34A;
+  --cpd-color-green-600: #8BC34A;
+  --cpd-color-green-500: #8BC34A;
+  --cpd-color-green-400: #689F38;
+  --cpd-color-green-300: #33691E;
+  --cpd-color-green-200: #33691E;
+  --cpd-color-green-100: #33691E;
+
+  /* TODO
+  --cpd-color-red-1400: #ffe9e6;
+  --cpd-color-red-1300: #ffd4cd;
+  --cpd-color-red-1200: #ffaea4;
+  --cpd-color-red-1100: #ff877c;
+  --cpd-color-red-1000: #ff665d;
+  --cpd-color-red-900: #fd3e3c;
+  --cpd-color-red-800: #d1212a;
+  --cpd-color-red-700: #9f0d1e;
+  --cpd-color-red-600: #830009;
+  --cpd-color-red-500: #710000;
+  --cpd-color-red-400: #590000;
+  --cpd-color-red-300: #470000;
+  --cpd-color-red-200: #3e0000;
+  --cpd-color-red-100: #370000;
+  */
+
+  --cpd-color-gray-1400: #eeeeee;
+  --cpd-color-gray-1300: #e0e0e0;
+  --cpd-color-gray-1200: #b3b3b3;
+  --cpd-color-gray-1100: #aaaaaa;
+  --cpd-color-gray-1000: #9e9e9e;
+  --cpd-color-gray-900: #808080;
+  --cpd-color-gray-800: #757575;
+  --cpd-color-gray-700: #424242;
+  --cpd-color-gray-600: #424242;
+  --cpd-color-gray-500: #424242;
+  --cpd-color-gray-400: #303030;
+  --cpd-color-gray-300: #212121;
+  --cpd-color-gray-200: #212121;
+  --cpd-color-gray-100: #212121;
+  --cpd-color-theme-bg: #212121;
+}
+
+.cpd-theme-light.cpd-theme-light {
+  /* TODO?
+  --cpd-color-alpha-gray-1400: hsla(223, 64%, 2%, 0.9);
+  --cpd-color-alpha-gray-1300: hsla(225, 57%, 3%, 0.84);
+  --cpd-color-alpha-gray-1200: hsla(213, 73%, 3%, 0.77);
+  --cpd-color-alpha-gray-1100: hsla(215, 74%, 5%, 0.71);
+  --cpd-color-alpha-gray-1000: hsla(218, 79%, 6%, 0.66);
+  --cpd-color-alpha-gray-900: hsla(213, 83%, 7%, 0.61);
+  --cpd-color-alpha-gray-800: hsla(213, 87%, 9%, 0.5);
+  --cpd-color-alpha-gray-700: hsla(215, 96%, 10%, 0.35);
+  --cpd-color-alpha-gray-600: hsla(212, 97%, 12%, 0.26);
+  --cpd-color-alpha-gray-500: hsla(212, 87%, 15%, 0.2);
+  --cpd-color-alpha-gray-400: hsla(213, 90%, 20%, 0.12);
+  --cpd-color-alpha-gray-300: hsla(216, 89%, 18%, 0.06);
+  --cpd-color-alpha-gray-200: hsla(200, 41%, 36%, 0.04);
+  --cpd-color-alpha-gray-100: hsla(210, 48%, 41%, 0.02);
+
+  --cpd-color-alpha-green-1400: hsl(149, 100%, 7%, 1);
+  --cpd-color-alpha-green-1300: hsl(157, 100%, 10%, 1);
+  --cpd-color-alpha-green-1200: hsl(162, 100%, 14%, 1);
+  --cpd-color-alpha-green-1100: hsl(165, 100%, 18%, 1);
+  --cpd-color-alpha-green-1000: hsl(166, 100%, 21%, 1);
+  --cpd-color-alpha-green-900: hsl(168, 100%, 24%, 1);
+  --cpd-color-alpha-green-800: hsl(166, 100%, 30%, 1);
+  --cpd-color-alpha-green-700: hsla(163, 99%, 38%, 0.96);
+  --cpd-color-alpha-green-600: hsla(156, 99%, 36%, 0.56);
+  --cpd-color-alpha-green-500: hsla(154, 96%, 37%, 0.41);
+  --cpd-color-alpha-green-400: hsla(151, 93%, 37%, 0.23);
+  --cpd-color-alpha-green-300: hsla(150, 100%, 36%, 0.11);
+  --cpd-color-alpha-green-200: hsla(150, 79%, 41%, 0.06);
+  --cpd-color-alpha-green-100: hsla(156, 79%, 41%, 0.03);
+  */
+
+  /* TODO accent variants? */
+  --cpd-color-green-1400: #33691E;
+  --cpd-color-green-1300: #33691E;
+  --cpd-color-green-1200: #33691E;
+  --cpd-color-green-1100: #33691E;
+  --cpd-color-green-1000: #33691E;
+  --cpd-color-green-900: #33691E;
+  --cpd-color-green-800: #33691E;
+  --cpd-color-green-700: #8BC34A;
+  --cpd-color-green-600: #8BC34A;
+  --cpd-color-green-500: #8BC34A;
+  --cpd-color-green-400: #8BC34A;
+  --cpd-color-green-300: #C5E1A5;
+  --cpd-color-green-200: #DCEDC8;
+  --cpd-color-green-100: #F1F8E9;
+
+  /* TODO
+  --cpd-color-red-1400: #450000;
+  --cpd-color-red-1300: #620000;
+  --cpd-color-red-1200: #850006;
+  --cpd-color-red-1100: #a4041d;
+  --cpd-color-red-1000: #bc0f22;
+  --cpd-color-red-900: #d51928;
+  --cpd-color-red-800: #ff3d3d;
+  --cpd-color-red-700: #ff8c81;
+  --cpd-color-red-600: #ffafa5;
+  --cpd-color-red-500: #ffc5bc;
+  --cpd-color-red-400: #ffdfda;
+  --cpd-color-red-300: #ffefec;
+  --cpd-color-red-200: #fff7f6;
+  --cpd-color-red-100: #fffaf9;
+  */
+
+  --cpd-color-gray-1400: #212121;
+  --cpd-color-gray-1300: #212121;
+  --cpd-color-gray-1200: #424242;
+  --cpd-color-gray-1100: #424242;
+  --cpd-color-gray-1000: #616161;
+  --cpd-color-gray-900: #616161;
+  --cpd-color-gray-800: #808080;
+  --cpd-color-gray-700: #b3b3b3;
+  --cpd-color-gray-600: #b3b3b3;
+  --cpd-color-gray-500: #cdd3da;
+  --cpd-color-gray-400: #e0e0e0;
+  --cpd-color-gray-300: #f5f5f5;
+  --cpd-color-gray-200: #f5f5f5;
+  --cpd-color-gray-100: #fafafa;
+  --cpd-color-theme-bg: #ffffff;
+}

theme.sh

@@ -37,6 +37,8 @@ replace_colors() {
         MESSAGE_BUBBLE_BACKGROUND="#424242"
         MESSAGE_BUBBLE_BACKGROUND_SELF="#303030"
         MESSAGE_BUBBLE_BACKGROUND_SELECTED="#3f4931"
+        ROOMLIST_BG_COLOR="#303030"
+        SPACELIST_BG_COLOR="#424242"
     else
         echo "Replacing colors (light) for $f..."
         BG_ACCENT="$M_ACCENT_LIGHT"
@@ -48,6 +50,8 @@ replace_colors() {
         MESSAGE_BUBBLE_BACKGROUND="#eeeeee"
         MESSAGE_BUBBLE_BACKGROUND_SELF="#f1f8e9"
         MESSAGE_BUBBLE_BACKGROUND_SELECTED="#dbedc6"
+        ROOMLIST_BG_COLOR="#eeeeee"
+        SPACELIST_BG_COLOR="#fafafa"
     fi
     # Neutral colors
     sed -i 's|#15171b|#212121|gi' "$f"
@@ -110,6 +114,7 @@ replace_colors() {
     sed -i 's|rgba(33, 38, 44,|rgba(48, 48, 48,|gi' "$f"
     sed -i 's|rgba(34, 38, 46,|rgba(48, 48, 48,|gi' "$f"
     sed -i 's|rgba(38, 39, 43,|rgba(48, 48, 48,|gi' "$f"
+    sed -i 's|rgba(38, 40, 45,|rgba(48, 48, 48,|gi' "$f"
     sed -i 's|rgba(46, 48, 51,|rgba(48, 48, 48,|gi' "$f"
     sed -i 's|rgba(92, 100, 112,|rgba(97, 97, 97,|gi' "$f"
     sed -i 's|rgba(141, 151, 165,|rgba(144, 144, 144,|gi' "$f"
@@ -127,6 +132,9 @@ replace_colors() {
 
     sed -i "s|\\(\$presence-offline: \\).*;|\\1$PRESENCE_OFFLINE;|gi" "$f"
 
+    sed -i "s|\\(\$roomlist-bg-color: \\).*;|\\1$ROOMLIST_BG_COLOR;|gi" "$f"
+    sed -i "s|\\(\$spacePanel-bg-color: \\).*;|\\1$SPACELIST_BG_COLOR;|gi" "$f"
+
     # Accent colors
     sed -i "s|#368bd6|$M_ACCENT|gi" "$f"
     sed -i "s|#ac3ba8|$M_ACCENT|gi" "$f"