Merge pull request #32 from schlawg/use-css-variables

Use css variables
lichess-org · Mar 28, 2024 · d95cbff · d95cbff
2 parents 009c1cb + 3d1eb0c
commit d95cbff
Show file tree

Hide file tree

Showing 8 changed files with 62 additions and 54 deletions.
diff --git a/scss/_controls.scss b/scss/_controls.scss
@@ -4,13 +4,13 @@
     flex-flow: row nowrap;
     align-items: stretch;
     user-select: none;
-    background: $lpv-bg-controls;
+    background: var(--c-lpv-bg-controls, $lpv-bg-controls);
 
     .lpv__fbt {
       flex: 1 1 auto;
       font-size: 1.4em;
       padding: 0.4em 0.7em;
-      border-left: 1px solid $lpv-border;
+      border-left: 1px solid var(--c-lpv-border, $lpv-border);
       &:first-child {
         border: none;
       }

diff --git a/scss/_fbt.scss b/scss/_fbt.scss
@@ -3,7 +3,7 @@
     background: none;
     border: none;
     outline: none;
-    color: $lpv-font;
+    color: var(--c-lpv-font, $lpv-font);
     align-items: normal;
     cursor: pointer;
     text-transform: uppercase;
@@ -13,13 +13,13 @@
 
     @media (hover: hover) {
       &:hover:not(.disabled):not([disabled]) {
-        background: mix($lpv-accent, $lpv-bg, 75%);
+        background: var(--c-lpv-fbt-hover, lpv-fbt-hover);
         color: #fff;
       }
     }
 
     &.active {
-      background: $lpv-accent !important;
+      background: var(--c-lpv-accent, $lpv-accent) !important;
       color: #fff;
     }
 

diff --git a/scss/_layout.scss b/scss/_layout.scss
@@ -39,7 +39,7 @@ $board-min-width: 200px !default;
       'side';
     grid-template-rows: auto var(--controls-height);
     .lpv__controls {
-      border-bottom: 1px solid $lpv-border;
+      border-bottom: 1px solid var(--c-lpv-border, $lpv-border);
     }
   }
 
@@ -90,7 +90,7 @@ $board-min-width: 200px !default;
         'side';
       grid-template-rows: $player-height auto $player-height var(--controls-height);
       .lpv__controls {
-        border-bottom: 1px solid $lpv-border;
+        border-bottom: 1px solid var(--c-lpv-border, $lpv-border);
       }
     }
 

diff --git a/scss/_lichess-pgn-viewer.lib.scss b/scss/_lichess-pgn-viewer.lib.scss
@@ -1,23 +1,39 @@
+// in addition to scss overrides, all colors below may be overridden with css
+// variables defined as --c-lpv-accent, --c-lpv-accent-over, etc.
+
 $lpv-site-hue: 37 !default;
 $lpv-accent: hsl(88, 62%, 37%) !default;
 $lpv-accent-over: white !default;
 $lpv-bg: hsl($lpv-site-hue, 5%, 18%) !default;
+$lpv-fbt-hover: mix($lpv-accent, $lpv-bg, 75%) !default;
 $lpv-bg-player: $lpv-bg !default;
 $lpv-bg-controls: $lpv-bg !default;
 $lpv-bg-movelist: $lpv-bg !default;
 $lpv-bg-variation: hsl($lpv-site-hue, 5%, 15%) !default;
 $lpv-bg-pane: mix($lpv-accent, $lpv-bg, 15%) !default;
+$lpv-pgn-text: mix($lpv-bg-pane, $lpv-bg, 30%) !default;
 $lpv-font: #aaa !default;
 $lpv-font-shy: mix($lpv-font, $lpv-bg, 50%) !default;
 $lpv-font-accent: mix($lpv-accent, #fff, 50%) !default;
+$lpv-font-bg: mix($lpv-font, $lpv-bg, 20%) !default;
+$lpv-current-move: mix($lpv-accent, $lpv-bg, 70%) !default;
+$lpv-move-hover: mix($lpv-accent, $lpv-bg, 30%) !default;
 $lpv-border: hsl(0, 0%, 25%) !default;
+$lpv-side-border: hsl(37deg, 5%, 13%) !default;
+
 /* move highlights */
 $lpv-inaccuracy: hsl(202, 78%, 62%) !default;
 $lpv-mistake: hsl(41, 100%, 45%) !default;
 $lpv-blunder: hsl(0, 69%, 60%) !default;
 $lpv-good-move: hsl(130, 67%, 62%) !default;
 $lpv-brilliant: hsl(129, 71%, 45%) !default;
 $lpv-interesting: hsl(307, 80%, 70%) !default;
+$lpv-bg-inaccuracy-hover: mix($lpv-inaccuracy, $lpv-bg, 30%) !default;
+$lpv-bg-mistake-hover: mix($lpv-mistake, $lpv-bg, 30%) !default;
+$lpv-bg-blunder-hover: mix($lpv-blunder, $lpv-bg, 30%) !default;
+$lpv-bg-good-hover: mix($lpv-good-move, $lpv-bg, 30%) !default;
+$lpv-bg-brilliant-hover: mix($lpv-brilliant, $lpv-bg, 30%) !default;
+$lpv-bg-interesting-hover: mix($lpv-interesting, $lpv-bg, 30%) !default;
 
 @import './fbt';
 @import './util';
@@ -36,8 +52,8 @@ $lpv-interesting: hsl(307, 80%, 70%) !default;
     0 3px 1px -2px rgba(0, 0, 0, 0.2),
     0 1px 5px 0 rgba(0, 0, 0, 0.12);
   overflow: hidden;
-  background: $lpv-bg;
-  color: $lpv-font;
+  background: var(--c-lpv-bg, $lpv-bg);
+  color: var(--c-lpv-font, $lpv-font);
   box-sizing: border-box;
 
   *,
@@ -57,6 +73,6 @@ $lpv-interesting: hsl(307, 80%, 70%) !default;
   }
 
   &:focus {
-    outline: auto 2px $lpv-accent;
+    outline: auto 2px var(--c-lpv-accent, $lpv-accent);
   }
 }
