updated system color table

Author: jongund

content/practices/color-settings/color-settings-practice.html

@@ -868,7 +868,7 @@ <h3>Current Color vs. System Colors</h3>
         <p>System colors values should be used when the custom elements are built using elements whose current color does not match the semantics of the custom component and when <code>currentcolor</code> is insufficient for matching the styling needs of the component to make it's features discernible.  Using System colors allows for setting both foreground and background colors and making features of the custom control identifiable.  For example using <code>div</code> elements to build a custom slider component.  If the <code>currentColor</code> value is used the <code>div</code> elements cause the features of the slider to be rendered using the <code>CanvasText</code> color, when the slider features should be rendered using <code>ButtonBorder</code>, <code>ButtonFace</code> and <code>ButtonText</code>. System Colors require using the <code>forced-colors: active</code> media query to ensure the system colors are only used to override the authors theme when the use renables a Contrast Theme.</p>
 
        <table class="data">
-          <caption>Summary of Current Color vs. System Color</caption>
+          <caption>Summary of Current Color vs. System Color for Interactive Components</caption>
           <thead>
             <tr>
               <th style="width: 7em">Technique</th>
@@ -912,6 +912,58 @@ <h3>Current Color vs. System Colors</h3>
           </tbody>
         </table>
 
+        <h4 id="compare-switch-examples">Comparing Switch Examples</h4>
+
+        <p>The following tables describe the differences in the two switch examples using Current Color and System Colors.
+
+
+       <table class="data">
+          <caption>Switch Examples using Current Color and Systems Colors</caption>
+          <thead>
+            <tr>
+              <th rowspan="2">Example</th>
+              <th colspan="2">Span</th>
+              <th colspan="2">SVG Rect</th>
+              <th colspan="2">SVG Circle Off</th>
+              <th colspan="2">SVG Circle On</th>
+            </tr>
+            <tr>
+              <th>Background-Color</th>
+              <th>Color</th>
+              <th>Stroke</th>
+              <th>Fill</th>
+              <th>Stroke</th>
+              <th>Fill</th>
+              <th>Stroke</th>
+              <th>Fill</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td><code>button[role="switch"]</code></td>
+              <td>Opacity 0</td>
+              <td>CurrentColor</td>
+              <td>Opacity 0</td>
+              <td>CurrentColor</td>
+              <td>CurrentColor</td>
+              <td>CurrentColor</td>
+              <td>CurrentColor</td>
+              <td>CurrentColor</td>
+            </tr>
+            <tr>
+              <td><code>div[role="switch"]</code></td>
+              <td>ButtonFace</td>
+              <td>ButtonText</td>
+              <td>ButtonBorder</td>
+              <td>ButtonFace</td>
+              <td>ButtonText</td>
+              <td>GrayText</td>
+              <td>ButtonText</td>
+              <td>ActiveText</td>
+            </tr>
+          </tbody>
+        </table>
+
 
         <h3>Using Current Color</h3>
 
@@ -1147,28 +1199,35 @@ <h3 id="using-system-colors">Using System Colors</h3>
           </tbody>
         </table>
 
-        <h3 id="computed-system-colors">Computed System Colors</h3>
+        <h3 id="computed-system-colors">System Color Support</h3>
 
-        <p>The following table identifies the current system colors defined in <a href="https://www.w3.org/TR/css-color-4/#css-system-colors">CSS Color Module Level 4</a>.  System colors are supported in all major browsers, but the <strong>actual colors</strong> they render may vary between browsers and operating systems based on default and user theme and contrast settings.</p>
+        <p>The following table identifies the current system colors defined in <a href="https://www.w3.org/TR/css-color-4/#css-system-colors">CSS Color Module Level 4</a>.  System colors are supported in all major browsers, but the default <strong>colors</strong> they render may vary between browsers and operating systems.  When a user enables Contrast Themes not all system colors change to use one of the colors defined in the theme.   The followin table identifies which system colors support a colors in a contrast theme.  Fortunately for the supported, the system colors are consistently rendered between browsers.</p>
 
         <table aria-labelledby="system-colors" class="data">
           <thead>
             <tr>
