Add Practice Page for Supporting Color Contrast Settings

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

@@ -0,0 +1,101 @@
+/* high-contrast-practices.css */
+
+table.data caption {
+  margin: 0;
+  padding: 0;
+  color: rgb(0 90 106);
+  font-style: normal;
+  text-align: left;
+  font-size: 1.1em;
+}
+
+table.data thead th.exampleLink {
+  vertical-align: bottom;
+}
+
+table.data img {
+  border: 1px solid gray;
+}
+
+table.data tbody th,
+table.data tbody td {
+  vertical-align: top;
+}
+
+table.data tbody td p:first-child {
+  margin-top: 0;
+  padding-top: 0;
+}
+
+table.data td div.sample {
+  height: 30px;
+  width: 50px;
+  border: 1px solid gray;
+}
+
+ul.system-colors {
+  margin: 0;
+  padding: 0;
+}
+
+ul.system-colors li {
+  margin: 0;
+  padding: 0;
+  font-family: monospace;
+  list-style: none;
+}
+
+ul.compact {
+  margin: 0;
+  padding: 0;
+  margin-left: 1em;
+}
+
+label.system-colors {
+  display: block;
+}
+
+img.theme {
+  max-width: 125px;
+}
+
+img.theme-switch-button {
+  max-width: 300px;
+}
+
+.color,
+.font {
+  font-family: monospace;
+}
+
+.support-notice {
+  background-color: #fdefce;
+  border: 1px solid #fce1a4;
+  border-radius: 3px;
+  padding: 0;
+  overflow: unset;
+
+  --space-between-elements: 1em;
+  --left-right-padding: 70px;
+}
+
+.support-notice div.caution {
+  background-color: #fcebc3;
+  padding-left: 60px;
+  padding-top: 1em;
+  padding-bottom: 1em;
+  position: relative;
+}
+
+.support-notice div.caution::before {
+  width: 32px;
+  height: 32px;
+  display: block;
+  content: "";
+  background-position: center center;
+  background-repeat: no-repeat;
+  position: absolute;
+  left: 1em;
+  top: 1em;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='31' viewBox='0 0 30 31'%3E%3Cg id='Group_1' data-name='Group 1' transform='translate(-11 -292)'%3E%3Cellipse id='Ellipse_1' data-name='Ellipse 1' cx='15' cy='15.5' rx='15' ry='15.5' transform='translate(11 292)' fill='%23d9ae4d'/%3E%3Cpath id='Path_3' data-name='Path 3' d='M4.524-17.368a4.507,4.507,0,0,0-1.56.312.278.278,0,0,0-.13.286V-14.9c0,2.184.416,8.294.468,9.022a.172.172,0,0,0,.182.156h2.08c.156,0,.182-.078.182-.156.078-.78.52-6.916.52-9.1v-1.872a.326.326,0,0,0-.156-.286A5.112,5.112,0,0,0,4.524-17.368Zm0,17.576A1.7,1.7,0,0,0,6.4-1.534,1.741,1.741,0,0,0,4.524-3.328,1.77,1.77,0,0,0,2.652-1.534,1.7,1.7,0,0,0,4.524.208Z' transform='translate(22 316)' fill='%23fff'/%3E%3C/g%3E%3C/svg%3E%0A");
+}

content/practices/color-settings/css/switch-color-scheme.css

