style!: adopt selenized-white color scheme and naming

I'm a big fan on this color scheme [[1]]. This also adopts common color- scheme variable names, which should make it easier to swap to different themes if people want to customize. [1]: https://github.com/jan-warchol/selenized/blob/master/features-and-design.md Ref: https://github.com/jan-warchol/selenized/blob/master/the-values.md#selenized-white BREAKING CHANGE: The variables for colors are renamed, so if customization was done based on those names, they will need to be updated.
lukehsiao · Sep 12, 2023 · ef97a63 · ef97a63
1 parent 7057e54
commit ef97a63
Show file tree

Hide file tree

Showing 10 changed files with 48 additions and 28 deletions.
diff --git a/sass/_variables.scss b/sass/_variables.scss
@@ -1,9 +1,30 @@
-$bg-color: #fff;
-$color-text: #444;
-$color-title: #111;
-$color-meta: #888;
-$link-color: #337ab7;
-$link-hover: #175081;
+// Selenized White
+// Ref: https://github.com/jan-warchol/selenized/blob/master/the-values.md#selenized-white
+$bg_0: lab(100% 0 0);
+$bg_1: lab(93% 0 0);
+$bg_2: lab(82% 0 0);
+$dim_0: lab(56% 0 0);
+$fg_0: lab(30% 0 0);
+$fg_1: lab(16% 0 0);
+
+$red: lab(40% 88 56);
+$green: lab(54% -53 77);
+$yellow: lab(65% 8 95);
+$blue: lab(40% 0 -80);
+$magenta: lab(50% 77 -21);
+$cyan: lab(61% -56 -6);
+$orange: lab(51% 52 70);
+$violet: lab(45% 42 -63);
+
+$br_red: lab(33% 88 56);
+$br_green: lab(47% -53 77);
+$br_yellow: lab(58% 8 95);
+$br_blue: lab(33% 0 -80);
+$br_magenta: lab(43% 77 -21);
+$br_cyan: lab(54% -56 -6);
+$br_orange: lab(44% 52 70);
+$br_violet: lab(38% 42 -63);
+
 $fig-height: 45em;
 
 $BodyFont: 'Atkinson Hyperlegible', sans-serif;

diff --git a/sass/base.scss b/sass/base.scss
@@ -10,7 +10,7 @@ html {
 }
 
 body {
-  color: $color-text;
+  color: $fg_0;
   font-size: 1.8rem;
   font-family: $BodyFont;
   line-height: 1.50;
@@ -60,10 +60,10 @@ summary {
 }
 
 a {
-  color: $link-color;
+  color: $blue;
   text-decoration: none;
   &:hover {
-    color: $link-hover;
+    color: $br_blue;
   }
 }
 
@@ -97,7 +97,6 @@ pre {
   display: block;
   padding: 12px;
   border-radius: 3px;
-  background-color: #f8f8f8;
   font-size: 1.2rem;
   word-wrap: break-word;
   overflow: auto;
@@ -120,8 +119,8 @@ table > :is(thead, tbody) > tr > :is(th, td) {
 }
 
 table > thead > tr > :is(th, td) {
-    background-color: lab(82% 0 0);
-    color: lab(16% 0 0);
+    background-color: $bg_2;
+    color: $fg_1;
     border-top: 2px solid;
     border-bottom: 1px solid;
 }
@@ -131,16 +130,16 @@ table > tbody > tr:last-child > :is(th, td) {
 }
 
 table tr {
-    background-color: lab(100% 0 0);
+    background-color: $bg_0;
     margin: 0;
 }
 
 table tr:nth-child(2n) {
-    background-color: lab(93% 0 0);
+    background-color: $bg_1;
 }
 
 del {
-  color: #999;
+  color: $dim_0;
 }
 
 blockquote {

diff --git a/sass/object/component/_article.scss b/sass/object/component/_article.scss
@@ -4,9 +4,9 @@
   &__title {
     font-size: 2.8rem;
     & a {
-      color: $color-title;
+      color: $fg_1;
       &:hover {
-        color: $link-hover;
+        color: $br_blue;
       }
     }
     margin-bottom: 0;
@@ -15,12 +15,12 @@
     font-size: 1.4rem;
     line-height: 1;
     font-style: italic;
-    color: $color-meta;
+    color: $dim_0;
     margin-top: 0;
   }
   &__summary {
     font-size: 1.4rem;
-    color: $color-text;
+    color: $fg_0;
     line-height: 1.5;
     & p {
       margin: 0;

diff --git a/sass/object/component/_links.scss b/sass/object/component/_links.scss
@@ -13,12 +13,12 @@
     width: 30px;
     height: 30px;
     border: 1px solid;
-    border-color: $color-text;
+    border-color: $fg_0;
     border-radius: 50%;
-    color: $color-text;
+    color: $fg_0;
     transition: 0.2s;
     &:hover {
-      background: $color-text;
+      background: $fg_0;
       color: #fff;
     }
   }

diff --git a/sass/object/component/_time.scss b/sass/object/component/_time.scss
@@ -4,5 +4,5 @@
   display: block;
   font-size: 1.4rem;
   font-style: italic;
-  color: $color-meta
+  color: $dim_0
 }
diff --git a/sass/object/project/_menu.scss b/sass/object/project/_menu.scss
@@ -36,7 +36,7 @@
   }
   &__parent {
     span {
-      color: $link-color;
+      color: $blue;
     }
   }
 }
diff --git a/sass/object/project/_screen-reader-text.scss b/sass/object/project/_screen-reader-text.scss
@@ -11,7 +11,7 @@
     border-radius: 3px;
     box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
     clip: auto !important;
-    color: $link-color;
+    color: $blue;
     display: block;
     font-size: 14px;
     font-size: 0.875rem;

diff --git a/sass/object/project/_subtitle.scss b/sass/object/project/_subtitle.scss
@@ -2,7 +2,7 @@
 
 .p-subtitle {
   margin: 12px 0 0 0;
-  color: $color-text;
+  color: $fg_0;
   font-size: 1.4rem;
   font-weight: 300;
   font-family: $HeaderFont;

diff --git a/sass/object/project/_tag-title.scss b/sass/object/project/_tag-title.scss
@@ -5,7 +5,7 @@
   margin: 0;
   padding-bottom: 8px;
   border-bottom: 1px solid currentColor;
-  color: $color-text;
+  color: $fg_0;
   font-size: 2.4rem;
   &::before {
     content: '#';

diff --git a/sass/object/project/_title.scss b/sass/object/project/_title.scss
@@ -4,6 +4,6 @@
   margin: 0;
   font-size: 4.4rem;
   &__link {
-    color: $color-text;
+    color: $fg_0;
   }
 }