[Theme] Port of Sakura CSS

src/configuration-component.ts

@@ -138,6 +138,8 @@ 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="sakura">Sakura</option>
+        <option value="sakura-vader">Sakura Vader</option>
       </select>
 
       <h3 id="heading-enable">Enable Utterances</h3>

src/stylesheets/themes/sakura-vader/button.scss

@@ -0,0 +1,21 @@
+@import "./variables";
+
+.btn-primary {
+	background-color: $color-blossom;
+	border: 1px solid $color-blossom;
+  color: $color-bg;
+
+	.octicon{
+		color: $color-bg;
+	}
+}
+
+.btn-primary:hover {
+	background-color: $color-fade;
+	color: $color-bg;
+	outline: 0;
+}
+
+.btn-primary:disabled {
+	opacity: .5;
+}

src/stylesheets/themes/sakura-vader/index.scss

@@ -0,0 +1,19 @@
+@import "./variables";
+@import "../../index";
+@import "./syntax";
+@import "./button.scss";
+
+a {
+	text-decoration: none;
+	color: $color-blossom;
+
+	&:visited {
+		color: darken($color-blossom, 10%);
+	}
+
+	&:hover {
+		text-decoration: none;
+		color: $color-fade;
+		border-bottom: 2px solid $color-text;
+	}
+}

src/stylesheets/themes/sakura-vader/sakura-vader.scss

@@ -0,0 +1,13 @@
+$color-force: #DA4453;
+$color-blossom: lighten($color-force, 20%);
+$color-fade: $color-force;
+
+$color-bg: #120c0e;
+$color-bg-alt: #40363a;
+
+/* $color-text: #dedce5; */
+$color-text: #d9d8dc;
+$font-size-base: 1.8rem;
+
+$font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
+$font-family-heading: $font-family-base;

src/stylesheets/themes/sakura-vader/syntax.scss

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

src/stylesheets/themes/sakura-vader/utterances.scss

@@ -0,0 +1,21 @@
+@import "./variables";
+@import "../../utterances";
+@import "./syntax";
+@import "./button.scss";
+
+.timeline-comment {
+	a {
+			text-decoration: none;
+			color: $color-blossom;
+
+			&:visited {
+				color: darken($color-blossom, 10%);
+			}
+
+			&:hover {
+				text-decoration: none;
+				color: $color-fade;
+				border-bottom: 2px solid $color-text;
+			}	
+		}
+}

src/stylesheets/themes/sakura-vader/variables.scss

@@ -0,0 +1,22 @@
+@import "./sakura-vader.scss";
+
+/* Icy-Dark overwrites */
+
+$gray-000: $color-blossom;
+$gray-100: $color-blossom;
+$gray-200: $color-blossom;
+$gray-300: $color-blossom;
+$gray-400: $color-text;
+$gray-600: $color-text;
+$gray-700: $color-text;
+$bg-white: $color-bg;
+$bg-gray: $color-bg-alt;
+$bg-gray-light: darken($bg-gray, 5%);
+$border-gray: $color-bg-alt;
+$border-gray-dark: $border-gray;
+$text-gray: $color-text;
+$text-gray-dark: $color-text;
+$text-blue: $color-blossom;
+$bg-blue-light: $color-blossom;
+$black-fade-15: rgba(#fff, 0.15);
+$black-fade-30: rgba(#fff, 0.3);

src/stylesheets/themes/sakura/button.scss

@@ -0,0 +1,21 @@
+@import "./variables";
+
+.btn-primary {
+	background-color: $color-blossom;
+	border: 1px solid $color-blossom;
+  color: $color-bg;
+
+	.octicon{
+		color: $color-bg;
+	}
+}
+
+.btn-primary:hover {
+	background-color: $color-fade;
+	color: $color-bg;
+	outline: 0;
+}
+
+.btn-primary:disabled {
+	opacity: .5;
+}

src/stylesheets/themes/sakura/index.scss

@@ -0,0 +1,19 @@
+@import "./variables";
+@import "../../index";
+@import "./syntax";
+@import "./button.scss";
+
+a {
+	text-decoration: none;
+	color: $color-blossom;
+
+	&:visited {
+		color: darken($color-blossom, 10%);
+	}
+
+	&:hover {
+		text-decoration: none;
+		color: $color-fade;
+		border-bottom: 2px solid $color-text;
+	}
+}

src/stylesheets/themes/sakura/sakura.scss

@@ -0,0 +1,11 @@
+$color-blossom: #1d7484;
+$color-fade: #982c61;
+
+$color-bg: #f9f9f9;
+$color-bg-alt: #f1f1f1;
+
+$color-text: #4a4a4a;
+$font-size-base: 1.8rem;
+
+$font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
+$font-family-heading: $font-family-base;

src/stylesheets/themes/sakura/syntax.scss

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

src/stylesheets/themes/sakura/utterances.scss

@@ -0,0 +1,21 @@
+@import "./variables";
+@import "../../utterances";
+@import "./syntax";
+@import "./button.scss";
+
+.timeline-comment {
+	a {
+			text-decoration: none;
+			color: $color-blossom;
+
+			&:visited {
+				color: darken($color-blossom, 10%);
+			}
+
+			&:hover {
+				text-decoration: none;
+				color: $color-fade;
+				border-bottom: 2px solid $color-text;
+			}	
+		}
+}

src/stylesheets/themes/sakura/variables.scss

@@ -0,0 +1,22 @@
+@import "./sakura.scss";
+
+/* Icy-Dark overwrites */
+
+$gray-000: $color-blossom;
+$gray-100: $color-blossom;
+$gray-200: $color-blossom;
+$gray-300: $color-blossom;
+$gray-400: $color-text;
+$gray-600: $color-text;
+$gray-700: $color-text;
+$bg-white: $color-bg;
+$bg-gray: $color-bg-alt;
+$bg-gray-light: darken($bg-gray, 5%);
+$border-gray: $color-bg-alt;
+$border-gray-dark: $border-gray;
+$text-gray: $color-text;
+$text-gray-dark: $color-text;
+$text-blue: $color-blossom;
+$bg-blue-light: $color-blossom;
+$black-fade-15: rgba(#fff, 0.15);
+$black-fade-30: rgba(#fff, 0.3);