Merge branch 'dark-mode' of ssh://ssh.github.com:443/PublicisSapient/…

…enable-a11y into dark-mode

content/body/dark-mode.php

@@ -0,0 +1,137 @@
+
+<p>
+    Many mobile and desktop users experience eye strain when using interfaces that may have very bright, white screens.  
+    An accessibility feature like dark mode helps to solve this problem for many and has now become a preference for millions of people who use computers and mobile devices every day.
+</p>
+
+<p>
+  This page will discuss how to access either light or dark mode on different operating systems and devices.
+  It will also serve as a tool for the proper development of dark mode on new and existing websites and platforms. 
+</p>
+
+<h2>The "Rules" for Developing</h2>
+
+<p>
+  While there may not be any explicitly set rules for what is considered dark mode, when developing not just a visually pleasing but also accessible dark mode display, 
+  it is important to ensure that what is being displayed is accessible to all.
+</p>
+
+<p>
+    Make sure to remember:
+</p>
+
+<ol>
+  <li>Contrast is key!! Pay attention to the ratio (see below).</li>
+  <li>Don't forget the little details — take the time to <em>make sure</em> each component of the page (even ones not visible) is dark mode accessible. 
+  </li>
+  <li>Many users with photosensitivity use dark mode, so try to avoid using very bright colors, even if the contrast ratio appears correct.</li>
+  <li>Make sure assistive technologies (such as screen readers) still work with dark mode.</li> 
+</ol>
+
+<p>
+    One, if not the most important, thing to consider and be aware of when developing any user interface, light or dark, is the contrast ratio of items on the webpage.  
+    According to the <a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html">WCAG guidelines for contrast accessibility</a>, the “visual presentation of text” must have a contrast ratio of at least 4.5:1 (with exceptions).  
+    In short, this means that the contrast between background color and text color needs to be above this ratio.
+</p>
+
+<p>
+    To see an example of a proper vs. improper contrast ratio, please refer below:
+</p>
+
+<div class="enable-example">
+    <img src="images/dark-mode-example/goodContrast_credits.png" width=800 height=155
+    alt="Good Contrast Example">
+    <img src="images/dark-mode-example/badContrast_credits.png" width=800 height=155
+    alt="Bad Contrast Example">
+</div>
+
+<p>
+    As seen above, the contrast between the first image is much better than the second.  The first images text has a contrast ratio of 
+    <strong>9.9</strong>, much better than the contrast ratio of <strong>1.25</strong> 
+    for the second images text.
+
+</p>
+
+<p>
+    However, sometimes an inaccessible contrast ratio is not so obvious.  This is why it is important to use tools that check the ratio, as there are things that might be overseen.  
+    Tools like <a href="https://wave.webaim.org/">WAVE</a> web accessibility evaluation tools, 
+    <a href="https://webaim.org/resources/contrastchecker/">WebAIM Contrast Checker</a>,
+    and <a href="https://accessible-colors.com/">accessible-colors</a>
+    allow for developers to test their page contrasts to ensure that they are creating the most accessible user interface possible.
+</p>
+
+
+<h2>Using Dark Mode in Different Operating Systems</h2>
+
+<?php includeStats([
+    "isStyle" => true,
+    "comment" =>
+        "These changes can also be done at the browser level rather than the whole system if that is your preference.",
+]); ?>
+
+<p>
+    Every OS, whether mobile or desktop, accesses dark mode uniquely.  Use this as a reference to figure out how to enable dark mode 
+    on your device!
+</p>
+
+<h3>Apple:</h3>
+<ul>
+  <li><strong>Mac (OSX):</strong>
+    <ol>
+        <li>Open <strong>System Settings</strong>.</li>
+        <li>Select <strong>Appearance</strong>.</li>
+        <li>In <strong><em>Appearance</em></strong>, you will have the option to choose Light, Dark, or Auto.</li>
+    </ol>
+    <img src="images/dark-mode-example/DarkMode_MacOS.png" width=400 height=349
+    alt="MacOS System Settings Dark Mode">
+  </li>
+
+  <li><strong>Mobile (iOS):</strong>
+    <ol>
+        <li>Open <strong>Settings</strong>.</li>
+        <li>Select <strong>Display & Brightness</strong>.</li>
+        <li>Under <strong><em>Appearance</em></strong>, you will again see the option for Light, Dark, or Automatic.</li>
+    </ol>
+    <img src="images/dark-mode-example/DarkMode_iOS.png" width=192 height=400
+    alt="iPhone/iPad Settings Dark Mode">
+  </li>
+</ul>
+
+<h3>Windows:</h3>
+<ul>
+  <li><strong>Desktop:</strong>
+    <ol>
+        <li>Select <strong>Start</strong> and open <strong>Settings</strong>.</li>
+        <li>Select <strong>Personalization</strong> and navigate to <strong>Colors</strong>.</li>
+        <li>In <strong><em>Colors</em></strong> under <strong><em>Choose your mode</em></strong>, you will have the option to choose Light, Dark, or Custom, as well as change your accent color to your preference.</li>
+    </ol>
+    <img src="images/dark-mode-example/DarkMode_Windows.png" width=400 height=315
+    alt="Windows Color Settings Dark Mode">
+  </li>
+</ul>
+
+<h3>Android:</h3>
+<ul>
+  <li><strong>Mobile:</strong>
+    <ol>
+        <li>Open <strong>Settings</strong>.</li>
+        <li>Select <strong>Display & brightness</strong>.</li>
+        <li>In <strong><em>Display</em></strong>, toggle Dark mode based on your preference.</li>
+    </ol>
+    <img src="images/dark-mode-example/DarkMode_Android.png" width=193 height=400
+    alt="Android Dark Theme Settings">
+  </li>
+</ul>
+
+<h3>Ubuntu:</h3>
+<ul>
+  <li><strong>Desktop:</strong>
+    <ol>
+        <li>Open <strong>Settings</strong>.</li>
+        <li>Select <strong>Appearance</strong>.</li>
+        <li>In <strong><em>Appearance</em></strong>, under <strong><em>Style</em></strong>, you will see the option to choose Light or Dark mode.</li>
+    </ol>
+    <img src="images/dark-mode-example/DarkMode_Ubuntu.png" width=400 height=333
+    alt="Ubuntu Dark Mode Settings">
+  </li>
+</ul>

