Merge branch '12-feat-add-neutral-theme' into 'main'

Resolve "feat: Add neutral theme"

Closes #13 and #12

See merge request !9

about.json

+{
+  "name": "Community Theme",
+  "about_url": null,
+  "license_url": null,
+  "color_schemes": {
+      "Community Light": {
+          "primary": "222222",
+          "secondary": "ffffff",
+          "tertiary": "a9a4a4",
+          "quaternary": "797979",
+          "primary-medium": "C7C7C7",
+          "primary-low-mid": "eeeeee",
+          "header_background": "ffffff",
+          "header_primary": "333333",
+          "highlight": "ffff4d",
+          "danger": "e45735",
+          "success": "009900",
+          "love": "fa6c8d"
+    },
+      "Community Dark": {
+          "primary": "dddddd",
+          "secondary": "161616",
+          "tertiary": "cfcfcf",
+          "quaternary": "c14924",
+          "primary-medium": "C7C7C7",
+          "primary-low-mid": "eeeeee",
+          "header_background": "837e7e",
+          "header_primary": "222222",
+          "highlight": "a87137",
+          "danger": "e45735",
+          "success": "1ca551",
+          "love": "fa6c8d"
+    }
+  },
+  "components": ["https://github.com/tshenry/discourse-versatile-banner.git","https://github.com/tshenry/discourse-categories-layout-override.git",
+    "https://github.com/discourse/discourse-showcased-categories.git", "https://github.com/discourse/discourse-category-icons.git",
+  "https://github.com/discourse/DiscoTOC.git", "https://github.com/discourse/discourse-category-banners.git", "https://github.com/discourse/discourse-loading-slider.git",
+"https://github.com/discourse/Discourse-easy-footer.git", "https://github.com/discourse/discourse-icon-header-links.git"]
+}

common/common.scss

