@primer/brand-css 0.0.0-20250212132611

package/components/Label/Label.css

@@ -0,0 +1,167 @@
+.Label {
+  --brand-Label-gradient: radial-gradient(
+    circle at top left,
+    var(--brand-Label-color-start),
+    var(--brand-Label-color-end)
+  );
+  --brand-Label-background: var(--brand-Label-gradient, var(--brand-Label-color, currentColor));
+
+  vertical-align: middle;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--brand-borderRadius-xlarge);
+  display: inline-flex;
+  color: var(--brand-Label-color-start, var(--brand-Label-color, currentColor));
+  position: relative;
+  height: -moz-min-content;
+  height: min-content;
+  padding-inline: var(--base-size-16);
+  padding-block: var(--base-size-4);
+  background: none;
+  text-align: center;
+}
+
+[data-color-mode='dark'] .Label {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: auto;
+}
+
+.Label::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  padding: var(--brand-borderWidth-thin);
+  border-radius: inherit;
+  background: var(--brand-Label-background);
+  -webkit-mask: linear-gradient(var(--brand-color-canvas-default), var(--brand-color-canvas-default)) content-box,
+    linear-gradient(var(--brand-color-canvas-default), var(--brand-color-canvas-default));
+  mask: linear-gradient(var(--brand-color-canvas-default), var(--brand-color-canvas-default)) content-box,
+    linear-gradient(var(--brand-color-canvas-default), var(--brand-color-canvas-default));
+  -webkit-mask-composite: xor;
+  mask-composite: exclude;
+}
+
+.Label--size-medium {
+  min-height: var(--base-size-28);
+}
+
+.Label--size-large {
+  min-height: var(--base-size-32);
+}
+
+.Label--color-default {
+  --brand-Label-color: var(--brand-Label-color-default);
+}
+
+.Label--color-blue {
+  --brand-Label-color: var(--brand-Label-color-blue);
+}
+
+.Label--color-blue-purple {
+  --brand-Label-color-start: var(--brand-Label-color-blue-purple-start);
+  --brand-Label-color-end: var(--brand-Label-color-blue-purple-end);
+}
+
+.Label--color-coral {
+  --brand-Label-color: var(--brand-Label-color-coral);
+}
+
+.Label--color-green {
+  --brand-Label-color: var(--brand-Label-color-green);
+}
+
+.Label--color-green-blue {
+  --brand-Label-color-start: var(--brand-Label-color-green-blue-start);
+  --brand-Label-color-end: var(--brand-Label-color-green-blue-end);
+}
+
+.Label--color-gray {
+  --brand-Label-color: var(--brand-Label-color-gray);
+}
+
+.Label--color-indigo {
+  --brand-Label-color: var(--brand-Label-color-indigo);
+}
+
+.Label--color-lemon {
+  --brand-Label-color: var(--brand-Label-color-lemon);
+}
+
+.Label--color-lime {
+  --brand-Label-color: var(--brand-Label-color-lime);
+}
+
+.Label--color-orange {
+  --brand-Label-color: var(--brand-Label-color-orange);
+}
+
+.Label--color-pink {
+  --brand-Label-color: var(--brand-Label-color-pink);
+}
+
+.Label--color-pink-blue {
+  --brand-Label-color-start: var(--brand-Label-color-pink-blue-start);
+  --brand-Label-color-end: var(--brand-Label-color-pink-blue-end);
+}
+
+.Label--color-purple {
+  --brand-Label-color: var(--brand-Label-color-purple);
+}
+
+.Label--color-purple-red {
+  --brand-Label-color-start: var(--brand-Label-color-purple-red-start);
+  --brand-Label-color-end: var(--brand-Label-color-purple-red-end);
+}
+
+.Label--color-red {
+  --brand-Label-color: var(--brand-Label-color-red);
+}
+
+.Label--color-red-orange {
+  --brand-Label-color-start: var(--brand-Label-color-red-orange-start);
+  --brand-Label-color-end: var(--brand-Label-color-red-orange-end);
+}
+
+.Label--color-teal {
+  --brand-Label-color: var(--brand-Label-color-teal);
+}
+
+.Label--color-yellow {
+  --brand-Label-color: var(--brand-Label-color-yellow);
+}
+
+.Label__text:not(.Label--gradient .Label__text) {
+  background: var(--brand-Label-background);
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+  -webkit-box-decoration-break: clone;
+  box-decoration-break: clone;
+}
+
+.Label__text {
+  line-height: var(--base-size-16);
+}
+
+.Label__icon-visual {
+  display: flex;
+  align-self: center;
+  height: var(--base-size-16);
+  width: auto;
+}
+
+.Label__leading-visual {
+  display: flex;
+  margin-right: var(--base-size-8);
+}
+
+.Label__label {
+  font-weight: var(--base-text-weight-semibold);
+  line-height: inherit;
+}
+
+@media (forced-colors: active) {
+  .Label {
+    outline: var(--brand-borderWidth-thin) solid transparent;
+  }
+}

