@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/river/river.css

Color, spacing, and typography primitives for the Primer Brand Design System

/**
 * Do not edit directly
 * Generated on Fri, 24 Apr 2026 13:01:09 GMT
 */

:root {
  --brand-RiverBreakout-variant-gridline-spacing-contentGap: var(--base-size-16);
  --brand-RiverBreakout-variant-gridline-spacing-outerInline: var(--base-size-20);
  --brand-RiverBreakout-variant-gridline-spacing-outerBlockEnd: var(--base-size-40);
  --brand-RiverBreakout-variant-gridline-spacing-outerBlock: var(--base-size-36);
  --brand-RiverBreakout-spacing-inner: var(--base-size-40);
  --brand-RiverAccordion-variant-gridline-spacing-contentGap: var(--base-size-32);
  --brand-RiverAccordion-variant-gridline-spacing-outerInline: var(--base-size-20);
  --brand-RiverAccordion-variant-gridline-spacing-outerBlock: var(--base-size-40);
  --brand-River-variant-gridline-spacing-outerInline: var(--base-size-20);
  --brand-River-variant-gridline-spacing-outerBlock: var(--base-size-40);
  --brand-River-spacing-outerBlock: var(--base-size-36);
  --brand-River-spacing-innerY: var(--base-size-24);
  --brand-River-spacing-inner: var(--base-size-40);
}

@media (min-width: 768px) {
  :root {
    --brand-RiverBreakout-variant-gridline-spacing-contentGap: var(--base-size-20);
    --brand-RiverBreakout-variant-gridline-spacing-outerInline: var(--base-size-36);
    --brand-RiverBreakout-variant-gridline-spacing-outerBlockEnd: var(--base-size-48);
    --brand-RiverBreakout-variant-gridline-spacing-outerBlock: var(--base-size-40);
    --brand-RiverBreakout-spacing-inner: var(--base-size-48);
    --brand-RiverAccordion-variant-gridline-spacing-outerInline: var(--base-size-36);
    --brand-RiverAccordion-variant-gridline-spacing-outerBlock: var(--base-size-36);
    --brand-River-spacing-innerY: var(--base-size-24);
  }
}

@media (min-width: 1280px) {
  :root {
    --brand-RiverBreakout-variant-gridline-spacing-contentGap: var(--base-size-24);
    --brand-RiverBreakout-variant-gridline-spacing-outerInline: var(--base-size-64);
    --brand-RiverBreakout-variant-gridline-spacing-outerBlockEnd: var(--base-size-80);
    --brand-RiverBreakout-variant-gridline-spacing-outerBlock: var(--base-size-64);
    --brand-RiverBreakout-spacing-inner: var(--base-size-64);
    --brand-RiverAccordion-variant-gridline-spacing-contentGap: var(--base-size-64);
    --brand-RiverAccordion-variant-gridline-spacing-outerInline: var(--base-size-64);
    --brand-RiverAccordion-variant-gridline-spacing-outerBlock: var(--base-size-64);
    --brand-River-variant-gridline-spacing-outerInline: var(--base-size-64);
    --brand-River-variant-gridline-spacing-outerBlock: var(--base-size-64);
    --brand-River-spacing-outerBlock: var(--base-size-48);
    --brand-River-spacing-innerY: var(--base-size-32);
    --brand-River-spacing-inner: var(--base-size-24);
  }
}