@primer/brand-css 0.0.0-20250212132611

package/components/Testimonial/Testimonial.css

@@ -0,0 +1,228 @@
+.Testimonial {
+  display: grid;
+  color: var(--brand-color-text-default);
+  font-family: var(--brand-fontStack-sansSerif);
+}
+
+.Testimonial--variant-subtle,
+.Testimonial--variant-default {
+  position: relative;
+  border-radius: var(--brand-borderRadius-xlarge);
+  padding: var(--base-size-48) var(--base-size-32);
+}
+
+@media screen and (min-width: 48rem) {
+  .Testimonial--variant-subtle,
+  .Testimonial--variant-default {
+    padding: var(--base-size-48);
+  }
+}
+
+@media screen and (min-width: 63.25rem) {
+  .Testimonial--variant-subtle.Testimonial--size-large,
+  .Testimonial--variant-default.Testimonial--size-large {
+    padding: var(--base-size-96) var(--base-size-128);
+  }
+}
+
+.Testimonial--variant-subtle {
+  background-color: var(--brand-color-canvas-subtle);
+}
+
+.Testimonial--variant-default {
+  background-color: var(--brand-color-canvas-default);
+}
+
+.Testimonial--variant-subtle::before,
+.Testimonial--variant-default::before {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  pointer-events: none;
+  content: '';
+  border-radius: inherit;
+}
+
+.Testimonial--variant-subtle::before {
+  -webkit-mask-image: var(--brand-Testimonial-borderMask-subtle);
+          mask-image: var(--brand-Testimonial-borderMask-subtle);
+  border: var(--brand-borderWidth-thin) solid var(--brand-color-border-default);
+}
+
+.Testimonial--variant-default::before {
+  -webkit-mask-image: var(--brand-Testimonial-borderMask-default);
+          mask-image: var(--brand-Testimonial-borderMask-default);
+  border: var(--brand-borderWidth-thin) solid var(--brand-color-border-default);
+}
+
+.Testimonial__quoteMark {
+  --brand-Testimonial-quoteMarkColor-gradient: radial-gradient(
+    circle at top left,
+    var(--brand-Testimonial-quoteMarkColor-start),
+    var(--brand-Testimonial-quoteMarkColor-end)
+  );
+  --brand-Testimonial-quoteMarkColor-background: var(
+    --brand-Testimonial-quoteMarkColor-gradient,
+    var(--brand-Testimonial-quoteMarkColor, currentColor)
+  );
+  color: var(--brand-Testimonial-quoteMarkColor-start, var(--brand-Testimonial-quoteMarkColor, currentColor));
+  font-size: var(--base-size-48);
+  line-height: var(--base-size-48);
+  font-weight: var(--base-text-weight-extrabold);
+  position: relative;
+}
+
+.Testimonial__quoteMark::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: var(--brand-Testimonial-quoteMarkColor-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;
+}
+
+.Testimonial--size-large .Testimonial__quoteMark {
+  font-size: 7.5rem; /* 120px */
+  line-height: 1;
+}
+
+.Testimonial-quote {
+  font-family: var(--brand-fontStack-sansSerif);
+  font-size: var(--brand-Testimonial-quote-fontSize-default);
+  font-weight: var(--brand-Testimonial-quote-fontWeight-default);
+  letter-spacing: var(--brand-Testimonial-quote-letterSpacing-default);
+  line-height: 1.2; /* requires custom line-height */
+  display: block;
+}
+
+.Testimonial--size-large .Testimonial-quote {
+  font-size: var(--brand-Testimonial-quote-fontSize-large);
+  font-weight: var(--brand-Testimonial-quote-fontWeight-large);
+  letter-spacing: var(--brand-Testimonial-quote-letterSpacing-large);
+}
+
+.Testimonial-quote--muted {
+  color: var(--brand-color-text-muted);
+}
+
+.Testimonial-quote em,
+.Testimonial-quote b {
+  color: var(--brand-color-text-default);
+  font-style: normal;
+  font-weight: inherit;
+}
+
+.Testimonial__media {
+  display: flex;
+  gap: var(--base-size-16);
+  align-items: center;
+  margin-top: var(--base-size-24);
+}
+
+.Testimonial--size-large .Testimonial__media {
+  margin-top: var(--base-size-64);
+}
+
+.Testimonial-caption {
+  display: flex;
+  flex-direction: column;
+}
+
+.Testimonial-avatar {
+  flex: none;
+}
+
+.Testimonial-from {
+  font-weight: var(--base-text-weight-semibold);
+}
+
+.Testimonial-position {
+  font-family: var(--brand-fontStack-monospace);
+}
+
+.Testimonial__quoteMark--default {
+  --brand-Testimonial-quoteMarkColor: var(--brand-Testimonial-quoteMarkColor-default);
+}
+
+.Testimonial__quoteMark--blue {
+  --brand-Testimonial-quoteMarkColor: var(--brand-Testimonial-quoteMarkColor-blue);
+}
+
+.Testimonial__quoteMark--blue-purple {
+  --brand-Testimonial-quoteMarkColor-start: var(--brand-Testimonial-quoteMarkColor-blue-purple-start);
+  --brand-Testimonial-quoteMarkColor-end: var(--brand-Testimonial-quoteMarkColor-blue-purple-end);
+}
+
+.Testimonial__quoteMark--coral {
+  --brand-Testimonial-quoteMarkColor: var(--brand-Testimonial-quoteMarkColor-coral);
+}
+
+.Testimonial__quoteMark--green {
+  --brand-Testimonial-quoteMarkColor: var(--brand-Testimonial-quoteMarkColor-green);
+}
+
+.Testimonial__quoteMark--green-blue {
+  --brand-Testimonial-quoteMarkColor-start: var(--brand-Testimonial-quoteMarkColor-green-blue-start);
+  --brand-Testimonial-quoteMarkColor-end: var(--brand-Testimonial-quoteMarkColor-green-blue-end);
+}
+
+.Testimonial__quoteMark--gray {
+  --brand-Testimonial-quoteMarkColor: var(--brand-Testimonial-quoteMarkColor-gray);
+}
+
+.Testimonial__quoteMark--indigo {
+  --brand-Testimonial-quoteMarkColor: var(--brand-Testimonial-quoteMarkColor-indigo);
+}
+
+.Testimonial__quoteMark--lemon {
+  --brand-Testimonial-quoteMarkColor: var(--brand-Testimonial-quoteMarkColor-lemon);
+}
+
+.Testimonial__quoteMark--lime {
+  --brand-Testimonial-quoteMarkColor: var(--brand-Testimonial-quoteMarkColor-lime);
+}
+
+.Testimonial__quoteMark--orange {
+  --brand-Testimonial-quoteMarkColor: var(--brand-Testimonial-quoteMarkColor-orange);
+}
+
+.Testimonial__quoteMark--pink {
+  --brand-Testimonial-quoteMarkColor: var(--brand-Testimonial-quoteMarkColor-pink);
+}
+
+.Testimonial__quoteMark--pink-blue {
+  --brand-Testimonial-quoteMarkColor-start: var(--brand-Testimonial-quoteMarkColor-pink-blue-start);
+  --brand-Testimonial-quoteMarkColor-end: var(--brand-Testimonial-quoteMarkColor-pink-blue-end);
+}
+
+.Testimonial__quoteMark--purple {
+  --brand-Testimonial-quoteMarkColor: var(--brand-Testimonial-quoteMarkColor-purple);
+}
+
+.Testimonial__quoteMark--purple-red {
+  --brand-Testimonial-quoteMarkColor-start: var(--brand-Testimonial-quoteMarkColor-purple-red-start);
+  --brand-Testimonial-quoteMarkColor-end: var(--brand-Testimonial-quoteMarkColor-purple-red-end);
+}
+
+.Testimonial__quoteMark--red {
+  --brand-Testimonial-quoteMarkColor: var(--brand-Testimonial-quoteMarkColor-red);
+}
+
+.Testimonial__quoteMark--red-orange {
+  --brand-Testimonial-quoteMarkColor-start: var(--brand-Testimonial-quoteMarkColor-red-orange-start);
+  --brand-Testimonial-quoteMarkColor-end: var(--brand-Testimonial-quoteMarkColor-red-orange-end);
+}
+
+.Testimonial__quoteMark--teal {
+  --brand-Testimonial-quoteMarkColor: var(--brand-Testimonial-quoteMarkColor-teal);
+}
+
+.Testimonial__quoteMark--yellow {
+  --brand-Testimonial-quoteMarkColor: var(--brand-Testimonial-quoteMarkColor-yellow);
+}

