Add color customization in accordance with #100

Signed-off-by: GitHub Action <[email protected]>
1bl4z3r · Jan 2, 2025 · e5cff1c · e5cff1c
1 parent d7bc3e1
commit e5cff1c
Show file tree

Hide file tree

Showing 10 changed files with 248 additions and 102 deletions.
diff --git a/assets/scss/_colors.scss b/assets/scss/_colors.scss
@@ -1,38 +1,142 @@
-// Default Colors
-$theme: hsl(172, 99%, 26%) !default;
-$text: hsl(204, 28%, 93%) !default;
-$light-grey: #494f5c !default;
-$dark-grey: #3b3e48 !default;
-$highlight-grey: #7d828a !default;
-$midnightblue: #2c3e50 !default;
-$typewriter: hsl(172, 100%, 36%) !default;
-$codebackground: #272822 !default;
-$pagescrollbar-thumb: hsl(0, 0%, 53%) !default;
+// Default Colors for site
+$pine-green: #018472;
+$bright-grey: #eeeeee;
+$white: #ffffff;
+$davys-grey : #494f5c;
+$granite-grey: #666666;
+$sonic-silver: #777777; 
+$arsenic: #3b3e48;
+$css-grey: #7d828a;
+$japanese-indigo: #2c3e50;
+$pine-tree: #272822;
+$taupe-grey: #878787;
+$chinese-silver: #cccccc;
+$anti-flash-white: #f1f1f1;
+$lapis-lazuli: #21759b; 
+
+// Default Colors and Opacity for Admonition
+$blueberry: #448aff;
+$turquoise-surf: #00b8d4;
+$caribbean-green: #00bfa5;
+$malachite: #00c853;
+$dark-orange: #ff9100;
+$crayola: #ff5252;
+$awesome: #ff1744;
+$folly: #f50057;
+$admonition-background-opacity : 0.1;
+
+// Default dimmed value
+$dimmed-opacity: 0.6 !default;
+
+// Background color
+$html-background: $davys-grey !default;
+
+// Site Navigation color
+$site-nav-children-border-right:$css-grey !default;
+
+// Posts seperator in list view
+$post-item-border-bottom: $css-grey !default;
+
+// Pinned posts group seperator in list view
+$pinned-posts-group-border-bottom: $css-grey !default;
+
+// Elements of the site which are expected to follow accent color
+// In this current form, `accentColor` in hugo.toml will have higher precedence than these declarations
+$aTag-mixin-a-box-shadow: $pine-green !default; // Box shadow for Mixin "aTag" used by figure element
+$aTag-mixin-a-hover-box-shadow: $pine-green !default; // Box shadow on hover for Mixin "aTag" used by figure element
+$content-anchor-hover: $pine-green !default; // Anchor text hover color
+$post-description-a-hover-border-bottom: $pine-green !default; // Anchor text on hover for post description in list
+$tableofcontents-a-hover-border-bottom: $pine-green !default; // Table of Contents on hover
+$scrolltotop-arrow: $pine-green !default; // Scroll yo Top arrow color
+$typewriter: $pine-green !default; // Typewriter carat color
+$footnote-ref-hover-background: $pine-green !default; // Footnote reference on hover
+$marked-background: $pine-green !default; // Marked text background color
+$inserted-text-underline: $pine-green !default; // Inserted text underline color
+
+// Footnote
+$footnote-ref-background: $japanese-indigo !default;
 
 // Scroll to Top Default colors
