Merge branch 'master' into feature/nucleus-tabs

packages/@nucleus/app/styles/doc/_custom-addon-theme.scss

@@ -69,6 +69,11 @@ h4 a.heading-anchor {
   color: #2c5cc5; // used in demos
 }
 
+.docs-md__code {
+  background: #282c34;
+  color: #abb2bf;
+}
+
 button.docs-text-grey-lighter {
   color: #12344d;
   padding: 4px;
@@ -98,3 +103,25 @@ html [type=button],
 [type=submit] {
   border-radius: 4px; // to prevent tailwind CSS from overriding this value in ember-cli-addon-doc
 }
+
+.mode-toggle {
+  z-index: 99999;
+  color: #202020;
+  position: absolute;
+  right: 25px;
+  top: 27px;
+}
+
+@media only screen and (max-width: 1450px) {
+  .mode-toggle {
+    top: 100px;
+    right: 25px;
+  }
+}
+
+@media only screen and (max-width: 750px) {
+  .mode-toggle {
+    top: 100px;
+    right: 70px;
+  }
+}

packages/@nucleus/app/styles/doc/_custom-syntax-highlight.scss

@@ -73,3 +73,38 @@
 .hljs-link {
   text-decoration: underline;
 }
+
+//Custom Syntax Highlight for Dark Mode
+body.dark {
+  .hljs {
+    color: #caa540;
+    background: #272b34;
+  }
+
+  .hljs-comment,
+  .hljs-quote {
+    color: #a1a7a0;
+  }
+
+  .hljs-doctag,
+  .hljs-keyword,
+  .hljs-formula {
+    color: #c44ec2;
+  }
+
+  .hljs-built_in,
+  .hljs-class .hljs-title {
+    color: #e29a00;
+  }
+
+  .hljs-attr,
+  .hljs-variable,
+  .hljs-template-variable,
+  .hljs-type,
+  .hljs-selector-class,
+  .hljs-selector-attr,
+  .hljs-selector-pseudo,
+  .hljs-number {
+    color: #c38500;
+  }
+}

packages/@nucleus/app/styles/doc/_dark-mode-theme.scss

@@ -0,0 +1,149 @@
+body.dark {
+  & > .ember-view {
+    background: #171717;
+  }
+
+  :root {
+    --brand-primary: #021f60;
+  }
+
+  .docs-bg-brand {
+    background-color: #021f60 !important;
+  }
+
+  //Dark Mode Toggle Icon Fill
+  .toggle-icon {
+    fill: #ddd;
+  }
+
+  .data-search-box-input {
+    color: white;
+  }
+
+  .docs-viewer {
+    background-color: #202020;
+  }
+
+  .docs-pt-8 {
+    color: #ddd;
+  }
+
+  .docs-rounded,
+  .docs-bg-code-base {
+    background-color: #272b34;
+    color: white;
+  }
+
+  ::placeholder {
+    color: #adabab;
+  }
+
+  .docs-md__code {
+    background: #272b34;
+    color: #abb2bf;
+  }
+
+  .docs-text-black {
+    color: #ddd;
+  }
+
+  .docs-bg-grey-lighter {
+    background: #272b34;
+  }
+
+  .docs-text-grey-darker {
+    color: #8d8d8d;
+  }
+
+  //Code blocks within text
+  li > code {
+    color: rgb(226, 165, 52);
+    background: rgb(57, 61, 61);
+  }
+
+  p > code {
+    color: rgb(226, 165, 52);
+    background: rgb(57, 61, 61);
+  }
+
+  .docs-my-8 {
+    box-shadow: 0 2px 8px 0 rgba(40, 46, 53, .25);
+  }
+
+  .docs-rounded .docs-p-4 {
+    border-bottom: 1px dashed #202020;
+  }
+
+  .docs-text-brand,
+  h4 a.heading-anchor {
+    color: #2c5cc5 !important;
+    text-decoration: none;
+  }
+
+  .AddonDocs-DocsViewer-Nav {
+    border-color: #171717;
+  }
+
+  .docs-border-grey-light {
+    border-color: #171717;
+  }
+
+  .docs-border-grey-lighter {
+    border-color: #171717;
+  }
+
+  .docs-bg-grey-lightest {
+    background-color: #151515;
+  }
+
+  .docs-bg-white {
+    background-color: #151515;
+  }
+
+  .docs-shadow {
+    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, .5);
+  }
+
+  .docs-demo__snippets-nav.docs-tracking-tight {
+    background-color: #272b34;
+    border-color: #272b34;
+  }
+
+  //Finds all forms of text
+  .docs-font-title,
+  .docs-text-grey-darkest,
+  .docs-h1,
+  .docs-md__h1,
+  .docs-h2,
+  .docs-md__h2,
+  .docs-md__h2 a,
+  .docs-md__h3 a,
+  .docs-h3 a,
+  .docs-md > p,
+  li {
+    color: #ddd;
+  }
+
+  input,
+  optgroup,
+  select,
+  textarea {
+    color: #000;
+  }
+
+  .playground-container {
+    border-bottom: 1px dotted #202020;
+
+    &--props {
+      border-left: 1px dotted #202020;
+
+      .item {
+        margin: 10px;
+
+        .ember-text-field {
+          border: 1px solid #202020;
+        }
+      }
+    }
+  }
+}

