From a88c7afef030bf16121c8e152a84d0a2a15d8c87 Mon Sep 17 00:00:00 2001
From: Sainnhe Park <i@sainnhe.dev>
Date: Mon, 31 Oct 2022 10:48:11 +0800
Subject: [PATCH] Redesign code structure

---
 src/edge-dark.less                |  35 +--------
 src/gruvbox-dark.less             |  35 +--------
 src/palette/edge-dark.less        |  31 ++++++++
 src/palette/gruvbox-dark.less     |  31 ++++++++
 src/{ => template}/base-dark.less | 121 ------------------------------
 src/template/chroma.less          |  27 +++++++
 src/template/dark.less            |   3 +
 src/template/fix.less             |  91 ++++++++++++++++++++++
 8 files changed, 187 insertions(+), 187 deletions(-)
 create mode 100644 src/palette/edge-dark.less
 create mode 100644 src/palette/gruvbox-dark.less
 rename src/{ => template}/base-dark.less (66%)
 create mode 100644 src/template/chroma.less
 create mode 100644 src/template/dark.less
 create mode 100644 src/template/fix.less

diff --git a/src/edge-dark.less b/src/edge-dark.less
index 242e387..7cddacc 100644
--- a/src/edge-dark.less
+++ b/src/edge-dark.less
@@ -1,33 +1,2 @@
-@primary:     #6cb6eb; // primary color used in main texts
-@secondary:   #d38aea; // secondary color used in some texts and text based buttons
-@tertiary:    #a0c980; // tertiary color used in other colored texts
-@fg:          #c5cdd9;
-@bg0:         #2b2d37;
-@bg1:         #333644;
-@bg2:         #363a49;
-@bg3:         #3a3e4e;
-@bg4:         #404455;
-@red:         #ec7279;
-@orange:      #deb974;
-@yellow:      #deb974;
-@green:       #a0c980;
-@cyan:        #5dbbc1;
-@blue:        #6cb6eb;
-@purple:      #d38aea;
-@grey:        #758094;
-@red-bg:      #55393d;
-@green-bg:    #394634;
-@blue-bg:     #354157;
-@yellow-bg:   #4e432f;
-@button1:     #6cb6eb;
-@button2:     #a0c980;
-@button-red:  #ec7279;
-@key:         @red;
-@operator:    @purple;
-@string:      @green;
-@value:       @green;
-@type:        @yellow;
-@function:    @blue;
-@special:     @cyan;
-
-@import "base-dark";
+@import "palette/edge-dark";
+@import "template/dark";
diff --git a/src/gruvbox-dark.less b/src/gruvbox-dark.less
index bb6cd62..f521899 100644
--- a/src/gruvbox-dark.less
+++ b/src/gruvbox-dark.less
@@ -1,33 +1,2 @@
-@primary:     #b8bb26; // primary color used in main texts
-@secondary:   #fe8019; // secondary color used in some texts and text based buttons
-@tertiary:    #fabd2f; // tertiary color used in other colored texts
-@fg:          #ebdbb2;
-@bg0:         #282828;
-@bg1:         #32302f;
-@bg2:         #3a3735;
-@bg3:         #45403d;
-@bg4:         #504945;
-@red:         #fb4934;
-@orange:      #fe8019;
-@yellow:      #fabd2f;
-@green:       #b8bb26;
-@cyan:        #8ec07c;
-@blue:        #83a598;
-@purple:      #d3869b;
-@grey:        #928374;
-@red-bg:      #4c3432;
-@green-bg:    #3b4439;
-@blue-bg:     #374141;
-@yellow-bg:   #4f422e;
-@button1:     #8ec07c;
-@button2:     #fe8019;
-@button-red:  #fb4934;
-@key:         @red;
-@operator:    @orange;
-@string:      @cyan;
-@value:       @purple;
-@type:        @yellow;
-@function:    @green;
-@special:     @blue;
-
-@import "base-dark";
+@import "palette/gruvbox-dark";
+@import "template/dark";
diff --git a/src/palette/edge-dark.less b/src/palette/edge-dark.less
new file mode 100644
index 0000000..9c8cb85
--- /dev/null
+++ b/src/palette/edge-dark.less
@@ -0,0 +1,31 @@
+@primary:     #6cb6eb; // primary color used in main texts
+@secondary:   #d38aea; // secondary color used in some texts and text based buttons
+@tertiary:    #a0c980; // tertiary color used in other colored texts
+@fg:          #c5cdd9;
+@bg0:         #2b2d37;
+@bg1:         #333644;
+@bg2:         #363a49;
+@bg3:         #3a3e4e;
+@bg4:         #404455;
+@red:         #ec7279;
+@orange:      #deb974;
+@yellow:      #deb974;
+@green:       #a0c980;
+@cyan:        #5dbbc1;
+@blue:        #6cb6eb;
+@purple:      #d38aea;
+@grey:        #758094;
+@red-bg:      #55393d;
+@green-bg:    #394634;
+@blue-bg:     #354157;
+@yellow-bg:   #4e432f;
+@button1:     #6cb6eb;
+@button2:     #a0c980;
+@button-red:  #ec7279;
+@key:         @red;
+@operator:    @purple;
+@string:      @green;
+@value:       @green;
+@type:        @yellow;
+@function:    @blue;
+@special:     @cyan;
diff --git a/src/palette/gruvbox-dark.less b/src/palette/gruvbox-dark.less
new file mode 100644
index 0000000..b2488a5
--- /dev/null
+++ b/src/palette/gruvbox-dark.less
@@ -0,0 +1,31 @@
+@primary:     #b8bb26; // primary color used in main texts
+@secondary:   #fe8019; // secondary color used in some texts and text based buttons
+@tertiary:    #fabd2f; // tertiary color used in other colored texts
+@fg:          #ebdbb2;
+@bg0:         #282828;
+@bg1:         #32302f;
+@bg2:         #3a3735;
+@bg3:         #45403d;
+@bg4:         #504945;
+@red:         #fb4934;
+@orange:      #fe8019;
+@yellow:      #fabd2f;
+@green:       #b8bb26;
+@cyan:        #8ec07c;
+@blue:        #83a598;
+@purple:      #d3869b;
+@grey:        #928374;
+@red-bg:      #4c3432;
+@green-bg:    #3b4439;
+@blue-bg:     #374141;
+@yellow-bg:   #4f422e;
+@button1:     #8ec07c;
+@button2:     #fe8019;
+@button-red:  #fb4934;
+@key:         @red;
+@operator:    @orange;
+@string:      @cyan;
+@value:       @purple;
+@type:        @yellow;
+@function:    @green;
+@special:     @blue;
diff --git a/src/base-dark.less b/src/template/base-dark.less
similarity index 66%
rename from src/base-dark.less
rename to src/template/base-dark.less
index edad7a1..a42fa1d 100644
--- a/src/base-dark.less
+++ b/src/template/base-dark.less
@@ -155,124 +155,3 @@
   accent-color: var(--color-accent);
   color-scheme: dark;
 }