content/body/focus-styling.php

@@ -25,7 +25,7 @@
 <?php includeStats([
     "isForNewBuilds" => true,
     "comment" =>
-        "This is recommended for use in both new and existing projects.  It ",
+        "This is recommended for use in both new and existing projects.",
 ]); ?>
 
 

content/body/link.php

@@ -154,6 +154,7 @@
       Links That Open a New Window or Tab
 
       <img class="new-window-icon" src="images/icons/new-window.svg" alt="(Opens in a new window)" />
+      <img class="new-window-icon-dark" src="images/icons/new-window_darkmode.svg" alt="(Opens in a new window)" />
 
     </a>
   </p>

css/article.css

@@ -147,6 +147,20 @@ table [role="row"]:nth-child(2n),
 [role="table"] [role="row"]:nth-child(2n) {
   background-color: #cccccc;
 }
+@media (prefers-color-scheme: dark) {
+  table tr,
+  [role="table"] tr,
+  table [role="row"],
+  [role="table"] [role="row"] {
+    background-color: #222;
+  }
+  table tr:nth-child(2n),
+  [role="table"] tr:nth-child(2n),
+  table [role="row"]:nth-child(2n),
+  [role="table"] [role="row"]:nth-child(2n) {
+    background-color: #282828;
+  }
+}
 table [role="rowgroup"],
 [role="table"] [role="rowgroup"] {
   display: table-row-group;

css/bookmarklets.css

@@ -4,3 +4,11 @@
 main strong {
   background: white;
 }
+@media (prefers-color-scheme: dark) {
+  main strong {
+    background: #222;
+  }
+  .enable-drawer {
+    background-color: #222;
+  }
+}

css/button.css

@@ -28,3 +28,8 @@
   height: 0px;
   overflow: hidden;
 }
+@media (prefers-color-scheme: dark) {
+  .button-container button[aria-disabled="true"] {
+    opacity: 0.7;
+  }
+}

css/dropdown.css

@@ -104,6 +104,12 @@
   border: solid 1px #ccc;
   background-color: white;
 }
+@media (prefers-color-scheme: dark) {
+  .enable-multiselect__button {
+    background-color: #222;
+    border: solid 1px #777;
+  }
+}
 .enable-multiselect__button::-webkit-details-marker {
   display: none;
 }

css/enable-flyout.css

@@ -189,6 +189,18 @@
   position: relative;
   z-index: 2;
 }
+.enable-flyout__open-level-button:visited,
+.enable-flyout__close-level-button:visited,
+.enable-flyout__link:visited {
+  color: #fff;
+}
+@media (prefers-color-scheme: dark) {
+  .enable-flyout__open-level-button:visited,
+  .enable-flyout__close-level-button:visited,
+  .enable-flyout__link:visited {
+    color: #fff;
+  }
+}
 .enable-flyout-container--positioned-left .enable-flyout__open-level-button {
   padding-right: 10px;
 }

css/enable-listbox.css

