@primer/brand-css 0.0.0-20250212132611

package/components/river/RiverStoryScroll/RiverStoryScroll.css

@@ -0,0 +1,470 @@
+.RiverStoryScroll {
+  --ease: cubic-bezier(0.22, 0.56, 0.23, 0.89);
+  -webkit-font-smoothing: antialiased;
+  --stackDistance: calc(var(--base-size-24) * -1);
+
+  /* River visual (videos)
+  * UL = unit-less, needed for division in certain scenarios
+  */
+  --visualMaxWidth: 1032px;
+  --visualMaxWidthUL: 1032;
+  --visualMaxHeight: min(690px, 60vh);
+  --visualMaxHeightUL: 690;
+  --storyScrollPadding: min(32px, 5vw);
+  position: relative;
+}
+@media (max-height: 720px) {
+  .RiverStoryScroll {
+    --visualMaxHeight: 55vh;
+  }
+}
+
+@media (max-height: 600px) {
+  .RiverStoryScroll {
+    --visualMaxHeight: 50vh;
+  }
+}
+
+@media (max-height: 500px) {
+  .RiverStoryScroll {
+    --visualMaxHeight: 40vh;
+  }
+}
+
+.RiverStoryScroll__inner {
+  position: relative;
+}
+
+.RiverStoryScroll__visual-cover {
+  position: absolute;
+  left: 0;
+  width: 100%;
+}
+
+.RiverStoryScroll__image {
+  margin-left: auto;
+  margin-right: auto;
+  width: auto;
+  z-index: 10;
+  position: relative;
+  border-radius: var(--brand-borderRadius-large);
+}
+
+.RiverStoryScroll--enabled .RiverStoryScroll__internal-river {
+  grid-template-columns: 1fr;
+  gap: 0;
+}
+
+.RiverStoryScroll--enabled .RiverStoryScroll__internal-river img,
+.RiverStoryScroll--enabled .RiverStoryScroll__internal-river video {
+  display: none;
+}
+
+@media (max-width: 542px) {
+  .RiverStoryScroll {
+    --topOffset: calc((100vh - min(664px, 60vh)) / 5);
+  }
+}
+
+@media (max-width: 768px) and (min-height: 670px) {
+  .RiverStoryScroll {
+    --extraBottomSpacing: calc(-1 * (100vh - 100vw) / 5);
+  }
+}
+
+@media (min-width: 542px) and (max-width: 1028px) and (min-height: 670px) {
+  .RiverStoryScroll {
+    --extraBottomSpacing: calc(-1 * (100vh - 100vw) / 3);
+  }
+}
+
+@media (min-width: 542px) {
+  .RiverStoryScroll {
+    --scrollTextHeight: 42vh;
+  }
+}
+
+@media (max-height: 520px) {
+  .RiverStoryScroll {
+    --scrollTextHeight: 70vh;
+  }
+}
+
+@media (min-width: 1028px) {
+  .RiverStoryScroll {
+    --stackDistance: -30px;
+  }
+}
+
+@media (max-height: 800px) {
+  .RiverStoryScroll {
+    --stackDistance: -20px;
+  }
+}
+
+@media (max-height: 500px) {
+  .RiverStoryScroll {
+    --stackDistance: -15px;
+  }
+}
+
+@media screen and (max-width: 768px) {
+  .RiverStoryScroll {
+    --topOffset: calc((100vh - min(664px, 60vh)) / 3);
+
+    /* Spacing above the visual */
+    --availableWidth: calc(100vw - var(--storyScrollPadding) * 2);
+    --relativeVisualHeight: calc(var(--visualMaxHeightUL) / var(--visualMaxWidthUL) * var(--availableWidth));
+    --visualHeight: min(var(--visualMaxHeight), var(--relativeVisualHeight));
+    --visualWidth: calc(var(--visualHeight) * var(--visualMaxWidthUL) / var(--visualMaxHeightUL));
+    --scrollTextHeight: 58vh;
+    --textToVisualPadding: max(5vh, 40px);
+
+    --topScrollOffset: calc(var(--visualHeight));
+    --bottomScrollOffset: calc(100vh - var(--topOffset) - var(--visualHeight) - var(--textToVisualPadding));
+
+    --extraBottomSpacing: 70px;
+  }
+
+  /* Enhanced styling if dvh is supported */
+  @supports (height: 100dvh) {
+    .RiverStoryScroll__visual-container-inner {
+      height: 100dvh;
+    }
+  }
+
+  .RiverStoryScroll__visual-container {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    left: 0;
+    top: 0;
+  }
+
+  .RiverStoryScroll__tracker {
+    min-height: var(--scrollTextHeight);
+    position: relative;
+    transition: opacity 0.3s var(--ease);
+  }
+
+  .RiverStoryScroll__tracker:has(+ .in-viewport) {
+    opacity: 0;
+  }
+
+  .RiverStoryScroll__tracker.in-viewport + .outside-viewport {
+    opacity: 0;
+  }
+
+  .RiverStoryScroll {
+    max-width: calc(1032px + var(--storyScrollPadding) * 2);
+    margin-top: min(30vw, 22vh);
+    margin-left: auto;
+    margin-right: auto;
+    padding-right: var(--storyScrollPadding);
+    padding-left: var(--storyScrollPadding);
+  }
+
+  .RiverStoryScroll__content-container--below {
+    padding-top: var(--topScrollOffset);
+    padding-bottom: var(--bottomScrollOffset);
+  }
+
+  .RiverStoryScroll__image {
+    height: auto;
+    width: 100%;
+    max-width: var(--visualWidth);
+    border-radius: var(--brand-borderRadius-large);
+  }
+
+  .RiverStoryScroll__visual-container-inner {
+    position: sticky;
+    pointer-events: none;
+    top: 0;
+    padding-top: var(--topOffset);
+    margin-top: calc(-1 * var(--topOffset));
+    display: flex;
+    z-index: 1;
+    flex-direction: column;
+    height: 100vh;
+  }
+
+  .RiverStoryScroll__visual--below {
+    background-image: linear-gradient(
+      180deg,
+      var(--brand-RiverStoryScroll-content-inactive-bgColor) calc(var(--topOffset) + var(--visualHeight) + 3px),
+      transparent calc(var(--topOffset) + var(--visualHeight) + var(--textToVisualPadding)),
+      transparent 93%,
+      var(--brand-RiverStoryScroll-content-inactive-bgColor) 99%
+    );
+  }
+
+  .RiverStoryScroll__visual--below .story-scroll-text {
+    margin-top: var(--base-size-40);
+  }
+
+  .tracker-outside-viewport {
+    opacity: 0;
+    display: none;
+  }
+
+  /* Show first visual, even when nothing is visible */
+  .tracker-outside-viewport:nth-child(2) {
+    opacity: 1;
+    display: block;
+  }
+
+  .RiverStoryScroll__visual-scroll-responder {
+    transition: 0.5s var(--ease) transform, 0.5s var(--ease) filter, 0.5s var(--ease) opacity;
+    pointer-events: auto;
+  }
+
+  .tracker-outside-viewport:has(~ .tracker-in-viewport) {
+    position: absolute;
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+    left: 0;
+    right: 0;
+  }
+
+  .tracker-in-viewport + .tracker-outside-viewport {
+    transform: translateY(calc(var(--stackDistance) * -1)) scale(1.015);
+    position: absolute;
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+    left: 0;
+    right: 0;
+  }
+
+  .tracker-outside-viewport:has(+ .tracker-in-viewport) {
+    transform: translateY(var(--stackDistance)) scale(0.95);
+    filter: brightness(70%);
+    opacity: 1;
+  }
+
+  .tracker-outside-viewport:has(+ .tracker-outside-viewport + .tracker-in-viewport) {
+    transform: translateY(calc(var(--stackDistance) * 2)) scale(0.9);
+    filter: brightness(50%);
+    opacity: 1;
+  }
+
+  .tracker-outside-viewport:has(+ .tracker-outside-viewport + .tracker-outside-viewport + .tracker-in-viewport) {
+    transform: translateY(calc(var(--stackDistance) * 3)) scale(0.85);
+    filter: brightness(30%);
+    opacity: 1;
+  }
+
+  .tracker-outside-viewport:has(
+      + .tracker-outside-viewport + .tracker-outside-viewport + .tracker-outside-viewport + .tracker-in-viewport
+    ) {
+    transform: translateY(calc(var(--stackDistance) * 4)) scale(0.8);
+    filter: brightness(10%);
+    opacity: 1;
+  }
+
+  .tracker-in-viewport {
+    display: block;
+    position: relative;
+  }
+
+  /* 
+    TODO: Re-enable these at a later date
+    
+    .video-controls {
+      --distanceFromEdge: 12px;
+      position: absolute;
+      right: calc((100% - var(--visualWidth)) / 2 + var(--distanceFromEdge));
+      bottom: var(--distanceFromEdge);
+      z-index: 10;
+      pointer-events: auto;
+      transition: opacity 0.3s var(--ease);
+      opacity: 0;
+    }
+
+    @media (min-width: 542px) {
+      .video-controls {
+        --distanceFromEdge: 20px;
+      }
+    }
+
+    .RiverStoryScroll__visual-scroll-responder:hover .video-controls,
+    .video-controls-ended {
+      opacity: 1;
+    }
+
+    .video-control {
+      background-color: rgba(0, 0, 0, 0.18);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: 200px;
+      width: 44px;
+      height: 44px;
+      transition: background-color 0.2s ease;
+    }
+
+    .video-control:hover,
+    .video-control:focus {
+      background-color: rgba(0, 0, 0, 0.35);
+    } */
+
+  .RiverStoryScroll__content-stack {
+    position: sticky;
+    padding-top: var(--textToVisualPadding);
+    top: calc(var(--topOffset) + var(--visualHeight));
+  }
+
+  /* This is a hack to make the sticky behavior exclude the height of itself as it reaches the bottom */
+  /* This makes it possible to calculate the end of the sticky scroll without having to account for text content */
+  .RiverStoryScroll__tracker:last-child .RiverStoryScroll__content-stack {
+    height: 0;
+  }
+
+  .RiverStoryScroll__pagination {
+    display: flex;
+    flex-direction: column;
+    gap: var(--base-size-4);
+    position: absolute;
+    left: calc(var(--base-size-20) * -1 - 2px);
+    right: 0;
+    margin: auto;
+    height: var(--visualHeight);
+    justify-content: center;
+    margin-block-start: calc(var(--base-size-20) * -1);
+  }
+
+  .RiverStoryScroll__pagination-dot {
+    width: 6px;
+    height: 6px;
+    border-radius: var(--brand-borderRadius-large);
+    opacity: 0.55;
+    background: var(--brand-RiverStoryScroll-pagination-fgColor);
+    transition: opacity var(--brand-animation-duration-default) var(--ease),
+      height var(--brand-animation-duration-default) var(--ease);
+  }
+
+  .tracker-in-viewport:nth-child(2) ~ .RiverStoryScroll__pagination .RiverStoryScroll__pagination-dot:nth-child(1) {
+    opacity: 1;
+    height: var(--base-size-24);
+  }
+
+  .tracker-in-viewport:nth-child(3) ~ .RiverStoryScroll__pagination .RiverStoryScroll__pagination-dot:nth-child(2) {
+    opacity: 1;
+    height: var(--base-size-24);
+  }
+
+  .tracker-in-viewport:nth-child(4) ~ .RiverStoryScroll__pagination .RiverStoryScroll__pagination-dot:nth-child(3) {
+    opacity: 1;
+    height: var(--base-size-24);
+  }
+
+  .tracker-in-viewport:nth-child(5) ~ .RiverStoryScroll__pagination .RiverStoryScroll__pagination-dot:nth-child(4) {
+    opacity: 1;
+    height: var(--base-size-24);
+  }
+
+  .tracker-in-viewport:nth-child(6) ~ .RiverStoryScroll__pagination .RiverStoryScroll__pagination-dot:nth-child(5) {
+    opacity: 1;
+    height: var(--base-size-24);
+  }
+}
+
+@media screen and (min-width: 768px) {
+  .RiverStoryScroll__inner {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: var(--base-size-24);
+  }
+
+  .RiverStoryScroll__visual-container {
+    position: sticky;
+    width: 100%;
+    top: 0;
+    height: 80vh;
+    display: flex;
+    align-items: center;
+    order: 2;
+  }
+
+  .RiverStoryScroll__visual-container-inner,
+  .RiverStoryScroll__image {
+    width: 100%;
+  }
+
+  .RiverStoryScroll .RiverStoryScroll__visual-scroll-responder {
+    position: sticky;
+    top: 0;
+    width: 100%;
+    right: 0;
+    transition: opacity 0.3s var(--ease);
+    padding-top: 10vh;
+  }
+
+  .RiverStoryScroll__visual-container-inner.RiverStoryScroll__visual--below {
+    position: sticky;
+    top: 0;
+  }
+
+  .RiverStoryScroll__visual-scroll-responder.tracker-outside-viewport {
+    position: absolute;
+    top: 0;
+    z-index: -1;
+    opacity: 0;
+  }
+
+  .RiverStoryScroll__visual-scroll-responder.tracker-in-viewport {
+    z-index: 1;
+    opacity: 1;
+  }
+
+  .RiverStoryScroll__content-container.RiverStoryScroll__content-container--below {
+    padding-top: 10vh;
+  }
+
+  .RiverStoryScroll__content-container.RiverStoryScroll__content-container--below .RiverStoryScroll__tracker {
+    padding: 20vh 0;
+  }
+
+  .RiverStoryScroll__tracker.outside-viewport {
+    position: relative;
+  }
+
+  .RiverStoryScroll__tracker {
+    filter: 0;
+  }
+
+  .RiverStoryScroll__tracker.outside-viewport {
+    filter: blur(1px);
+    transition: filter var(--brand-animation-duration-extended) var(--brand-animation-easing-default);
+  }
+
+  .RiverStoryScroll__tracker::after {
+    content: '';
+    transition: opacity var(--brand-animation-duration-extended) var(--brand-animation-easing-default),
+      visibility var(--brand-animation-duration-extended) var(--brand-animation-easing-default);
+    opacity: 0;
+    visibility: hidden;
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: var(--brand-RiverStoryScroll-content-inactive-bgColor);
+  }
+
+  .RiverStoryScroll__tracker.outside-viewport::after {
+    opacity: 0.7;
+    visibility: visible;
+  }
+}
+
+@media screen and (min-width: 768px) and (min-height: 900px) and (prefers-reduced-motion: no-preference) {
+  .RiverStoryScroll {
+    margin-top: -20vh;
+  }
+
+  .RiverStoryScroll__content-container.RiverStoryScroll__content-container--below {
+    padding-top: 16vh;
+  }
+}