package/components/Text/Text.css

@@ -0,0 +1,195 @@
+.Text {
+  font-family: var(--brand-body-fontFamily);
+}
+
+[data-color-mode='dark'] .Text--antialiased {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: auto;
+}
+
+.Text--default {
+  color: var(--brand-color-text-default);
+}
+
+.Text--muted {
+  color: var(--brand-color-text-muted);
+}
+
+.Text-font--mona-sans {
+  font-family: var(--brand-body-fontFamily);
+}
+
+.Text-font--hubot-sans {
+  font-family: var(--brand-body-fontFamilyAlt);
+}
+
+.Text-font--monospace {
+  font-family: var(--brand-fontStack-monospace);
+}
+
+.Text--700 {
+  font-weight: var(--brand-text-weight-700);
+  font-size: var(--brand-text-size-700);
+  line-height: var(--brand-text-lineHeight-700);
+  letter-spacing: var(--brand-text-letterSpacing-700);
+}
+
+.Text--600 {
+  font-weight: var(--brand-text-weight-600);
+  font-size: var(--brand-text-size-600);
+  line-height: var(--brand-text-lineHeight-600);
+}
+
+.Text--500 {
+  font-weight: var(--brand-text-weight-500);
+  font-size: var(--brand-text-size-500);
+  line-height: var(--brand-text-lineHeight-500);
+}
+
+.Text--400 {
+  font-weight: var(--brand-text-weight-400);
+  font-size: var(--brand-text-size-400);
+  line-height: var(--brand-text-lineHeight-400);
+  letter-spacing: var(--brand-text-letterSpacing-400);
+}
+
+.Text--300 {
+  font-weight: var(--brand-text-weight-300);
+  font-size: var(--brand-text-size-300);
+  line-height: var(--brand-text-lineHeight-300);
+  letter-spacing: var(--brand-text-letterSpacing-300);
+}
+
+.Text--200 {
+  font-weight: var(--brand-text-weight-200);
+  font-size: var(--brand-text-size-200);
+  line-height: var(--brand-text-lineHeight-200);
+  letter-spacing: var(--brand-text-letterSpacing-200);
+}
+
+.Text--100 {
+  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);
+}
+
+.Text--weight-heavy,
+.Text-narrow--weight-heavy {
+  font-weight: var(--base-text-weight-heavy);
+}
+
+.Text--weight-extrabold,
+.Text-narrow--weight-extrabold {
+  font-weight: var(--base-text-weight-extrabold);
+}
+
+.Text--weight-bold,
+.Text-narrow--weight-bold {
+  font-weight: var(--base-text-weight-bold);
+}
+
+.Text--weight-semibold,
+.Text-narrow--weight-semibold {
+  font-weight: var(--base-text-weight-semibold);
+}
+
+.Text--weight-medium,
+.Text-narrow--weight-medium {
+  font-weight: var(--base-text-weight-medium);
+}
+
+.Text--weight-normal,
+.Text-narrow--weight-normal {
+  font-weight: var(--base-text-weight-normal);
+}
+
+.Text--weight-light,
+.Text-narrow--weight-light {
+  font-weight: var(--base-text-weight-light);
+}
+
+.Text--weight-extralight,
+.Text-narrow--weight-extralight {
+  font-weight: var(--base-text-weight-extralight);
+}
+
+@media screen and (min-width: 48rem) {
+  .Text-regular--weight-heavy {
+    font-weight: var(--base-text-weight-heavy);
+  }
+
+  .Text-regular--weight-extrabold {
+    font-weight: var(--base-text-weight-extrabold);
+  }
+
+  .Text-regular--weight-bold {
+    font-weight: var(--base-text-weight-bold);
+  }
+
+  .Text-regular--weight-semibold {
+    font-weight: var(--base-text-weight-semibold);
+  }
+
+  .Text-regular--weight-medium {
+    font-weight: var(--base-text-weight-medium);
+  }
+
+  .Text-regular--weight-normal {
+    font-weight: var(--base-text-weight-normal);
+  }
+
+  .Text-regular--weight-light {
+    font-weight: var(--base-text-weight-light);
+  }
+
+  .Text-regular--weight-extralight {
+    font-weight: var(--base-text-weight-extralight);
+  }
+}
+
+@media screen and (min-width: 80rem) {
+  .Text-wide--weight-heavy {
+    font-weight: var(--base-text-weight-heavy);
+  }
+
+  .Text-wide--weight-extrabold {
+    font-weight: var(--base-text-weight-extrabold);
+  }
+
+  .Text-wide--weight-bold {
+    font-weight: var(--base-text-weight-bold);
+  }
+
+  .Text-wide--weight-semibold {
+    font-weight: var(--base-text-weight-semibold);
+  }
+
+  .Text-wide--weight-medium {
+    font-weight: var(--base-text-weight-medium);
+  }
+
+  .Text-wide--weight-normal {
+    font-weight: var(--base-text-weight-normal);
+  }
+
+  .Text-wide--weight-light {
+    font-weight: var(--base-text-weight-light);
+  }
+
+  .Text-wide--weight-extralight {
+    font-weight: var(--base-text-weight-extralight);
+  }
+}
+
+.Text-align--start {
+  text-align: start;
+}
+
+.Text-align--end {
+  text-align: end;
+}
+
+.Text-align--center {
+  text-align: center;
+}

