fix(style): add missing colors for items that sometimes have a transparent background

front/src/style/colors.scss

@@ -167,6 +167,7 @@
 
   .primary {
     --color: var(--fw-blue-010);
+    --color-over-transparent: var(--background-color);
     --background-color:var(--fw-blue-400);
     --border-color:var(--fw-blue-010);
     &> .primary {
@@ -200,6 +201,7 @@
 
   .destructive {
     --color: var(--fw-red-010);
+    --color-over-transparent: var(--background-color);
     --background-color: var(--fw-red-500);
     --border-color:var(--fw-red-010);
 
@@ -223,6 +225,7 @@
 
   .blue {
     --color: var(--fw-blue-900);
+    --color-over-transparent: var(--background-color);
     --background-color: var(--fw-pastel-blue-1);
     &.raised, .action>button {
       --background-color: var(--fw-pastel-blue-2);
@@ -239,6 +242,7 @@
 
   .red {
     --color: var(--fw-red-900);
+    --color-over-transparent: var(--background-color);
     --background-color: var(--fw-pastel-red-2);
     &.raised, .action>button {
       --background-color: var(--fw-pastel-red-2);
@@ -255,6 +259,7 @@
 
   .purple {
     --color: var(--fw-gray-970);
+    --color-over-transparent: var(--background-color);
     --background-color: var(--fw-pastel-purple-1);
     &.raised, .action>button {
       --background-color: var(--fw-pastel-purple-2);
@@ -271,6 +276,7 @@
 
   .green {
     --color: var(--fw-gray-900);
+    --color-over-transparent: var(--background-color);
     --background-color: var(--fw-pastel-green-1);
     &.raised, .action>button {
       --background-color: var(--fw-pastel-green-2);
@@ -287,6 +293,7 @@
 
   .yellow {
     --color: var(--fw-gray-900);
+    --color-over-transparent: var(--background-color);
     --background-color: var(--fw-pastel-yellow-1);
     &.raised, .action>button {
       --background-color: var(--fw-pastel-yellow-2);
@@ -395,6 +402,7 @@
 
   .primary {
     --color: var(--fw-blue-010);
+    --color-over-transparent: var(--background-color);
     --background-color:var(--fw-blue-600);
     --border-color:var(--fw-blue-100);
 
@@ -422,6 +430,7 @@
 
   .destructive {
     --color: var(--fw-red-010);
+    --color-over-transparent: var(--background-color);
     --background-color: var(--fw-red-500);
     --border-color:var(--fw-red-100);
 
@@ -440,6 +449,7 @@
 
   .blue {
     --color: var(--fw-pastel-blue-1);
+    --color-over-transparent: var(--background-color);
     --background-color: color-mix(in oklab, black 60%, var(--fw-pastel-blue-1));
     &.raised, .action>button {
       --background-color: color-mix(in oklab, black 65%, var(--fw-pastel-blue-2));
@@ -453,6 +463,7 @@
 
   .red {
     --color: var(--fw-pastel-red-1);
+    --color-over-transparent: var(--background-color);
     --background-color: color-mix(in oklab, black 60%, var(--fw-pastel-red-2));
     &.raised, .action>button {
       --background-color: color-mix(in oklab, black 65%, var(--fw-pastel-red-2));
@@ -466,6 +477,7 @@
 
   .purple {
     --color: var(--fw-gray-100);
+    --color-over-transparent: var(--background-color);
     --background-color: color-mix(in oklab, black 50%, var(--fw-pastel-purple-1));
     &.raised, .action>button {
       --background-color: color-mix(in oklab, black 61%, var(--fw-pastel-purple-2));
@@ -479,6 +491,7 @@
 
   .green {
     --color: var(--fw-pastel-green-1);
+    --color-over-transparent: var(--background-color);
     --background-color: color-mix(in oklab, black 55%, var(--fw-pastel-green-1));
     &.raised, .action>button {
       --background-color: color-mix(in oklab, black 60%, var(--fw-pastel-green-2));
@@ -492,6 +505,7 @@
 
   .yellow {
     --color: var(--fw-pastel-yellow-1);
+    --color-over-transparent: var(--background-color);
     --background-color: color-mix(in oklab, black 53%, var(--fw-pastel-yellow-3));
     &.raised, .action>button {
       --background-color: color-mix(in oklab, black 45%, var(--fw-pastel-yellow-3));
@@ -557,7 +571,7 @@
 
     &.interactive {
       &:hover:not(:has(.interactive:hover)) {
-        color:var(--hover-color);
+        color:var(--hover-color, var(--color));
         background-color:var(--hover-background-color);
         border-color: var(--hover-background-color);
       }
@@ -580,12 +594,13 @@
   }
 
   .ghost {
-    color: var(--color);
+    color: var(--color-over-transparent, var(--color));
     background-color: transparent;
     border: 1px solid transparent;
 
     &.interactive {
       &:hover:not(:has(.interactive:hover)) {
+        color: var(--hover-color, var(--color));
         background-color: var(--hover-background-color);
         border-color: var(--hover-background-color);
       }
@@ -614,12 +629,13 @@
   }
 
   .outline {
-    color: var(--color);
+    color: var(--color-over-transparent, var(--color));
     background-color: transparent;
     border: 1px solid var(--border-color);
 
     &.interactive, button {
       &:hover {
+        color:var(--hover-color, var(--color));
         border-color: var(--hover-border-color);
       }
       &[aria-pressed=true] {