UX: Color exploration & base (#33)

about.json

@@ -19,11 +19,9 @@
   "color_schemes": {
     "Horizon": {
       "primary": "1A1A1A",
-      "primary-low": "ebecf9",
-      "primary-500": "8591ad",
       "secondary": "ffffff",
       "header_background": "f5f8ff",
-      "tertiary": "313270",
+      "tertiary": "595bca",
       "tertiary-low": "d8d9f3",
       "tertiary-50": "f5f8ff",
       "selected": "d8d9f3",

common/common.scss

@@ -12,3 +12,4 @@
 @import "chat";
 @import "misc";
 @import "mobile-stuff";
+@import "color-exploration";

scss/buttons.scss

@@ -41,7 +41,7 @@
   border: 1px solid var(--accent-color);
   //id like to use rgba of the accent colour but how to derive that?
   // box-shadow: 0px 0px 8px 2px oklch(from (var(--accent-color)) calc(l * 2) calc(c * 0.125) h);
-  background: var(--secondary);
+  background: var(--d-content-background);
 
   .d-icon {
     color: var(--accent-color);
@@ -51,7 +51,7 @@
     .discourse-no-touch & {
       border: 1px solid transparent;
       box-shadow: 0px 0px 8px 2px var(--button-box-shadow);
-      background: var(--secondary);
+      background: var(--d-content-background);
       color: var(--accent-color);
       .d-icon {
         color: var(--accent-color);
@@ -60,9 +60,9 @@
   }
   &:focus-visible {
     .discourse-no-touch & {
-      background: var(--secondary);
+      background: var(--d-content-background);
       color: var(--accent-color);
-      box-shadow: 0px 0px 0px 2px var(--secondary),
+      box-shadow: 0px 0px 0px 2px var(--d-content-background),
         0px 0px 0px 4px var(--button-box-shadow);
       .d-icon {
         color: var(--accent-color);
@@ -73,10 +73,10 @@
 //not shared with select-kit
 .btn-default {
   &:active {
-    color: var(--secondary);
+    color: var(--d-content-background);
     background: oklch(from var(--accent-color) 30% c h) !important;
     .d-icon {
-      color: var(--secondary);
+      color: var(--d-content-background);
     }
   }
 }
@@ -106,7 +106,7 @@
           rgba(255, 255, 255, 0) 100%
         ),
         var(--accent-color);
-      box-shadow: 0px 0px 0px 2px var(--secondary),
+      box-shadow: 0px 0px 0px 2px var(--d-content-background),
         0px 0px 0px 4px var(--button-box-shadow);
     }
   }

scss/color-exploration.scss

@@ -0,0 +1,95 @@
+:root {
+  --accent-base-color: #595bca;
+  --accent-color: light-dark(
+    var(--accent-base-color),
+    oklch(from var(--accent-base-color) calc(l * 0.95) c h)
+  );
+  //   --background-color: light-dark(#f5f8ff, #101112);
+  --background-color: light-dark(
+    oklch(from var(--accent-color) 98% calc(c * 0.25) h),
+    oklch(from var(--accent-color) 10% 0.025 h)
+  );
+  --header_primary-low-mid: light-dark(
+    oklch(from var(--background-color) calc(l * 0.8) calc(c * 2) h),
+    oklch(from var(--accent-color) calc(l * 0.9) calc(c * 0.25) h)
+  );
+  --header_primary-medium: light-dark(
+    oklch(from var(--background-color) calc(l * 0.6) calc(c * 2) h),
+    oklch(from var(--accent-color) calc(l * 1.25) calc(c * 0.25) h)
+  );
+  --d-content-background: light-dark(
+    oklch(from var(--accent-color) calc(l * 2) 0 h),
+    oklch(from var(--accent-color) calc(l * 0.375) 0 h)
+  );
+  --primary-300: light-dark(
+    oklch(from var(--accent-color) calc(l * 1.75) 0 h),
+    oklch(from var(--accent-color) calc(l * 0.75) 0 h)
+  );
+  --primary-low: var(--primary-300);
+  --d-hover: oklch(from var(--d-selected) l c h / 0.75);
+  --tertiary-med-or-tertiary: var(--accent-color);
+  --d-sidebar-highlight-hover-icon: var(--d-sidebar-link-color);
+  --search-color: light-dark(
+    oklch(from var(--accent-color) calc(l * 0.65) calc(c * 0.65) h),
+    oklch(from var(--accent-color) calc(l * 1.5) calc(c * 2) h)
+  );
+  --search-banner-text-color: light-dark(
+    oklch(from var(--accent-color) calc(l * 0.65) calc(c * 0.65) h),
+    oklch(from var(--accent-color) calc(l * 1.85) calc(c * 2) h)
+  );
+  --topic-card-shadow: light-dark(
+    oklch(from var(--accent-color) calc(l * 2) calc(c * 0.1) h / 0.5),
+    oklch(from var(--accent-color) calc(l * 0.2) calc(c * 0.01) h / 0.25)
+  );
+  --button-box-shadow: light-dark(
+    oklch(from var(--accent-color) calc(l * 2) calc(c * 0.125) h),
+    oklch(from var(--accent-color) calc(l * 0.75) calc(c * 0.5) h)
+  );
+  --d-selected: light-dark(
+    oklch(from var(--background-color) calc(l * 0.9) calc(c * 2) h),
+    oklch(from var(--accent-color) calc(l * 0.7) calc(c * 0.25) h)
+  );
+  --d-sidebar-highlight-hover-background: var(--d-selected);
+  --d-sidebar-border-color: light-dark(
+    oklch(from var(--background-color) calc(l * 0.85) calc(c * 1) h),
+    oklch(from var(--accent-color) calc(l * 0.7) calc(c * 0.25) h)
+  );
+  --d-chat-border: light-dark(
+    oklch(from var(--accent-color) calc(l * 1.5) calc(c * 0.25) h),
+    oklch(from var(--accent-color) calc(l * 0.25) calc(c * 0.25) h)
+  );
+  --accent-text-color: light-dark(#ffffff, #0f1024);
+  --d-sidebar-link-icon-color: light-dark(
+    oklch(from var(--accent-color) calc(l * 0.5) calc(c * 0.25) h),
+    oklch(from var(--accent-color) calc(l * 1.5) calc(c * 0.25) h)
+  );
+  --d-nav-color--active: var(--accent-color);
+  --d-sidebar-background: var(--background-color);
+  --d-sidebar-footer-fade: rgba(var(--tertiary-50-rgb), 1);
+  --d-sidebar-link-color: light-dark(
+    oklch(from var(--accent-color) calc(l * 0.75) calc(c * 0.25) h),
+    oklch(from var(--accent-color) calc(l * 1.5) calc(c * 0.25) h)
+  );
+  --d-sidebar-header-color: var(--d-sidebar-link-color);
+  --d-sidebar-suffix-color: light-dark(
+    oklch(from var(--accent-base-color) calc(l * 0.5) calc(c * 0.9) h),
+    oklch(from var(--accent-base-color) calc(l * 1) calc(c * 0.9) h)
+  );
+  --d-sidebar-active-suffix-color: light-dark(
+    oklch(from var(--accent-color) calc(l * 0.5) calc(c * 0.9) h),
+    oklch(from var(--accent-color) calc(l * 1) calc(c * 0.9) h)
+  );
+  --link-color: light-dark(
+    var(--accent-base-color),
+    oklch(from var(--accent-base-color) calc(l * 0.95) c h)
+  );
+  --link-color-hover: light-dark(
+    var(--accent-base-color),
+    oklch(from var(--accent-base-color) calc(l * 1.5) calc(c * 2.25) h)
+  );
+  --d-sidebar-highlight-suffix-color: var(--d-sidebar-active-suffix-color);
+  --d-sidebar-highlight-color: var(--primary);
+  --d-sidebar-highlight-background: var(--d-selected);
+  --d-sidebar-section-link-icon-size: 1em;
+  --d-input-bg-color: var(--d-content-background);
+}

scss/header.scss

@@ -30,3 +30,53 @@
 .user-menu.revamped .tabs-list .btn.active {
   background: var(--d-hover);
 }
+
+.discourse-no-touch .d-header-icons .icon:hover,
+.discourse-no-touch .d-header-icons .icon:focus,
+.header-sidebar-toggle button:focus:hover,
+.discourse-no-touch .header-sidebar-toggle button:hover {
+  background-color: transparent;
+}
+.discourse-no-touch .d-header-icons .icon:hover > .d-icon,
+.drop-down-mode .d-header-icons .active .icon > .d-icon,
+.drop-down-mode
+  .d-header-icons
+  .header-color-scheme-toggle
+  .-expanded
+  > .d-icon,
+.discourse-no-touch .btn-flat:hover .d-icon {
+  color: var(--header_primary-medium);
+}
+
+.discourse-no-touch .interface-color-selector-content {
+  border: none;
+  border-radius: var(--d-border-radius);
+  .btn {
+    border: none;
+    &:hover {
+      box-shadow: none;
+    }
+  }
+}
+
+.drop-down-mode .d-header-icons .active .icon,
+.drop-down-mode .d-header-icons .header-color-scheme-toggle .-expanded {
+  border-color: transparent;
+}
+
+.drop-down-mode .d-header-icons .active .icon,
+.drop-down-mode .d-header-icons .header-color-scheme-toggle .-expanded {
+  background-color: transparent;
+}
+
+.badge-notification {
+  color: var(--accent-text-color);
+}
+
+.user-menu .quick-access-panel li,
+.user-notifications-list li,
+.user-menu .quick-access-panel li.do-not-disturb,
+.menu-panel .panel-body-bottom .btn,
+.menu-panel .panel-body-bottom .btn:hover {
+  background-color: var(--d-content-background);
+}

scss/main.scss

@@ -113,9 +113,8 @@ aside.onebox {
 }
 
 .d-editor-preview-wrapper {
-  box-shadow: 0px 0px 1px 2px var(--tertiary-50),
+  // box-shadow: 0px 0px 0px 2px var(--accent-color);
-    0px 0px 24px 4px var(--tertiary-50);
+  border-radius: var(--d-border-radius);
-  border-radius: var(--d-border-radius-large);
   padding: 1em;
   background-color: var(--d-content-background);
 }

scss/misc.scss

@@ -44,8 +44,31 @@
   padding: 3px;
 }
 
-//alas too broad, is overruling links that we made grey because they are minor, for exmaple, date link on a post, dont have alternative yet
+.open .grippie {
-// a,
+  background-color: var(--accent-color);
-// a:visited {
+}
-//   color: var(--accent-color);
+
-// }
+.d-editor-textarea-wrapper.in-focus,
+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,
+.select-kit.multi-select.is-expanded .multi-select-header,
+.select-kit.multi-select .multi-select-header:focus {
+  border-color: var(--accent-color);
+  outline: 2px solid var(--accent-color);
+}
+
+#reply-control {
+  background-color: var(--background-color);
+}

scss/topic.scss

@@ -23,7 +23,7 @@
     border-radius: 0.75em;
     padding-left: 0.5em;
     margin-left: calc(-0.5em - 2.5px);
-    background: var(--secondary);
+    background: var(--d-content-background);
     height: 40px !important; // height is coming from element style have no other choice
   }
   .timelime-scroller-content {

scss/variables.scss

@@ -1,44 +1,8 @@
 :root {
-  --accent-color: #595bca;
-  --background-color: light-dark(#f5f8ff, #1b1c1e);
-  --search-color: light-dark(
-    oklch(from var(--accent-color) calc(l * 0.65) calc(c * 0.65) h),
-    oklch(from var(--accent-color) calc(l * 1.5) calc(c * 2) h)
-  );
-  --search-banner-text-color: light-dark(
-    oklch(from var(--accent-color) calc(l * 0.65) calc(c * 0.65) h),
-    oklch(from var(--accent-color) calc(l * 1.85) calc(c * 2) h)
-  );
-  --topic-card-shadow: light-dark(
-    oklch(from var(--accent-color) calc(l * 2) calc(c * 0.1) h / 0.5),
-    oklch(from var(--accent-color) calc(l * 0.2) calc(c * 0.01) h / 0.25)
-  );
-  --button-box-shadow: light-dark(
-    oklch(from var(--accent-color) calc(l * 2) calc(c * 0.125) h),
-    oklch(from var(--accent-color) calc(l * 0.75) calc(c * 0.5) h)
-  );
-  --d-selected: light-dark(
-    oklch(from var(--accent-color) calc(l * 1.9) calc(c * 2) h / 0.3),
-    oklch(from var(--accent-color) calc(l * 0.65) calc(c * 0.65) h / 0.75)
-  );
-  --d-chat-border: light-dark(
-    oklch(from var(--accent-color) calc(l * 1.5) calc(c * 0.25) h),
-    oklch(from var(--accent-color) calc(l * 0.25) calc(c * 0.25) h)
-  );
   --d-max-width: 1000px;
   --d-border-radius-large: 20px;
   --d-border-radius: 8px;
   --d-input-border-radius: 6px;
-  --accent-text-color: light-dark(#ffffff, #0f1024);
-  --d-content-background: var(--secondary);
-  --d-nav-color--active: var(--accent-color);
-  --d-sidebar-background: var(--background-color);
-  --d-sidebar-footer-fade: rgba(var(--tertiary-50-rgb), 1);
-  --d-sidebar-link-color: var(--primary);
-  --d-sidebar-highlight-color: var(--primary);
-  --d-sidebar-highlight-background: var(--d-selected);
-  --d-sidebar-section-link-icon-size: 1em;
-  --d-input-bg-color: var(--d-content-background);
   // --d-sidebar-row-height: 2.8em;
   //the idea is: block spacing can grow with font-size, but inline spacing should not to maintain horizontal (text) alignment
   --spacing-block-xs: 0.25em;