package/components/Link/Link.css

@@ -0,0 +1,84 @@
+.Link {
+  --arrow-width: var(--base-size-20);
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.Link:hover {
+  text-decoration: none;
+}
+
+.Link::after {
+  position: absolute;
+  bottom: -0.15em;
+  left: 0;
+  width: calc(100% - var(--arrow-width));
+  pointer-events: none;
+  content: '';
+  border: var(--brand-borderWidth-thin) solid currentColor;
+  transform: scaleX(0);
+  transform-origin: 0 0;
+}
+
+@media screen and (prefers-reduced-motion: no-preference) {
+  .Link::after {
+    transition: transform var(--brand-animation-duration-fast) ease;
+  }
+}
+
+.Link:active:after,
+.Link:hover:after {
+  transform: scaleX(1);
+}
+
+.Link:focus:focus-visible {
+  outline: var(--brand-borderWidth-thick) solid var(--brand-color-focus);
+  outline-offset: var(--base-size-2);
+}
+
+.Link--default,
+.Link--default span {
+  color: var(--brand-Link-color-default);
+}
+
+.Link--accent,
+.Link--accent span {
+  color: var(--brand-Link-color-accent);
+}
+
+.Link--label {
+  font-weight: var(--base-text-weight-semibold);
+}
+
+.Link-arrow {
+  margin-left: 4px;
+}
+
+.Link--large .Link--label {
+  font-size: var(--base-size-20);
+}
+
+.Link--large .Link-arrow {
+  width: var(--arrow-width);
+  height: var(--base-size-20);
+}
+
+.Link--arrow-start::after {
+  left: auto;
+  right: 0;
+  transform-origin: right 0;
+  width: calc(100% - var(--base-size-20));
+}
+
+.Link--arrow-start .Link-arrow {
+  margin-left: auto;
+  margin-right: 4px;
+}
+
+.Link.Link--arrow-none::after {
+  width: 100%;
+}

package/components/LogoSuite/LogoSuite.css

@@ -0,0 +1,165 @@
+.LogoSuite {
+  padding-block-end: var(--brand-LogoSuite-logobar-rowGap);
+}
+
+.LogoSuite + .LogoSuite {
+  padding-block-start: var(--brand-LogoSuite-logobar-rowGap);
+}
+
+.LogoSuite__heading + .LogoSuite__description {
+  padding-block-start: var(--base-size-16);
+}
+
+.LogoSuite--start {
+  text-align: left;
+}
+
+.LogoSuite--center,
+.LogoSuite--justify {
+  text-align: center;
+}
+
+.LogoSuite:not(.LogoSuite + .LogoSuite) .LogoSuite__logobar {
+  padding-block-start: var(--base-size-32);
+}
+
+.LogoSuite__logobar {
+  display: flex;
+  flex-wrap: wrap;
+  row-gap: var(--brand-LogoSuite-logobar-rowGap);
+  -moz-column-gap: var(--brand-LogoSuite-logobar-columnGap);
+       column-gap: var(--brand-LogoSuite-logobar-columnGap);
+  justify-content: center;
+}
+
+.LogoSuite:not(.LogoSuite + .LogoSuite)
+  .LogoSuite__heading:not(.LogoSuite__heading--visually-hidden)
+  + .LogoSuite__logobar,
+.LogoSuite:not(.LogoSuite + .LogoSuite) .LogoSuite__description + .LogoSuite__logobar {
+  padding-block-start: 0;
+  margin-block-start: var(--base-size-80);
+}
+
+.LogoSuite__logobar--variant-muted svg,
+.LogoSuite__logobar--variant-muted img,
+.LogoSuite__logobar--variant-muted a,
+.LogoSuite__logobar--variant-emphasis svg,
+.LogoSuite__logobar--variant-emphasis img,
+.LogoSuite__logobar--variant-emphasis a {
+  width: auto;
+  height: var(--base-size-32);
+}
+
+@media screen and (min-width: 48rem) {
+  .LogoSuite__logobar--variant-muted svg,
+  .LogoSuite__logobar--variant-muted img,
+  .LogoSuite__logobar--variant-muted a {
+    height: var(--base-size-40);
+  }
+
+  .LogoSuite__logobar--variant-emphasis svg,
+  .LogoSuite__logobar--variant-emphasis img,
+  .LogoSuite__logobar--variant-emphasis a {
+    height: var(--base-size-48);
+  }
+}
+
+.LogoSuite__logobar--variant-muted svg,
+.LogoSuite__logobar--variant-muted path {
+  fill: var(--brand-LogoSuite-color-logo-muted);
+}
+
+.LogoSuite__logobar--variant-muted img {
+  filter: var(--brand-LogoSuite-color-logo-filter-muted);
+}
+
+.LogoSuite__logobar--variant-emphasis svg,
+.LogoSuite__logobar--variant-emphasis path {
+  fill: var(--brand-LogoSuite-color-logo-emphasis);
+}
+
+.LogoSuite__logobar--variant-emphasis img {
+  filter: var(--brand-LogoSuite-color-logo-filter-emphasis);
+}
+
+.LogoSuite--start .LogoSuite__logobar {
+  justify-content: center;
+}
+
+@media screen and (min-width: 48rem) {
+  .LogoSuite--justify .LogoSuite__logobar {
+    justify-content: space-between;
+  }
+}
+
+.LogoSuite--start .LogoSuite__logobar a:focus-visible {
+  outline-color: var(--brand-color-focus);
+}
+
+.LogoSuite--hasDivider {
+  border-bottom: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);
+}
+
+.LogoSuite__logobar--has-marquee {
+  display: flex;
+  flex-direction: column;
+  gap: var(--base-size-40);
+  margin: auto;
+  max-width: 100dvw;
+}
+
+.LogoSuite__logobar-marqueeGroup {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+  gap: var(--brand-LogoSuite-logobar-marquee-gap);
+  min-width: 100%;
+  animation-name: LogobarScrollX;
+  animation-duration: var(--brand-LogoSuite-logobar-marquee-default);
+  animation-timing-function: linear;
+  animation-iteration-count: infinite;
+  animation-direction: normal;
+  animation-fill-mode: none;
+  animation-play-state: running;
+}
+
+.LogoSuite__logobar-marqueeGroup--speed-default {
+  animation-duration: var(--brand-LogoSuite-logobar-marquee-default);
+}
+
+.LogoSuite__logobar-marqueeGroup--speed-slow {
+  animation-duration: var(--brand-LogoSuite-logobar-marquee-slow);
+}
+
+@keyframes LogobarScrollX {
+  from {
+    transform: translateX(0);
+  }
+  to {
+    transform: translateX(calc(-100% - var(--brand-LogoSuite-logobar-marquee-gap)));
+  }
+}
+
+.LogoSuite__logobar--has-marquee:hover .LogoSuite__logobar-marqueeGroup,
+.LogoSuite__logobar-marqueeGroup--speed-idle {
+  animation-play-state: paused;
+}
+
+.LogoSuite__logobar-marquee {
+  display: flex;
+  overflow: hidden;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+  gap: var(--brand-LogoSuite-logobar-marquee-gap);
+  width: 100%;
+  -webkit-mask-image: linear-gradient(
+    to right,
+    hsl(0 0% 0% / 0),
+    hsl(0 0% 0% / 1) 20%,
+    hsl(0 0% 0% / 1) 80%,
+    hsl(0 0% 0% / 0)
+  );
+  mask-image: linear-gradient(to right, hsl(0 0% 0% / 0), hsl(0 0% 0% / 1) 20%, hsl(0 0% 0% / 1) 80%, hsl(0 0% 0% / 0));
+}

