1 files changed, 77 insertions, 0 deletions
diff --git a/devtools/client/themes/accessibility-color-contrast.css b/devtools/client/themes/accessibility-color-contrast.css
new file mode 100644
index 0000000000..dcf2a38614
--- /dev/null
+++ b/devtools/client/themes/accessibility-color-contrast.css
@@ -0,0 +1,77 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+/* Classes used to style the color contrast section in the Accessibility
+ * Checks panel and color picker tooltip across the Inspector panel.
+ *
+ * The section consists of:
+ *   - contrast ratio value (numeric + score badge (AA/AAA/FAIL)):
+ *       Only shows up if contrast ratio can be calculated.
+ *   - large text indicator badge:
+ *       Only shows up if the selected text node contains large text.
+ */
+.accessibility-color-contrast {
+  position: relative;
+  display: flex;
+  cursor: default;
+  height: inherit;
+  align-items: baseline;
+}
+
+.accessibility-color-contrast .accessibility-contrast-value:empty:after {
+  display: none;
+}
+
+.accessibility-color-contrast .accessibility-contrast-value:after {
+  margin-inline-start: 4px;
+}
+
+.accessibility-color-contrast
+  .accessibility-contrast-value.AA:after,
+.accessibility-color-contrast
+  .accessibility-contrast-value.AAA:after {
+  color: var(--theme-highlight-green);
+}
+
+.accessibility-color-contrast
+  .accessibility-contrast-value.FAIL:after {
+  color: var(--theme-icon-error-color);
+  display: inline-block;
+  width: 12px;
+  height: 12px;
+  content: "";
+  vertical-align: -2px;
+  background-image: url(resource://devtools-shared-images/error-small.svg);
+  background-position: center;
+  background-repeat: no-repeat;
+  -moz-context-properties: fill;
+  fill: currentColor;
+}
+
+.accessibility-color-contrast
+  .accessibility-contrast-value.AA:after {
+  content: "AA\2713";
+  unicode-bidi: isolate;
+}
+
+.accessibility-color-contrast
+  .accessibility-contrast-value.AAA:after {
+  content: "AAA\2713";
+  unicode-bidi: isolate;
+}
+
+.accessibility-color-contrast .accessibility-color-contrast-separator:before {
+  content: "–";
+  margin-inline-start: 4px;
+}
+
+.accessibility-color-contrast-large-text {
+  background-color: var(--badge-background-color);
+  color: var(--badge-color);
+  outline: 1px solid var(--badge-border-color);
+  padding: 0px 2px;
+  margin-inline-start: 6px;
+  line-height: initial;
+  user-select: none;
+}