adds hugo teminal orange theme

src/configuration-component.ts

@@ -133,6 +133,7 @@ export class ConfigurationComponent {
         <option value="icy-dark">Icy Dark</option>
         <option value="dark-blue">Dark Blue</option>
         <option value="photon-dark">Photon Dark</option>
+        <option value="hugo-terminal-orange">Hugo Terminal Orange</option>
       </select>
 
       <h3 id="heading-enable">Enable Utterances</h3>

src/stylesheets/themes/hugo-terminal-orange/button.scss

@@ -0,0 +1,24 @@
+@import "./variables";
+
+.btn-primary {
+    color: $gray-900;
+    border-color: $gray-900;
+    background: $orange;
+
+    &:hover, &:active, &:focus {
+        border-color: $gray-900;
+        background: $orange;
+    }
+
+    &:disabled {
+        color: $gray-900;
+        background: $orange-200;
+    }
+}
+
+button[role=tab] {
+  color: $gray-600;
+  .selected {
+    color: $text-gray-dark;
+  }
+}

src/stylesheets/themes/hugo-terminal-orange/code.scss

@@ -0,0 +1,6 @@
+@import "./variables";
+
+.bg-gray-light,
+.bg-white {
+  background-color: $bg-gray !important;
+}

src/stylesheets/themes/hugo-terminal-orange/combobox.scss

@@ -0,0 +1,7 @@
+@import "./variables";
+
+.form-control, .form-select {
+  color: $text-gray-dark;
+  background-color: $bg-white !important;
+  border-radius: 3px;
+}

src/stylesheets/themes/hugo-terminal-orange/comment.scss

@@ -0,0 +1,11 @@
+@import "./variables";
+
+.form-select {
+  background: transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAUAgMAAAD5DFXkAAAACVBMVEXMzMzMzMzMzMzgWE1NAAAAAXRSTlMAQObYZgAAAAFiS0dEAIgFHUgAAAAJcEhZcwAACxMAAAsTAQCanBgAAAAHdElNRQfiCwMFBDi4mDGnAAAAR0lEQVQI123JIRUAIQAE0eUEgghEIAV5SEEEIiAQMCnZh74RX+xKr6+bNE3ZBjxBV4KpAlt/NTjKsBRhKED1ePzkZeIwoeoCtokT7bjAVYwAAAAASUVORK5CYII=) no-repeat right 8px center;
+  background-size: 8px 10px;
+}
+
+.markdown-body kbd {
+  background-color: transparent;
+  color: $text-gray-dark;
+}

src/stylesheets/themes/hugo-terminal-orange/glow.scss

@@ -0,0 +1,18 @@
+@import "./variables";
+
+*:focus {
+  outline: none !important;
+  box-shadow: 0 0 0.2em 0.1em opacify($highlight, 0.1);
+  border-radius: 1px;
+}
+
+.tabnav-tab,
+.form-control,
+.form-select {
+  &.focus,
+  &:focus {
+    border-color: transparent;
+    box-shadow: 0 0 0 0.11em opacify($highlight, 0.1) !important;
+    outline-color: transparent;
+  }
+}

src/stylesheets/themes/hugo-terminal-orange/heading.scss

@@ -0,0 +1,5 @@
+@import "./variables";
+
+h1, h2, h3, h4, h5, h6 {
+  border-color: $line !important;
+}

src/stylesheets/themes/hugo-terminal-orange/index.scss

@@ -0,0 +1,24 @@
+@import "./variables";
+@import "../../index";
+@import "./syntax";
+@import "./button.scss";
+@import "./glow.scss";
+@import "./heading.scss";
+@import "./comment.scss";
+@import "./selection.scss";
+@import "./placeholder.scss";
+@import "./combobox.scss";
+@import "./code.scss";
+
+body {
+  background-color: $bg-page;
+}
+
+iframe {
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}

src/stylesheets/themes/hugo-terminal-orange/placeholder.scss

@@ -0,0 +1,13 @@
+@import "./variables";
+
+@mixin placeholder {
+  ::placeholder { @content; }
+  ::-webkit-input-placeholder { @content; }
+  ::-moz-placeholder { @content; }
+  :-moz-placeholder { @content; }
+  :-ms-input-placeholder { @content; }
+}
+
+@include placeholder {
+  color: $text-gray-dark;
+}

src/stylesheets/themes/hugo-terminal-orange/selection.scss

@@ -0,0 +1,15 @@
+@import "./variables";
+
+@mixin selection($element) {
+  #{$element}::-moz-selection { @content; }
+  #{$element}::selection { @content; }
+}
+
+@include selection("") {
+  background: $highlight;
+  color: $text-gray-dark !important;
+}
+
+@include selection("img") {
+  background: transparentize($highlight, 0.25);
+}

src/stylesheets/themes/hugo-terminal-orange/syntax.scss

@@ -0,0 +1 @@
+@import "github-syntax-dark/lib/github-dark";

src/stylesheets/themes/hugo-terminal-orange/utterances.scss

@@ -0,0 +1,11 @@
+@import "./variables";
+@import "../../utterances";
+@import "./syntax";
+@import "./button.scss";
+@import "./glow.scss";
+@import "./heading.scss";
+@import "./comment.scss";
+@import "./selection.scss";
+@import "./placeholder.scss";
+@import "./combobox.scss";
+@import "./code.scss";

src/stylesheets/themes/hugo-terminal-orange/variables.scss

@@ -0,0 +1,25 @@
+$orange: rgb(255,168,106);
+$orange-200: #ffd1ac;
+$gray-000: #181818;
+$gray-100: #2B303B;/*comment header bg*/
+$gray-200: #24292e;
+$gray-300: #4e4c4b;
+$gray-400: #586069;
+$gray-600: #bbbbbb;
+$gray-700: #959da5;
+$gray-900: #24292e;
+$bg-white: #222129; /*commnet bg*/
+$bg-gray: $gray-100; /*source code bg*/
+$bg-gray-light: darken($bg-gray, 5%);
+$border-gray: $gray-300; /*comment*/
+$border-gray-dark: $border-gray;
+$black-fade-15: rgba(#fff, 0.15);
+$black-fade-30: rgba(#fff, 0.3);
+$text-gray: #c9c9c9;
+$text-gray-dark: #f7f7f7;
+$text-blue: $orange;
+$bg-blue-light: #212021;
+$bg-page: #222129;
+
+$highlight: $orange;
+$line: #6f6e6e;