1 files changed, 29 insertions, 0 deletions
diff --git a/devtools/client/application/src/components/manifest/ManifestColorItem.css b/devtools/client/application/src/components/manifest/ManifestColorItem.css
new file mode 100644
index 0000000000..92dadec271
--- /dev/null
+++ b/devtools/client/application/src/components/manifest/ManifestColorItem.css
@@ -0,0 +1,29 @@
+/* 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/. */
+
+.manifest-item__color {
+  /* NOTE: platform converts any color format that is in the manifest to
+           hexadecimal, so we can uppercase */
+  text-transform: uppercase;
+  direction: ltr; /* force LTR so the # stays at the beginning of the hex number */
+  display: inline-block;
+}
+
+.manifest-item__color::before {
+  display: inline-block;
+  content: '';
+  background-color: #fff;
+  background-image: linear-gradient(var(--color-value), var(--color-value)), /* injected via React */
+    linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc),
+    linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc);
+  background-size: 6px 6px;
+  background-position: 0 0, 3px 3px;
+  border-radius: 50%;
+  width: calc(var(--base-unit) * 3);
+  height: calc(var(--base-unit) * 3);
+  margin-block-start: calc(var(--base-unit) * -0.5);
+  margin-inline-end: var(--base-unit);
+  box-shadow: 0 0 0 1px var(--theme-splitter-color);
+  vertical-align: middle;
+}