add vertical axis token to replace fixed, non-responsive version

primer · Jan 8, 2025 · c8e9172 · c8e9172
1 parent c2bb92e
commit c8e9172
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 1 deletion.
diff --git a/.changeset/strong-eels-wink.md b/.changeset/strong-eels-wink.md
@@ -0,0 +1,9 @@
+---
+'@primer/brand-primitives': patch
+---
+
+Added new token for river breakout vertical spacing:
+
+```
+--brand-River-spacing-innerY
+```
diff --git a/packages/design-tokens/src/tokens/functional/components/river/river.json b/packages/design-tokens/src/tokens/functional/components/river/river.json
@@ -12,6 +12,17 @@
           }
         }
       },
+      "innerY": {
+        "value": "var(--base-size-24)",
+        "responsive": {
+          "768px": {
+            "value": "var(--base-size-24)"
+          },
+          "1280px": {
+            "value": "var(--base-size-32)"
+          }
+        }
+      },
       "outer": {
         "value": "var(--base-size-36)",
         "responsive": {

diff --git a/packages/react/src/river/river-shared.module.css b/packages/react/src/river/river-shared.module.css
@@ -177,7 +177,7 @@
   .RiverBreakout .River__content {
     display: grid;
     gap: var(--brand-River-spacing-inner);
-    row-gap: var(--base-size-32);
+    row-gap: var(--brand-River-spacing-innerY);
     grid-template-areas:
       'text trailingComponent'
       'cta trailingComponent';