-              <th>System Color</th>
-              <th>Computed Sample</th>
-              <th style="min-width: 12em">Computed Color</th>
-              <th>Description</th>
+              <th rowspan="2">System Color</th>
+              <th rowspan="2">Contrast Theme Color</th>
+              <th colspan="2">Theme Support</th>
+              <th rowspan="2">Computed Sample</th>
+              <th rowspan="2">Description</th>
+            </tr>
+            <tr>
+              <th>Chromium</th>
+              <th>Mozilla</th>
             </tr>
           </thead>
-          <tbody id="samples">
+          <tbody id="system-colors">
           </tbody>
         </table>
 
-        <div class="support-notice">
-          <div class="caution"><strong>Caution:</strong>
-            The system colors <code>AccentColor</code> and <code>AccentColorText</code> are not supported by the Chrome browser and are not included in the preceding table.  They should not be used since they will result in unpredictable color contrast.
-          </div>
-        </div>
+        <h3 id="system-colors">Supported System Colors in Contrast Themes</h3>
+
+        <p>The following list of colors are considered "safe" to use when a user enables a contrast theme.  Safe colors are color that use one of the theme colors.</p>
+
+        <ul id="usable-system-colors">
+        </ul>
+
 
         <h3 id="forced-colors-example-switch">System Color Example: Switch using <code>div[role="switch"]</code></h3>
 

content/practices/color-settings/js/color-settings-practice.js

@@ -664,89 +664,156 @@ function getHTMLColorName(systemColorName, colorHex) {
 }
 
 const systemColorValues = [
+  {
+    value: 'AccentColor',
+    name: 'Accent Color',
+    contrastTheme: '',
+    chromium: false,
+    mozilla: false,
+    desc: 'Background of accented user interface controls.',
+  },
+  {
+    value: 'AccentColorText',
+    name: 'Accesnt Color Text',
+    contrastTheme: '',
+    chromium: false,
+    mozilla: false,
+    desc: 'Text of accented user interface controls.',
+  },
   {
     value: 'ActiveText',
     name: 'Active text',
+    contrastTheme: 'Hyperlink',
+    chromium: true,
+    mozilla: true,
     desc: 'Text of active links',
   },
   {
     value: 'ButtonBorder',
     name: 'Button border',
+    contrastTheme: 'Button color',
+    chromium: true,
+    mozilla: true,
     desc: 'Base border color of controls',
   },
   {
     value: 'ButtonFace',
     name: 'Button face',
+    contrastTheme: 'Button background',
+    chromium: true,
+    mozilla: true,
     desc: 'Background color of controls',
   },
   {
     value: 'ButtonText',
     name: 'Button text',
+    contrastTheme: 'Button color',
+    chromium: true,
+    mozilla: true,
     desc: 'Text color of controls',
   },
   {
     value: 'Canvas',
     name: 'Canvas',
+    contrastTheme: 'Background',
+    chromium: true,
+    mozilla: true,
     desc: 'Background of application content or documents',
   },
   {
     value: 'CanvasText',
     name: 'Canvas text',
+    contrastTheme: 'Text',
+    chromium: true,
+    mozilla: true,
     desc: 'Text color in application content or documents',
   },
   {
     value: 'Field',
     name: 'Field',
+    contrastTheme: 'Button text background',
+    chromium: true,
+    mozilla: true,
     desc: 'Background of input fields',
   },
   {
     value: 'FieldText',
     name: 'Field text',
+    contrastTheme: 'Button text color',
+    chromium: true,
+    mozilla: true,
     desc: 'Text in input fields',
   },
   {
     value: 'GrayText',
     name: 'Gray text',
+    contrastTheme: 'Inactive text',
+    chromium: true,
+    mozilla: true,
     desc: 'Text color for disabled items (e.g. a disabled control)',
   },
   {
     value: 'Highlight',
     name: 'Highlight',
+    contrastTheme: 'Selected text background',
+    chromium: true,
+    mozilla: true,
     desc: 'Background of selected items',
   },
   {
     value: 'HighlightText',
     name: 'Highlight text',
+    contrastTheme: 'Selected text',
+    chromium: true,
+    mozilla: true,
     desc: 'Text color of selected items',
   },
   {
     value: 'LinkText',
     name: 'Link text',
+    contrastTheme: 'Hyperlink',
+    chromium: true,
+    mozilla: true,
     desc: 'Text of non-active, non-visited links',
   },
   {
     value: 'Mark',
     name: 'Mark',
+    contrastTheme: '',
+    chromium: false,
+    mozilla: false,
     desc: 'Background of text that has been specially marked (such as by the HTML mark element)',
   },
   {
     value: 'MarkText',
     name: 'Mark text',
+    contrastTheme: '',
+    chromium: false,
+    mozilla: false,
     desc: 'Text that has been specially marked (such as by the HTML mark element)',
   },
   {
     value: 'SelectedItem',
     name: 'Selected item',
+    contrastTheme: 'Selected text background',
+    chromium: false,
+    mozilla: true,
     desc: 'Background of selected items, for example, a selected checkbox',
   },
   {
     value: 'SelectedItemText',
     name: 'Selected item text',
+    contrastTheme: 'Selected text',
+    chromium: false,
+    mozilla: true,
     desc: 'Text of selected items',
   },
   {
     value: 'VisitedText',
     name: 'Visited text',
+    contrastTheme: 'Hyperlink',
+    chromium: true,
+    mozilla: false,
     desc: 'Text of visited links',
   },
 ];
