chore: teak colours

mdluo · Apr 18, 2022 · 242107d · 242107d
1 parent fd85d05
commit 242107d
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 16 deletions.
diff --git a/src/styles/_code.scss b/src/styles/_code.scss
@@ -1,20 +1,24 @@
-@import "languages";
+@import 'languages';
 
 :root {
  --grvsc-padding-top: 0;
  --grvsc-padding-bottom: 0;
 }
 
+body:not(.dark-mode) pre.grvsc-container {
+ background-color: scale-color(#f6f8fa, $lightness: -2.5%) !important;
+}
+
 pre.grvsc-container {
  margin: 1rem 0;
  line-height: 1.75;
- background-color: scale-color(#f6f8fa, $lightness: -2%);
 
  &.break-spaces {
  white-space: break-spaces;
  }
 
- .grvsc-gutter-pad, .grvsc-line-number {
+ .grvsc-gutter-pad,
+ .grvsc-line-number {
  background-color: #e1e4e8;
  }
 
@@ -29,7 +33,7 @@ pre.grvsc-container {
  &[data-language]:not(.no-label):before {
  content: attr(data-language);
  padding: 0.25rem 0.5rem;
- font-size: 0.70rem;
+ font-size: 0.7rem;
  letter-spacing: 0.075em;
  line-height: 1;
  text-align: right;
@@ -43,8 +47,9 @@ pre.grvsc-container {
  background-color: $gray-300;
  }
 
- &[data-language="shell"] {
- .grvsc-gutter-pad, .grvsc-line-number {
+ &[data-language='shell'] {
+ .grvsc-gutter-pad,
+ .grvsc-line-number {
  padding-right: 0;
  background-color: transparent !important;
  }
@@ -65,13 +70,17 @@ pre.grvsc-container {
  }
 
  .grvsc-line:first-child {
- .grvsc-gutter-pad, .grvsc-line-number, .grvsc-source {
+ .grvsc-gutter-pad,
+ .grvsc-line-number,
+ .grvsc-source {
  padding-top: 0.5rem;
  }
  }
 
  .grvsc-line:last-child {
- .grvsc-gutter-pad, .grvsc-line-number, .grvsc-source {
+ .grvsc-gutter-pad,
+ .grvsc-line-number,
+ .grvsc-source {
  padding-bottom: 0.5rem;
  }
  }

diff --git a/src/styles/_dark.scss b/src/styles/_dark.scss
@@ -1,7 +1,11 @@
 body.dark-mode {
+ @include background-2x("/images/gplaypattern-dark", "png", 188px, 178px, left top, repeat);
+ background-color: $black;
+ border-top-color: $blue-light;
+
  $text-color-strong: lighten($gray-200, 5%);
- $text-color-primary: $gray-200;
- $text-color-primary-muted: darken($gray-200, 10%);
+ $text-color-primary: darken($gray-200, 10%);
+ $text-color-primary-muted: darken($gray-200, 20%);
  $text-color-secondary: darken($gray-300, 15%);
  $text-color-secondary-muted: $gray-400;
  $text-color-blue: $blue-light;
@@ -30,11 +34,6 @@ body.dark-mode {
  color: $text-color-blue;
  }
 
- background-color: $black;
- background-blend-mode: color-burn;
- -webkit-background-composite: plus-darker;
- border-top-color: $blue-light;
-
  a.header-title {
  color: $text-color-secondary-muted;
 
@@ -63,7 +62,6 @@ body.dark-mode {
  h1,
  h2,
  h3 {
- color: $text-color-strong;
  border-color: $gray-700;
 
  &[id] a.anchor {

diff --git a/src/styles/index.scss b/src/styles/index.scss
@@ -6,6 +6,7 @@
 @import "@primer/css/alerts";
 @import "@primer/css/labels";
 @import "@primer/css/buttons";
+@import "@primer/css/forms";
 @import "@primer/css/tooltips";
 @import "@primer/css/blankslate";
 @import "@primer/css/utilities";