package/components/river/river-shared.css

@@ -0,0 +1,205 @@
+.River {
+  display: grid;
+  gap: var(--brand-River-spacing-inner);
+  grid-auto-rows: min-content;
+  padding-top: var(--brand-River-spacing-outer);
+  padding-bottom: var(--brand-River-spacing-outer);
+}
+
+.River--align-center {
+  text-align: center;
+}
+
+.River__content {
+  order: 2;
+}
+
+.River__visual--fill-media img,
+.River__visual--fill-media video {
+  width: 100%;
+  height: 100%;
+  -o-object-fit: cover;
+     object-fit: cover;
+}
+
+.River__visual--rounded {
+  overflow: hidden;
+  border-radius: var(--brand-borderRadius-large);
+}
+
+.River__visual--has-shadow {
+  box-shadow: var(--brand-River-visual-shadow);
+}
+
+.River__heading {
+  margin-bottom: var(--brand-River-heading-margin);
+}
+
+.River__call-to-action {
+  margin-top: var(--base-size-24);
+}
+
+.River__text strong,
+.River__text b {
+  font-weight: var(--base-text-weight-semibold);
+  color: var(--brand-color-text-default);
+}
+
+.River__trailingComponent {
+  margin-block-start: var(--brand-River-spacing-inner);
+}
+
+.River__trailingComponent--divider {
+  padding-block-start: var(--brand-River-spacing-inner);
+  border-top: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);
+}
+
+.River__label {
+  margin-block-end: var(--brand-River-label-margin);
+}
+
+/* Medium breakpoint and up */
+@media screen and (min-width: 48rem) {
+  .River {
+    grid-template-rows: unset;
+  }
+
+  .River__content {
+    order: unset;
+  }
+
+  .River--50-50 {
+    grid-template-columns: [content] 1fr [visual] 1fr;
+  }
+
+  .River--60-40 {
+    grid-template-columns: [content] 4fr [visual] 6fr;
+  }
+
+  .River--align-start {
+    grid-template-areas: 'content visual';
+  }
+
+  .River--align-end {
+    grid-template-areas: 'visual content';
+  }
+
+  .River--align-end.River--60-40 {
+    grid-template-columns: [visual] 6fr [content] 4fr;
+  }
+
+  .River__content {
+    display: grid;
+    align-content: center;
+    grid-area: content;
+  }
+
+  .River__visual {
+    grid-area: visual;
+  }
+
+  .River--align-center {
+    grid-auto-rows: min-content;
+    grid-template-columns: unset;
+  }
+
+  .River--align-center .River__content,
+  .River--align-center .River__visual {
+    grid-area: unset;
+    justify-self: center;
+  }
+
+  .River--align-center .River__body-text {
+    max-width: 600px;
+    justify-self: center;
+  }
+
+  .River--align-center .River__visual {
+    margin-bottom: var(--brand-River-spacing-inner);
+  }
+
+  .River--align-center .River__content {
+    margin-top: var(--brand-River-spacing-inner);
+  }
+}
+
+/* Large breakpoint and up */
+@media screen and (min-width: 63.25rem) {
+  .River--align-start .River__content {
+    padding-inline-end: var(--base-size-128);
+  }
+
+  .River--align-end .River__content {
+    padding-inline: var(--base-size-64);
+  }
+}
+
+.RiverBreakout {
+  display: flex;
+  flex-direction: column;
+  gap: var(--brand-RiverBreakout-spacing-inner);
+  padding-block-end: var(--brand-River-spacing-outer);
+  padding-block-start: var(--brand-River-spacing-outer);
+}
+
+.RiverBreakout .River__text {
+  max-width: 37.5rem; /* 600px */
+  color: var(--brand-color-text-default);
+  font-size: var(--brand-text-size-500);
+  font-weight: var(--brand-heading-weight-500);
+  letter-spacing: var(--brand-heading-letterSpacing-500);
+  line-height: var(--brand-text-lineHeight-500);
+}
+
+.RiverBreakout--muted .River__text {
+  color: var(--brand-color-text-subtle);
+}
+
+.RiverBreakout .River__text em,
+.RiverBreakout .River__text b {
+  color: var(--brand-color-text-default);
+  font-style: normal;
+  font-weight: inherit;
+}
+
+.RiverBreakout__hiddenHeading {
+  border: 0;
+  clip: rect(1px, 1px, 1px, 1px);
+  height: 1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+}
+
+.RiverBreakout .River__call-to-action {
+  margin-block-end: var(--base-size-40);
+}
+
+@media screen and (min-width: 48rem) {
+  .RiverBreakout .River__content {
+    display: grid;
+    gap: var(--brand-River-spacing-inner);
+    row-gap: var(--brand-River-spacing-innerY);
+    grid-template-areas:
+      'text trailingComponent'
+      'cta trailingComponent';
+    grid-template-columns: 5fr 3fr;
+    grid-auto-rows: auto 1fr;
+  }
+
+  .RiverBreakout .River__text {
+    grid-area: text;
+  }
+
+  .RiverBreakout .River__call-to-action {
+    grid-area: cta;
+    margin-block: 0;
+  }
+
+  .RiverBreakout .River__trailingComponent {
+    grid-area: trailingComponent;
+    justify-self: end;
+    margin-block-start: 0;
+  }
+}

package/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@primer/brand-css",
+  "version": "0.0.0-20250212132611",
+  "description": "CSS stylesheets for Primer Brand components",
+  "keywords": [
+    "primer",
+    "css",
+    "components",
+    "library",
+    "design-system"
+  ],
+  "type": "module",
+  "homepage": "https://primer.style/brand",
+  "bugs": {
+    "url": "https://github.com/primer/brand/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/primer/brand.git"
+  },
+  "license": "MIT",
+  "author": "GitHub, Inc.",
+  "files": [
+    "components"
+  ],
+  "scripts": {
+    "clean": "rm -rf components",
+    "check": "tsc --noEmit",
+    "build": "npm run clean && tsx scripts/build.ts",
+    "prepublishOnly": "npm run build"
+  },
+  "devDependencies": {
+    "autoprefixer": "10.4.20",
+    "postcss": "8.5.1",
+    "tsx": "^4.19.2",
+    "typescript": "5.7.3"
+  },
+  "engines": {
+    "node": ">=16.0.0",
+    "npm": ">=8.0.0"
+  }
+}