1 files changed, 180 insertions, 0 deletions
diff --git a/toolkit/content/widgets/moz-card/moz-card.css b/toolkit/content/widgets/moz-card/moz-card.css
new file mode 100644
index 0000000000..52c0ac0980
--- /dev/null
+++ b/toolkit/content/widgets/moz-card/moz-card.css
@@ -0,0 +1,180 @@
+/* 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/. */
+
+ :host {
+  --card-border-color: color-mix(in srgb, currentColor 10%, transparent);
+  --card-border-radius: var(--border-radius-medium);
+  --card-border-width: var(--border-width);
+  --card-border: var(--card-border-width) solid var(--card-border-color);
+  --card-background-color: var(--box-background-color);
+  --card-focus-outline: var(--focus-outline);
+  --card-box-shadow: var(--box-shadow-10);
+  /* Bug 1791816, 1839523: replace with spacing tokens */
+  --card-padding: 1em;
+  --card-gap: var(--card-padding);
+  --card-article-gap: 0.45em;
+
+  /* Bug 1791816: replace with button tokens */
+  @media (prefers-contrast) {
+    --button-border-color: var(--border-interactive-color);
+    --button-border-color-hover: var(--border-interactive-color-hover);
+    --button-border-color-active: var(--border-interactive-color-active);
+    --card-border-color: color-mix(in srgb, currentColor 41%, transparent);
+  }
+  /* Bug 1791816: replace with button tokens */
+  @media (forced-colors) {
+    --button-background-color: ButtonFace;
+    --button-background-color-hover: SelectedItemText;
+    --button-background-color-active: SelectedItemText;
+    --button-border-color: var(--border-interactive-color);
+    --button-border-color-hover: var(--border-interactive-color-hover);
+    --button-border-color-active: var(--border-interactive-color-active);
+    --button-text-color: ButtonText;
+    --button-text-color-hover: SelectedItem;
+    --button-text-color-active: SelectedItem;
+  }
+}
+
+:host {
+  display: block;
+  border: var(--card-border);
+  border-radius: var(--card-border-radius);
+  background-color: var(--card-background-color);
+  box-shadow: var(--card-box-shadow);
+  box-sizing: border-box;
+}
+
+:host([type=accordion]) {
+  summary {
+    padding-block: var(--card-padding);
+  }
+  #content {
+    padding-block-end: var(--card-padding);
+  }
+}
+:host(:not([type=accordion])) {
+  .moz-card {
+    padding-block: var(--card-padding);
+  }
+}
+
+.moz-card {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--card-article-gap);
+}
+
+#moz-card-details {
+  width: 100%;
+}
+
+summary {
+  cursor: pointer;
+}
+
+#heading-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: var(--card-gap);
+  padding-inline: var(--card-padding);
+  border-radius: var(--card-border-radius);
+}
+
+#heading {
+  font-size: var(--font-size-root);
+  font-weight: var(--font-weight-bold);
+}
+
+#content {
+  align-self: stretch;
+  padding-inline: var(--card-padding);
+  border-end-start-radius: var(--card-border-radius);
+  border-end-end-radius: var(--card-border-radius);
+
+  @media (prefers-contrast) {
+    :host([type=accordion]) & {
+      border-block-start: 0;
+      padding-block-start: var(--card-padding);
+    }
+  }
+}
+
+details  {
+  > summary {
+    list-style: none;
+    border-radius: var(--card-border-radius);
+    cursor: pointer;
+
+    &:hover {
+      background-color: var(--button-background-color-hover);
+    }
+    @media (prefers-contrast) {
+      outline: var(--button-border-color) solid var(--border-width);
+
+      &:hover {
+        outline-color: var(--button-border-color-hover);
+      }
+
+      &:active {
+        outline-color: var(--button-border-color-active);
+      }
+    }
+
+    @media (forced-colors) {
+      color: var(--button-text-color);
+      background-color: var(--button-background-color);
+
+      &:hover {
+        background-color: var(--button-background-color-hover);
+        color: var(--button-text-color-hover);
+      }
+
+      &:active {
+        background-color: var(--button-background-color-active);
+        color: var(--button-text-color-active);
+      }
+    }
+  }
+
+  &[open] {
+    summary {
+      border-end-start-radius: 0;
+      border-end-end-radius: 0;
+    }
+    @media not (prefers-contrast) {
+      #content {
+        /*
+        There is a border shown above this element in prefers-contrast.
+        When there isn't a border, there's no need for the extra space.
+         */
+        padding-block-start: 0;
+      }
+    }
+  }
+
+  &:focus-visible {
+    outline: var(--card-focus-outline);
+  }
+}
+
+.chevron-icon {
+  background-image: url("chrome://global/skin/icons/arrow-down.svg");
+  background-position: center;
+  background-repeat: no-repeat;
+  -moz-context-properties: fill;
+  fill: currentColor;
+  width: 24px;
+  height: 24px;
+  min-width: 24px;
+  min-height: 24px;
+  padding: 0;
+  flex-shrink: 0;
+  align-self: flex-start;
+
+  details[open] & {
+    background-image: url("chrome://global/skin/icons/arrow-up.svg");
+  }
+}