diff --git a/scss/_pane.scss b/scss/_pane.scss
@@ -1,8 +1,8 @@
 .lpv {
   &__pane {
     z-index: 2;
-    border-bottom: 2px solid $lpv-accent;
-    background: $lpv-bg-pane;
+    border-bottom: 2px solid var(--c-lpv-accent, $lpv-accent);
+    background: var(--c-lpv-bg-pane, $lpv-bg-pane);
     display: flex;
     flex-flow: column;
     justify-content: center;
@@ -11,20 +11,20 @@
       padding: 0.8em 2.5em;
       transition: none;
       &::before {
-        color: $lpv-accent;
+        color: var(--c-lpv-accent, $lpv-accent);
         font-size: 2em;
       }
       &:hover::before {
-        color: $lpv-accent-over;
+        color: var(--c-lpv-accent-over, $lpv-accent-over);
       }
     }
   }
 
   &__pgn {
     &__text {
       flex: 1 1 auto;
-      background: mix($lpv-bg-pane, $lpv-bg, 30%);
-      color: $lpv-font;
+      background: var(--c-lpv-pgn-text, $lpv-pgn-text);
+      color: var(--c-lpv-font, $lpv-font);
       padding: 0.8em 1.3em;
     }
   }

diff --git a/scss/_player.scss b/scss/_player.scss
@@ -1,13 +1,13 @@
 .lpv {
   &__player {
     font-size: 0.8em;
-    background: $lpv-bg-player;
+    background: var(--c-lpv-bg-player, $lpv-bg-player);
     display: flex;
     flex-flow: row nowrap;
     padding: 0 1em;
     // justify-content: stretch;
     &--bottom {
-      border-bottom: 1px solid $lpv-border;
+      border-bottom: 1px solid var(--c-lpv-border, $lpv-border);
       .lpv--controls-false & {
         border-bottom: none;
       }
@@ -18,7 +18,7 @@
       flex-flow: row nowrap;
       align-items: center;
       gap: 1ch;
-      color: $lpv-font;
+      color: var(--c-lpv-font, $lpv-font);
       text-decoration: none;
     }
     &__title {
@@ -32,7 +32,7 @@
       font-size: 1.4em;
       font-weight: bold;
       &.active {
-        color: $lpv-accent;
+        color: var(--c-lpv-accent, $lpv-accent);
       }
     }
   }

diff --git a/scss/_scrollbar.scss b/scss/_scrollbar.scss
@@ -5,7 +5,7 @@ body ::-webkit-scrollbar-corner {
 }
 
 body ::-webkit-scrollbar-thumb {
-  background: mix($lpv-font, $lpv-bg, 20%);
+  background: var(--c-lpv-font-bg, $lpv-font-bg);
 }
 
 body ::-webkit-scrollbar-thumb:hover,

diff --git a/scss/_side.scss b/scss/_side.scss
@@ -1,11 +1,3 @@
-$lpv-bg-inaccuracy-hover: c-dimmer($lpv-inaccuracy, 70%) !default;
-$lpv-bg-mistake-hover: c-dimmer($lpv-mistake, 70%) !default;
-$lpv-bg-blunder-hover: c-dimmer($lpv-blunder, 70%) !default;
-$lpv-bg-good-hover: c-dimmer($lpv-good-move, 70%) !default;
-$lpv-bg-brilliant-hover: c-dimmer($lpv-brilliant, 70%) !default;
-$lpv-bg-interesting-hover: c-dimmer($lpv-interesting, 70%) !default;
-$lpv-border: hsl(37deg, 5%, 13%) !default;
-
 .lpv {
   &__side {
     overflow: hidden;
@@ -18,15 +10,15 @@ $lpv-border: hsl(37deg, 5%, 13%) !default;
     display: flex;
     flex-flow: row wrap;
     overflow-y: auto;
-    background: $lpv-bg-movelist;
+    background: var(--c-lpv-bg-movelist, $lpv-bg-movelist);
     align-items: center;
     align-content: flex-start;
     will-change: scroll-position;
     user-select: none;
     line-height: 1.7;
     min-width: 20ch;
     index {
-      color: $lpv-font-shy;
+      color: var(--c-lpv-font-shy, $lpv-font-shy);
     }
     > index {
       flex: 0 0 15%;
@@ -40,54 +32,54 @@ $lpv-border: hsl(37deg, 5%, 13%) !default;
       font-weight: bold;
       white-space: nowrap;
       &.empty {
-        color: mix($lpv-font, $lpv-bg, 50%);
+        color: var(--c-lpv-font-shy, $lpv-font-shy);
       }
       &:not(.empty):hover {
-        background: mix($lpv-accent, $lpv-bg, 30%);
-        color: $lpv-accent-over;
+        background: var(--c-lpv-move-hover, $lpv-move-hover);
+        color: var(--c-lpv-accent-over, $lpv-accent-over);
         cursor: pointer;
       }
       &.ancestor {
-        color: $lpv-font-accent;
+        color: var(--c-lpv-font-accent, $lpv-font-accent);
       }
       &.current {
-        background: mix($lpv-accent, $lpv-bg, 70%) !important;
-        color: $lpv-accent-over;
+        background: var(--c-lpv-current-move, $lpv-current-move) !important;
+        color: var(--c-lpv-accent-over, $lpv-accent-over);
       }
       &.inaccuracy {
-        color: $lpv-inaccuracy;
+        color: var(--c-lpv-inaccuracy, $lpv-inaccuracy);
         &:hover {
-          background: $lpv-bg-inaccuracy-hover;
+          background: var(--c-lpv-bg-inaccuracy-hover, $lpv-bg-inaccuracy-hover);
         }
       }
       &.mistake {
-        color: $lpv-mistake;
+        color: var(--c-lpv-mistake, $lpv-mistake);
         &:hover {
-          background: $lpv-bg-mistake-hover;
+          background: var(--c-lpv-bg-mistake-hover, $lpv-bg-mistake-hover);
         }
       }
       &.blunder {
-        color: $lpv-blunder;
+        color: var(--c-lpv-blunder, $lpv-blunder);
         &:hover {
-          background: $lpv-bg-blunder-hover;
+          background: var(--c-lpv-bg-blunder-hover, $lpv-bg-blunder-hover);
         }
       }
       &.good {
-        color: $lpv-good-move;
+        color: var(--c-lpv-good-move, $lpv-good-move);
         &:hover {
-          background: $lpv-bg-good-hover;
+          background: var(--c-lpv-bg-good-hover, $lpv-bg-good-hover);
         }
       }
       &.brilliant {
-        color: $lpv-brilliant;
+        color: var(--c-lpv-brilliant, $lpv-brilliant);
         &:hover {
-          background: $lpv-bg-brilliant-hover;
+          background: var(--c-lpv-bg-brilliant-hover, $lpv-bg-brilliant-hover);
         }
       }
       &.interesting {
-        color: $lpv-interesting;
+        color: var(--c-lpv-interesting, $lpv-interesting);
         &:hover {
-          background: $lpv-bg-interesting-hover;
+          background: var(--c-lpv-bg-interesting-hover, $lpv-bg-interesting-hover);
         }
       }
     }
@@ -101,8 +93,8 @@ $lpv-border: hsl(37deg, 5%, 13%) !default;
     }
     > comment {
       flex: 1 1 100%;
-      background: $lpv-bg-variation;
-      border: 1px solid $lpv-border;
+      background: var(--c-lpv-bg-variation, $lpv-bg-variation);
+      border: 1px solid var(--c-lpv-side-border, $lpv-side-border);
       border-width: 1px 0;
       padding: 0.4em 1em;
       line-height: 1.4;
@@ -118,8 +110,8 @@ $lpv-border: hsl(37deg, 5%, 13%) !default;
       display: block;
       overflow: hidden;
       font-size: 0.8em;
-      background: $lpv-bg-variation;
-      border: 1px solid $lpv-border;
+      background: var(--c-lpv-bg-variation, $lpv-bg-variation);
+      border: 1px solid var(--c-lpv-side-border, $lpv-side-border);
       border-width: 1px 0;
       padding: 0em 0.6em;
       + variation {
@@ -146,7 +138,7 @@ $lpv-border: hsl(37deg, 5%, 13%) !default;
         margin: 0 0.3em;
       }
       paren {
-        color: $lpv-font-shy;
+        color: var(--c-lpv-font-shy, $lpv-font-shy);
         &.open {
           margin: 0 0.1em 0 0.2em;
         }