Merge pull request #358 from hashicorp/feature-dark-mode-toggle

Feature dark mode toggle

addons/rose/addon/components/rose/dropdown/index.hbs

@@ -28,6 +28,7 @@
       button=(component "rose/dropdown/button" style=this.style)
       item=(component "rose/anonymous" class="rose-dropdown-item")
       separator=(component "rose/anonymous" tagName="hr" class="rose-dropdown-separator")
+      section=(component "rose/dropdown/section" style=this.style)
     )}}
   </div>
 

addons/rose/addon/components/rose/dropdown/index.stories.mdx

@@ -9,13 +9,17 @@ import { boolean } from '@storybook/addon-knobs';
 A simple dropdown component with support for links and buttons.
 
 <Preview>
-  <Story name="Basic Dropdown" height="5rem">{{
+  <Story name="Basic Dropdown" height="7rem">{{
     template: hbs`
       <Rose::Dropdown @text="Choose One&hellip;" @icon="user-organization" @showCaret={{showCaret}} as |dropdown|>
         <dropdown.link @route="index">Menu item</dropdown.link>
         <dropdown.link @route="about">Menu item</dropdown.link>
         <dropdown.separator />
         <dropdown.button>Button menu item</dropdown.button>
+        <dropdown.separator />
+        <dropdown.section @title="Dropdown Section Title">
+          <dropdown.link @route="index">Menu item</dropdown.link>
+        </dropdown.section>
       </Rose::Dropdown>
     `,
     context: {
@@ -65,6 +69,10 @@ A simple dropdown component with support for links and buttons.
     <dropdown.link @route="index">Menu item</dropdown.link>
     <dropdown.link @route="about">Menu item</dropdown.link>
     <dropdown.button>Button menu item</dropdown.button>
+    <dropdown.separator />
+    <dropdown.section @title="Dropdown Section Title">
+      <dropdown.link @route="index">Menu item</dropdown.link>
+    </dropdown.section>
   </Rose::Dropdown>
 ```
 

addons/rose/addon/components/rose/dropdown/section/index.hbs

@@ -0,0 +1,12 @@
+<section class="rose-dropdown-section" aria-labelledby={{concat "dropdown-section-title-" this.id}}>
+  {{#if @title}}
+    <h2
+      id={{concat "dropdown-section-title-" this.id}}
+      class="rose-dropdown-section-title"
+    >
+      {{@title}}
+    </h2>
+  {{/if}}
+
+  {{yield}}
+</section>

addons/rose/addon/components/rose/dropdown/section/index.js

@@ -0,0 +1,14 @@
+import Component from '@glimmer/component';
+import { generateComponentID } from '../../../../utilities/component-auto-id';
+import { action } from '@ember/object';
+
+export default class RoseDialogComponent extends Component {
+
+  // =attributes
+
+  /**
+   * @type {string}
+   */
+  id = generateComponentID();
+
+}

addons/rose/addon/components/rose/form/radio/group/index.hbs

@@ -1,3 +1,3 @@
 {{yield (hash
-  radio=(component 'rose/form/radio/radio' name=@name selectedValue=@selectedValue disabled=@disabled)
+  radio=(component 'rose/form/radio/radio' name=@name selectedValue=@selectedValue disabled=@disabled changed=@changed)
 )}}

addons/rose/addon/components/rose/form/radio/group/index.stories.mdx

@@ -1,5 +1,6 @@
 import { Meta, Story, Preview } from '@storybook/addon-docs/blocks';
 import { hbs } from 'ember-cli-htmlbars';
+import { action } from '@storybook/addon-actions';
 import { text, boolean, select } from '@storybook/addon-knobs';
 
 <Meta title="Rose|Form/Radio/Group" component="Form/Radio/Group" />
@@ -13,6 +14,7 @@ Renders a form radiofield group.
   @disabled={{false}}
   @name={{name}}
   @selectedValue="disagree"
+  @changed={{fn}}
   as |radioGroup|
 >
   <radioGroup.radio
@@ -36,6 +38,7 @@ Renders a form radiofield group.
       @disabled={{disabled}}
       @name={{name}}
       @selectedValue={{selectedValue}}
+      @changed={{changed}}
       as |radioGroup|
     >
       <radioGroup.radio
@@ -73,6 +76,7 @@ Renders a form radiofield group.
     secondFieldValue: text('second value', 'maybe'),
     thirdFieldLabel: text('third label', 'Disagree'),
     thirdFieldValue: text('third value', 'disagree'),
+    changed: action('changed')
   }
   }}</Story>
 </Preview>

addons/rose/addon/components/rose/form/radio/radio/index.hbs

@@ -9,7 +9,8 @@
     @name={{@name}}
     @value={{@value}}
     @groupValue={{@selectedValue}}
-    @disabled={{@disabled}}/>
+    @disabled={{@disabled}}
+    @changed={{@changed}} />
 
   <label class="rose-form-radio-label" for={{this.id}}>
 

addons/rose/addon/components/rose/form/radio/radio/index.stories.mdx

@@ -15,6 +15,7 @@ Renders a form radiofield.
   @value="yes-agree"
   @selectedValue="yes-agree"
   @disabled={{false}}
+  @changed={{fn}}
   />
 ```
 

addons/rose/addon/styles/rose/components/card/_link.scss

@@ -6,6 +6,24 @@
 $xxxs: sizing.rems(xxxs); // 2
 
 .rose-card-link {
+
+  --background-color-light: transparent;
+  --background-color-dark: var(--ui-gray-subtler-6);
+
+  --background-color: var(--background-color-light);
+
+  .ember-application.rose-theme-light & {
+    --background-color: var(--background-color-light);
+  }
+
+  @media (prefers-color-scheme: dark) {
+    --background-color: var(--background-color-dark);
+  }
+
+  .ember-application.rose-theme-dark & {
+    --background-color: var(--background-color-dark);
+  }
+
   @include type.type(s);
   border: sizing.rems(xxxxs) solid var(--ui-gray-subtler-2);
   border-radius: sizing.rems(xxxs);
@@ -15,10 +33,7 @@ $xxxs: sizing.rems(xxxs); // 2
   margin: 0 sizing.rems(m) sizing.rems(m) 0;
   box-shadow: 0 $xxxs $xxxs rgba(var(--stark-components), var(--opacity-4)),
     0 $xxxs $xxxs rgba(var(--stark-components), var(--opacity-4));
-
-  @media (prefers-color-scheme: dark) {
-    background-color: var(--ui-gray-subtler-6);
-  }
+  background-color: var(--background-color);
 
   a {
     text-decoration: none;

addons/rose/addon/styles/rose/components/dropdown/_dropdown.scss

@@ -3,10 +3,27 @@
 
 $xs: sizing.rems(xs); // 8
 $xxs: sizing.rems(xxs); // 4
-$chevron: "data:image/svg+xml;utf-8,<svg viewBox='0 0 24 24' fill='%231b1f26' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6-1.41-1.41z'></path></svg>";
-$chevronWhite: "data:image/svg+xml;utf-8,<svg viewBox='0 0 24 24' fill='%23ffffff' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6-1.41-1.41z'></path></svg>";
+$chevron: url("data:image/svg+xml;utf-8,<svg viewBox='0 0 24 24' fill='%231b1f26' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6-1.41-1.41z'></path></svg>");
+$chevronWhite: url("data:image/svg+xml;utf-8,<svg viewBox='0 0 24 24' fill='%23ffffff' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6-1.41-1.41z'></path></svg>");
 
 .rose-dropdown {
+  --background-image-light: #{$chevron};
+  --background-image-dark: #{$chevronWhite};
+
+  --background-image: var(--background-image-light);
+
+  .ember-application.rose-theme-light & {
+    --background-image: var(--background-image-light);
+  }
+
+  @media (prefers-color-scheme: dark) {
+    --background-image: var(--background-image-dark);
+  }
+
+  .ember-application.rose-theme-dark & {
+    --background-image: var(--background-image-dark);
+  }
+
   position: relative;
   display: inline-block;
 
@@ -59,14 +76,10 @@ $chevronWhite: "data:image/svg+xml;utf-8,<svg viewBox='0 0 24 24' fill='%23fffff
 
     &.show-caret {
       padding-right: sizing.rems(xl);
-      background-image: url($chevron);
+      background: var(--background-image);
       background-repeat: no-repeat;
       background-position: right sizing.rems(m) center;
       background-size: sizing.rems(m);
-
-      @media (prefers-color-scheme: dark) {
-        background-image: url($chevronWhite);
-      }
     }
 
     // Hide default twistie triangle

addons/rose/addon/styles/rose/components/dropdown/_index.scss

@@ -2,3 +2,4 @@
 @import 'button';
 @import 'link';
 @import 'item';
+@import 'section';

addons/rose/addon/styles/rose/components/dropdown/_section.scss

@@ -0,0 +1,13 @@
+@use '../../variables/sizing';
+@use '../../utilities/type';
+
+.rose-dropdown-section {
+  .rose-dropdown-section-title {
+    @include type.type(s, bold);
+    padding: 0 sizing.rems(s);
+    margin: 0;
+    $line-height: 36 / 14;
+    line-height: $line-height;
+    color: var(--ui-gray)
+  }
+}

addons/rose/addon/styles/rose/components/header/_index.scss

@@ -9,15 +9,29 @@
 @import 'dropdown';
 
 .rose-header {
+
+  --box-shadow-light: none;
+  --box-shadow-dark: inset 0 -#{sizing.rems(xxxxs)} 0 var(--ui-border-subtler-1);
+
+  --box-shadow: var(--box-shadow-light);
+
+  .ember-application.rose-theme-light & {
+    --box-shadow: var(--box-shadow-light);
+  }
+
+  @media (prefers-color-scheme: dark) {
+    --box-shadow: var(--box-shadow-dark);
+  }
+
+  .ember-application.rose-theme-dark & {
+    --box-shadow: var(--box-shadow-dark);
+  }
+
   display: grid;
   grid-template-areas: 'brand nav utilities';
   grid-template-columns: 0.01fr auto 1fr;
   background: var(--black);
-  box-shadow: inset 0 -#{sizing.rems(xxxxs)} 0 var(--ui-border-subtler-1);
-
-  @media (prefers-color-scheme: light) {
-    box-shadow: none;
-  }
+  box-shadow: var(--box-shadow);
 }
 
 @media (max-width: media.width(small)) {

addons/rose/addon/styles/rose/variables/_opacity.scss

@@ -4,7 +4,7 @@
  */
 
 // Light Mode
-:root {
+@mixin light-mode {
   --opacity-5: 0.025;
   --opacity-4: 0.05;
   --opacity-3: 0.1;
@@ -15,12 +15,26 @@
 // Dark Mode
 // Subtler opacities look better in dark mode, so these are halved compared to
 // light mode.
+@mixin dark-mode {
+  --opacity-5: 0.0125;
+  --opacity-4: 0.0125;
+  --opacity-3: 0.025;
+  --opacity-2: 0.025;
+  --opacity-1: 0.125;
+}
+
+// Light mode is the default, hence it is applied to `html` by default
+.ember-application,
+.ember-application.rose-theme-light {
+  @include light-mode;
+}
+
 @media (prefers-color-scheme: dark) {
-  :root {
-    --opacity-5: 0.0125;
-    --opacity-4: 0.0125;
-    --opacity-3: 0.025;
-    --opacity-2: 0.025;
-    --opacity-1: 0.125;
+  .ember-application {
+    @include dark-mode;
   }
 }
+
+.ember-application.rose-theme-dark {
+  @include dark-mode;
+}