fix some a11y contrast issues

lit · Feb 28, 2024 · d3d0078 · d3d0078
1 parent 006b891
commit d3d0078
Show file tree

Hide file tree

Showing 4 changed files with 6 additions and 7 deletions.
diff --git a/packages/lit-dev-content/site/_includes/site-nav.html b/packages/lit-dev-content/site/_includes/site-nav.html
@@ -25,7 +25,7 @@
    <a href="{{ site.baseurl }}/blog/">Blog</a></li>
 <li class="navItem">
    <litdev-search-modal></litdev-search-modal></li>
-<span class="icons">
+<li class="icons">
    <li class="navItem">
       <theme-switcher></theme-switcher>
    </li>
@@ -43,4 +43,4 @@
          </svg>
       </a>
    </li>
-</span>
+</li>
diff --git a/packages/lit-dev-content/site/css/colors.css b/packages/lit-dev-content/site/css/colors.css
@@ -103,7 +103,7 @@ body.dark {
     --sys-color-on-tertiary: #003824;
     --sys-color-tertiary-container: #006a47;
     --sys-color-on-tertiary-container: #ffffff;
-    --sys-color-on-primary: hsl(242, 100%, 34%);
+    --sys-color-on-primary: hsl(242, 100%, 12%);
     --sys-color-surface: hsl(0, 0%, 7%);
     --sys-color-background: hsl(0, 0%, 7%);
     --sys-color-on-background: hsl(0, 0%, 89%);
@@ -190,7 +190,7 @@ body.dark {
     --sys-color-on-tertiary: #003824;
     --sys-color-tertiary-container: #006a47;
     --sys-color-on-tertiary-container: #ffffff;
-    --sys-color-on-primary: hsl(242, 100%, 34%);
+    --sys-color-on-primary: hsl(242, 100%, 12%);
     --sys-color-surface: hsl(0, 0%, 7%);
     --sys-color-background: hsl(0, 0%, 7%);
     --sys-color-on-background: hsl(0, 0%, 89%);

diff --git a/packages/lit-dev-content/site/css/footer.css b/packages/lit-dev-content/site/css/footer.css
@@ -65,6 +65,7 @@
 
 #footerBottom > p > a {
   color: var(--sys-color-primary);
+  font-weight: 600;
 }
 
 #footerBottom > p > a:hover {

diff --git a/packages/lit-dev-content/src/components/litdev-code-language-switch.ts b/packages/lit-dev-content/src/components/litdev-code-language-switch.ts
@@ -98,14 +98,12 @@ export class LitDevCodeLanguageSwitch extends LitElement {
       display: inline-flex;
       z-index: 1;
       padding: 0 0 calc(1em / 13) calc(3em / 13);
-      opacity: 60%;
-      transition: color 100ms, opacity 100ms;
+      transition: color 100ms;
     }
 
     [aria-checked='true'] > #tsLabel,
     [aria-checked='false'] > #jsLabel {
       font-weight: 600;
-      opacity: 100%;
     }
   `;