fix(styling): use correct inverse text color tokens

The Figma-generated theme tokens renamed `--text-inverse` to
`--text-on-inverse` and `--badge-text-inverse` to
`--badge-text-on-inverse`, but several SCSS files still referenced the
old names. Since the old variables are undefined in the compiled CSS,
the `color` property falls back to the inherited value, producing
nearly invisible text on inverse surfaces (e.g. notifications,
gallery overlays, inverse badges).

Author: oliverlaz

src/components/Attachment/styling/ModalGallery.scss

@@ -2,7 +2,7 @@
 
 .str-chat__message {
   --str-chat__modal-gallery-load-failed-indicator-background: var(--accent-error);
-  --str-chat__modal-gallery-load-failed-indicator-color: var(--text-inverse);
+  --str-chat__modal-gallery-load-failed-indicator-color: var(--text-on-inverse);
   --str-chat__modal-gallery-loading-background: var(--chat-bg);
   --str-chat__modal-gallery-loading-base: var(--skeleton-loading-base);
   --str-chat__modal-gallery-loading-highlight: var(--skeleton-loading-highlight);
@@ -64,7 +64,7 @@
         cursor: zoom-in;
         // CDN resize requires max-width to be present on this element
         max-width: $max-width;
-        color: var(--text-inverse);
+        color: var(--text-on-inverse);
         border: none;
         font-size: var(--typography-font-size-2xl);
         font-weight: var(--typography-font-weight-medium);

src/components/Badge/styling/Badge.scss

@@ -38,7 +38,7 @@
 
 .str-chat__badge--variant-inverse {
   background: var(--badge-bg-inverse);
-  color: var(--badge-text-inverse);
+  color: var(--badge-text-on-inverse);
   border-color: var(--badge-border);
 }
 

src/components/Notifications/styling/Notification.scss

@@ -13,7 +13,7 @@
     0 0 0 1px rgba(0, 0, 0, 0.05),
     0 4px 8px 0 rgba(0, 0, 0, 0.14),
     0 12px 24px 0 rgba(0, 0, 0, 0.1);
-  color: var(--str-chat__notification-color, var(--text-inverse));
+  color: var(--str-chat__notification-color, var(--text-on-inverse));
 
   .str-chat__notification-content {
     align-items: flex-start;
@@ -94,22 +94,22 @@
 //// Severity overrides: allow themes to keep colored variants; defaults match Figma (inverse).
 //.str-chat__notification--success {
 //  background: var(--str-chat-success-background, var(--background-core-inverse));
-//  color: var(--str-chat-success-color, var(--text-inverse));
+//  color: var(--str-chat-success-color, var(--text-on-inverse));
 //}
 //
 //.str-chat__notification--error {
 //  background: var(--str-chat-error-background, var(--background-core-inverse));
-//  color: var(--str-chat-error-color, var(--text-inverse));
+//  color: var(--str-chat-error-color, var(--text-on-inverse));
 //}
 //
 //.str-chat__notification--warning {
 //  background: var(--str-chat-warning-background, var(--background-core-inverse));
-//  color: var(--str-chat-warning-color, var(--text-inverse));
+//  color: var(--str-chat-warning-color, var(--text-on-inverse));
 //}
 //
 //.str-chat__notification--info {
 //  background: var(--str-chat-info-background, var(--background-core-inverse));
-//  color: var(--str-chat-info-color, var(--text-inverse));
+//  color: var(--str-chat-info-color, var(--text-on-inverse));
 //}
 
 // Loading state: spin the refresh icon