package/components/Timeline/Timeline.css

@@ -0,0 +1,79 @@
+.Timeline {
+  --bulletY: calc(var(--base-size-8) / 2 - var(--brand-Timeline-bullet-size) / 2 + var(--base-size-8));
+
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.Timeline__item {
+  position: relative;
+  max-width: var(--brand-Timeline-lineLength);
+  padding-inline-start: calc(var(--brand-Timeline-bullet-size) + var(--brand-Timeline-spacing));
+  color: var(--brand-color-text-default);
+  line-height: var(--brand-Timeline-lineHeight);
+}
+
+.Timeline--full-width .Timeline__item {
+  max-width: none;
+}
+
+.Timeline__item:not(:last-child) {
+  padding-bottom: var(--base-size-32);
+}
+
+.Timeline__item::before,
+.Timeline__item::after {
+  content: '';
+  position: absolute;
+}
+
+.Timeline__item::before {
+  width: var(--brand-Timeline-bullet-size);
+  height: var(--brand-Timeline-bullet-size);
+  top: var(--bulletY);
+  left: 0;
+  border-style: solid;
+  border-width: var(--brand-Timeline-strokeWidth);
+  border-color: var(--brand-Timeline-line-color);
+  border-radius: var(--brand-borderRadius-full);
+}
+
+.Timeline__item:not(:last-child)::after {
+  top: calc(var(--bulletY) + var(--brand-Timeline-bullet-size) + var(--brand-Timeline-bullet-spacing));
+  left: calc(var(--brand-Timeline-bullet-size) / 2 - var(--brand-Timeline-strokeWidth) / 2);
+  width: var(--brand-Timeline-strokeWidth);
+  height: calc(100% - var(--brand-Timeline-bullet-size) - var(--brand-Timeline-bullet-spacing) * 2);
+  background-color: var(--brand-Timeline-line-color);
+  border-radius: var(--brand-borderRadius-full);
+}
+
+.Timeline__item-text em,
+.Timeline__item-text b {
+  color: var(--brand-color-text-default);
+  font-style: normal;
+  font-weight: var(--base-text-weight-medium);
+}
+
+.Timeline__item a {
+  color: var(--brand-InlineLink-color-rest);
+  position: relative;
+  text-decoration: underline;
+  text-decoration-color: var(--brand-InlineLink-color-rest);
+  text-decoration-thickness: var(--brand-borderWidth-thin);
+  text-underline-position: under;
+  transition: var(--brand-InlineLink-transition-timing) text-decoration;
+}
+
+.Timeline__item a:hover {
+  text-decoration-thickness: var(--brand-borderWidth-thick);
+}
+
+.Timeline__item a {
+  font-weight: inherit;
+  color: var(--brand-InlineLink-color-rest);
+}
+
+.Timeline__item a:active {
+  color: var(--brand-InlineLink-color-pressed);
+}

package/components/Tooltip/Tooltip.css

@@ -0,0 +1,170 @@
+.Tooltip {
+  display: none;
+}
+
+@media (forced-colors: active) {
+  .Tooltip {
+    outline: var(--brand-borderWidth-thin) solid transparent;
+  }
+}
+
+/* Overriding the default popover styles */
+.Tooltip[popover] {
+  --offset: var(
+    --base-size-8,
+    --base-size-8
+  ); /* This is a "magic number". Just gives some room to make sure the tooltip stay open when mouse leaves the trigger to hover tooltip */
+  /* these vars are for the triangle, via https://www.smashingmagazine.com/2024/03/modern-css-tooltips-speech-bubbles-part1/ */
+  --b: 1em; /* triangle base width */
+  --h: 0.5em; /* triangle height */
+  --p: 50%; /* center triangle position (0%:left 100%:right) */
+  --r: var(--brand-borderRadius-medium); /* border radius */
+  --c: var(--brand-color-neutral-emphasisPlus); /* bg color */
+
+  position: absolute;
+  padding: 0.5em 0.75em;
+  width: -moz-max-content;
+  width: max-content;
+  margin: auto;
+  clip: auto;
+  white-space: normal;
+  font: normal normal var(--brand-text-size-100) / var(--brand-text-lineHeight-100) var(--brand-fontStack-sansSerif);
+  -webkit-font-smoothing: subpixel-antialiased;
+  color: var(--brand-Tooltip-color-default);
+  text-align: center;
+  word-wrap: break-word;
+  background: var(--c);
+  border-radius: var(--r);
+  border: 0;
+  opacity: 0;
+  max-width: 250px;
+  inset: auto;
+  /* for scrollbar */
+  overflow: visible;
+}
+
+.Tooltip[popover]:popover-open, /* selector in chrome is :popover-open */
+.Tooltip[popover].\:popover-open {
+  /* selector in firefox and safari is \:popover-open */
+  display: block;
+  animation-name: tooltip-appear;
+  animation-duration: var(--brand-animation-duration-faster, 0.2s);
+  animation-fill-mode: forwards;
+  animation-timing-function: ease-in;
+  animation-delay: 0s;
+}
+
+/* This is needed to keep the tooltip open when the user leaves the trigger element to hover tooltip */
+.Tooltip::after {
+  position: absolute;
+  display: block;
+  right: 0;
+  left: 0;
+  height: var(--offset);
+  content: '';
+}
+
+/* Directional styles */
+.Tooltip[data-direction='n'] {
+  -o-border-image: conic-gradient(var(--c) 0 0) 0 / var(--r) calc(100% - var(--p) - var(--b) / 2) 0
+    calc(var(--p) - var(--b) / 2) / 0 0 var(--h) 0;
+     border-image: conic-gradient(var(--c) 0 0) fill 0 / var(--r) calc(100% - var(--p) - var(--b) / 2) 0
+    calc(var(--p) - var(--b) / 2) / 0 0 var(--h) 0;
+  clip-path: polygon(
+    0 100%,
+    0 0,
+    100% 0,
+    100% 100%,
+    min(100%, var(--p) + var(--b) / 2) 100%,
+    var(--p) calc(100% + var(--h)),
+    max(0%, var(--p) - var(--b) / 2) 100%
+  );
+}
+
+.Tooltip[data-direction='s'] {
+  -o-border-image: conic-gradient(var(--c) 0 0) 0/ 0 calc(100% - var(--p) - var(--b) / 2) var(--r) calc(
+      var(--p) - var(--b) / 2
+    ) / var(--h) 0 0 0;
+     border-image: conic-gradient(var(--c) 0 0) fill 0/ 0 calc(100% - var(--p) - var(--b) / 2) var(--r) calc(
+      var(--p) - var(--b) / 2
+    ) / var(--h) 0 0 0;
+  clip-path: polygon(
+    0 0,
+    0 100%,
+    100% 100%,
+    100% 0,
+    min(100%, var(--p) + var(--b) / 2) 0,
+    var(--p) calc(-1 * var(--h)),
+    max(0%, var(--p) - var(--b) / 2) 0
+  );
+}
+
+.Tooltip[data-direction='w'] {
+  -o-border-image: conic-gradient(var(--c) 0 0) 0 / calc(var(--p) - var(--b) / 2) 0
+    calc(100% - var(--p) - var(--b) / 2) var(--r) / 0 var(--h) 0 0;
+     border-image: conic-gradient(var(--c) 0 0) fill 0 / calc(var(--p) - var(--b) / 2) 0
+    calc(100% - var(--p) - var(--b) / 2) var(--r) / 0 var(--h) 0 0;
+  clip-path: polygon(
+    100% 100%,
+    0 100%,
+    0 0,
+    100% 0,
+    100% max(0%, var(--p) - var(--b) / 2),
+    calc(100% + var(--h)) var(--p),
+    100% min(100%, var(--p) + var(--b) / 2)
+  );
+}
+
+.Tooltip[data-direction='e'] {
+  -o-border-image: conic-gradient(var(--c) 0 0) 0 / calc(var(--p) - var(--b) / 2) var(--r)
+    calc(100% - var(--p) - var(--b) / 2) 0/ 0 0 0 var(--h);
+     border-image: conic-gradient(var(--c) 0 0) fill 0 / calc(var(--p) - var(--b) / 2) var(--r)
+    calc(100% - var(--p) - var(--b) / 2) 0/ 0 0 0 var(--h);
+  clip-path: polygon(
+    0 100%,
+    100% 100%,
+    100% 0,
+    0 0,
+    0 max(0%, var(--p) - var(--b) / 2),
+    calc(-1 * var(--h)) var(--p),
+    0 min(100%, var(--p) + var(--b) / 2)
+  );
+}
+
+.Tooltip[data-direction='n']::after {
+  top: 100%;
+}
+
+.Tooltip[data-direction='s']::after {
+  bottom: 100%;
+}
+
+.Tooltip[data-direction='w']::after {
+  position: absolute;
+  display: block;
+  height: 100%;
+  width: var(--offset);
+  content: '';
+  bottom: 0;
+  left: 100%;
+}
+
+.Tooltip[data-direction='e']::after {
+  position: absolute;
+  display: block;
+  height: 100%;
+  width: var(--offset);
+  content: '';
+  bottom: 0;
+  right: 100%;
+  margin-left: calc(var(--offset) * -1px);
+}
+
+@keyframes tooltip-appear {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}