@@ -795,14 +862,39 @@ function rgb2Hex(rgb) {
 // Fill in System color table
 
 window.addEventListener('load', () => {
-  const tbodyNode = document.getElementById('samples');
+  const tbodyNode = document.getElementById('system-colors');
+  const ulNode = document.getElementById('usable-system-colors');
+
 
   systemColorValues.forEach((v) => {
     if (v.value) {
+      // System Color Name
       const tr = document.createElement('tr');
       const thv = document.createElement('th');
       thv.textContent = v.value;
       tr.appendChild(thv);
+
+      // Windows 11 Contrast Theme Value
+      const tdct = document.createElement('td');
+      tdct.textContent = v.contrastTheme;
+      tr.appendChild(tdct);
+
+      // Chromium Support
+      const tdchrome = document.createElement('td');
+      v.chromium ?
+        tdchrome.textContent = 'Yes' :
+        tdchrome.textContent = '-';
+
+      tr.appendChild(tdchrome);
+
+      // Mozilla Support
+      const tdmoz = document.createElement('td');
+      v.mozilla ?
+        tdmoz.textContent = 'Yes' :
+        tdmoz.textContent = '-';
+      tr.appendChild(tdmoz);
+
+      // Color Sample
       const tds = document.createElement('td');
       const div = document.createElement('div');
       div.role = 'img';
@@ -813,22 +905,35 @@ window.addEventListener('load', () => {
       divHex.className = 'color';
       tds.appendChild(divHex);
       tr.appendChild(tds);
-      const tdRGB = document.createElement('td');
-      tdRGB.className = 'font';
-      tdRGB.textContent = '??';
-      tr.appendChild(tdRGB);
+//      const tdRGB = document.createElement('td');
+//      tdRGB.className = 'font';
+//      tdRGB.textContent = '??';
+//      tr.appendChild(tdRGB);
       const tdHex = document.createElement('td');
       tdHex.className = 'font';
       tdHex.textContent = '??';
+
+      // System Color Description
       const tdd = document.createElement('td');
       tdd.textContent = v.desc;
       tr.appendChild(tdd);
+
       tbodyNode.appendChild(tr);
       const cStyle = window.getComputedStyle(div);
-      tdRGB.textContent = cStyle.backgroundColor;
+//      tdRGB.textContent = cStyle.backgroundColor;
       const colorHex = rgb2Hex(cStyle.backgroundColor);
       divHex.textContent = colorHex;
       div.ariaLabel = getHTMLColorName(v.name, colorHex);
     }
+
+    // Usable colors list
+    if (v.chromium && v.mozilla) {
+      const liNode   = document.createElement('li');
+      const codeNode = document.createElement('code');
+      codeNode.textContent = v.value;
+      liNode.appendChild(codeNode);
+      ulNode.appendChild(liNode);
+    }
+
   });
 });