Fix green/red accessibility

client/src/app/+admin/overview/users/user-list/user-list.component.scss

@@ -3,10 +3,6 @@
 @use '_mixins' as *;
 @use 'bootstrap/scss/functions' as *;
 
-tr.banned > td {
-  background-color: color.adjust($color: $red, $lightness: 40%) !important;
-}
-
 .banned-info {
   font-style: italic;
 }

client/src/app/+admin/system/logs/logs.component.scss

@@ -37,7 +37,7 @@
   }
 
   .error {
-    color: $red;
+    color: pvar(--red);
   }
 
   pre {

client/src/app/+videos/+video-edit/shared/caption/video-caption-add-modal.component.scss

@@ -11,6 +11,6 @@
 }
 
 .warning-replace-caption {
-  color: $red;
+  color: pvar(--red);
   margin-top: 10px;
 }

client/src/app/+videos/+video-edit/shared/video-edit.component.html

@@ -184,17 +184,16 @@
               @if (videoCaption.action) {
                 <span class="caption-entry-label">{{ getCaptionLabel(videoCaption) }}</span>
 
-                <div i18n class="caption-entry-state caption-entry-state-create">
                 @switch (videoCaption.action) {
                   @case ('CREATE') {
-                      Will be created on update
+                    <div i18n class="caption-entry-state green">Will be created on update</div>
                   } @case ('UPDATE') {
+                    <div i18n class="caption-entry-state green">Will be edited on update</div>
                     Will be edited on update
                   } @case ('REMOVE') {
-                      Will be deleted on update
+                    <div i18n class="caption-entry-state red">Will be deleted on update</div>
                   }
                 }
-                </div>
 
                 @if (videoCaption.action === 'CREATE' || videoCaption.action === 'UPDATE') {
                   <my-edit-button class="me-2" i18n-label label="Edit" (click)="openEditCaptionModal(videoCaption)"></my-edit-button>
@@ -203,7 +202,7 @@
                 <my-button i18n (click)="deleteCaption(videoCaption)" icon="undo">
                   @switch (videoCaption.action) {
                     @case ('CREATE') {
-                      Cancel create
+                      Cancel creation
                     } @case ('UPDATE') {
                       Cancel edition
                     } @case ('REMOVE') {

client/src/app/+videos/+video-edit/shared/video-edit.component.scss

@@ -56,14 +56,6 @@ my-timestamp-input {
     min-width: 250px;
 
     @include margin-right(15px);
-
-    &.caption-entry-state-create {
-      color: $green;
-    }
-
-    &.caption-entry-state-delete {
-      color: $red;
-    }
   }
 }
 

client/src/app/shared/shared-instance/feature-boolean.component.scss

@@ -2,9 +2,9 @@
 @use '_mixins' as *;
 
 my-global-icon[iconName=tick] {
-  color: $green;
+  color: pvar(--green);
 }
 
 my-global-icon[iconName=cross] {
-  color: $red;
+  color: pvar(--red);
 }

client/src/app/shared/standalone-upload/upload-progress.component.scss

@@ -12,7 +12,7 @@
     @include progressbar($height: 30px, $font-size: 14px, $background-color: rgba(11, 204, 41, 0.16));
 
     .progress-bar {
-      background-color: $green;
+      background-color: pvar(--green);
       line-height: 30px;
       text-align: start;
       font-weight: $font-semibold;

client/src/sass/application.scss

@@ -22,6 +22,9 @@ body {
   /*** theme ***/
   // now beware sass requires interpolation
   // for css custom properties #{$var}
+  --red: #{$red};
+  --green: #{$green};
+
   --mainColor: #{$main-color};
   --mainColorLighter: #{$main-color-lighter};
   --mainColorLightest: #{$main-color-lightest};

client/src/sass/class-helpers/_forms.scss

@@ -11,7 +11,7 @@
   +.nav-preview,
   // Markdown textarea
   +*+.tab-content {
-    border-color: $red !important;
+    border-color: pvar(--red) !important;
   }
 }
 
@@ -27,7 +27,7 @@
 }
 
 .form-error {
-  color: $red;
+  color: pvar(--red);
 }
 
 // Disable red error on input focus

client/src/sass/class-helpers/_text.scss

@@ -4,6 +4,14 @@
 @use '_variables' as *;
 @use '_mixins' as *;
 
+.red {
+  color: pvar(--red);
+}
+
+.green {
+  color: pvar(--green);
+}
+
 .link-orange {
   color: pvar(--mainForegroundColor);
   font-weight: $font-semibold;

client/src/sass/include/_variables.scss

@@ -31,8 +31,8 @@ $support-button-heart: #e83e8c;
 $bg-color: #fff;
 $fg-color: #212529;
 
-$red: #FF0000;
+$red: #EE0700;
-$green: #38AB0B;
+$green: #338809;
 
 $expanded-horizontal-margins: 150px;
 $not-expanded-horizontal-margins: 30px;
@@ -106,6 +106,9 @@ $primeng-breakpoint: 960px;
 // pass variables into a sass map,
 // to be warned of non-existing variables
 $variables: (
+  --red: var(--red),
+  --green: var(--green),
+
   --mainColor: var(--mainColor),
   --mainColorLighter: var(--mainColorLighter),
   --mainColorLightest: var(--mainColorLightest),