Extract card-frame and card patterns into molecules

src/styles/mixins/molecules.scss

@@ -2,6 +2,46 @@
 @use "./layout";
 @use "./utils";
 
+/**
+ * A straightforward "frame" that serves as a basis for other card-like
+ * patterns. May be used on its own for components that don't need all of
+ * `card` or `panel's` bells and whistles.
+ */
+@mixin card-frame {
+  @include utils.border;
+  border-radius: 2px;
+  box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.1);
+  background-color: var.$color-background;
+}
+
+/**
+ * A "card"-like pattern that may be displayed in vertical lists, a la
+ * annotation (thread) cards. Will vertically-space its children. Adds a
+ * hover/active intensified box shadow and accounts for "theme-clean" affordances.
+ */
+@mixin card {
+  @include card-frame;
+  @include layout.vertical-rhythm;
+  padding: 1em;
+
+  &:hover,
+  &.is-focused {
+    box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.15);
+  }
+
+  &--theme-clean {
+    // Give a little more space so that the border appears centered
+    // between cards
+    padding-bottom: 1.5em;
+    border-bottom: 1px solid var.$grey-2;
+    box-shadow: none;
+
+    &:hover {
+      box-shadow: none;
+    }
+  }
+}
+
 /**
  * horizontally-oriented collection of linked icons
  */