-$stt-stroke: #ccc !default;
-$stt-circle: #3b3e48 !default;
-$stt-arrow: #018574 !default;
+// Scroll to Top "Up arrow" color is defined as : $scrolltotop-arrow
+$scrolltotop-ring: $chinese-silver !default;
+$scrolltotop-circle: $arsenic !default;
+
+// Page Scrollbar
+$pagescrollbar-background: $japanese-indigo !default;
+$pagescrollbar-thumb: $taupe-grey !default;
+$pagescrollbar-thumb-hover: $bright-grey !default;
+
+// Table of Contents
+$tableofcontents-background: transparent;
+
+// Table of Contents Scrollbar
+$tableofcontents-scrollbar-track: darken($pagescrollbar-thumb, 10%) !default;
+$tableofcontents-scrollbar-thumb: $japanese-indigo !default;
+$tableofcontents-scrollbar-thumb-hover: lighten($japanese-indigo, 10%) !default;
+
+// Text color
+$text: $bright-grey !default;
+
+// Text selection color
+$text-select: $css-grey !default;
+
+// Marked text color
+$marked-text:$bright-grey !default;
+
+// Link text color on hover
+$a-hover: $white !default;
+
+// 404 Page
+$btn-404-a-border: $bright-grey !default;
+$btn-404-a-hover: $white !default;
+
+// Social Share links pane
+$share-links-background: $japanese-indigo !default;
+$share-links-a: $css-grey !default;
+$share-links-a-hover-active-focus: $bright-grey !default;
+
+// Code block, Mermaid block color
+$pre-code: $bright-grey !default;
+$pre-code-background: transparent !default;
+$code-background:$arsenic !default;
+$syntax-background: $japanese-indigo !default;
+$pre-background: $japanese-indigo !default;
+$mermaid-background: $pine-tree !default;
+
+// Code copy button
+$highlight-copy-btn: $white !default;
+$highlight-copy-btn-hover: $sonic-silver !default;
+$highlight-copy-btn-background: $granite-grey !default;
+
+// Site Header color
+$site-header-background:$arsenic !default;
+
+// Mobile menu color
+$mobile-menu-background: $arsenic !default;
+
+// Accessibility - Screen reader
+$screen-reader-text: $lapis-lazuli !default;
+$screen-reader-text-background: $anti-flash-white !default;
 
 //Admonition colors
 $admonition-background: (
-    "note": rgba(68, 138, 255, 0.1),
-    "info": rgba(0, 184, 212, 0.1),
-    "tip": rgba(0, 191, 165, 0.1),
-    "success": rgba(0, 200, 83, 0.1),
-    "warning": rgba(255, 145, 0, 0.1),
-    "failure": rgba(255, 82, 82, 0.1),
-    "danger": rgba(255, 23, 68, 0.1),
-    "bug": rgba(245, 0, 87, 0.1),
+    "note": rgba($blueberry, $admonition-background-opacity),
+    "info": rgba($turquoise-surf, $admonition-background-opacity),
+    "tip": rgba($caribbean-green, $admonition-background-opacity),
+    "success": rgba($malachite, $admonition-background-opacity),
+    "warning": rgba($dark-orange, $admonition-background-opacity),
+    "failure": rgba($crayola, $admonition-background-opacity),
+    "danger": rgba($awesome, $admonition-background-opacity),
+    "bug": rgba($folly, $admonition-background-opacity),
     ) !default;
 
 $admonition-color: (
-    "note": #448aff,
-    "info": #00b8d4,
-    "tip": #00bfa5,
-    "success": #00c853,
-    "warning": #ff9100,
-    "failure": #ff5252,
-    "danger": #ff1744,
-    "bug": #f50057,
+    "note": $blueberry,
+    "info": $turquoise-surf,
+    "tip": $caribbean-green,
+    "success": $malachite,
+    "warning": $dark-orange,
+    "failure": $crayola,
+    "danger": $awesome,
+    "bug": $folly,
     ) !default;
diff --git a/assets/scss/_mixins.scss b/assets/scss/_mixins.scss
@@ -1,3 +1,6 @@
+// These are default SCSS mixins
+// This mixin is used to provide darkish effect in
+// #home-footer, .post-year (in list), .post-day (in list), .post-description (in list), .post-date, .post-description, #TableOfContents
 @mixin dimmed {
   opacity: $dimmed-opacity;
 }
@@ -6,12 +9,12 @@
   a {
     word-wrap: break-word;
     border: none;
-    box-shadow: inset 0 -4px 0 $theme;
+    box-shadow: inset 0 -4px 0 $aTag-mixin-a-box-shadow;
     transition-property: box-shadow;
     transition-duration: 0.1s;
 
     &:hover {
-      box-shadow: inset 0 -1em 0 $theme;
+      box-shadow: inset 0 -1em 0 $aTag-mixin-a-hover-box-shadow;
     }
   }
 }
diff --git a/assets/scss/_scrolltotop.scss b/assets/scss/_scrolltotop.scss
@@ -1,18 +1,4 @@
 .scroll-up {
-    .scroll {
-        #st-ring {
-            stroke: $stt-stroke;
-        }
-
-        #st-circle {
-            fill: $stt-circle;
-        }
-
-        #st-arrow {
-            fill: $stt-arrow;
-        }
-    }
-
     position: fixed;
     bottom: 10%;
     right: 2%;
@@ -29,4 +15,4 @@
 .show {
     opacity: 1;
     transform: translateY(0);
-}
+}
diff --git a/assets/scss/_socialshare.scss b/assets/scss/_socialshare.scss
@@ -7,7 +7,7 @@
   z-index: 1;
   box-sizing: border-box;
   box-shadow: -1px -2px 3px 0px rgba(0, 0, 0, 0.45);
-  background-color: $midnightblue;
+  background-color: $share-links-background;
 
   ul {
     list-style: none;
@@ -16,11 +16,11 @@
     line-height: 2;
     font-size: 1.2em;
     a {
-      color: $highlight-grey;
+      color: $share-links-a;
       &:hover,
       &:active,
       &:focus {
-        color: $text;
+        color: $share-links-a-hover-active-focus;
       }
     }
   }

diff --git a/assets/scss/_syntax.scss b/assets/scss/_syntax.scss
@@ -1,4 +1,4 @@
-/* Background */ .chroma { color: #eee; background-color: $midnightblue }
+/* Background */ .chroma { color: #eee; background-color: $syntax-background; }
 /* Error */ .chroma .err { color: #960050; background-color: #1e0010 }
 /* LineTableTD */ .chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; }
 /* LineTable */ .chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; width: auto; overflow: auto; display: block; }