1 files changed, 108 insertions, 0 deletions
diff --git a/devtools/client/themes/badge.css b/devtools/client/themes/badge.css
new file mode 100644
index 0000000000..5f635a225c
--- /dev/null
+++ b/devtools/client/themes/badge.css
@@ -0,0 +1,108 @@
+/* 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/. */
+
+:root {
+  --badge-active-background-color: var(--blue-50);
+  --badge-active-border-color: #FFFFFFB3;
+  --badge-background-color: white;
+  --badge-border-color: #CACAD1;
+  --badge-color: var(--grey-60);
+  --badge-hover-background-color: #DFDFE8;
+  --badge-interactive-background-color: var(--grey-20);
+  --badge-interactive-color: var(--grey-90);
+  --badge-scrollable-color: #8000D7;
+  --badge-scrollable-background-color: #FFFFFF;
+  --badge-scrollable-active-background-color: #8000D7;
+}
+
+.theme-dark:root {
+  --badge-active-background-color: var(--blue-60);
+  --badge-active-border-color: #FFF6;
+  --badge-background-color: var(--grey-80);
+  --badge-border-color: var(--grey-50);
+  --badge-color: var(--grey-40);
+  --badge-hover-background-color: var(--grey-80);
+  --badge-interactive-background-color: var(--grey-70);
+  --badge-interactive-color: var(--grey-30);
+  --badge-scrollable-color: #B98EFF;
+  --badge-scrollable-background-color: transparent;
+}
+
+/* Inspector badge */
+.inspector-badge,
+.editor.text .whitespace::before,
+.unavailable-children::before {
+  display: inline-block;
+  /* 9px text is too blurry on low-resolution screens */
+  font-size: 10px;
+  font-weight: normal;
+  line-height: 10px;
+  height: 12px;
+  margin-top: 1px;
+  vertical-align: top;
+  border: 1px solid var(--badge-border-color);
+  border-radius: 3px;
+  padding: 0px 2px;
+  margin-inline-start: 5px;
+  user-select: none;
+  background-color: var(--badge-background-color);
+  color: var(--badge-color);
+  box-sizing: border-box;
+}
+
+.editor.text .whitespace::before {
+  content: attr(data-label);
+  margin-inline-start: 0;
+}
+
+.unavailable-children::before {
+  content: attr(data-label);
+  height: auto;
+}
+
+@media (min-resolution: 1.1dppx) {
+  .inspector-badge,
+  .editor.text .whitespace::before {
+    font-size: 9px;
+  }
+}
+
+/* Inspector badges that are interactive/clickable */
+.inspector-badge.interactive {
+  background-color: var(--badge-interactive-background-color);
+  color: var(--badge-interactive-color);
+  cursor: pointer;
+}
+
+.inspector-badge:not(.active).interactive:focus,
+.inspector-badge:not(.active).interactive:hover {
+  background-color: var(--badge-hover-background-color);
+}
+
+.inspector-badge.active,
+.inspector-badge.interactive.active {
+  background-color: var(--badge-active-background-color);
+  border-color: var(--badge-active-border-color);
+  color: var(--theme-selection-color);
+}
+
+.inspector-badge.interactive.scrollable-badge {
+  background-color: var(--badge-scrollable-background-color);
+  border-color: var(--badge-scrollable-color);
+  color: var(--badge-scrollable-color);
+}
+
+.inspector-badge.interactive.scrollable-badge.active {
+  background-color: var(--badge-scrollable-active-background-color);
+  color: var(--theme-selection-color);
+}
+
+.inspector-badge.has-disabled-events {
+  font-style: italic;
+}
+
+.inspector-badge.has-disabled-events::before {
+  content: "*";
+  padding-inline-end: 2px;
+}