@@ -40,6 +40,13 @@ fieldset .legend,
   top: -1.5em;
   margin-bottom: 0px !important;
 }
+@media (prefers-color-scheme: dark) {
+  fieldset,
+  .fieldset,
+  [role="radiogroup"] {
+    background-color: #333;
+  }
+}
 /* These are styles just for the global error */
 .error {
   text-align: left;
@@ -54,6 +61,11 @@ fieldset .legend,
   height: 0.7rem;
   margin-right: 0.5em;
 }
+@media (prefers-color-scheme: dark) {
+  .error {
+    color: #ff6a6a;
+  }
+}
 .annotate {
   font-style: italic;
   color: #366ed4;
@@ -147,3 +159,18 @@ fieldset .legend,
 .enable-listbox .hidden {
   display: none;
 }
+@media (prefers-color-scheme: dark) {
+  .enable-listbox {
+    background: #444;
+    border: 1px solid #222;
+  }
+  .enable-listbox [role="listbox"] {
+    background: #222;
+  }
+  .enable-listbox [role="option"]:focus {
+    background: #0a4481;
+  }
+  .enable-listbox button {
+    background: #ccc;
+  }
+}

css/enable-slider.css

@@ -414,3 +414,31 @@ input[type="range"]:focus-visible::-moz-range-thumb {
 .enable-slider output {
   padding-left: 1em;
 }
+@media (prefers-color-scheme: dark) {
+  .enable-slider--horizontal {
+    background-color: #000014;
+    border: 2px solid #eee;
+  }
+  .enable-slider--horizontal .enable-slider__handle {
+    background-color: #6c6c6c;
+    border: 1px solid #eee;
+  }
+  .enable-slider__slider-range {
+    background-color: #8f8fff;
+  }
+  .enable-slider__number-fallback {
+    background: black;
+    color: white;
+  }
+  .enable-slider__handle:focus,
+  .enable-slider__handle:active,
+  .enable-slider__handle.focus .enable-slider__handle {
+    background-color: #999 !important;
+  }
+  .enable-slider__button {
+    background: darkgreen;
+  }
+  .html-slider__multi--container::after {
+    background: white;
+  }
+}

css/figure.css

@@ -66,6 +66,24 @@ a.tile-cta::after {
   transform: scale(0.8) translateY(0.375rem);
   display: inline-block;
 }
+<<<<<<< HEAD
+=======
+@media (prefers-color-scheme: dark) {
+  figure {
+    background: #222;
+  }
+  figure,
+  [role="figure"] {
+    background: #222;
+    color: #ccc;
+  }
+  figure a,
+  [role="figure"] a {
+    color: #80b5f9;
+  }
+}
+
+>>>>>>> 570995da37c48736fecbb337dd541573c617e6b1
 .video-figure {
   display: block;
 }

css/focus-styling.css

@@ -19,3 +19,12 @@
   outline: solid 2px #097efb;
   box-shadow: 3px 3px 0 white, -3px -3px 0 white, -3px 3px 0 white, 3px -3px 0 white;
 }
+@media (prefers-color-scheme: dark) {
+  #double-focus-ring-example a {
+    background: #7d5d12;
+    color: #c9e0fd;
+  }
+  #double-focus-ring-example a:visited {
+    color: #c589f9;
+  }
+}

css/form-error.css

@@ -144,6 +144,12 @@
   top: -1.5em;
   display: block;
 }
+@media (prefers-color-scheme: dark) {
+  .enable-form-example fieldset,
+  .enable-form-example .aria-form-group {
+    background-color: #222;
+  }
+}
 .enable-form-example [role="radio"],
 .enable-form-example [role="checkbox"] {
   display: inline-block;
@@ -194,3 +200,11 @@
 .enable-form-example .required-symbol {
   color: #e60000;
 }
+@media (prefers-color-scheme: dark) {
+  .enable-form-example label.required::after {
+    color: #ff6a6a;
+  }
+  .enable-form-example .required-symbol {
+    color: #ff6a6a;
+  }
+}

css/form.css

@@ -40,6 +40,13 @@ fieldset .legend,
   top: -1.5em;
   margin-bottom: 0px !important;
 }
+@media (prefers-color-scheme: dark) {
+  fieldset,
+  .fieldset,
+  [role="radiogroup"] {
+    background-color: #333;
+  }
+}
 /* These are styles just for the global error */
 .error {
   text-align: left;
@@ -54,3 +61,8 @@ fieldset .legend,
   height: 0.7rem;
   margin-right: 0.5em;
 }
+@media (prefers-color-scheme: dark) {
+  .error {
+    color: #ff6a6a;
+  }
+}