package/components/MinimalFooter/MinimalFooter.css

@@ -0,0 +1,116 @@
+.Footer {
+  position: relative;
+  background-color: var(--brand-footer-bg-color);
+}
+
+/**
+ * Footer shared styles
+ */
+.Footer__container {
+  max-width: var(--brand-footer-max-width, 1280px);
+  padding: 0 28px; /* should match SubdomainNavBar */
+  margin-right: auto;
+  margin-left: auto;
+}
+
+/**
+ * Footer terms section
+ */
+.Footer__terms {
+  padding: var(--base-size-48) 0;
+}
+
+.Footer__terms-item {
+  margin-bottom: var(--base-size-24);
+}
+
+.Footer__terms-item sup {
+  font-size: var(--base-size-12);
+  vertical-align: super;
+  display: inline-block;
+  margin-right: var(--base-size-4);
+}
+
+.Footer__terms-item:last-child {
+  margin-bottom: 0;
+}
+
+/**
+ * Footer social and logomarks section
+ */
+.Footer__social-links {
+  display: flex;
+  padding: 0;
+  margin: 0;
+  list-style: none;
+  justify-content: flex-start;
+  align-items: center;
+  gap: var(--base-size-16);
+}
+
+.Footer__logomarks {
+  border-top: var(--brand-borderWidth-thin) solid var(--brand-color-border-default);
+  border-bottom: var(--brand-borderWidth-thin) solid var(--brand-color-border-default);
+}
+
+.Footer__logomarks,
+.Footer__legal-and-links {
+  padding-top: var(--base-size-48);
+  padding-bottom: var(--base-size-48);
+}
+
+.Footer__social-link:hover .Footer__social-icon,
+.Footer__social-link:focus-visible .Footer__social-icon {
+  filter: var(--brand-footer-socialIcon-hoverFilter);
+}
+
+.Footer__social-icon {
+  width: 24px;
+  height: auto;
+}
+
+/**
+ * Footer legal section
+ */
+
+.Footer__copyright {
+  display: flex;
+  order: 2;
+  padding-bottom: var(--base-size-4);
+}
+
+@media screen and (min-width: 48rem) {
+  .Footer__copyright {
+    order: 1;
+  }
+}
+
+.Footer__links {
+  order: 1;
+}
+
+@media screen and (min-width: 48rem) {
+  .Footer__links {
+    order: 2;
+  }
+}
+
+.Footer__link {
+  align-self: flex-start;
+  color: var(--brand-color-text-muted);
+  text-decoration: none;
+  border-top: none;
+  border-right: none;
+  border-left: none;
+  border-bottom: var(--brand-borderWidth-thin) solid transparent;
+  background-color: inherit;
+  cursor: pointer;
+  padding: 0 0 var(--base-size-4) 0;
+  transition: border var(--brand-animation-duration-fast) var(--brand-animation-easing-glide);
+}
+
+.Footer__link:hover {
+  color: var(--brand-color-text-default);
+  border-bottom-color: var(--brand-color-text-muted);
+  text-decoration: none;
+}