@@ -0,0 +1,87 @@
+:root {
+  color-scheme: light dark;
+}
+
+button.color-scheme[role="switch"] {
+  display: block;
+  margin: 2px;
+  padding: 4px 4px 8px 8px;
+  border: 0 solid light-dark(#005a9c, #add8e6);
+  border-radius: 5px;
+  width: 17em;
+  height: 3em;
+  text-align: left;
+  background-color: light-dark(#e9e9e9, #333);
+  color: light-dark(#242424, #fff);
+}
+
+button.color-scheme[role="switch"] .label {
+  position: relative;
+  top: -3px;
+  display: inline-block;
+  padding: 0;
+  margin: 0;
+  width: 10em;
+  vertical-align: middle;
+  color: light-dark(#242424, #fff);
+}
+
+button.color-scheme[role="switch"] svg {
+  display: inline-block;
+  width: 36px;
+  height: 20px;
+  position: relative;
+  top: 4px;
+}
+
+button.color-scheme[role="switch"] svg rect {
+  fill: light-dark(#a1a1a1, #36c);
+  stroke-width: 2;
+  stroke: light-dark(#757575, #36c);
+}
+
+button.color-scheme[role="switch"] svg circle.off {
+  display: block;
+  stroke: light-dark(#757575, #fff);
+  fill: light-dark(#fff, #fff);
+  fill-opacity: 1;
+}
+
+button.color-scheme[role="switch"] svg circle.on {
+  display: none;
+}
+
+button.color-scheme[role="switch"][aria-checked="true"] svg circle.off {
+  display: none;
+}
+
+button.color-scheme[role="switch"][aria-checked="true"] svg circle.on {
+  display: block;
+  stroke: #fff;
+  fill: #fff;
+  fill-opacity: 1;
+}
+
+button.color-scheme[role="switch"] span.off {
+  display: inline-block;
+}
+
+button.color-scheme[role="switch"] span.on {
+  display: none;
+}
+
+button.color-scheme[role="switch"][aria-checked="true"] span.off {
+  display: none;
+}
+
+button.color-scheme[role="switch"][aria-checked="true"] span.on {
+  display: inline-block;
+}
+
+button.color-scheme[role="switch"]:focus,
+button.color-scheme[role="switch"]:hover {
+  padding: 2px 2px 6px 6px;
+  border-width: 2px;
+  outline: none;
+  cursor: pointer;
+}

content/practices/color-settings/css/switch-current-color.css

@@ -0,0 +1,112 @@
+button.current-color[role="switch"] {
+  display: block;
+  margin: 2px;
+  padding: 4px 4px 8px 8px;
+  border: 0 solid #005a9c;
+  border-radius: 5px;
+  width: 17em;
+  height: 3em;
+  text-align: left;
+  background-color: white;
+  color: black;
+}
+
+button.current-color[role="switch"] .label {
+  position: relative;
+  top: -3px;
+  display: inline-block;
+  padding: 0;
+  margin: 0;
+  width: 10em;
+  vertical-align: middle;
+  color: black;
+}
+
+button.current-color[role="switch"] svg {
+  display: inline-block;
+  width: 36px;
+  height: 20px;
+  forced-color-adjust: auto;
+  position: relative;
+  top: 4px;
+}
+
+button.current-color[role="switch"] svg rect {
+  fill-opacity: 0;
+  stroke-width: 2;
+  stroke: #005a9c;
+}
+
+button.current-color[role="switch"] svg circle.off {
+  display: block;
+  stroke: #005a9c;
+  fill: #005a9c;
+  fill-opacity: 1;
+}
+
+button.current-color[role="switch"][aria-checked="true"] svg circle.off {
+  display: none;
+}
+
+button.current-color[role="switch"] svg circle.on {
+  display: none;
+}
+
+button.current-color[role="switch"][aria-checked="true"] svg circle.on {
+  color: green;
+  display: block;
+  stroke-color: #005a9c;
+  fill: #005a9c;
+  fill-opacity: 1;
+}
+
+button.current-color[role="switch"] span.off {
+  display: inline-block;
+}
+
+button.current-color[role="switch"] span.on {
+  display: none;
+}
+
+button.current-color[role="switch"][aria-checked="true"] span.off {
+  display: none;
+}
+
+button.current-color[role="switch"][aria-checked="true"] span.on {
+  display: inline-block;
+}
+
+button.current-color[role="switch"]:focus,
+button.current-color[role="switch"]:hover {
+  padding: 2px 2px 6px 6px;
+  border-width: 2px;
+  outline: none;
+  background-color: #def;
+  cursor: pointer;
+}
+
+@media (forced-colors: active) {
+  button.current-color[role="switch"] .label {
+    color: currentcolor;
+  }
+
+  button.current-color[role="switch"] svg rect {
+    stroke: currentcolor;
+  }
+
+  button.current-color[role="switch"] svg circle.off {
+    stroke: currentcolor;
+    fill: currentcolor;
+  }
+
+  button.current-color[role="switch"][aria-checked="true"] svg circle.on {
+    stroke-color: currentcolor;
+    fill: currentcolor;
+  }
+
+  button.current-color[role="switch"]:focus svg,
+  button.current-color[role="switch"]:hover svg {
+    background-color: inherit;
+    color: currentcolor;
+  }
+}