Improve contrast and readability with light theme

pontoon/administration/static/css/admin_project.css

@@ -161,7 +161,7 @@ form .controls .button.manage-resources[disabled]:hover {
 
 form a:link,
 form a:visited {
-  color: var(--status-translated-alt);
+  color: var(--status-translated);
   float: right;
   text-transform: uppercase;
 }

pontoon/base/static/css/dark-theme.css

@@ -2,6 +2,7 @@
 .dark-theme {
   /* Main */
   --main-border-1: #4d5967;
+  --control-border: #4d5967;
   --moz-logo: url(../img/moz-logo-light.svg);
 
   /* User banner and details */
@@ -36,6 +37,9 @@
   --tooltip-color: #ffffff;
   --tooltip-color-2: #aaaaaa;
   --tooltip-border: #4d5967;
+  --tooltip-surface-background: #000000dd;
+  --tooltip-surface-color: #ffffff;
+  --tooltip-surface-color-2: #888888;
 
   /* Homepage */
   --homepage-background-image: url(../img/background.svg);
@@ -44,13 +48,10 @@
 
   /* Translation status */
   --status-translated: #7bc876;
-  --status-translated-alt: #7bc876;
   --status-pretranslated: #c0ff00;
-  --status-pretranslated-alt: #c0ff00;
   --status-warning: #ffa10f;
   --status-error: #ff3366;
   --status-missing: #5f7285;
-  --status-missing-alt: #5f7285;
   --status-unreviewed: #4fc4f6;
   --status-fuzzy: #fed271;
 
@@ -108,6 +109,10 @@
   --lilac: #c6c1f0;
   --grey-5: #385465;
 
+  /* Insights & profile charts: neutral "new items" series + muted labels */
+  --chart-neutral: #272a2f;
+  --chart-label-muted: #4d5967;
+
   /* Contribution graph (empty → most active) */
   --contribution-graph-0: #333941;
   --contribution-graph-1: #41554c;

pontoon/base/static/css/light-theme.css

@@ -1,7 +1,10 @@
 /* Light Theme Variables */
 .light-theme {
   /* Main */
-  --main-border-1: #d8d8d8;
+  --main-border-1: #c4c4c4;
+  /* Form-control border & keyboard focus ring (a11y: >=3:1) */
+  --control-border: #8c8c8c;
+  --focus-ring: #1f86b8;
   --moz-logo: url(../img/moz-logo.svg);
 
   /* User banner and details */
@@ -19,8 +22,8 @@
   --input-background-1: #ffffff;
   --input-color-1: #2a2a2a;
   --input-color-2: #000000;
-  --toggle-color-1: #999999;
-  --toggle-color-2: #d0d0d0;
+  --toggle-color-1: #757575;
+  --toggle-color-2: #bcbcbc;
   --icon-background-1: #d0d0d0;
   --icon-border-1: #bbbbbb;
 
@@ -35,31 +38,34 @@
   --tooltip-background: #000000dd;
   --tooltip-color: #ffffff;
   --tooltip-color-2: #aaaaaa;
-  --tooltip-border: #4d5967;
+  --tooltip-surface-background: #d8dbdf;
+  --tooltip-surface-color: #2b2b2b;
+  --tooltip-surface-color-2: #565656;
+  --tooltip-border: #bbc1c8;
 
   /* Homepage */
   --homepage-background-image: url(../img/background-light.svg);
   --homepage-tour-button-background: #ffffff;
   --homepage-tour-button-color: #000000;
 
-  /* Translation status */
-  --status-translated: #7bc876;
-  --status-translated-alt: #49a643;
-  --status-pretranslated: #c0ff00;
-  --status-pretranslated-alt: #80a900;
-  --status-warning: #ffa10f;
-  --status-error: #ff3366;
-  --status-missing: #bec7d1;
-  --status-missing-alt: #5f7285;
-  --status-unreviewed: #4fc4f6;
-  --status-fuzzy: #fed271;
+  /* Translation status. Darkened for the light theme so the same color works
+     for both fills (progress bars/buttons/charts) and text/icons (a11y: >=3:1). */
+  --status-translated: #2f7a3b;
+  --status-pretranslated: #6f9400;
+  --status-warning: #b3700a;
+  --status-error: #d8143a;
+  --status-missing: #5f7285;
+  --status-unreviewed: #2487b3;
+  --status-fuzzy: #9c7a1f;
 
   /* Translation workspace */
   --translation-background: #f6f6f6;
   --translation-border: #bbbbbb;
   --translation-color: #2a2a2a;
   --translation-secondary-color: #707070;
-  --translation-main-button-color: #2a2a2a;
+  /* Light text: the main action buttons (save/suggest/approve, AI) sit on the
+     darkened status-color backgrounds, so they need a light label. */
+  --translation-main-button-color: #ffffff;
   --translation-subtitle-color: #555555;
   --editor-background: #ffffff;
   --editor-color: #2a2a2a;
@@ -108,6 +114,10 @@
   --lilac: #c6c1f0;
   --grey-5: #385465;
 
+  /* Insights & profile charts: neutral "new items" series + muted labels */
+  --chart-neutral: #5f6772;
+  --chart-label-muted: #767676;
+
   /* Contribution graph (empty → most active) */
   --contribution-graph-0: #ebedf0;
   --contribution-graph-1: #aadfa3;
@@ -137,3 +147,21 @@
   --dark-grey-1: #ffffff;
   --black-3: #f6f6f6;
 }
+
+/* Light theme uses a light-gray tooltip, so add separation from the page */
+.light-theme .table .latest-activity .tooltip {
+  border: 1px solid var(--tooltip-border);
+  box-shadow: 0 4px 12px -4px #00000040;
+}
+
+/* Light theme: visible keyboard-focus ring on interactive controls
+   (WCAG 2.4.7 focus visible, 1.4.11 >=3:1). Only on :focus-visible, so it
+   appears for keyboard navigation and not on mouse clicks. */
+.light-theme :is(a, button, input, textarea, select, [tabindex]):focus-visible {
+  outline: 2px solid var(--focus-ring);
+  outline-offset: 1px;
+}
+
+.light-theme .failed-checks .warning:before {
+  color: var(--status-warning);
+}

pontoon/base/static/css/multiple_item_selector.css

@@ -41,7 +41,7 @@
         margin-bottom: 0;
 
         li span.code {
-          color: var(--status-translated-alt);
+          color: var(--status-translated);
           float: right;
           text-align: left;
           width: auto;
@@ -66,7 +66,7 @@
 
   a:link,
   a:visited {
-    color: var(--status-translated-alt);
+    color: var(--status-translated);
     float: right;
     text-transform: uppercase;
   }

pontoon/base/static/css/style.css

@@ -143,7 +143,7 @@ input[type='email'],
 input[type='date'],
 textarea {
   background: var(--input-background-1);
-  border: 1px solid var(--main-border-1);
+  border: 1px solid var(--control-border);
   border-radius: 3px;
   color: var(--input-color-1);
   padding: 4px 3px 3px;
@@ -523,7 +523,7 @@ time {
 }
 
 .locale .code {
-  color: var(--status-translated-alt);
+  color: var(--status-translated);
   text-align: left;
 }
 
@@ -998,7 +998,7 @@ header .right .select .menu {
 }
 
 #profile .menu li.appearance button:last-child {
-  border-left: 1px solid var(--main-border-1);
+  border-left: 1px solid var(--control-border);
 }
 
 #profile .menu li.appearance button .icon {
@@ -1302,7 +1302,7 @@ body > form,
 
 .controls > .search-wrapper input {
   background: var(--dark-grey-1);
-  border: 1px solid var(--main-border-1);
+  border: 1px solid var(--control-border);
   color: var(--input-color-2);
   font-size: 13px;
   height: 28px;
@@ -1338,7 +1338,7 @@ body > form,
 }
 
 .container .info a {
-  color: var(--status-translated-alt);
+  color: var(--status-translated);
 }
 
 .toggle-button {
@@ -1347,7 +1347,7 @@ body > form,
 
 .toggle-button button {
   background: transparent;
-  border: 1px solid var(--main-border-1);
+  border: 1px solid var(--control-border);
   border-radius: 3px;
   box-sizing: border-box;
   color: var(--toggle-color-1);
@@ -1375,7 +1375,7 @@ body > form,
 
 .toggle-button button.active {
   background: var(--button-background-1);
-  border-color: var(--main-border-1);
+  border-color: var(--control-border);
   color: var(--light-grey-7);
   font-weight: 400;
 }

pontoon/base/static/css/table.css

@@ -149,7 +149,7 @@ table.table.project-list.hidden {
 }
 
 .table td.code a {
-  color: var(--status-translated-alt);
+  color: var(--status-translated);
   line-height: 47px;
   padding: 15px 5px 14px;
 }
@@ -182,10 +182,10 @@ table.table.project-list.hidden {
 
 .table .latest-activity .tooltip {
   display: block;
-  background: var(--tooltip-background);
+  background: var(--tooltip-surface-background);
   border-radius: 10px;
   bottom: 30px;
-  color: var(--tooltip-color);
+  color: var(--tooltip-surface-color);
   left: -100px;
   padding: 10px;
   position: absolute;
@@ -198,7 +198,8 @@ table.table.project-list.hidden {
   content: '';
   position: absolute;
   border: 10px solid;
-  border-color: var(--tooltip-background) transparent transparent transparent;
+  border-color: var(--tooltip-surface-background) transparent transparent
+    transparent;
   bottom: -20px;
   left: 160px; /* Must be (tooltip width + tooltip padding + bottom) / 2 */
   clip: rect(0 20px 10px 0);
@@ -218,7 +219,7 @@ table.table.project-list.hidden {
 }
 
 .table .latest-activity .tooltip footer {
-  color: var(--tooltip-color-2);
+  color: var(--tooltip-surface-color-2);
   font-style: italic;
   height: 48px;
   margin-top: 10px;
@@ -365,7 +366,7 @@ table.table.project-list.hidden {
 }
 
 .table .progress .legend li.pretranslated .title {
-  color: var(--status-pretranslated-alt);
+  color: var(--status-pretranslated);
 }
 
 .table .progress .legend li.warnings .title {
@@ -377,7 +378,7 @@ table.table.project-list.hidden {
 }
 
 .table .progress .legend li.missing .title {
-  color: var(--status-missing-alt);
+  color: var(--status-missing);
 }
 
 .table .progress .legend li.unreviewed .title {

pontoon/base/static/css/terms.css

@@ -6,7 +6,7 @@
 
 #main a:link,
 #main a:visited {
-  color: var(--status-translated-alt);
+  color: var(--status-translated);
 }
 
 #main p,

pontoon/contributors/static/css/contributors.css

@@ -1,5 +1,5 @@
 #heading .banner .title {
-  color: var(--status-translated-alt);
+  color: var(--status-translated);
 }
 
 #heading .legend {
@@ -98,7 +98,7 @@ th:last-child sup {
 }
 
 .stats .details div.approved {
-  color: var(--status-translated-alt);
+  color: var(--status-translated);
 }
 
 .stats .details div.unreviewed {

pontoon/contributors/static/css/profile.css

@@ -63,7 +63,7 @@ h2 {
 }
 
 .username {
-  color: var(--status-translated-alt);
+  color: var(--status-translated);
   line-height: 1.4em;
   font-size: 20px;
   font-weight: 300;
@@ -106,7 +106,7 @@ h2 {
 }
 
 .item-with-icon .stress {
-  color: var(--status-translated-alt);
+  color: var(--status-translated);
 }
 
 .account-status-heading {
@@ -212,7 +212,7 @@ h4.superuser {
 }
 
 #insights .chart-group-navigation ul li .icon {
-  background-color: var(--black-3);
+  background-color: var(--chart-neutral);
   border-radius: 50%;
   display: inline-block;
   margin-right: 8px;
@@ -221,7 +221,7 @@ h4.superuser {
 }
 
 #insights .chart-group-navigation ul li .label {
-  color: var(--grey-3);
+  color: var(--chart-label-muted);
   cursor: pointer;
   font-weight: bold;
   vertical-align: text-top;
@@ -271,7 +271,7 @@ h4.superuser {
 }
 
 #stats > div.translated span {
-  color: var(--status-translated-alt);
+  color: var(--status-translated);
 }
 
 #stats > div.unreviewed span {
@@ -537,7 +537,7 @@ svg.js-calendar-graph-svg {
 }
 
 #timeline .localizations li a .stress {
-  color: var(--status-translated-alt);
+  color: var(--status-translated);
 }
 
 #timeline .localizations li a .contribution-count {

pontoon/contributors/static/css/settings.css

@@ -8,7 +8,7 @@ form.user-locales-settings div {
 
 form a:link,
 form a:visited {
-  color: var(--status-translated-alt);
+  color: var(--status-translated);
   float: right;
   text-transform: uppercase;
 }

pontoon/insights/static/css/insights_charts.css

@@ -97,7 +97,7 @@
 }
 
 #insights .legend li.disabled .label {
-  color: var(--grey-3);
+  color: var(--chart-label-muted);
 }
 
 #insights .legend li.disabled .label:hover {