improve contrast; fixes #128

docs/assets/plugins/code-block/code-block.css

@@ -39,7 +39,7 @@
   bottom: 0;
   width: 1.75rem;
   font-size: 20px;
-  color: rgb(var(--sl-color-neutral-500));
+  color: rgb(var(--sl-color-neutral-600));
   background-color: rgb(var(--sl-color-neutral-1000));
   border-left: solid 1px rgb(var(--sl-color-neutral-200));
   border-top-right-radius: 3px;
@@ -125,7 +125,7 @@
   box-shadow: 0 0 0 1px rgb(var(--sl-color-primary-400));
   border-right-color: transparent;
   background-color: rgb(var(--sl-color-primary-50));
-  color: rgb(var(--sl-color-primary-600));
+  color: rgb(var(--sl-color-primary-700));
   z-index: 1;
 }
 
@@ -178,7 +178,7 @@
 
 .markdown-section .docsify-copy-code-button.copied {
   animation: pulse 0.75s;
-  --pulse-color: rgb(var(--sl-color-neutral-500));
+  --pulse-color: rgb(var(--sl-color-neutral-600));
 }
 
 @keyframes pulse {

docs/assets/styles/docs.css

@@ -125,7 +125,7 @@ strong {
 }
 
 .search .matching-post {
-  border-bottom: solid 1px rgb(var(--sl-color-neutral-500)) !important;
+  border-bottom: solid 1px rgb(var(--sl-color-neutral-600)) !important;
   padding: 0.25rem 1.5rem;
 }
 
@@ -159,6 +159,10 @@ strong {
   box-shadow: 0 0 0 var(--sl-focus-ring-width) rgb(var(--sl-color-primary-500) / var(--sl-focus-ring-alpha));
 }
 
+.sidebar-toggle span {
+  background-color: rgb(var(--sl-color-primary-600));
+}
+
 .sidebar-toggle span:last-child {
   margin-bottom: 0;
 }
@@ -380,15 +384,15 @@ strong {
   display: block;
   background: none;
   border-radius: 0;
-  color: rgb(var(--sl-color-neutral-700));
+  color: rgb(var(--sl-color-neutral-800));
   padding: var(--sl-spacing-medium);
   overflow: auto;
   hyphens: none;
   tab-size: 2;
 }
 
 .markdown-section pre .token.comment {
-  color: rgb(var(--sl-color-neutral-400));
+  color: rgb(var(--sl-color-neutral-500));
 }
 
 .markdown-section pre .token.prolog,
@@ -518,19 +522,19 @@ strong {
 }
 
 .markdown-section p.warn {
-  border-left-color: rgb(var(--sl-color-primary-500));
+  border-left-color: rgb(var(--sl-color-primary-600));
 }
 
 .markdown-section p.warn:before {
-  background-color: rgb(var(--sl-color-primary-500));
+  background-color: rgb(var(--sl-color-primary-600));
 }
 
 .markdown-section p.tip {
-  border-left-color: rgb(var(--sl-color-danger-500));
+  border-left-color: rgb(var(--sl-color-danger-600));
 }
 
 .markdown-section p.tip:before {
-  background-color: rgb(var(--sl-color-danger-500));
+  background-color: rgb(var(--sl-color-danger-600));
 }
 
 .markdown-section p.tip code,
@@ -554,7 +558,7 @@ strong {
 
 .markdown-section .component-header__tag code {
   background: none;
-  color: rgb(var(--sl-color-neutral-500));
+  color: rgb(var(--sl-color-neutral-600));
   font-size: var(--sl-font-size-large);
   padding: 0;
   margin: 0;
@@ -572,15 +576,15 @@ strong {
 
 /* Repo buttons */
 .repo-button--sponsor sl-icon {
-  color: rgb(var(--sl-color-pink-500));
+  color: rgb(var(--sl-color-pink-600));
 }
 
 .repo-button--github sl-icon {
   color: rgb(var(--sl-color-neutral-700));
 }
 
 .repo-button--twitter sl-icon {
-  color: rgb(var(--sl-color-sky-500));
+  color: rgb(var(--sl-color-sky-600));
 }
 
 body[data-page^='tokens/'] .table-wrapper td:first-child,
@@ -592,7 +596,7 @@ body[data-page^='tokens/'] .table-wrapper td:first-child code {
 .border-radius-demo {
   width: 3rem;
   height: 3rem;
-  background: rgb(var(--sl-color-primary-500));
+  background: rgb(var(--sl-color-primary-600));
 }
 
 /* Transition demo */
@@ -606,7 +610,7 @@ body[data-page^='tokens/'] .table-wrapper td:first-child code {
 .transition-demo:after {
   content: '';
   position: absolute;
-  background-color: rgb(var(--sl-color-primary-500));
+  background-color: rgb(var(--sl-color-primary-600));
   top: 0;
   left: 0;
   width: 0;
@@ -622,7 +626,7 @@ body[data-page^='tokens/'] .table-wrapper td:first-child code {
 /* Spacing demo */
 .spacing-demo {
   width: 100px;
-  background: rgb(var(--sl-color-primary-500));
+  background: rgb(var(--sl-color-primary-600));
 }
 
 /* Elevation dmeo */

docs/components/animation.md

@@ -19,7 +19,7 @@ To animate an element, wrap it in `<sl-animation>` and set an animation `name`.
     display: inline-block;
     width: 100px;
     height: 100px;
-    background-color: rgb(var(--sl-color-primary-500));
+    background-color: rgb(var(--sl-color-primary-600));
     margin: 1.5rem;
   }
 </style>
@@ -83,7 +83,7 @@ This example demonstrates all of the baked-in animations and easings. Animations
   .animation-sandbox .box {
     width: 100px;
     height: 100px;
-    background-color: rgb(var(--sl-color-primary-500));
+    background-color: rgb(var(--sl-color-primary-600));
   }
 
   .animation-sandbox .controls {
@@ -129,7 +129,7 @@ Use an [Intersection Observer](https://developer.mozilla.org/en-US/docs/Web/API/
     display: inline-block;
     width: 100px;
     height: 100px;
-    background-color: rgb(var(--sl-color-primary-500));
+    background-color: rgb(var(--sl-color-primary-600));
   }  
 </style>
 ```

docs/index.html

@@ -86,8 +86,7 @@
           noData: 'No Results',
           depth: 3,
           namespace: 'shoelace-docs'
-        },
-        themeColor: '#049dff'
+        }
       };
     </script>
     <script src="https://cdn.jsdelivr.net/npm/docsify@4/lib/docsify.min.js"></script>