refactor: compose shared interactive-card hover/focus CSS instead of duplicating it

scripts/check-duplication.mjs

@@ -36,7 +36,7 @@ export const repoRoot = dirname(dirname(fileURLToPath(import.meta.url)));
 // them. A change that genuinely needs a new copy should instead extract the
 // shared piece, which is what the count exists to prompt.
 export const CLONE_CEILING = 245;
-export const CSS_YAML_CLONE_CEILING = 35;
+export const CSS_YAML_CLONE_CEILING = 30;
 
 // How far below the ceiling the count may fall before the gate insists the
 // ceiling follow it down. Without this the slack left by one clean-up would

src/components/CNCFProjectCard/styles.module.css

@@ -1,4 +1,6 @@
 .card {
+  composes: cardLift from '../shared/InteractiveCard.module.css';
+  --card-lift-shadow: 0 4px 12px rgb(0 0 0 / 8%);
   align-items: center;
   aspect-ratio: 1 / 1;
   background: var(--ifm-background-surface-color);
@@ -23,19 +25,6 @@
   width: 120px;
 }
 
-.card:hover,
-.card:focus-visible {
-  border-color: var(--ifm-color-primary);
-  box-shadow: 0 4px 12px rgb(0 0 0 / 8%);
-  color: inherit;
-  transform: translateY(-2px);
-}
-
-.card:focus-visible {
-  outline: 3px solid var(--ifm-color-primary-light);
-  outline-offset: 2px;
-}
-
 .header {
   align-items: center;
   display: flex;

src/components/MetricsDashboard/styles.module.css

@@ -9,6 +9,7 @@
   gap: 1rem;
 }
 .card {
+  composes: cardLift from '../shared/InteractiveCard.module.css';
   border: 1px solid var(--ifm-color-emphasis-200);
   color: inherit;
   display: flex;
@@ -21,17 +22,6 @@
     transform 160ms ease,
     box-shadow 160ms ease;
 }
-.card:hover,
-.card:focus-visible {
-  border-color: var(--ifm-color-primary);
-  box-shadow: 0 8px 24px rgb(0 0 0 / 8%);
-  color: inherit;
-  transform: translateY(-2px);
-}
-.card:focus-visible {
-  outline: 3px solid var(--ifm-color-primary-light);
-  outline-offset: 2px;
-}
 .label {
   font-weight: 700;
 }

src/components/ReferenceArchitectures/styles.module.css

@@ -12,6 +12,9 @@
 }
 
 .card {
+  composes: cardLift from '../shared/InteractiveCard.module.css';
+  --card-lift-shadow: 0 8px 24px rgb(0 0 0 / 10%);
+  --card-lift-outline-offset: 3px;
   display: flex;
   min-width: 0;
   flex-direction: column;
@@ -26,19 +29,6 @@
     transform 160ms ease;
 }
 
-.card:hover,
-.card:focus-visible {
-  border-color: var(--ifm-color-primary);
-  box-shadow: 0 8px 24px rgb(0 0 0 / 10%);
-  color: inherit;
-  transform: translateY(-2px);
-}
-
-.card:focus-visible {
-  outline: 3px solid var(--ifm-color-primary-light);
-  outline-offset: 3px;
-}
-
 .cardContent {
   display: flex;
   flex: 1;

src/components/shared/InteractiveCard.module.css

@@ -0,0 +1,21 @@
+/*
+ * Shared hover/focus-lift interaction for clickable "card" components
+ * (CNCFProjectCard, MetricsDashboard, ReferenceArchitectures). Each consumer's
+ * `.card` carries its own box geometry (sizing, layout, border-radius), but
+ * all three repeat the same lift-on-hover/focus treatment: border-color and
+ * transform on hover/focus-visible, plus a focus-visible outline. Shadow
+ * depth and outline-offset vary slightly by consumer, so `.cardLift` reads
+ * them from custom properties set by the consumer's own `.card` rule.
+ */
+.cardLift:hover,
+.cardLift:focus-visible {
+  border-color: var(--ifm-color-primary);
+  box-shadow: var(--card-lift-shadow, 0 8px 24px rgb(0 0 0 / 8%));
+  color: inherit;
+  transform: translateY(-2px);
+}
+
+.cardLift:focus-visible {
+  outline: 3px solid var(--ifm-color-primary-light);
+  outline-offset: var(--card-lift-outline-offset, 2px);
+}

tests/css-modules.test.mjs

@@ -152,13 +152,24 @@ test('no CSS Module class is declared without a reader', () => {
     if (hasComputedLookup(source, binding)) unresolvable.add(stylesheet);
   }
 
+  // A class reached only through `composes` has no JS reader by design.
+  // `composes: foo;` (no `from`) reaches a class declared in this same
+  // stylesheet; `composes: foo from './x.css'` reaches one declared in the
+  // target stylesheet instead, so the "seen" mark belongs there, not here.
+  for (const stylesheet of cssModules) {
+    const css = readFileSync(stylesheet, 'utf8');
+    for (const { name, from } of composedNamesIn(css)) {
+      const target = from ? resolve(dirname(stylesheet), from) : stylesheet;
+      if (!referenced.has(target)) referenced.set(target, new Set());
+      referenced.get(target).add(name);
+    }
+  }
+
   const orphans = [];
   for (const stylesheet of cssModules) {
     if (unresolvable.has(stylesheet)) continue;
     const css = readFileSync(stylesheet, 'utf8');
     const seen = referenced.get(stylesheet) ?? new Set();
-    // A class reached only through `composes` has no JS reader by design.
-    for (const { name } of composedNamesIn(css)) seen.add(name);
     for (const name of declaredClassesIn(css)) {
       if (seen.has(name)) continue;
       if (KNOWN_ORPHANS.has(key(stylesheet, name))) continue;