Stub out variants

app/assets/stylesheets/_global.css

@@ -19,6 +19,17 @@
   --text-x-large: 1.8rem;
   --text-xx-large: 2.5rem;
 
+  /* Borders */
+  --border: 1px solid var(--color-subtle);
+
+  /* Shadows */
+  --shadow: 0 0 0 1px oklch(var(--lch-always-black) / 0.02),
+            0 .2em 1.6em -0.8em oklch(var(--lch-always-black) / 0.2),
+            0 .4em 2.4em -1em oklch(var(--lch-always-black) / 0.3),
+            0 .4em .8em -1.2em oklch(var(--lch-always-black) / 0.4),
+            0 .8em 1.2em -1.6em oklch(var(--lch-always-black) / 0.5),
+            0 1.2em 1.6em -2em oklch(var(--lch-always-black) / 0.6);
+
   /* Components */
   --btn-size: 2.65em;
 
@@ -73,5 +84,12 @@
     --lch-green-light: 28.11% 0.02 142.49;
     --lch-yellow: 40.9% 0.06 88.9;
     --lch-light-blue: 20.62% 0.048 216.62;
+
+    --shadow: 0 0 0 1px oklch(var(--lch-always-black) / 0.42),
+              0 .2em 1.6em -0.8em oklch(var(--lch-always-black) / 0.6),
+              0 .4em 2.4em -1em oklch(var(--lch-always-black) / 0.7),
+              0 .4em .8em -1.2em oklch(var(--lch-always-black) / 0.8),
+              0 .8em 1.2em -1.6em oklch(var(--lch-always-black) / 0.9),
+              0 1.2em 1.6em -2em oklch(var(--lch-always-black) / 1);
   }
 }

app/assets/stylesheets/cards.css

@@ -1,12 +1,35 @@
+/* TODO
+
+•
+
+*/
+
+
 @layer components {
+  /* Card containers
+  /* -------------------------------------------------------------------------- */
+
+  .card-columns {
+    border-block: 1px solid var(--color-subtle);
+    display: grid;
+    grid-template-columns: repeat(2, 50%);
+    margin: auto;
+    max-inline-size: 100ch;
+    padding-block: var(--block-space-half);
+
+    .card {
+      z-index: unset;
+    }
+  }
+
   .cards {
     --block-space: 2cqi;
     --container-gap: var(--block-space);
     --container-padding: calc(var(--block-space) * 1.5);
 
     container-type: inline-size;
-    padding: var(--block-space-half) 0;
     justify-content: start;
+    padding: var(--block-space-half) 0;
 
     :where(.card) {
       --block-space: 1em;
@@ -58,29 +81,25 @@
     }
   }
 
-  .cards--columns {
-    border-block: 1px solid var(--color-subtle);
-    display: grid;
-    grid-template-columns: repeat(2, 50%);
-    margin: auto;
-    max-inline-size: 100ch;
-    padding-block: var(--block-space-half);
-
-    .card {
-      aspect-ratio: unset;
-      z-index: unset;
-    }
-  }
+  /* Card items
+  /* -------------------------------------------------------------------------- */
 
   .card {
     --border-color: transparent;
     --border-radius: 0.2em;
     --border-size: 0;
 
-    aspect-ratio: 2/0.95;
+    aspect-ratio: var(--card-aspect-ratio, auto);
     background-color: color-mix(in srgb, var(--card-color) 4%, var(--color-bg));
+    border: var(--border);
+    border-radius: 0.5em;
+    box-shadow: var(--shadow);
     color: color-mix(in srgb, var(--card-color) 40%, var(--color-ink));
+    display: flex;
+    flex-direction: column;
     max-inline-size: 75ch;
+    position: relative;
+    text-align: start;
     z-index: 1;
 
     .card__container & {
@@ -97,6 +116,18 @@
     }
   }
 
+  /* Variants */
+  .card--large {
+    --card-aspect-ratio: 2 / 0.95;
+  }
+
+  .card--medium {}
+  .card--small {}
+  .card--mini {}
+
+  /* Actions around cards
+  /* -------------------------------------------------------------------------- */
+
   .card__actions {
     position: absolute;
     inset: var(--actions-block-inset) auto auto calc(var(--actions-inline-inset) * -1);

app/assets/stylesheets/utilities.css

@@ -167,25 +167,7 @@
   .border-radius { border-radius: var(--border-radius, 0.5em); }
 
   /* Shadows */
-  .shadow {
-    box-shadow:
-      0 0 0 1px oklch(var(--lch-always-black) / 0.02),
-      0 .2em 1.6em -0.8em oklch(var(--lch-always-black) / 0.2),
-      0 .4em 2.4em -1em oklch(var(--lch-always-black) / 0.3),
-      0 .4em .8em -1.2em oklch(var(--lch-always-black) / 0.4),
-      0 .8em 1.2em -1.6em oklch(var(--lch-always-black) / 0.5),
-      0 1.2em 1.6em -2em oklch(var(--lch-always-black) / 0.6);
-
-    @media (prefers-color-scheme: dark) {
-      box-shadow:
-        0 0 0 1px oklch(var(--lch-always-black) / 0.42),
-        0 .2em 1.6em -0.8em oklch(var(--lch-always-black) / 0.6),
-        0 .4em 2.4em -1em oklch(var(--lch-always-black) / 0.7),
-        0 .4em .8em -1.2em oklch(var(--lch-always-black) / 0.8),
-        0 .8em 1.2em -1.6em oklch(var(--lch-always-black) / 0.9),
-        0 1.2em 1.6em -2em oklch(var(--lch-always-black) / 1);
-    }
-  }
+  .shadow { box-shadow: var(--shadow); }
 
   /* Lists */
   :where(.list-style-none) {

app/views/cards/display/_perma.html.erb

@@ -1,7 +1,5 @@
 <% cache card do %>
-  <article class="card shadow border flex flex-column position-relative txt-align-start border-radius"
-      style="--card-color: <%= card.color %>; view-transition-name: <%= dom_id(card, :ticket) %>;"
-      id="<%= dom_id(card, :ticket) %>">
+  <article class="card card--large" style="--card-color: <%= card.color %>; view-transition-name: <%= dom_id(card, :ticket) %>;" id="<%= dom_id(card, :ticket) %>">
     <header class="card__header flex align-center gap min-width">
       <%= link_to card.collection.name, cards_path(collection_ids: [card.collection]),
             class: "card__collection txt-uppercase overflow-ellipsis txt-reversed" %>

app/views/cards/index.html.erb

@@ -6,7 +6,7 @@
   <%= render "cards/index/header", filter: @filter %>
 <% end %>
 
-<div class="cards--columns">
+<div class="card-columns">
   <%= render "cards/index/engagement/considering", cards: @considering_cards %>
   <%= render "cards/index/engagement/doing", cards: @doing_cards, filter: @filter %>
 </div>