frontend/public/global.css

@@ -29,7 +29,6 @@
 	--foreground-color-2: rgb(218, 219, 220);
 	--foreground-color-3: rgb(153, 154, 155);
 	--foreground-color-4: rgb(123, 124, 125);
-	--colored-element-text-color: var(--foreground-color-1);
 
 	--purple-1: hsl(280, 78%, 50%);
 	--blue-1: hsl(200, 78%, 50%);
@@ -212,12 +211,12 @@ body {
 /* button */
 
 .button {
-	color: var(--foreground-color-1);
 	background-color: var(--background-color-2);
 	text-align: center;
 	border: none;
 	padding: var(--space-sm);
 	border-radius: var(--radius-md);
+	color: currentColor;
 	font: inherit;
 	max-height: 3em;
 }
@@ -227,7 +226,6 @@ body {
 }
 
 .button-accent {
-	color: var(--colored-element-text-color);
 	background-color: var(--purple-2);
 }
 
@@ -240,7 +238,6 @@ body {
 }
 
 .button-red {
-	color: var(--colored-element-text-color);
 	background-color: var(--red-2);
 }
 
@@ -371,14 +368,9 @@ body {
 }
 
 .sidebar-button.selected {
-	color: var(--colored-element-text-color);
 	background-color: var(--purple-2);
 }
 
-.sidebar-button.selected .icon-button {
-	color: var(--colored-element-text-color);
-}
-
 /*! the tweaks below are heavily based on modern-normalize v1.1.0 | MIT License | https://github.com/sindresorhus/modern-normalize */
 
 *,

frontend/src/components/Main.svelte

@@ -21,8 +21,14 @@
                 --background-color-1: rgb(253, 254, 255);
                 --background-color-2: rgb(218, 219, 220);
                 --background-color-3: rgb(173, 174, 175);
+            }
 
-                --colored-element-text-color: var(--background-color-0);
+            .button {
+                color: var(--foreground-color-1);
+            }
+
+            .button-red, .button-accent {
+                color: var(--background-color-1);
             }
         </style>
     {/if}

frontend/src/components/Message.svelte

@@ -9,7 +9,7 @@
     .message {
         display: flex;
         align-items: flex-start;
-        overflow-x: hidden;
+        overflow-x: none;
         word-break: break-all;
         padding: var(--space-xxs) var(--space-normplus) var(--space-xxs) var(--space-normplus);
     }

frontend/src/components/MessageInput.svelte

@@ -138,8 +138,7 @@
         margin-left: var(--space-sm);
         border-radius: 50%;
         background-color: var(--purple-1);
-        padding: 12px;
-        aspect-ratio: 1;
+        aspect-ratio: 1 / 1;
         flex-shrink: 0;
     }