package/components/MonaSans/MonaSans.css

@@ -0,0 +1,4 @@
+.MonaSans {
+  font-family: 'Mona Sans';
+  font-synthesis: none;
+}

package/components/Pagination/Pagination.css

@@ -0,0 +1,117 @@
+.Pagination {
+  margin-top: var(--base-size-20);
+  margin-bottom: var(--base-size-16);
+  text-align: center;
+}
+
+.Pagination__inner {
+  display: inline-flex;
+  align-items: center;
+}
+
+.Pagination__item {
+  min-width: var(--base-size-36);
+  text-align: center;
+  white-space: nowrap;
+  vertical-align: middle;
+  cursor: pointer;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+  text-decoration: none;
+  padding: var(--base-size-4) var(--base-size-8);
+  margin-right: var(--base-size-8);
+  border: var(--brand-borderWidth-thick) solid transparent;
+  border-radius: var(--brand-borderRadius-medium);
+  transition: border-color var(--brand-animation-duration-fast) var(--brand-animation-easing-default);
+}
+
+.Pagination__item--hidden,
+.Pagination__item--hidden-narrow,
+.Pagination__item--hidden-regular,
+.Pagination__item--hidden-wide {
+  display: none;
+}
+
+.Pagination__item--visible,
+.Pagination__item--visible-narrow {
+  display: block;
+}
+
+@media screen and (min-width: 48rem) {
+  .Pagination__item--hidden-regular {
+    display: none;
+  }
+
+  .Pagination__item--visible-regular {
+    display: block;
+  }
+}
+
+@media screen and (min-width: 80rem) {
+  .Pagination__item--hidden-wide {
+    display: none;
+  }
+
+  .Pagination__item--visible-wide {
+    display: block;
+  }
+}
+
+.Pagination__item:last-child {
+  margin-right: 0;
+}
+
+.Pagination__item:hover,
+.Pagination__item:focus {
+  text-decoration: none;
+  outline: 0;
+  transition-duration: 0.1s;
+  border-color: var(--brand-pagination-borderColor-hover);
+}
+
+.Pagination__item::after {
+  display: none;
+}
+
+.Pagination__item:active {
+  border-color: var(--brand-pagination-link-bgColor-active);
+}
+
+.Pagination__item[aria-current],
+.Pagination__item[aria-current]:hover {
+  background-color: var(--brand-pagination-link-bgColor-active);
+  border-color: transparent;
+}
+
+.Pagination__item[aria-current] * {
+  color: var(--brand-color-text-onEmphasis);
+}
+
+.Pagination__item[aria-disabled],
+.Pagination__item[aria-disabled]:hover,
+.Pagination__item[role='presentation'],
+.Pagination__item[role='presentation']:hover {
+  color: var(--brand-color-text-muted);
+  cursor: default;
+  background-color: transparent;
+  border-color: transparent;
+  font-size: inherit;
+  font-family: inherit;
+  padding-top: inherit;
+  padding-bottom: inherit;
+}
+
+.Pagination__item[aria-disabled] *,
+.Pagination__item[aria-disabled]:hover *,
+.Pagination__item[role='presentation'] *,
+.Pagination__item[role='presentation']:hover * {
+  color: inherit;
+}
+
+.Pagination__item[rel='prev'] {
+  margin-inline-end: var(--base-size-16);
+}
+.Pagination__item[rel='next'] {
+  margin-inline-start: var(--base-size-16);
+}