From a75c99a3eb61bab411aa51c3ac7a3738ddc8587c Mon Sep 17 00:00:00 2001
From: Callum Keogan <48253321+calkeo@users.noreply.github.com>
Date: Thu, 3 Mar 2022 00:02:39 +0000
Subject: [PATCH] Add indigo-dark theme

---
 src/configuration-component.ts                |  1 +
 .../themes/indigo-dark/button.scss            | 22 +++++++++++++++++++
 src/stylesheets/themes/indigo-dark/index.scss |  4 ++++
 .../themes/indigo-dark/syntax.scss            |  1 +
 .../themes/indigo-dark/utterances.scss        |  4 ++++
 .../themes/indigo-dark/variables.scss         | 21 ++++++++++++++++++
 6 files changed, 53 insertions(+)
 create mode 100644 src/stylesheets/themes/indigo-dark/button.scss
 create mode 100644 src/stylesheets/themes/indigo-dark/index.scss
 create mode 100644 src/stylesheets/themes/indigo-dark/syntax.scss
 create mode 100644 src/stylesheets/themes/indigo-dark/utterances.scss
 create mode 100644 src/stylesheets/themes/indigo-dark/variables.scss

diff --git a/src/configuration-component.ts b/src/configuration-component.ts
index f07de40c..39410d44 100644
--- a/src/configuration-component.ts
+++ b/src/configuration-component.ts
@@ -138,6 +138,7 @@ export class ConfigurationComponent {
         <option value="photon-dark">Photon Dark</option>
         <option value="boxy-light">Boxy Light</option>
         <option value="gruvbox-dark">Gruvbox Dark</option>
+        <option value="indigo-dark">Indigo Dark</option>
       </select>
 
       <h3 id="heading-enable">Enable Utterances</h3>
diff --git a/src/stylesheets/themes/indigo-dark/button.scss b/src/stylesheets/themes/indigo-dark/button.scss
new file mode 100644
index 00000000..701ba754
--- /dev/null
+++ b/src/stylesheets/themes/indigo-dark/button.scss
@@ -0,0 +1,22 @@
+.btn-primary {
+  background: $button-normal;
+  border: 0;
+  color: $text-gray;
+}
+
+.btn-primary:hover {
+  background: $button-hover;
+}
+
+.btn-primary:active {
+  background: $button-pressed;
+}
+
+.btn-primary:focus {
+  box-shadow: 0 0 0 1px #4f46e5 inset, 0 0 0 1px #4f46e5, 0 0 0 4px #818cf8;
+}
+
+.btn-primary:disabled {
+  background: $button-normal;
+  opacity: 0.4;
+}
diff --git a/src/stylesheets/themes/indigo-dark/index.scss b/src/stylesheets/themes/indigo-dark/index.scss
new file mode 100644
index 00000000..dc150078
--- /dev/null
+++ b/src/stylesheets/themes/indigo-dark/index.scss
@@ -0,0 +1,4 @@
+@import "./variables";
+@import "../../index";
+@import "./syntax";
+@import "./button.scss";
diff --git a/src/stylesheets/themes/indigo-dark/syntax.scss b/src/stylesheets/themes/indigo-dark/syntax.scss
new file mode 100644
index 00000000..6fd1d451
--- /dev/null
+++ b/src/stylesheets/themes/indigo-dark/syntax.scss
@@ -0,0 +1 @@
+@import "github-syntax-dark/lib/github-dark";
diff --git a/src/stylesheets/themes/indigo-dark/utterances.scss b/src/stylesheets/themes/indigo-dark/utterances.scss
new file mode 100644
index 00000000..1bd16b05
--- /dev/null
+++ b/src/stylesheets/themes/indigo-dark/utterances.scss
@@ -0,0 +1,4 @@
+@import "./variables";
+@import "../../utterances";
+@import "./syntax";
+@import "./button.scss";
diff --git a/src/stylesheets/themes/indigo-dark/variables.scss b/src/stylesheets/themes/indigo-dark/variables.scss
new file mode 100644
index 00000000..c0dc64cb
--- /dev/null
+++ b/src/stylesheets/themes/indigo-dark/variables.scss
@@ -0,0 +1,21 @@
+$gray-000: #1f2937;
+$gray-100: #374151;
+$gray-200: #4b5563;
+$gray-300: #6b7280;
+$gray-400: #9ca3af;
+$gray-600: #d1d5db;
+$gray-700: #e5e7eb;
+$bg-white: darken($gray-100, 3%);
+$bg-gray: $gray-100;
+$bg-gray-light: darken($bg-gray, 5%);
+$border-gray: $gray-200;
+$border-gray-dark: $border-gray;
+$text-gray: #ededf0;
+$text-gray-dark: #d7d7db;
+$text-blue: #a5b4fc;
+$bg-blue-light: #182030;
+$black-fade-15: rgba(#fff, 0.15);
+$black-fade-30: rgba(#fff, 0.3);
+$button-normal: #4f46e5;
+$button-hover: #6366f1;
+$button-pressed: #3730a3;