@primer/brand-css 0.0.0-20250212132611

package/components/EyebrowBanner/EyebrowBanner.css

@@ -0,0 +1,320 @@
+.EyebrowBanner {
+  display: inline-block;
+  align-self: flex-start;
+  text-decoration: none;
+  background: var(--brand-Eyebrowbanner-bgColor-rest);
+  border: var(--brand-borderWidth-thin) solid var(--brand-Eyebrowbanner-borderColor-rest);
+  padding: var(--brand-EyebrowBanner-spacing-inner-block) var(--brand-EyebrowBanner-spacing-inner-inline);
+  border-radius: var(--brand-EyebrowBanner-borderRadius);
+}
+
+.EyebrowBanner:hover {
+  text-decoration: none !important; /* Required to override dotcom default */
+}
+
+.EyebrowBanner:focus-visible {
+  transition: none;
+  outline: var(--base-size-4) solid var(--brand-color-focus);
+  outline-offset: 2px;
+}
+
+.EyebrowBanner__inner {
+  display: flex;
+  align-items: center;
+}
+
+.EyebrowBanner__headings {
+  margin-inline-start: var(--brand-EyebrowBanner-spacing-inner-inline);
+  text-align: start;
+}
+
+.EyebrowBanner__leadingVisual {
+  display: flex;
+}
+
+.EyebrowBanner__leadingVisual img,
+.EyebrowBanner__leadingVisual picture,
+.EyebrowBanner__leadingVisual svg {
+  height: var(--base-size-44);
+  width: auto;
+  max-width: var(--base-size-44);
+  max-height: var(--base-size-44);
+}
+
+.EyebrowBanner__trailingVisual {
+  display: flex;
+}
+
+.EyebrowBanner__trailingVisual-icon {
+  margin-inline-start: var(--base-size-20);
+  color: var(--brand-color-text-default);
+}
+
+.EyebrowBanner__trailingVisual-icon {
+  fill: var(--brand-color-text-default);
+}
+
+.EyebrowBanner__leadingLabel {
+  display: flex;
+  font-family: var(--brand-body-fontFamily);
+  font-weight: var(--base-text-weight-bold);
+  font-size: var(--brand-EyebrowBanner-label-size);
+  line-height: 1em; /* for optical alignment */
+  letter-spacing: var(--brand-text-letterSpacing-200);
+  background: linear-gradient(
+    92deg,
+    var(--brand-EyebrowBanner-leadingLabel-color-start, var(--brand-Eyebrowbanner-fgColor-default-start)) 12.09%,
+    var(--brand-EyebrowBanner-leadingLabel-color-middle, var(--brand-Eyebrowbanner-fgColor-default-middle)) 42.58%,
+    var(--brand-EyebrowBanner-leadingLabel-color-end, var(--brand-Eyebrowbanner-fgColor-default-end)) 84.96%
+  );
+  text-transform: uppercase;
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+.EyebrowBanner__leadingLabel--color-blue {
+  --brand-EyebrowBanner-leadingLabel-color-start: var(--brand-Eyebrowbanner-fgColor-blue);
+  --brand-EyebrowBanner-leadingLabel-color-middle: var(--brand-Eyebrowbanner-fgColor-blue);
+  --brand-EyebrowBanner-leadingLabel-color-end: var(--brand-Eyebrowbanner-fgColor-blue);
+}
+
+.EyebrowBanner__leadingLabel--color-blue-purple {
+  --brand-EyebrowBanner-leadingLabel-color-start: var(--brand-Eyebrowbanner-fgColor-blue-purple-start);
+  --brand-EyebrowBanner-leadingLabel-color-middle: var(--brand-Eyebrowbanner-fgColor-blue-purple-end);
+  --brand-EyebrowBanner-leadingLabel-color-end: var(--brand-Eyebrowbanner-fgColor-blue-purple-end);
+}
+
+.EyebrowBanner__leadingLabel--color-coral {
+  --brand-EyebrowBanner-leadingLabel-color-start: var(--brand-Eyebrowbanner-fgColor-coral);
+  --brand-EyebrowBanner-leadingLabel-color-middle: var(--brand-Eyebrowbanner-fgColor-coral);
+  --brand-EyebrowBanner-leadingLabel-color-end: var(--brand-Eyebrowbanner-fgColor-coral);
+}
+
+.EyebrowBanner__leadingLabel--color-green {
+  --brand-EyebrowBanner-leadingLabel-color-start: var(--brand-Eyebrowbanner-fgColor-green);
+  --brand-EyebrowBanner-leadingLabel-color-middle: var(--brand-Eyebrowbanner-fgColor-green);
+  --brand-EyebrowBanner-leadingLabel-color-end: var(--brand-Eyebrowbanner-fgColor-green);
+}
+
+.EyebrowBanner__leadingLabel--color-green-blue {
+  --brand-EyebrowBanner-leadingLabel-color-start: var(--brand-Eyebrowbanner-fgColor-green-blue-start);
+  --brand-EyebrowBanner-leadingLabel-color-middle: var(--brand-Eyebrowbanner-fgColor-green-blue-start);
+  --brand-EyebrowBanner-leadingLabel-color-end: var(--brand-Eyebrowbanner-fgColor-green-blue-end);
+}
+
+.EyebrowBanner__leadingLabel--color-gray {
+  --brand-EyebrowBanner-leadingLabel-color-start: var(--brand-Eyebrowbanner-fgColor-gray);
+  --brand-EyebrowBanner-leadingLabel-color-middle: var(--brand-Eyebrowbanner-fgColor-gray);
+  --brand-EyebrowBanner-leadingLabel-color-end: var(--brand-Eyebrowbanner-fgColor-gray);
+}
+
+.EyebrowBanner__leadingLabel--color-indigo {
+  --brand-EyebrowBanner-leadingLabel-color-start: var(--brand-Eyebrowbanner-fgColor-indigo);
+  --brand-EyebrowBanner-leadingLabel-color-middle: var(--brand-Eyebrowbanner-fgColor-indigo);
+  --brand-EyebrowBanner-leadingLabel-color-end: var(--brand-Eyebrowbanner-fgColor-indigo);
+}
+
+.EyebrowBanner__leadingLabel--color-lemon {
+  --brand-EyebrowBanner-leadingLabel-color-start: var(--brand-Eyebrowbanner-fgColor-lemon);
+  --brand-EyebrowBanner-leadingLabel-color-middle: var(--brand-Eyebrowbanner-fgColor-lemon);
+  --brand-EyebrowBanner-leadingLabel-color-end: var(--brand-Eyebrowbanner-fgColor-lemon);
+}
+
+.EyebrowBanner__leadingLabel--color-lime {
+  --brand-EyebrowBanner-leadingLabel-color-start: var(--brand-Eyebrowbanner-fgColor-lime);
+  --brand-EyebrowBanner-leadingLabel-color-middle: var(--brand-Eyebrowbanner-fgColor-lime);
+  --brand-EyebrowBanner-leadingLabel-color-end: var(--brand-Eyebrowbanner-fgColor-lime);
+}
+
+.EyebrowBanner__leadingLabel--color-orange {
+  --brand-EyebrowBanner-leadingLabel-color-start: var(--brand-Eyebrowbanner-fgColor-orange);
+  --brand-EyebrowBanner-leadingLabel-color-middle: var(--brand-Eyebrowbanner-fgColor-orange);
+  --brand-EyebrowBanner-leadingLabel-color-end: var(--brand-Eyebrowbanner-fgColor-orange);
+}
+
+.EyebrowBanner__leadingLabel--color-pink {
+  --brand-EyebrowBanner-leadingLabel-color-start: var(--brand-Eyebrowbanner-fgColor-pink);
+  --brand-EyebrowBanner-leadingLabel-color-middle: var(--brand-Eyebrowbanner-fgColor-pink);
+  --brand-EyebrowBanner-leadingLabel-color-end: var(--brand-Eyebrowbanner-fgColor-pink);
+}
+
+.EyebrowBanner__leadingLabel--color-pink-blue {
+  --brand-EyebrowBanner-leadingLabel-color-start: var(--brand-Eyebrowbanner-fgColor-pink-blue-start);
+  --brand-EyebrowBanner-leadingLabel-color-middle: var(--brand-Eyebrowbanner-fgColor-pink-blue-start);
+  --brand-EyebrowBanner-leadingLabel-color-end: var(--brand-Eyebrowbanner-fgColor-pink-blue-end);
+}
+
+.EyebrowBanner__leadingLabel--color-purple {
+  --brand-EyebrowBanner-leadingLabel-color-start: var(--brand-Eyebrowbanner-fgColor-purple);
+  --brand-EyebrowBanner-leadingLabel-color-middle: var(--brand-Eyebrowbanner-fgColor-purple);
+  --brand-EyebrowBanner-leadingLabel-color-end: var(--brand-Eyebrowbanner-fgColor-purple);
+}
+
+.EyebrowBanner__leadingLabel--color-purple-red {
+  --brand-EyebrowBanner-leadingLabel-color-start: var(--brand-Eyebrowbanner-fgColor-purple-red-start);
+  --brand-EyebrowBanner-leadingLabel-color-middle: var(--brand-Eyebrowbanner-fgColor-purple-red-start);
+  --brand-EyebrowBanner-leadingLabel-color-end: var(--brand-Eyebrowbanner-fgColor-purple-red-end);
+}
+
+.EyebrowBanner__leadingLabel--color-red {
+  --brand-EyebrowBanner-leadingLabel-color-start: var(--brand-Eyebrowbanner-fgColor-red);
+  --brand-EyebrowBanner-leadingLabel-color-middle: var(--brand-Eyebrowbanner-fgColor-red);
+  --brand-EyebrowBanner-leadingLabel-color-end: var(--brand-Eyebrowbanner-fgColor-red);
+}
+
+.EyebrowBanner__leadingLabel--color-red-orange {
+  --brand-EyebrowBanner-leadingLabel-color-start: var(--brand-Eyebrowbanner-fgColor-red-orange-start);
+  --brand-EyebrowBanner-leadingLabel-color-middle: var(--brand-Eyebrowbanner-fgColor-red-orange-start);
+  --brand-EyebrowBanner-leadingLabel-color-end: var(--brand-Eyebrowbanner-fgColor-red-orange-end);
+}
+
+.EyebrowBanner__leadingLabel--color-teal {
+  --brand-EyebrowBanner-leadingLabel-color-start: var(--brand-Eyebrowbanner-fgColor-teal);
+  --brand-EyebrowBanner-leadingLabel-color-middle: var(--brand-Eyebrowbanner-fgColor-teal);
+  --brand-EyebrowBanner-leadingLabel-color-end: var(--brand-Eyebrowbanner-fgColor-teal);
+}
+
+.EyebrowBanner__leadingLabel--color-yellow {
+  --brand-EyebrowBanner-leadingLabel-color-start: var(--brand-Eyebrowbanner-fgColor-yellow);
+  --brand-EyebrowBanner-leadingLabel-color-middle: var(--brand-Eyebrowbanner-fgColor-yellow);
+  --brand-EyebrowBanner-leadingLabel-color-end: var(--brand-Eyebrowbanner-fgColor-yellow);
+}
+
+.EyebrowBanner__heading {
+  display: block;
+  color: var(--brand-Eyebrowbanner-heading-fgColor);
+  font-size: var(--brand-EyebrowBanner-heading-size);
+}
+
+.EyebrowBanner__subHeading {
+  display: block;
+  color: var(--brand-Eyebrowbanner-subHeading-fgColor);
+  font-size: var(--brand-EyebrowBanner-subHeading-size);
+}
+
+.EyebrowBanner__icon--badge {
+  width: var(--base-size-44);
+  height: var(--base-size-44);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.EyebrowBanner__icon svg {
+  width: var(--base-size-20);
+  height: var(--base-size-20);
+}
+
+.EyebrowBanner__icon--color-default {
+  color: var(--brand-color-text-default);
+}
+
+.EyebrowBanner__icon--color-default.EyebrowBanner__icon--badge {
+  background-color: var(--brand-Eyebrowbanner-icon-background-default);
+}
+
+.EyebrowBanner__icon--color-blue {
+  color: var(--brand-Eyebrowbanner-fgColor-blue);
+}
+
+.EyebrowBanner__icon--color-blue.EyebrowBanner__icon--badge {
+  background-color: var(--brand-Eyebrowbanner-icon-background-blue);
+}
+
+.EyebrowBanner__icon--color-coral {
+  color: var(--brand-Eyebrowbanner-fgColor-coral);
+}
+
+.EyebrowBanner__icon--color-coral.EyebrowBanner__icon--badge {
+  background-color: var(--brand-Eyebrowbanner-icon-background-coral);
+}
+
+.EyebrowBanner__icon--color-green {
+  color: var(--brand-Eyebrowbanner-fgColor-green);
+}
+
+.EyebrowBanner__icon--color-green.EyebrowBanner__icon--badge {
+  background-color: var(--brand-Eyebrowbanner-icon-background-green);
+}
+
+.EyebrowBanner__icon--color-gray {
+  color: var(--brand-Eyebrowbanner-fgColor-gray);
+}
+
+.EyebrowBanner__icon--color-gray.EyebrowBanner__icon--badge {
+  background-color: var(--brand-Eyebrowbanner-icon-background-gray);
+}
+
+.EyebrowBanner__icon--color-indigo {
+  color: var(--brand-Eyebrowbanner-fgColor-indigo);
+}
+
+.EyebrowBanner__icon--color-indigo.EyebrowBanner__icon--badge {
+  background-color: var(--brand-Eyebrowbanner-icon-background-indigo);
+}
+
+.EyebrowBanner__icon--color-lemon {
+  color: var(--brand-Eyebrowbanner-fgColor-lemon);
+}
+
+.EyebrowBanner__icon--color-lemon.EyebrowBanner__icon--badge {
+  background-color: var(--brand-Eyebrowbanner-icon-background-lemon);
+}
+
+.EyebrowBanner__icon--color-lime {
+  color: var(--brand-Eyebrowbanner-fgColor-lime);
+}
+
+.EyebrowBanner__icon--color-lime.EyebrowBanner__icon--badge {
+  background-color: var(--brand-Eyebrowbanner-icon-background-lime);
+}
+
+.EyebrowBanner__icon--color-orange {
+  color: var(--brand-Eyebrowbanner-fgColor-orange);
+}
+
+.EyebrowBanner__icon--color-orange.EyebrowBanner__icon--badge {
+  background-color: var(--brand-Eyebrowbanner-icon-background-orange);
+}
+
+.EyebrowBanner__icon--color-pink {
+  color: var(--brand-Eyebrowbanner-fgColor-pink);
+}
+
+.EyebrowBanner__icon--color-pink.EyebrowBanner__icon--badge {
+  background-color: var(--brand-Eyebrowbanner-icon-background-pink);
+}
+
+.EyebrowBanner__icon--color-purple {
+  color: var(--brand-Eyebrowbanner-fgColor-purple);
+}
+
+.EyebrowBanner__icon--color-purple.EyebrowBanner__icon--badge {
+  background-color: var(--brand-Eyebrowbanner-icon-background-purple);
+}
+
+.EyebrowBanner__icon--color-red {
+  color: var(--brand-Eyebrowbanner-fgColor-red);
+}
+
+.EyebrowBanner__icon--color-red.EyebrowBanner__icon--badge {
+  background-color: var(--brand-Eyebrowbanner-icon-background-red);
+}
+
+.EyebrowBanner__icon--color-teal {
+  color: var(--brand-Eyebrowbanner-fgColor-teal);
+}
+
+.EyebrowBanner__icon--color-teal.EyebrowBanner__icon--badge {
+  background-color: var(--brand-Eyebrowbanner-icon-background-teal);
+}
+
+.EyebrowBanner__icon--color-yellow {
+  color: var(--brand-Eyebrowbanner-fgColor-yellow);
+}
+
+.EyebrowBanner__icon--color-yellow.EyebrowBanner__icon--badge {
+  background-color: var(--brand-Eyebrowbanner-icon-background-yellow);
+}

package/components/FAQ/FAQ.css

@@ -0,0 +1,51 @@
+.FAQ {
+  max-width: var(--brand-FAQ-maxWidth-list);
+  margin: 0 auto;
+}
+
+.FAQ__heading {
+  color: var(--brand-FAQ-color-heading);
+  margin-bottom: var(--brand-FAQ-heading-marginBottom);
+}
+
+.FAQ__subheading {
+  margin-bottom: var(--base-size-16);
+  color: var(--brand-color-text-muted);
+}
+
+.FAQ__heading--start {
+  text-align: left;
+}
+
+.FAQ__heading--center {
+  text-align: center;
+  max-width: 18ch;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.FAQ__heading--large {
+  /*Visual appearance as a h2*/
+  font-weight: var(--brand-text-weight-800);
+  font-size: var(--brand-text-size-800);
+  line-height: var(--brand-text-lineHeight-800);
+  letter-spacing: var(--brand-text-letterSpacing-800);
+}
+
+.FAQ details + .FAQ__subheading {
+  margin-top: var(--base-size-48);
+}
+
+.FAQ.details__summary {
+  font-weight: var(--brand-text-weight-800);
+  font-size: var(--brand-text-size-800);
+  line-height: var(--brand-text-lineHeight-800);
+  letter-spacing: var(--brand-text-letterSpacing-800);
+  color: var(--brand-FAQ-color-heading);
+  cursor: pointer;
+  outline: none;
+  border: none;
+  background: none;
+  padding: 0;
+  margin: 0;
+}

package/components/FAQ/FAQGroup.css

@@ -0,0 +1,51 @@
+.FAQGroup {
+  display: none;
+  justify-content: space-between;
+  gap: var(--brand-stack-gap-spacious);
+}
+
+@media screen and (min-width: 48rem) {
+  .FAQGroup {
+    display: grid;
+  }
+
+  .FAQGroup__accordion {
+    display: none;
+  }
+}
+
+.FAQGroup__panel-subHeading {
+  margin-block-start: calc(var(--base-size-8) + 1px);
+}
+
+.FAQGroup__tablist .FAQ__heading {
+  display: none;
+}
+
+.FAQGroup__tablist-button {
+  justify-content: flex-start;
+}
+
+.FAQGroup__tablist-button > span {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.FAQGroup__tablist-button[aria-selected='true'] {
+  background-color: var(--brand-FAQ-color-tabBg-selected);
+}
+
+.FAQGroup__tablist-button span {
+  color: var(--brand-color-text-muted);
+}
+
+.FAQGroup__tablist-button[aria-selected='true'] span {
+  color: var(--brand-FAQ-color-tabLabel-selected);
+}
+
+.FAQGroup__nested-accordion-item summary h4 {
+  font-weight: var(--brand-text-weight-200);
+  font-size: var(--brand-text-size-200);
+  line-height: var(--brand-text-lineHeight-200);
+}

package/components/Footnotes/Footnotes.css

@@ -0,0 +1,35 @@
+.Footnotes {
+  padding-block: var(--base-size-80);
+  display: flex;
+  flex-direction: column;
+  gap: var(--base-size-24);
+}
+
+.Footnotes--variant-citations {
+  margin: 0;
+  padding-inline-start: var(--base-size-16);
+  font-family: var(--brand-body-fontFamily);
+  font-weight: var(--brand-text-weight-100);
+  font-size: var(--brand-text-size-100);
+  line-height: var(--brand-text-lineHeight-100);
+  letter-spacing: var(--brand-text-letterSpacing-100);
+  color: var(--brand-color-text-muted);
+}
+
+.Footnotes--variant-citations .FootnotesItem {
+  padding-inline-start: var(--base-size-12);
+}
+
+.FootnotesItem {
+  scroll-margin-top: 80px;
+}
+
+.FootnotesItem__citationIcon {
+  transform: scaleY(-1);
+  margin-inline-start: var(--base-size-4);
+}
+
+.FootnotesItem__citationText {
+  display: inline;
+  gap: var(--base-size-4);
+}

package/components/FrostedGlassVFX/FrostedGlassVFX.css

@@ -0,0 +1,50 @@
+.FrostedGlassVFX {
+  position: relative;
+  background-color: var(--brand-FrostedGlassVFX-bgColor);
+}
+
+.FrostedGlassVFX--rounded-corners {
+  border-radius: var(--brand-borderRadius-xlarge);
+}
+
+.FrostedGlassVFX--intensity-low {
+  -webkit-backdrop-filter: blur(var(--brand-FrostedGlassVFX-blurIntensity-low));
+          backdrop-filter: blur(var(--brand-FrostedGlassVFX-blurIntensity-low));
+}
+
+.FrostedGlassVFX--intensity-medium {
+  -webkit-backdrop-filter: blur(var(--brand-FrostedGlassVFX-blurIntensity-medium));
+          backdrop-filter: blur(var(--brand-FrostedGlassVFX-blurIntensity-medium));
+}
+
+.FrostedGlassVFX--intensity-high {
+  -webkit-backdrop-filter: blur(var(--brand-FrostedGlassVFX-blurIntensity-high));
+          backdrop-filter: blur(var(--brand-FrostedGlassVFX-blurIntensity-high));
+}
+
+.FrostedGlassVFX::before {
+  content: '';
+  position: absolute;
+  z-index: -1;
+  inset: 0;
+  padding: var(--brand-borderWidth-thin);
+  background: var(--brand-FrostedGlassVFX-borderMask);
+  -webkit-mask: linear-gradient(var(--base-color-scale-black-0) 0 0),
+    linear-gradient(var(--base-color-scale-black-0) 0 0) content-box;
+  -webkit-mask-composite: xor;
+          mask: linear-gradient(var(--base-color-scale-black-0) 0 0) exclude,
+    linear-gradient(var(--base-color-scale-black-0) 0 0) content-box;
+}
+
+.FrostedGlassVFX--rounded-corners::before {
+  border-radius: var(--brand-borderRadius-xlarge);
+}
+
+.FrostedGlassVFX > * {
+  background-color: transparent;
+}
+
+.FrostedGlassVFX > *,
+.FrostedGlassVFX > *::before {
+  border-color: transparent;
+}