1 files changed, 132 insertions, 0 deletions
diff --git a/browser/components/shopping/content/letter-grade.css b/browser/components/shopping/content/letter-grade.css
new file mode 100644
index 0000000000..75be411151
--- /dev/null
+++ b/browser/components/shopping/content/letter-grade.css
@@ -0,0 +1,132 @@
+/* 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/. */
+
+@import url("chrome://global/skin/in-content/common.css");
+
+:host {
+  --background-term-a: #B3FFE3;
+  --background-term-b: #80EBFF;
+  --background-term-c: #FFEA80;
+  --background-term-d: #FFB587;
+  --background-term-f: #FF848B;
+  --in-content-box-border-color: rgba(0, 0, 0, 0.15);
+  --inner-border: 1px solid var(--in-content-box-border-color);
+  --letter-grade-width: 1.5rem;
+  --letter-grade-term-inline-padding: 0.25rem;
+}
+
+#letter-grade-wrapper {
+  border-radius: 4px;
+  color: #000;
+  display: flex;
+  font-weight: 600;
+  line-height: 150%;
+  margin: 0;
+  overflow-wrap: anywhere;
+}
+
+#letter-grade-term {
+  align-items: center;
+  align-self: stretch;
+  box-sizing: border-box;
+  display: flex;
+  flex-shrink: 0;
+  font-size: 1em;
+  justify-content: center;
+  margin: 0;
+  padding: 0.0625rem var(--letter-grade-term-inline-padding);
+  text-align: center;
+  width: var(--letter-grade-width);
+}
+
+:host([showdescription]) #letter-grade-term  {
+  /* For border "shadow" inside the container */
+  border-block: var(--inner-border);
+  border-inline-start: var(--inner-border);
+  border-start-start-radius: 4px;
+  border-end-start-radius: 4px;
+  /* Add 1px padding so that the letter does not shift when changing
+   * between the show description and no description variants. */
+  padding-inline-end: calc(var(--letter-grade-term-inline-padding) + 1px);
+}
+
+:host(:not([showdescription])) #letter-grade-term {
+  border: var(--inner-border);
+  border-radius: 4px;
+}
+
+#letter-grade-description {
+  /* For border "shadow" inside the container */
+  border-block: var(--inner-border);
+  border-inline-end: var(--inner-border);
+  border-start-end-radius: 4px;
+  border-end-end-radius: 4px;
+
+  align-items: center;
+  align-self: stretch;
+  box-sizing: border-box;
+  display: flex;
+  font-size: 0.87rem;
+  font-weight: var(--font-weight-default);
+  margin: 0;
+  padding: 0.125rem 0.5rem;
+}
+
+/* Letter grade colors */
+
+:host([letter="A"]) #letter-grade-term {
+  background-color: var(--background-term-a);
+}
+
+:host([letter="A"]) #letter-grade-description {
+  background-color: rgba(231, 255, 246, 1);
+}
+
+:host([letter="B"]) #letter-grade-term {
+  background-color: var(--background-term-b);
+}
+
+:host([letter="B"]) #letter-grade-description {
+  background-color: rgba(222, 250, 255, 1);
+}
+
+:host([letter="C"]) #letter-grade-term {
+  background-color: var(--background-term-c);
+}
+
+:host([letter="C"]) #letter-grade-description {
+  background-color: rgba(255, 249, 218, 1);
+}
+
+:host([letter="D"]) #letter-grade-term {
+  background-color: var(--background-term-d);
+}
+
+:host([letter="D"]) #letter-grade-description {
+  background-color: rgba(252, 230, 213, 1);
+}
+
+:host([letter="F"]) #letter-grade-term {
+  background-color: var(--background-term-f);
+}
+
+:host([letter="F"]) #letter-grade-description {
+  background-color: rgba(255, 228, 230, 1);
+}
+
+@media (prefers-contrast) {
+  :host {
+    --in-content-box-border-color: unset;
+  }
+
+  #letter-grade-term {
+    background-color: var(--in-content-page-color) !important;
+    color: var(--in-content-page-background) !important;
+  }
+
+  #letter-grade-description {
+    background-color: var(--in-content-page-background) !important;
+    color: var(--in-content-page-color) !important;
+  }
+}