packages/@nucleus/app/styles/nucleus-docs.scss

@@ -4,6 +4,7 @@
 /* ember-cli-addon customisations */
 @import "./doc/custom-addon-theme";
 @import "./doc/custom-syntax-highlight";
+@import "./doc/dark-mode-theme";
 @import "./doc/nucleus-mod";
 @import "./doc/icon";
 @import "./doc/playground";

packages/@nucleus/tests/dummy/app/components/theme-toggle.js

@@ -0,0 +1,32 @@
+import Component from '@ember/component';
+import { set, computed } from '@ember/object';
+
+export default Component.extend({
+  dark: true,
+  iconName: computed("dark", function(){
+    return this.dark ? "light" : "dark"
+  }),
+
+  toggleDarkTheme(match) {
+    document.body.classList.toggle('dark', match);
+  },
+  init() {
+    this._super();
+    const prefersDark = window.matchMedia('(prefers-color-scheme: dark)');
+    set(this, 'dark', prefersDark.matches);
+    this.toggleDarkTheme(this.dark);
+    prefersDark.addListener((mediaQuery) => this.toggleDarkTheme(mediaQuery.matches))
+  },
+  actions: {
+    onToggle() {
+      if (this.dark) {
+        set(this, 'dark', false);
+        this.toggleDarkTheme(this.dark);
+      }
+      else {
+        set(this,'dark', true);
+        this.toggleDarkTheme(this.dark);
+      }
+    }
+  }
+});

packages/@nucleus/tests/dummy/app/templates/application.hbs

@@ -1,4 +1,6 @@
-{{docs-header name="Nucleus" prefix="Freshworks"}}
+{{theme-toggle}}
+{{#docs-header name="Nucleus" prefix="Freshworks" as |header|}}
+{{/docs-header}}
 {{outlet}}
 {{nucleus-banner isFixed=true}}
 {{nucleus-toast-message}}

packages/@nucleus/tests/dummy/app/templates/components/nucleus-icon/demo-1.hbs

@@ -3,7 +3,7 @@
     <div class="icon-container">
       {{#each icons as |icon|}}
         <div class="icon" aria-role="button" onClick={{action 'copyIcon' icon}}>
-           {{nucleus-icon name=icon size="large"}}
+           {{nucleus-icon name=icon size="large" variant="none"}}
            <div class="icon--text">{{icon}}</div>
         </div>
       {{/each}}

packages/@nucleus/tests/dummy/app/templates/components/theme-toggle.hbs

@@ -0,0 +1,3 @@
+<button class="mode-toggle" onclick={{action "onToggle"}}>
+  {{nucleus-icon name=iconName customClass="toggle-icon" size="large"}}
+</button>