+@import 'variables';
+
+input[type="text"],
+input[type="password"],
+input[type="datetime"],
+input[type="datetime-local"],
+input[type="date"],
+input[type="month"],
+input[type="time"],
+input[type="week"],
+input[type="number"],
+input[type="email"],
+input[type="url"],
+input[type="search"],
+input[type="tel"],
+input[type="color"],
+.d-editor-textarea-wrapper, .select-kit-header {
+  @include border-radius;
+}
+
+input[type="text"]:focus,
+input[type="password"]:focus,
+input[type="datetime"]:focus,
+input[type="datetime-local"]:focus,
+input[type="date"]:focus,
+input[type="month"]:focus,
+input[type="time"]:focus,
+input[type="week"]:focus,
+input[type="number"]:focus,
+input[type="email"]:focus,
+input[type="url"]:focus,
+input[type="search"]:focus,
+input[type="tel"]:focus,
+input[type="color"]:focus,
+.d-editor-textarea-wrapper.in-focus,
+.select-kit.multi-select.is-expanded .multi-select-header,
+.select-kit.single-select.is-expanded .select-kit-header:not(.btn),
+.select-kit.single-select .select-kit-header:not(.btn):focus,
+.select-kit.single-select .select-kit-header:not(.btn):active {
+  @include border-radius;
+  box-shadow: none;
+  outline: none;
+}
+
+.d-header {
+  height: 5em;
+  box-shadow: none;
+}
+
+.alert.alert-info {
+  border-radius: 10px;
+}
+
+.custom-homepage-columns {
+  margin: 2em 0 2em 0;
+  .col {
+    position: relative;
+    @include border-radius;
+    background: $color-white;
+    padding: 2em 2em 1em;
+    border-top: 8px solid $tertiary;
+    box-shadow: 0 8px 60px 0 rgba(103,151,255,.10), 0 12px 90px 0 rgba(133,255,103,.10);
+    .header-wrapper {
+      color: var(--primary);
+      background-color: transparent;
+      .btn-primary {
+        display: none;
+      }
+    }
+    .btn-more {
+      color: var(--secondary);
+      background: var(--tertiary);
+      transition: all 0.3s linear;
+      @include border-radius;
+      text-transform: uppercase;
+      border: 1px solid var(--tertiary);
+      &:hover {
+        background: var(--tertiary);
+        color: var(--secondary);
+        box-shadow: 4px 4px $color-box-shadow;
+        transition: 0.3s;
+        @include border-radius;
+      }
+    }
+  }
+}
+
+.navigation-categories .search-banner {
+  @include border-radius;
+  height: 350px;
+  box-sizing: border-box;
+  padding: 2.5em 0 3em;
+  margin: 1em auto;
+  max-width: 1110px;
+}
+
+.category-box-inner {
+  background: $color-white;
+}
+
+.navigation-topics {
+  .container.list-container {
+    @include border-radius;
+    box-shadow: 0 8px 60px 0 rgba(103,151,255,.10), 0 12px 90px 0 rgba(133,255,103,.10);
+    padding: 2em;
+    background-color: $color-white;
+    border-top: 8px solid $tertiary;
+    margin-top: .8em;
+  }
+}
+
+.search-widget .search-context {
+  padding: 10px;
+  background-color: var(--tertiary-medium);
+  @include border-radius;
+}
+
+.search-menu .search-context .show-help {
+  color: $color-white;
+}
+
+.menu-panel .d-label {
+  color: $color-black;
+}
+
+a {
+  color: var(--tertiary-hover);
+}
+
+.category-boxes {
+  display: grid;
+  grid-gap: 2em;
+  grid-template-columns: 32% 32% 32%;
+  @include border-radius;
+  .category-box {
+    width: 100%;
+    margin: 0;
+    overflow: hidden;
+    border: none;
+    border-top: 8px solid;
+    background: var(--secondary);
+    @include border-radius;
+    box-shadow: 0px 2px 3px 0px rgba(2,47,57,.14);
+    .category-box-inner {
+      border: none;
+      padding: 0;
+      .category-details {
+        padding: 2em;
+      }
+    }
+    &:hover {
+      box-shadow: 0px 40px 30px 0px rgba(2,47,57,.10);
+      transform: translateY(-2px);
+    }
+  }
+}
+
+@media (max-width: 960px) {
+  .category-boxes.with-logos.with-subcategories {
+    grid-template-columns: 1fr;
+  }
+}
+
+.category-list-item.category {
+  @include border-radius;
+  border-right: 1px solid var(--primary-low) !important;
+  box-shadow: 0 0 4px 0 rgba(0,0,0,.10);
+  margin: 0 0.59em 2em .59em;
+  background: $color-white;
+}
+
+#create-topic {
+  color: var(--secondary);
+  background: var(--tertiary);
+  transition: all 0.3s linear;
+  @include border-radius;
+  text-transform: uppercase;
+  border: 2px solid var(--tertiary);
+  .fa {
+    color: var(--secondary);
+  }
+  &:hover {
+    background: var(--tertiary);
+    color: var(--secondary);
+    box-shadow: 4px 4px $color-box-shadow;
+    transition: all 0.3s linear;
+    @include border-radius;
+    .fa {
+      color: var(--secondary);
+    }
+  }
+}
+
+.open .grippie {
+  background: var(--tertiary);
+}
+
+.options.toolbar-popup-menu-options {
+  button.single-select-header.dropdown-select-box-header {
+    background: transparent;
+    border-radius: none;
+    border: none;
+    &:hover {
+      background: var(--tertiary);
+      border-radius: 0;
+    }
+  }
+}
+
+.list-controls .combo-box .combo-box-header {
+  border: none;
+  @include border-radius;
+  background-color: $color-white;
+}
+
+.menu-panel .panel-body-bottom .btn {
+  svg {
+    color: var(--tertiary);
+  }
+  &:hover {
+    background: var(--tertiary);
+    color: var(--secondary);
+  }
+}
+
+.nav-pills li a {
+  border: 1px solid transparent;
+  @include border-radius;
+  &:hover {
+    @include border-radius;
+    transition: all 0.3s linear;
+    background-color: transparent;
+    color: var(--tertiary);
+    border: 1px dashed var(--tertiary);
+  }
+  &.active {
+    @include border-radius;
+    transition: all 0.3s linear;
+    background: $color-mint;
+    color: var(--secondary);
+    border: 1px solid $color-mint;
+  }
+}
+
+.select-kit.dropdown-select-box .dropdown-select-box-header {
+  background: var(--tertiary);
+  @include border-radius;
+  border: 1px solid var(--tertiary);
+  color: var(--secondary);
+  svg {
+    color: var(--secondary);
+    &:hover {
+      color: var(--secondary);
+    }
+  }
+}
+
+.d-editor-button-bar .select-kit.dropdown-select-box .dropdown-select-box-header {
+  background: transparent;
+  color: var(--primary-medium);
+  border: 1px solid transparent;
+  border-radius: 0;
+  svg {
+    color: currentColor;
+  }
+  &:hover {
+    color: var(--secondary);
+    background: var(--tertiary-hover);
+    border: 1px solid var(--tertiary-hover);
+    border-radius: 5px;
+  }
+}
+
+.discourse-no-touch .btn:hover .d-icon, .discourse-no-touch .btn.btn-hover .d-icon {
+  color: var(--tertiary-hover);
+}
+
+.discourse-no-touch .btn:hover, .discourse-no-touch .btn.btn-hover {
+  color: var(--secondary);
+  background: var(--tertiary-hover);
+  border-radius: 5px;
+  .fa {
+    color: var(--secondary);
+  }
+}
+
+.menu-panel .widget-link:hover, .menu-panel .widget-link:focus,
+.menu-panel .categories-link:hover, .menu-panel .categories-link:focus {
+  background-color: var(--tertiary-low);
+}
+
+.btn-default {
+  color: var(--secondary);
+  background: var(--tertiary);
+  transition: all 0.3s linear;
+  @include border-radius;
+  text-transform: uppercase;
+  border: 1px solid var(--tertiary);
+  .fa {
+    color: var(--secondary);
+  }
+}
+
+.btn-primary {
+  @include border-radius;
+}
+
+.discourse-no-touch .btn-danger:hover {
+  background: var(--danger-hover);
+}
+
+.create {
+  @include border-radius;
+}
+
+.select-kit .select-kit-row.is-selected {
+  background-color: var(--secondary-very-high);
+}
+
+.modal-inner-container, .edit-category-footer {
+  .btn-primary {
+    @include border-radius;
+  }
+}
+
+.user-menu .quick-access-panel li:hover {
+  background-color: var(--tertiary-low);
+}
+
+a:hover {
+  color: var(--tertiary-hover);
+}
+
+.image-upload-controls .btn-default {
+  border: 1px solid var(--secondary);
+  .fa {
+    color: var(--secondary);
+  }
+}
+
+.admin-controls, .email-template, .admin-container {
+  .nav-pills>li a.active {
+    background: var(--tertiary);
+    color: var(--secondary);
+  }
+  .btn-primary {
+    @include border-radius;
+  }
+}
+
+.custom-search-banner-wrap h1, .custom-search-banner-wrap p {
+  color: $color-white;
+}
+
+.btn[href] {
+  color: var(--secondary);
+}
+
+summary.select-kit-header.single-select-header.dropdown-select-box-header {
+  padding: 0.5em;
+}
+
+.search-container .search-advanced-sidebar {
+  .search-advanced-title {
+    background: var(--tertiary);
+    color: var(--secondary);
+  }
+  .search-advanced-filters {
+    border: 1px dashed var(--tertiary);
+  }
+}

