feat: theme mentions and colour spoilers with semantic (#49)

* fix(raw): theme mentions on android * fix(raw): Semantic spoiler theming (more consistent)
catppuccin · Feb 13, 2025 · befe142 · befe142
1 parent 8ebe781
commit befe142
Show file tree

Hide file tree

Showing 57 changed files with 456 additions and 114 deletions.
diff --git a/react_native.tera b/react_native.tera
@@ -63,7 +63,9 @@ whiskers:
     "TEXT_MUTED": [ "{{ subtext0.hex }}", "{{ subtext0.hex }}" ],
     "TEXT_NORMAL": [ "{{ text.hex }}", "{{ text.hex }}" ],
     "TEXT_PRIMARY": [ "{{ text.hex }}", "{{ text.hex }}" ],
-    "THREAD_CHANNEL_SPINE": [ "{{ surface2.hex }}", "{{ surface2.hex }}" ]
+    "THREAD_CHANNEL_SPINE": [ "{{ surface2.hex }}", "{{ surface2.hex }}" ],
+    "SPOILER_HIDDEN_BACKGROUND": [ "{{ surface2.hex }}", "{{ surface2.hex }}" ],
+    "SPOILER_REVEALED_BACKGROUND": [ "{{ surface2.hex }}40", "{{ surface2.hex }}40" ]
   },
   "rawColors": {
     "BRAND_260": "{{ overlay0.hex }}",
@@ -203,7 +205,11 @@ whiskers:
     "YELLOW_860": "{{ yellow.hex }}",
     "YELLOW_900": "{{ yellow.hex }}",
     "WHITE": "{{ base.hex }}",
-    "WHITE_500": "{{ base.hex }}"
+    "WHITE_500": "{{ base.hex }}",
+    "CHAT_MENTIONS_BACKGROUND_DARK": "{{ accent.hex }}4d", {#- Purely native strings, Colours @mention on Android #}
+    "CHAT_MENTIONS_BACKGROUND_LIGHT": "{{ accent.hex }}4d",
+    "CHAT_MENTIONS_FOREGROUND_DARK": "{{ accent.hex }}",
+    "CHAT_MENTIONS_FOREGROUND_LIGHT": "{{ accent.hex }}"
   },
   "plus":{
     "version":"0",

diff --git a/themes/frappe/blue.json b/themes/frappe/blue.json
@@ -50,7 +50,9 @@
     "TEXT_MUTED": [ "#a5adce", "#a5adce" ],
     "TEXT_NORMAL": [ "#c6d0f5", "#c6d0f5" ],
     "TEXT_PRIMARY": [ "#c6d0f5", "#c6d0f5" ],
-    "THREAD_CHANNEL_SPINE": [ "#626880", "#626880" ]
+    "THREAD_CHANNEL_SPINE": [ "#626880", "#626880" ],
+    "SPOILER_HIDDEN_BACKGROUND": [ "#626880", "#626880" ],
+    "SPOILER_REVEALED_BACKGROUND": [ "#62688040", "#62688040" ]
   },
   "rawColors": {
     "BRAND_260": "#737994",
@@ -190,7 +192,11 @@
     "YELLOW_860": "#e5c890",
     "YELLOW_900": "#e5c890",
     "WHITE": "#303446",
-    "WHITE_500": "#303446"
+    "WHITE_500": "#303446",
+    "CHAT_MENTIONS_BACKGROUND_DARK": "#8caaee4d",
+    "CHAT_MENTIONS_BACKGROUND_LIGHT": "#8caaee4d",
+    "CHAT_MENTIONS_FOREGROUND_DARK": "#8caaee",
+    "CHAT_MENTIONS_FOREGROUND_LIGHT": "#8caaee"
   },
   "plus":{
     "version":"0",

diff --git a/themes/frappe/flamingo.json b/themes/frappe/flamingo.json
@@ -50,7 +50,9 @@
     "TEXT_MUTED": [ "#a5adce", "#a5adce" ],
     "TEXT_NORMAL": [ "#c6d0f5", "#c6d0f5" ],
     "TEXT_PRIMARY": [ "#c6d0f5", "#c6d0f5" ],
-    "THREAD_CHANNEL_SPINE": [ "#626880", "#626880" ]
+    "THREAD_CHANNEL_SPINE": [ "#626880", "#626880" ],
+    "SPOILER_HIDDEN_BACKGROUND": [ "#626880", "#626880" ],
+    "SPOILER_REVEALED_BACKGROUND": [ "#62688040", "#62688040" ]
   },
   "rawColors": {
     "BRAND_260": "#737994",
@@ -190,7 +192,11 @@
     "YELLOW_860": "#e5c890",
     "YELLOW_900": "#e5c890",
     "WHITE": "#303446",
-    "WHITE_500": "#303446"
+    "WHITE_500": "#303446",
+    "CHAT_MENTIONS_BACKGROUND_DARK": "#eebebe4d",
+    "CHAT_MENTIONS_BACKGROUND_LIGHT": "#eebebe4d",
+    "CHAT_MENTIONS_FOREGROUND_DARK": "#eebebe",
+    "CHAT_MENTIONS_FOREGROUND_LIGHT": "#eebebe"
   },
   "plus":{
     "version":"0",

diff --git a/themes/frappe/green.json b/themes/frappe/green.json
@@ -50,7 +50,9 @@
     "TEXT_MUTED": [ "#a5adce", "#a5adce" ],
     "TEXT_NORMAL": [ "#c6d0f5", "#c6d0f5" ],
     "TEXT_PRIMARY": [ "#c6d0f5", "#c6d0f5" ],
-    "THREAD_CHANNEL_SPINE": [ "#626880", "#626880" ]
+    "THREAD_CHANNEL_SPINE": [ "#626880", "#626880" ],
+    "SPOILER_HIDDEN_BACKGROUND": [ "#626880", "#626880" ],
+    "SPOILER_REVEALED_BACKGROUND": [ "#62688040", "#62688040" ]
   },
   "rawColors": {
     "BRAND_260": "#737994",
@@ -190,7 +192,11 @@
     "YELLOW_860": "#e5c890",
     "YELLOW_900": "#e5c890",
     "WHITE": "#303446",
-    "WHITE_500": "#303446"
+    "WHITE_500": "#303446",
+    "CHAT_MENTIONS_BACKGROUND_DARK": "#a6d1894d",
+    "CHAT_MENTIONS_BACKGROUND_LIGHT": "#a6d1894d",
+    "CHAT_MENTIONS_FOREGROUND_DARK": "#a6d189",
+    "CHAT_MENTIONS_FOREGROUND_LIGHT": "#a6d189"
   },
   "plus":{
     "version":"0",

diff --git a/themes/frappe/lavender.json b/themes/frappe/lavender.json
@@ -50,7 +50,9 @@
     "TEXT_MUTED": [ "#a5adce", "#a5adce" ],
     "TEXT_NORMAL": [ "#c6d0f5", "#c6d0f5" ],
     "TEXT_PRIMARY": [ "#c6d0f5", "#c6d0f5" ],
-    "THREAD_CHANNEL_SPINE": [ "#626880", "#626880" ]
+    "THREAD_CHANNEL_SPINE": [ "#626880", "#626880" ],
+    "SPOILER_HIDDEN_BACKGROUND": [ "#626880", "#626880" ],
+    "SPOILER_REVEALED_BACKGROUND": [ "#62688040", "#62688040" ]
   },
   "rawColors": {
     "BRAND_260": "#737994",
@@ -190,7 +192,11 @@
     "YELLOW_860": "#e5c890",
     "YELLOW_900": "#e5c890",
     "WHITE": "#303446",
-    "WHITE_500": "#303446"
+    "WHITE_500": "#303446",
+    "CHAT_MENTIONS_BACKGROUND_DARK": "#babbf14d",
+    "CHAT_MENTIONS_BACKGROUND_LIGHT": "#babbf14d",
+    "CHAT_MENTIONS_FOREGROUND_DARK": "#babbf1",
+    "CHAT_MENTIONS_FOREGROUND_LIGHT": "#babbf1"
   },
   "plus":{
     "version":"0",

diff --git a/themes/frappe/maroon.json b/themes/frappe/maroon.json
@@ -50,7 +50,9 @@
     "TEXT_MUTED": [ "#a5adce", "#a5adce" ],
     "TEXT_NORMAL": [ "#c6d0f5", "#c6d0f5" ],
     "TEXT_PRIMARY": [ "#c6d0f5", "#c6d0f5" ],
-    "THREAD_CHANNEL_SPINE": [ "#626880", "#626880" ]
+    "THREAD_CHANNEL_SPINE": [ "#626880", "#626880" ],
+    "SPOILER_HIDDEN_BACKGROUND": [ "#626880", "#626880" ],
+    "SPOILER_REVEALED_BACKGROUND": [ "#62688040", "#62688040" ]
   },
   "rawColors": {
     "BRAND_260": "#737994",
@@ -190,7 +192,11 @@
     "YELLOW_860": "#e5c890",
     "YELLOW_900": "#e5c890",
     "WHITE": "#303446",
-    "WHITE_500": "#303446"
+    "WHITE_500": "#303446",
+    "CHAT_MENTIONS_BACKGROUND_DARK": "#ea999c4d",
+    "CHAT_MENTIONS_BACKGROUND_LIGHT": "#ea999c4d",
+    "CHAT_MENTIONS_FOREGROUND_DARK": "#ea999c",
+    "CHAT_MENTIONS_FOREGROUND_LIGHT": "#ea999c"
   },
   "plus":{
     "version":"0",

diff --git a/themes/frappe/mauve.json b/themes/frappe/mauve.json
@@ -50,7 +50,9 @@
     "TEXT_MUTED": [ "#a5adce", "#a5adce" ],
     "TEXT_NORMAL": [ "#c6d0f5", "#c6d0f5" ],
     "TEXT_PRIMARY": [ "#c6d0f5", "#c6d0f5" ],
-    "THREAD_CHANNEL_SPINE": [ "#626880", "#626880" ]
+    "THREAD_CHANNEL_SPINE": [ "#626880", "#626880" ],
+    "SPOILER_HIDDEN_BACKGROUND": [ "#626880", "#626880" ],
+    "SPOILER_REVEALED_BACKGROUND": [ "#62688040", "#62688040" ]
   },
   "rawColors": {
     "BRAND_260": "#737994",
@@ -190,7 +192,11 @@
     "YELLOW_860": "#e5c890",
     "YELLOW_900": "#e5c890",
     "WHITE": "#303446",
-    "WHITE_500": "#303446"
+    "WHITE_500": "#303446",
+    "CHAT_MENTIONS_BACKGROUND_DARK": "#ca9ee64d",
+    "CHAT_MENTIONS_BACKGROUND_LIGHT": "#ca9ee64d",
+    "CHAT_MENTIONS_FOREGROUND_DARK": "#ca9ee6",
+    "CHAT_MENTIONS_FOREGROUND_LIGHT": "#ca9ee6"
   },
   "plus":{
     "version":"0",

diff --git a/themes/frappe/peach.json b/themes/frappe/peach.json
@@ -50,7 +50,9 @@
     "TEXT_MUTED": [ "#a5adce", "#a5adce" ],
     "TEXT_NORMAL": [ "#c6d0f5", "#c6d0f5" ],
     "TEXT_PRIMARY": [ "#c6d0f5", "#c6d0f5" ],
-    "THREAD_CHANNEL_SPINE": [ "#626880", "#626880" ]
+    "THREAD_CHANNEL_SPINE": [ "#626880", "#626880" ],
+    "SPOILER_HIDDEN_BACKGROUND": [ "#626880", "#626880" ],
+    "SPOILER_REVEALED_BACKGROUND": [ "#62688040", "#62688040" ]
   },
   "rawColors": {
     "BRAND_260": "#737994",
@@ -190,7 +192,11 @@
     "YELLOW_860": "#e5c890",
     "YELLOW_900": "#e5c890",
     "WHITE": "#303446",
-    "WHITE_500": "#303446"
+    "WHITE_500": "#303446",
+    "CHAT_MENTIONS_BACKGROUND_DARK": "#ef9f764d",
+    "CHAT_MENTIONS_BACKGROUND_LIGHT": "#ef9f764d",
+    "CHAT_MENTIONS_FOREGROUND_DARK": "#ef9f76",
+    "CHAT_MENTIONS_FOREGROUND_LIGHT": "#ef9f76"
   },
   "plus":{
     "version":"0",

diff --git a/themes/frappe/pink.json b/themes/frappe/pink.json
@@ -50,7 +50,9 @@
     "TEXT_MUTED": [ "#a5adce", "#a5adce" ],
     "TEXT_NORMAL": [ "#c6d0f5", "#c6d0f5" ],
     "TEXT_PRIMARY": [ "#c6d0f5", "#c6d0f5" ],
-    "THREAD_CHANNEL_SPINE": [ "#626880", "#626880" ]
+    "THREAD_CHANNEL_SPINE": [ "#626880", "#626880" ],
+    "SPOILER_HIDDEN_BACKGROUND": [ "#626880", "#626880" ],
+    "SPOILER_REVEALED_BACKGROUND": [ "#62688040", "#62688040" ]
   },
   "rawColors": {
     "BRAND_260": "#737994",
@@ -190,7 +192,11 @@
     "YELLOW_860": "#e5c890",
     "YELLOW_900": "#e5c890",
     "WHITE": "#303446",
-    "WHITE_500": "#303446"
+    "WHITE_500": "#303446",
+    "CHAT_MENTIONS_BACKGROUND_DARK": "#f4b8e44d",
+    "CHAT_MENTIONS_BACKGROUND_LIGHT": "#f4b8e44d",
+    "CHAT_MENTIONS_FOREGROUND_DARK": "#f4b8e4",
+    "CHAT_MENTIONS_FOREGROUND_LIGHT": "#f4b8e4"
   },
   "plus":{
     "version":"0",

diff --git a/themes/frappe/red.json b/themes/frappe/red.json
@@ -50,7 +50,9 @@
     "TEXT_MUTED": [ "#a5adce", "#a5adce" ],
     "TEXT_NORMAL": [ "#c6d0f5", "#c6d0f5" ],
     "TEXT_PRIMARY": [ "#c6d0f5", "#c6d0f5" ],
-    "THREAD_CHANNEL_SPINE": [ "#626880", "#626880" ]
+    "THREAD_CHANNEL_SPINE": [ "#626880", "#626880" ],
+    "SPOILER_HIDDEN_BACKGROUND": [ "#626880", "#626880" ],
+    "SPOILER_REVEALED_BACKGROUND": [ "#62688040", "#62688040" ]
   },
   "rawColors": {
     "BRAND_260": "#737994",
@@ -190,7 +192,11 @@
     "YELLOW_860": "#e5c890",
     "YELLOW_900": "#e5c890",
     "WHITE": "#303446",
-    "WHITE_500": "#303446"
+    "WHITE_500": "#303446",
+    "CHAT_MENTIONS_BACKGROUND_DARK": "#e782844d",
+    "CHAT_MENTIONS_BACKGROUND_LIGHT": "#e782844d",
+    "CHAT_MENTIONS_FOREGROUND_DARK": "#e78284",
+    "CHAT_MENTIONS_FOREGROUND_LIGHT": "#e78284"
   },
   "plus":{
     "version":"0",

diff --git a/themes/frappe/rosewater.json b/themes/frappe/rosewater.json
@@ -50,7 +50,9 @@
     "TEXT_MUTED": [ "#a5adce", "#a5adce" ],
     "TEXT_NORMAL": [ "#c6d0f5", "#c6d0f5" ],
     "TEXT_PRIMARY": [ "#c6d0f5", "#c6d0f5" ],
-    "THREAD_CHANNEL_SPINE": [ "#626880", "#626880" ]
+    "THREAD_CHANNEL_SPINE": [ "#626880", "#626880" ],
+    "SPOILER_HIDDEN_BACKGROUND": [ "#626880", "#626880" ],
+    "SPOILER_REVEALED_BACKGROUND": [ "#62688040", "#62688040" ]
   },
   "rawColors": {
     "BRAND_260": "#737994",
@@ -190,7 +192,11 @@
     "YELLOW_860": "#e5c890",
     "YELLOW_900": "#e5c890",
     "WHITE": "#303446",
-    "WHITE_500": "#303446"
+    "WHITE_500": "#303446",
+    "CHAT_MENTIONS_BACKGROUND_DARK": "#f2d5cf4d",
+    "CHAT_MENTIONS_BACKGROUND_LIGHT": "#f2d5cf4d",
+    "CHAT_MENTIONS_FOREGROUND_DARK": "#f2d5cf",
+    "CHAT_MENTIONS_FOREGROUND_LIGHT": "#f2d5cf"
   },
   "plus":{
     "version":"0",

diff --git a/themes/frappe/sapphire.json b/themes/frappe/sapphire.json
@@ -50,7 +50,9 @@
     "TEXT_MUTED": [ "#a5adce", "#a5adce" ],
     "TEXT_NORMAL": [ "#c6d0f5", "#c6d0f5" ],
     "TEXT_PRIMARY": [ "#c6d0f5", "#c6d0f5" ],
-    "THREAD_CHANNEL_SPINE": [ "#626880", "#626880" ]
+    "THREAD_CHANNEL_SPINE": [ "#626880", "#626880" ],
+    "SPOILER_HIDDEN_BACKGROUND": [ "#626880", "#626880" ],
+    "SPOILER_REVEALED_BACKGROUND": [ "#62688040", "#62688040" ]
   },
   "rawColors": {
     "BRAND_260": "#737994",
@@ -190,7 +192,11 @@
     "YELLOW_860": "#e5c890",
     "YELLOW_900": "#e5c890",
     "WHITE": "#303446",
-    "WHITE_500": "#303446"
+    "WHITE_500": "#303446",
+    "CHAT_MENTIONS_BACKGROUND_DARK": "#85c1dc4d",
+    "CHAT_MENTIONS_BACKGROUND_LIGHT": "#85c1dc4d",
+    "CHAT_MENTIONS_FOREGROUND_DARK": "#85c1dc",
+    "CHAT_MENTIONS_FOREGROUND_LIGHT": "#85c1dc"
   },
   "plus":{
     "version":"0",

diff --git a/themes/frappe/sky.json b/themes/frappe/sky.json
@@ -50,7 +50,9 @@
     "TEXT_MUTED": [ "#a5adce", "#a5adce" ],
     "TEXT_NORMAL": [ "#c6d0f5", "#c6d0f5" ],
     "TEXT_PRIMARY": [ "#c6d0f5", "#c6d0f5" ],
-    "THREAD_CHANNEL_SPINE": [ "#626880", "#626880" ]
+    "THREAD_CHANNEL_SPINE": [ "#626880", "#626880" ],
+    "SPOILER_HIDDEN_BACKGROUND": [ "#626880", "#626880" ],
+    "SPOILER_REVEALED_BACKGROUND": [ "#62688040", "#62688040" ]
   },
   "rawColors": {
     "BRAND_260": "#737994",
@@ -190,7 +192,11 @@
     "YELLOW_860": "#e5c890",
     "YELLOW_900": "#e5c890",
     "WHITE": "#303446",
-    "WHITE_500": "#303446"
+    "WHITE_500": "#303446",
+    "CHAT_MENTIONS_BACKGROUND_DARK": "#99d1db4d",
+    "CHAT_MENTIONS_BACKGROUND_LIGHT": "#99d1db4d",
+    "CHAT_MENTIONS_FOREGROUND_DARK": "#99d1db",
+    "CHAT_MENTIONS_FOREGROUND_LIGHT": "#99d1db"
   },
   "plus":{
     "version":"0",

diff --git a/themes/frappe/teal.json b/themes/frappe/teal.json
@@ -50,7 +50,9 @@
     "TEXT_MUTED": [ "#a5adce", "#a5adce" ],
     "TEXT_NORMAL": [ "#c6d0f5", "#c6d0f5" ],
     "TEXT_PRIMARY": [ "#c6d0f5", "#c6d0f5" ],
-    "THREAD_CHANNEL_SPINE": [ "#626880", "#626880" ]
+    "THREAD_CHANNEL_SPINE": [ "#626880", "#626880" ],
+    "SPOILER_HIDDEN_BACKGROUND": [ "#626880", "#626880" ],
+    "SPOILER_REVEALED_BACKGROUND": [ "#62688040", "#62688040" ]
   },
   "rawColors": {
     "BRAND_260": "#737994",
@@ -190,7 +192,11 @@
     "YELLOW_860": "#e5c890",
     "YELLOW_900": "#e5c890",
     "WHITE": "#303446",
-    "WHITE_500": "#303446"
+    "WHITE_500": "#303446",
+    "CHAT_MENTIONS_BACKGROUND_DARK": "#81c8be4d",
+    "CHAT_MENTIONS_BACKGROUND_LIGHT": "#81c8be4d",
+    "CHAT_MENTIONS_FOREGROUND_DARK": "#81c8be",
+    "CHAT_MENTIONS_FOREGROUND_LIGHT": "#81c8be"
   },
   "plus":{
     "version":"0",

diff --git a/themes/frappe/yellow.json b/themes/frappe/yellow.json
@@ -50,7 +50,9 @@
     "TEXT_MUTED": [ "#a5adce", "#a5adce" ],
     "TEXT_NORMAL": [ "#c6d0f5", "#c6d0f5" ],
     "TEXT_PRIMARY": [ "#c6d0f5", "#c6d0f5" ],
-    "THREAD_CHANNEL_SPINE": [ "#626880", "#626880" ]
+    "THREAD_CHANNEL_SPINE": [ "#626880", "#626880" ],
+    "SPOILER_HIDDEN_BACKGROUND": [ "#626880", "#626880" ],
+    "SPOILER_REVEALED_BACKGROUND": [ "#62688040", "#62688040" ]
   },
   "rawColors": {
     "BRAND_260": "#737994",
@@ -190,7 +192,11 @@
     "YELLOW_860": "#e5c890",
     "YELLOW_900": "#e5c890",
     "WHITE": "#303446",
-    "WHITE_500": "#303446"
+    "WHITE_500": "#303446",
+    "CHAT_MENTIONS_BACKGROUND_DARK": "#e5c8904d",
+    "CHAT_MENTIONS_BACKGROUND_LIGHT": "#e5c8904d",
+    "CHAT_MENTIONS_FOREGROUND_DARK": "#e5c890",
+    "CHAT_MENTIONS_FOREGROUND_LIGHT": "#e5c890"
   },
   "plus":{
     "version":"0",

diff --git a/themes/latte/blue.json b/themes/latte/blue.json
@@ -50,7 +50,9 @@
     "TEXT_MUTED": [ "#6c6f85", "#6c6f85" ],
     "TEXT_NORMAL": [ "#4c4f69", "#4c4f69" ],
     "TEXT_PRIMARY": [ "#4c4f69", "#4c4f69" ],
-    "THREAD_CHANNEL_SPINE": [ "#acb0be", "#acb0be" ]
+    "THREAD_CHANNEL_SPINE": [ "#acb0be", "#acb0be" ],
+    "SPOILER_HIDDEN_BACKGROUND": [ "#acb0be", "#acb0be" ],
+    "SPOILER_REVEALED_BACKGROUND": [ "#acb0be40", "#acb0be40" ]
   },
   "rawColors": {
     "BRAND_260": "#9ca0b0",
@@ -190,7 +192,11 @@
     "YELLOW_860": "#df8e1d",
     "YELLOW_900": "#df8e1d",
     "WHITE": "#eff1f5",
-    "WHITE_500": "#eff1f5"
+    "WHITE_500": "#eff1f5",
+    "CHAT_MENTIONS_BACKGROUND_DARK": "#1e66f54d",
+    "CHAT_MENTIONS_BACKGROUND_LIGHT": "#1e66f54d",
+    "CHAT_MENTIONS_FOREGROUND_DARK": "#1e66f5",
+    "CHAT_MENTIONS_FOREGROUND_LIGHT": "#1e66f5"
   },
   "plus":{
     "version":"0",