-
-/* code theme */
-.chroma .nx {
-  color: @fg;
-}
-.chroma .c, .chroma .c1, .chroma .ch {
-  color: @grey;
-}
-.chroma .k, .chroma .kc, .chroma .kd, .chroma .kn, .chroma .kp, .chroma .kr {
-  color: @key;
-}
-.chroma .o, .chroma .ow {
-  color: @operator;
-}
-.chroma .s, .chroma .si, .chroma .sa, .chroma .se, .chroma .sr, .chroma .s1, .chroma .s2, .chroma .nt, .chroma .cpf {
-  color: @string;
-}
-.chroma .m, .chroma .mb, .chroma .mf, .chroma .mh, .chroma .mi, .chroma .mo {
-  color: @value;
-}
-.chroma .kt, .chroma .nc, .chroma .nn, .chroma .nv {
-  color: @type;
-}
-.chroma .nf, .chroma .nb, .chroma .na {
-  color: @function;
-}
-.chroma .bp, .chroma .cp, .chroma .ne, .chroma .nd {
-  color: @special;
-}
-
-/* primary buttons */
-.ui.primary.button, .ui.primary.buttons .button {
-  background: @button1;
-  background-color: @button1 !important;
-  color: @bg0;
-}
-
-.ui.primary.button:hover, .ui.primary.buttons .button:hover {
-  background: fade(@button1, 80%);
-  background-color: fade(@button1, 80%) !important;
-  color: @bg0;
-}
-
-/* secondary buttons */
-.ui.green.buttons .button, .ui.green.button {
-  background: @button2;
-  background-color: @button2;
-  color: @bg0;
-}
-
-.ui.green.buttons .button:hover, .ui.green.button:hover {
-  background: fade(@button2, 80%);
-  background-color: fade(@button2, 80%);
-  color: @bg0;
-}
-
-/* red buttons */
-.ui.red.labels .label, .ui.ui.ui.red.label, .ui.red.button, .ui.red.buttons .button {
-  background: @button-red;
-  background-color: @button-red;
-  color: @bg0;
-}
-
-.ui.red.labels .label:hover, .ui.ui.ui.red.label:hover, .ui.red.button:hover, .ui.red.buttons .button:hover {
-  background: fade(@button-red, 80%);
-  background-color: fade(@button-red, 80%);
-  color: @bg0;
-}
-
-/* text based buttons (purple) */
-.ui.labeled.button.disabled>.button, .ui.basic.buttons .button, .ui.basic.button {
-  color: @secondary;
-}
-
-.ui.labeled.button.disabled>.button:hover, .ui.basic.buttons .button:hover, .ui.basic.button:hover {
-  color: @secondary;
-}
-
-/* repo title && header */
-.repo-title {
-  color: @secondary;
-}
-
-/* star number && fork number */
-.repo-buttons button[disabled] ~ .label,
-.repo-buttons .ui.labeled.button.disabled > .label {
-  color: @primary;
-}
-
-.ui.basic.labels .label, .ui.basic.label {
-  color: @primary;
-}
-
-/* hover on commits, branch, tags in project home page */
-.repository .ui.segment.sub-menu .list .item a:hover,
-.ui.tabular.menu .item:hover {
-  color: var(--color-text-hover);
-}
-
-/* scroll bar */
-* {
-  scrollbar-color: @secondary transparent !important;
-}
-::-webkit-scrollbar {
-  width: 10px;
-  height: 10px;
-}
-::-webkit-scrollbar-thumb {
-  box-shadow: inset 0 0 0 6px @secondary !important;
-  border: 2px solid transparent;
-  border-radius: 5px !important;
-}
-::-webkit-scrollbar-thumb:window-inactive {
-  box-shadow: inset 0 0 0 6px @secondary !important;
-}
-::-webkit-scrollbar-thumb:hover {
-  box-shadow: inset 0 0 0 6px @secondary !important;
-}
-::-webkit-scrollbar-corner {
-  background: transparent;
-}
diff --git a/src/template/chroma.less b/src/template/chroma.less
new file mode 100644
index 0000000..f9e58a0
--- /dev/null
+++ b/src/template/chroma.less
@@ -0,0 +1,27 @@
+.chroma .nx {
+  color: @fg;
+}
+.chroma .c, .chroma .c1, .chroma .ch {
+  color: @grey;
+}
+.chroma .k, .chroma .kc, .chroma .kd, .chroma .kn, .chroma .kp, .chroma .kr {
+  color: @key;
+}
+.chroma .o, .chroma .ow {
+  color: @operator;
+}
+.chroma .s, .chroma .si, .chroma .sa, .chroma .se, .chroma .sr, .chroma .s1, .chroma .s2, .chroma .nt, .chroma .cpf {
+  color: @string;
+}
+.chroma .m, .chroma .mb, .chroma .mf, .chroma .mh, .chroma .mi, .chroma .mo {
+  color: @value;
+}
+.chroma .kt, .chroma .nc, .chroma .nn, .chroma .nv {
+  color: @type;
+}
+.chroma .nf, .chroma .nb, .chroma .na {
+  color: @function;
+}
+.chroma .bp, .chroma .cp, .chroma .ne, .chroma .nd {
+  color: @special;
+}
diff --git a/src/template/dark.less b/src/template/dark.less
new file mode 100644
index 0000000..be28dff
--- /dev/null
+++ b/src/template/dark.less
@@ -0,0 +1,3 @@
+@import "base-dark";
+@import "chroma";
+@import "fix";
diff --git a/src/template/fix.less b/src/template/fix.less
new file mode 100644
index 0000000..b8f862d
--- /dev/null
+++ b/src/template/fix.less
@@ -0,0 +1,91 @@
+/* primary buttons */
+.ui.primary.button, .ui.primary.buttons .button {
+  background: @button1;
+  background-color: @button1 !important;
+  color: @bg0;
+}
+
+.ui.primary.button:hover, .ui.primary.buttons .button:hover {
+  background: fade(@button1, 80%);
+  background-color: fade(@button1, 80%) !important;
+  color: @bg0;
+}
+
+/* secondary buttons */
+.ui.green.buttons .button, .ui.green.button {
+  background: @button2;
+  background-color: @button2;
+  color: @bg0;
+}
+
+.ui.green.buttons .button:hover, .ui.green.button:hover {
+  background: fade(@button2, 80%);
+  background-color: fade(@button2, 80%);
+  color: @bg0;
+}
+
+/* red buttons */
+.ui.red.labels .label, .ui.ui.ui.red.label, .ui.red.button, .ui.red.buttons .button {
+  background: @button-red;
+  background-color: @button-red;
+  color: @bg0;
+}
+
+.ui.red.labels .label:hover, .ui.ui.ui.red.label:hover, .ui.red.button:hover, .ui.red.buttons .button:hover {
+  background: fade(@button-red, 80%);
+  background-color: fade(@button-red, 80%);
+  color: @bg0;
+}
+
+/* text based buttons (purple) */
+.ui.labeled.button.disabled>.button, .ui.basic.buttons .button, .ui.basic.button {
+  color: @secondary;
+}
+
+.ui.labeled.button.disabled>.button:hover, .ui.basic.buttons .button:hover, .ui.basic.button:hover {
+  color: @secondary;
+}
+
+/* repo title && header */
+.repo-title {
+  color: @secondary;
+}
+
+/* star number && fork number */
+.repo-buttons button[disabled] ~ .label,
+.repo-buttons .ui.labeled.button.disabled > .label {
+  color: @primary;
+}
+
+.ui.basic.labels .label, .ui.basic.label {
+  color: @primary;
+}
+
+/* hover on commits, branch, tags in project home page */
+.repository .ui.segment.sub-menu .list .item a:hover,
+.ui.tabular.menu .item:hover {
+  color: var(--color-text-hover);
+}
+
+/* scroll bar */
+* {
+  scrollbar-color: @secondary transparent !important;
+}
+::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
+}
+::-webkit-scrollbar-thumb {
+  box-shadow: inset 0 0 0 6px @secondary !important;
+  border: 2px solid transparent;
+  border-radius: 5px !important;
+}
+::-webkit-scrollbar-thumb:window-inactive {
+  box-shadow: inset 0 0 0 6px @secondary !important;
+}
+::-webkit-scrollbar-thumb:hover {
+  box-shadow: inset 0 0 0 6px @secondary !important;
+}
+::-webkit-scrollbar-corner {
+  background: transparent;
+}