@primer/brand-css 0.0.0-20250212132611

package/components/AnchorNav/AnchorNav.css

@@ -0,0 +1,427 @@
+/*
+ * AnchorNav
+ *
+ * 1. Globals
+ * 2. AnchorNav root and inner bounding containers
+ * 3. AnchorNav links
+ * 4. AnchorNav link labels
+ * 5. AnchorNav menu toggle button (narrow)
+ * 6. AnchorNav action
+ * 7. Custom animations
+ */
+
+/*
+ * 1. Globals
+ * TODO: Move into global reset
+ */
+:global(html) {
+  scroll-behavior: smooth;
+}
+
+@media screen and (prefers-reduced-motion: reduce) {
+  :global(html) {
+    scroll-behavior: auto;
+  }
+}
+
+:global(.AnchorNav--no-bg-scroll) {
+  overflow: hidden;
+  height: 100vh;
+}
+
+/*
+ * 2. AnchorNav root and inner bounding containers
+ */
+.AnchorNav {
+  display: flex;
+  position: sticky;
+  top: 0;
+  left: 0;
+  right: 0;
+  padding: var(--base-size-12) var(--base-size-16);
+  z-index: 91; /* must be higher than subdomain nav bar */
+}
+
+.AnchorNav--hide-until-sticky:not(.AnchorNav--stuck) {
+  opacity: 0;
+  visibility: hidden;
+  transition: visibility var(--brand-animation-duration-default) var(--brand-animation-easing-default),
+    opacity var(--brand-animation-duration-default) var(--brand-animation-easing-default);
+}
+
+.AnchorNav--hide-until-sticky.AnchorNav--stuck {
+  opacity: 1;
+  visibility: visible;
+}
+
+.AnchorNav--with-default-background-color {
+  background-color: var(--brand-color-canvas-default);
+}
+
+.AnchorNav--stuck {
+  box-shadow: 0 3px 6px rgba(140, 149, 159, 0.15), 0 1px 1px rgba(0, 0, 0, 0.1); /* TODO: replace with a global token */
+  position: fixed;
+}
+
+.AnchorNav--expanded {
+  transform-style: preserve-3d;
+  z-index: 91;
+}
+
+.AnchorNav-link-container {
+  display: flex;
+  width: 100%;
+  position: relative;
+}
+
+.AnchorNav-inner-container {
+  max-width: 1280px;
+  width: 100%;
+  position: relative;
+  z-index: 91; /* must be higher than subdomain nav bar */
+  max-height: calc(100vh - var(--base-size-12) * 2);
+}
+
+.AnchorNav--with-default-background-color .AnchorNav-inner-container {
+  background-color: var(--brand-color-canvas-default);
+}
+
+/* Up to large breakpoint */
+@media screen and (max-width: 63.25rem) {
+  .AnchorNav:not(.AnchorNav--expanded) .AnchorNav-inner-container {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  .AnchorNav {
+    background-color: var(--brand-color-canvas-default);
+  }
+
+  .AnchorNav-inner-container--expanded {
+    height: auto;
+  }
+
+  .AnchorNav-link-container {
+    display: none;
+    padding-left: var(--base-size-16);
+  }
+
+  .AnchorNav--expanded .AnchorNav-link-container {
+    display: flex;
+    flex-direction: column;
+  }
+}
+
+@media screen and (min-width: 40rem) and (max-width: 63.25rem) {
+  .AnchorNav__actionsContainer:not(.AnchorNav__actionsContainer--no-offset) {
+    position: absolute;
+    top: var(--base-size-8);
+    right: 0;
+  }
+}
+
+/* Large breakpoint and up */
+@media screen and (min-width: 63.25rem) {
+  .AnchorNav {
+    padding: var(--base-size-12) var(--base-size-40);
+    height: 75px; /* same as subdomain nav bar */
+  }
+
+  .AnchorNav--with-default-background-color {
+    background-color: var(--brand-color-canvas-default);
+  }
+
+  .AnchorNav--stuck {
+    background-color: var(--brand-color-canvas-default);
+  }
+  .AnchorNav-inner-container {
+    margin: 0 auto;
+    display: flex;
+    align-items: center;
+  }
+}
+
+/*
+ * 3. AnchorNav links
+ */
+.AnchorNav-link {
+  display: flex;
+  width: 100%;
+  text-decoration: none;
+  height: 48px;
+  align-items: center;
+  justify-items: flex-start;
+}
+
+.AnchorNav-link:hover {
+  text-decoration: none;
+}
+
+.AnchorNav--expanded .AnchorNav-link {
+  margin: 0 0 2px; /* allow space for focus border */
+  animation: fade-in 1s;
+  animation-timing-function: var(--brand-animation-easing-glide);
+}
+
+/* Up to large breakpoint */
+@media screen and (max-width: 63.25rem) {
+  .AnchorNav-link {
+    position: absolute;
+    left: 0;
+    padding: 0 0 0 var(--base-size-16);
+  }
+
+  .AnchorNav-link::before {
+    content: '';
+    position: absolute;
+    left: 0;
+    width: 2px;
+    height: 50%;
+    background-color: var(--brand-AnchorNav-link-underline-default);
+    transition: opacity var(--brand-animation-duration-fast), transform var(--brand-animation-duration-fast);
+    opacity: 1;
+    transform: scale(0);
+    transform-origin: left;
+  }
+
+  .AnchorNav--expanded .AnchorNav-link--is-active::before {
+    transform: scale(1);
+  }
+}
+
+/* Large breakpoint and up */
+@media screen and (min-width: 63.25rem) {
+  .AnchorNav-link {
+    position: relative;
+    margin: 0 1px; /* to provide space for focus border */
+  }
+
+  .AnchorNav-link--center {
+    justify-content: center;
+  }
+
+  .AnchorNav-link--start {
+    justify-content: flex-start;
+    width: auto;
+    margin-right: var(--base-size-48);
+  }
+}
+
+/*
+ * 4. AnchorNav link labels
+ */
+.AnchorNav-link-label {
+  font-weight: var(--brand-text-weight-400);
+  font-size: var(--brand-text-size-200);
+  line-height: var(--brand-text-lineHeight-200);
+  font-family: var(--brand-heading-fontFamily);
+  letter-spacing: var(--brand-heading-letterSpacing-200);
+  color: var(--brand-color-text-default);
+  transition: color var(--brand-animation-easing-glide) var(--brand-animation-duration-faster);
+  position: relative;
+}
+
+.AnchorNav--with-default-background-color .AnchorNav-link-label {
+  background-color: var(--brand-color-canvas-default);
+}
+
+/* Up to large breakpoint */
+@media screen and (max-width: 63.25rem) {
+  .AnchorNav-link-label {
+    background-color: var(--brand-color-canvas-default);
+  }
+
+  .AnchorNav--expanded .AnchorNav-link-label--is-active {
+    color: var(--brand-color-focus);
+  }
+
+  .AnchorNav-link:not(.AnchorNav-link[data-active='true']) {
+    visibility: hidden;
+  }
+
+  .AnchorNav--stuck .AnchorNav-link[data-active='false'][data-first='true'] {
+    visibility: visible;
+  }
+
+  .AnchorNav .AnchorNav-link[data-active='false'][data-first='true'] {
+    visibility: visible;
+  }
+
+  .AnchorNav-inner-container--expanded .AnchorNav-link {
+    visibility: visible !important;
+    display: flex;
+    position: relative;
+    left: auto;
+    right: auto;
+    top: auto;
+    flex-direction: column;
+    text-align: left;
+    justify-content: center;
+    align-items: flex-start;
+  }
+}
+
+/* Large breakpoint and up */
+@media screen and (min-width: 63.25rem) {
+  .AnchorNav-link-label {
+    white-space: nowrap;
+  }
+
+  .AnchorNav-link-label::after {
+    content: '';
+    position: absolute;
+    bottom: -6px;
+    left: 0;
+    width: 100%;
+    height: 2px;
+    background-color: var(--brand-AnchorNav-link-underline-default);
+    transition: opacity var(--brand-animation-duration-fast), transform var(--brand-animation-duration-fast),
+      background-color var(--brand-animation-duration-fast);
+    opacity: 1;
+    transform: scale(0);
+    transform-origin: center;
+  }
+
+  .AnchorNav-link:hover .AnchorNav-link-label::after,
+  .AnchorNav-link:focus .AnchorNav-link-label::after,
+  .AnchorNav-link[data-active='true'] .AnchorNav-link-label::after {
+    opacity: 1;
+    transform: translate3d(0, 0.2em, 0);
+    transform: scale(0.8, 1);
+  }
+
+  .AnchorNav-link:active .AnchorNav-link-label::after {
+    background-color: var(--brand-AnchorNav-link-underline-pressed);
+    transform: scale(0.9, 1);
+  }
+
+  .AnchorNav-link[data-active='true'] .AnchorNav-link-label::after {
+    background-color: var(--brand-AnchorNav-link-underline-pressed);
+    opacity: 1;
+  }
+
+  .AnchorNav-link:focus-visible .AnchorNav-link-label::after {
+    opacity: 0;
+  }
+}
+
+/*
+ * 5. AnchorNav menu toggle button (narrow)
+ */
+.AnchorNav-menu-button {
+  display: none;
+}
+
+/* Up to large breakpoint */
+@media screen and (max-width: 63.25rem) {
+  .AnchorNav-menu-button {
+    all: unset;
+    display: inline-flex;
+    cursor: pointer;
+    padding: var(--base-size-8) var(--base-size-16);
+    padding-left: 0; /* space for focus */
+    align-items: center;
+    height: var(--base-size-32);
+    z-index: 2;
+    border-radius: var(--brand-borderRadius-small);
+  }
+
+  .AnchorNav-menu-button-arrow {
+    padding: 0 calc(var(--base-size-12) / 2);
+    width: 32px;
+    height: 32px;
+    color: var(--brand-color-text-default);
+  }
+
+  .AnchorNav-menu-button:focus-visible {
+    border-color: var(--brand-color-focus);
+    outline: none;
+    box-shadow: 0 0 0 2px var(--brand-color-focus);
+  }
+
+  .AnchorNav-overlay--expanded {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    z-index: -3;
+    width: 100%;
+    height: 100vh; /* Keep as fallback */
+    height: 100dvh;
+    /* replace with overlay-backdrop-bgColor */
+    background: #00000080;
+    transform: translateZ(-1px);
+    animation: fade-in 0.5s;
+    animation-timing-function: var(--brand-animation-easing-glide);
+    cursor: pointer;
+  }
+}
+
+/*
+ * 6. AnchorNav action
+ */
+
+.AnchorNav__actionsContainer {
+  display: flex;
+  gap: var(--base-size-8);
+}
+
+.AnchorNav-action {
+  z-index: 1;
+  display: flex;
+  margin-left: auto;
+  white-space: nowrap;
+  padding-inline: var(--base-size-24);
+}
+
+.AnchorNav--expanded .AnchorNav-action {
+  align-self: flex-start;
+}
+
+@media screen and (max-width: 40rem) {
+  .AnchorNav {
+    padding: 0;
+  }
+
+  .AnchorNav-action {
+    display: none;
+  }
+
+  .AnchorNav__actionsContainer {
+    flex-direction: column;
+  }
+
+  .AnchorNav--expanded .AnchorNav-action {
+    display: flex;
+    width: 100%;
+    margin-top: var(--base-size-8);
+  }
+
+  .AnchorNav-inner-container {
+    overflow-y: auto;
+    padding: var(--base-size-12) var(--base-size-16);
+  }
+}
+
+@media screen and (min-width: 40rem) {
+  .AnchorNav__actionsContainer {
+    gap: var(--base-size-16);
+  }
+
+  .AnchorNav__actionsContainer--multiple {
+    margin-inline-start: var(--base-size-16);
+  }
+}
+
+/*
+ * 7. Custom animations
+ */
+@keyframes fade-in {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}

package/components/Avatar/Avatar.css

@@ -0,0 +1,115 @@
+.Avatar {
+  display: inline-block;
+  overflow: hidden;
+  width: var(--base-size-40);
+  height: var(--base-size-40);
+}
+
+.Avatar--shape-circle {
+  border-radius: var(--brand-borderRadius-full);
+}
+
+.Avatar--shape-square {
+  border-radius: var(--brand-borderRadius-medium);
+}
+
+.Avatar__image {
+  width: 100%;
+  height: 100%;
+  -o-object-fit: cover;
+     object-fit: cover;
+}
+
+.Avatar--size-32 {
+  width: var(--base-size-32);
+  height: var(--base-size-32);
+}
+
+.Avatar--size-40 {
+  width: var(--base-size-40);
+  height: var(--base-size-40);
+}
+
+.Avatar--size-48 {
+  width: var(--base-size-48);
+  height: var(--base-size-48);
+}
+
+.Avatar--size-64 {
+  width: var(--base-size-64);
+  height: var(--base-size-64);
+}
+
+.Avatar--size-80 {
+  width: var(--base-size-80);
+  height: var(--base-size-80);
+}
+
+.Avatar-narrow--size-32 {
+  width: var(--base-size-32);
+  height: var(--base-size-32);
+}
+
+.Avatar-narrow--size-40 {
+  width: var(--base-size-40);
+  height: var(--base-size-40);
+}
+
+.Avatar-narrow--size-48 {
+  width: var(--base-size-48);
+  height: var(--base-size-48);
+}
+
+@media screen and (min-width: 48rem) {
+  .Avatar-regular--size-32 {
+    width: var(--base-size-32);
+    height: var(--base-size-32);
+  }
+
+  .Avatar-regular--size-40 {
+    width: var(--base-size-40);
+    height: var(--base-size-40);
+  }
+
+  .Avatar-regular--size-48 {
+    width: var(--base-size-48);
+    height: var(--base-size-48);
+  }
+
+  .Avatar-regular--size-64 {
+    width: var(--base-size-64);
+    height: var(--base-size-64);
+  }
+
+  .Avatar-regular--size-80 {
+    width: var(--base-size-80);
+    height: var(--base-size-80);
+  }
+}
+
+@media screen and (min-width: 80rem) {
+  .Avatar-wide--size-32 {
+    width: var(--base-size-32);
+    height: var(--base-size-32);
+  }
+
+  .Avatar-wide--size-40 {
+    width: var(--base-size-40);
+    height: var(--base-size-40);
+  }
+
+  .Avatar-wide--size-48 {
+    width: var(--base-size-48);
+    height: var(--base-size-48);
+  }
+
+  .Avatar-wide--size-64 {
+    width: var(--base-size-64);
+    height: var(--base-size-64);
+  }
+
+  .Avatar-wide--size-80 {
+    width: var(--base-size-80);
+    height: var(--base-size-80);
+  }
+}