desktop/desktop.scss

+@import 'variables';
+
+body:not(.navigation-categories):not(.navigation-topics) #main-outlet {
+  @include border-radius;
+  box-shadow: 0 8px 60px 0 rgba(103,151,255,.10), 0 12px 90px 0 rgba(133,255,103,.10);
+  padding: 2em;
+  background-color: $color-white;
+  border-top: 8px solid $tertiary;
+  margin-top: .8em;
+}
+
+#main-outlet:after  {
+  content: "";
+  display: block;
+  position: fixed;
+  z-index: -1;
+  width: 500px;
+  height: 500px;
+  border-radius: 2000px;
+  background: $color-blue;
+  right: 1px;
+  top: -57px;
+}
+
+#main-outlet:before {
+  content: "";
+  display: block;
+  position: fixed;
+  z-index: -1;
+  width: 300px;
+  height: 300px;
+  border-radius: 30px;
+  background: $color-square-webkit-gradient;
+  background: $color-square-gradient;
+  left: 70px;
+  top: 350px;
+  transform: rotate(74deg);
+  transform-origin: 0 100%;
+}

mobile/mobile.scss

+.navigation-categories {
+  .custom-search-banner {
+    display: none;
+  }
+}

scss/variables.scss

+@mixin border-radius {
+  border-radius: 10px;
+}
+
+$color-white: #ffffff;
+$color-black: #000000;
+$color-box-shadow: #65a797;
+$color-mint: #75BDAD;
+$color-blue: #e5f8ff;
+$color-square-gradient: linear-gradient(4deg, rgba(143,236,202,.29) 55%, rgba(74, 247, 255, 0.08) 100%);
+$color-square-webkit-gradient: -webkit-linear-gradient(4deg, rgba(143,236,202,.29) 55%, rgba(74, 247, 255, 0.08) 100%);