Feat/tailwind (#1179)

2020-09-22 22:36:37 +05:30
parent 45fb612793
commit b747d0273c
59 changed files with 2020 additions and 1431 deletions
--- a/assets/scss/themes.scss
+++ b/assets/scss/themes.scss
@@ -0,0 +1,114 @@
+@mixin baseTheme {
+  --font-body: 'Poppins', 'sans-serif';
+  --font-mono: 'Roboto Mono', 'monoscpace';
+  --font-icon: 'Material Icons';
+}
+
+/**
+  Main Themes:
+  - dark (default)
+  - light
+  - black
+  - auto
+ */
+
+// Dark is the default theme variant.
+@mixin darkTheme {
+  // Background color
+  --bg-color: rgba(32, 33, 36, 1);
+  // Light Background color
+  --bg-light-color: rgba(255, 255, 255, 0.04);
+  // Dark Background color
+  --bg-dark-color: rgba(0, 0, 0, 0.2);
+  // Text color
+  --fg-color: rgba(255, 255, 255, 0.9);
+  // Light Text color
+  --fg-light-color: rgba(255, 255, 255, 0.5);
+  // Border color
+  --brd-color: rgba(255, 255, 255, 0.05);
+  // Error color
+  --err-color: rgba(255, 255, 255, 0.05);
+  // Acent color
+  --ac-color: rgba(80, 250, 123, 1);
+  // Active text color
+  --act-color: rgba(32, 33, 36, 1);
+  // Auto-complete color
+  --atc-color: rgba(32, 33, 36, 1);
+  // Tooltip color
+  --tt-color: rgba(53, 53, 53, 1);
+}
+
+@mixin lightTheme {
+  // Background color
+  --bg-color: rgba(255, 255, 255, 1);
+  // Light Background color
+  --bg-light-color: rgba(0, 0, 0, 0.05);
+  // Dark Background color
+  --bg-dark-color: rgba(0, 0, 0, 0.02);
+  // Text color
+  --fg-color: rgba(0, 0, 0, 0.9);
+  // Light Text color
+  --fg-light-color: rgba(0, 0, 0, 0.6);
+  // Border color
+  --brd-color: rgba(0, 0, 0, 0.1);
+  // Error color
+  --err-color: rgba(0, 0, 0, 0.1);
+  // Acent color
+  --ac-color: rgba(80, 250, 123, 1);
+  // Active text color
+  --act-color: rgba(255, 255, 255, 1);
+  // Auto-complete color
+  --atc-color: rgba(255, 255, 255, 1);
+  // Tooltip color
+  --tt-color: rgba(220, 220, 220, 1);
+}
+
+@mixin blackTheme {
+  // Background color
+  --bg-color: rgba(0, 0, 0, 1);
+  // Light Background color
+  --bg-light-color: rgba(255, 255, 255, 0.02);
+  // Dark Background color
+  --bg-dark-color: rgba(255, 255, 255, 0.04);
+  // Text color
+  --fg-color: rgba(255, 255, 255, 0.9);
+  // Light Text color
+  --fg-light-color: rgba(255, 255, 255, 0.5);
+  // Border color
+  --brd-color: rgba(255, 255, 255, 0.05);
+  // Error color
+  --err-color: rgba(255, 255, 255, 0.05);
+  // Acent color
+  --ac-color: rgba(80, 250, 123, 1);
+  // Active text color
+  --act-color: rgba(0, 0, 0, 1);
+  // Auto-complete color
+  --atc-color: rgba(0, 0, 0, 1);
+  // Tooltip color
+  --tt-color: rgba(18, 18, 18, 1);
+}
+
+:root {
+  @include baseTheme;
+  @include darkTheme;
+}
+
+:root.light {
+  @include lightTheme;
+}
+
+:root.black {
+  @include blackTheme;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root.auto {
+    @include darkTheme;
+  }
+}
+
+@media (prefers-color-scheme: light) {
+  :root.auto {
+    @include lightTheme;
+  }
+}