@primer/brand-css 0.80.0-rc.4bfa3a79 → 0.80.0-rc.b232dc70

package/components/CarouselPagination/CarouselPagination.css

@@ -0,0 +1,118 @@
+.CarouselPagination {
+  display: inline-flex;
+  flex: 0 1 auto;
+  min-width: 0;
+  align-items: center;
+  gap: calc(var(--base-size-8) + var(--base-size-2));
+  width: -moz-max-content;
+  width: max-content;
+  max-width: 100%;
+  padding: var(--base-size-6);
+  border-radius: var(--brand-borderRadius-full);
+  background: var(--brand-CarouselPagination-bgColor);
+}
+
+.CarouselPagination .CarouselPagination__arrowButton {
+  width: calc(var(--base-size-28) + var(--base-size-2));
+  min-width: calc(var(--base-size-28) + var(--base-size-2));
+  height: calc(var(--base-size-28) + var(--base-size-2));
+  min-height: calc(var(--base-size-28) + var(--base-size-2));
+  padding: 0;
+  color: var(--brand-CarouselPagination-arrowButton-fgColor);
+  background: var(--brand-color-canvas-default);
+  border: var(--brand-borderWidth-thin) solid var(--brand-CarouselPagination-arrowButton-borderColor);
+  box-shadow: none;
+  backdrop-filter: none;
+}
+
+.CarouselPagination .CarouselPagination__arrowButton--inactive,
+.CarouselPagination .CarouselPagination__arrowButton--inactive:hover {
+  color: var(--brand-CarouselPagination-arrowButton-inactive-fgColor);
+  background: var(--brand-color-canvas-default);
+  border-color: transparent;
+}
+
+.CarouselPagination .CarouselPagination__arrowButton svg {
+  width: var(--base-size-16);
+  height: var(--base-size-16);
+}
+
+@media (hover: hover) and (pointer: fine) {
+  .CarouselPagination .CarouselPagination__arrowButton--available:hover {
+    background: var(--brand-CarouselPagination-bgColor);
+    border-color: var(--brand-CarouselPagination-arrowButton-borderColor);
+    box-shadow: none;
+  }
+}
+
+.CarouselPagination__indicators {
+  display: flex;
+  align-items: center;
+  gap: var(--base-size-6);
+  width: calc(var(--base-size-6) * (var(--carousel-pagination-item-count) * 2 + 0.5));
+  min-width: 0;
+  height: calc(var(--base-size-28) + var(--base-size-2));
+  overflow-x: auto;
+  scroll-behavior: smooth;
+  scrollbar-width: none;
+}
+
+.CarouselPagination__indicator {
+  position: relative;
+  flex: none;
+  width: var(--base-size-6);
+  height: var(--base-size-6);
+  padding: 0;
+  border: 0;
+  border-radius: var(--brand-borderRadius-full);
+  background: var(--brand-CarouselPagination-indicator-bgColor);
+  cursor: pointer;
+  transition: width var(--brand-animation-duration-fast) cubic-bezier(0.4, 0, 0.2, 1),
+    background-color var(--brand-animation-duration-fast) cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.CarouselPagination__indicator::before {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: calc(100% + var(--base-size-6));
+  height: calc(var(--base-size-28) + var(--base-size-2));
+  content: '';
+  transform: translate(-50%, -50%);
+}
+
+.CarouselPagination__indicator--active {
+  width: calc(var(--base-size-6) * 2.5);
+  background: var(--brand-CarouselPagination-indicator-active-bgColor);
+}
+
+.CarouselPagination__indicator:focus-visible {
+  outline: var(--brand-borderWidth-thick) solid var(--brand-color-focus);
+  outline-offset: var(--base-size-4);
+}
+
+.CarouselPagination__arrowButton:focus-visible {
+  outline: var(--brand-borderWidth-thick) solid var(--brand-color-focus);
+  outline-offset: var(--base-size-2);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .CarouselPagination__indicators {
+    scroll-behavior: auto;
+  }
+
+  .CarouselPagination__indicator {
+    transition: none;
+  }
+}
+
+@media (forced-colors: active) {
+  .CarouselPagination__indicator {
+    background: ButtonText;
+  }
+
+  .CarouselPagination__indicator--active {
+    background: Highlight;
+    forced-color-adjust: none;
+  }
+}

package/components/IconButton/IconButton.css

@@ -108,7 +108,7 @@
   padding: 0;
   margin: calc(var(--base-size-1) * -1);
   overflow: hidden;
-  clip: rect(0, 0, 0, 0);
+  clip-path: inset(50%);
   white-space: nowrap;
   border: 0;
 }

package/components/Tabs/Tabs.css

@@ -168,7 +168,7 @@
 }
 
 .Tabs__panelContainer {
-  margin-top: var(--base-size-16);
+  margin-block-start: var(--base-size-16);
 }
 
 .Tabs__panel {
@@ -179,35 +179,6 @@
   margin-block-end: var(--base-size-12);
 }
 
-.Tabs__indicator {
-  width: var(--base-size-6);
-  border-radius: var(--brand-borderRadius-full);
-  background-color: var(--brand-color-text-muted);
-  height: var(--base-size-6);
-  transition: width var(--brand-animation-duration-default) var(--brand-animation-easing-default);
-}
-
-.Tabs__indicator--active {
-  background-color: var(--brand-color-text-default);
-  width: var(--base-size-24);
-}
-
-.Tabs__control {
-  background-color: transparent;
-  border: none;
-  cursor: pointer;
-  height: var(--base-size-24);
-  width: var(--base-size-24);
-  display: flex;
-  align-content: center;
-}
-
-.Tabs__control-icon {
-  vertical-align: middle !important; /* Required to override dotcom styles */
-  position: relative;
-  top: calc(var(--base-size-2) / -2);
-}
-
 @media screen and (min-width: 48rem) {
   .Tabs__controls {
     display: none;

package/components/Testimonial/Testimonial.css

@@ -35,10 +35,7 @@
 .Testimonial--variant-subtle::before,
 .Testimonial--variant-default::before {
   position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
+  inset: 0;
   pointer-events: none;
   content: '';
   border-radius: inherit;
@@ -56,55 +53,46 @@
   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--variant-subtle .Testimonial__quoteWrapper,
+.Testimonial--variant-default .Testimonial__quoteWrapper {
+  display: flex;
+  flex-direction: column;
+  gap: calc(var(--base-size-24) + var(--base-size-16));
 }
 
-.Testimonial__quoteMark--hasBackground {
+.Testimonial__quoteMark {
+  position: relative;
   display: inline-flex;
+  flex: none;
   align-items: center;
   justify-content: center;
   width: calc(var(--base-size-48) + var(--base-size-8));
   height: calc(var(--base-size-48) + var(--base-size-8));
   border-radius: var(--base-size-12);
+  color: var(--brand-Testimonial-quoteMarkColor, currentColor);
   background-color: var(--brand-Testimonial-quoteMarkBackground, var(--base-color-scale-gray-0));
-  font-size: var(--base-size-64);
-  line-height: 1;
-}
-
-.Testimonial--size-large .Testimonial__quoteMark:not(.Testimonial__quoteMark--hasBackground) {
-  font-size: 7.5rem; /* 120px */
+  font-family: var(--brand-fontStack-monospace);
+  font-size: 4rem;
+  font-weight: var(--base-text-weight-normal);
   line-height: 1;
 }
 
 .Testimonial__quoteMarkGlyph {
   display: block;
+  transform: translateY(var(--base-size-12));
+}
+
+.Testimonial--variant-default .Testimonial__quoteMark,
+.Testimonial--variant-subtle .Testimonial__quoteMark {
+  width: var(--base-size-40);
+  height: var(--base-size-40);
+  border-radius: var(--base-size-8);
+  font-size: 3rem;
+}
+
+.Testimonial--variant-default .Testimonial__quoteMarkGlyph,
+.Testimonial--variant-subtle .Testimonial__quoteMarkGlyph {
+  transform: translateY(var(--base-size-8));
 }
 
 .Testimonial-quote {
@@ -133,7 +121,7 @@
   display: flex;
   gap: var(--base-size-16);
   align-items: center;
-  margin-top: var(--base-size-24);
+  margin-block-start: var(--base-size-24);
 }
 
 .Testimonial-logo-image {
@@ -141,7 +129,7 @@
 }
 
 .Testimonial--size-large .Testimonial__media {
-  margin-top: var(--base-size-64);
+  margin-block-start: var(--base-size-64);
 }
 
 .Testimonial-caption {
@@ -225,19 +213,6 @@
   letter-spacing: 0.01em;
 }
 
-.Testimonial--variant-expressive .Testimonial__quoteMark {
-  font-family: var(--brand-fontStack-monospace);
-  font-weight: var(--brand-fontWeight-300);
-}
-
-.Testimonial--variant-expressive .Testimonial__quoteMarkGlyph {
-  transform: translateY(var(--base-size-12));
-}
-
-.Testimonial--variant-expressive .Testimonial__quoteMark:not(.Testimonial__quoteMark--hasBackground) {
-  margin-left: -0.18em;
-}
-
 .Testimonial--variant-expressive .Testimonial-quote {
   font-family: var(--brand-fontStack-monospace);
   font-size: 1.5rem;
@@ -300,7 +275,7 @@
   }
 
   .Testimonial--variant-expressive .Testimonial-quote {
-    font-size: var(--base-size-32);
+    font-size: 2rem;
   }
 
   .Testimonial--variant-expressive .Testimonial-link {
@@ -321,14 +296,14 @@
 }
 
 .Testimonial-link {
-  margin-top: var(--base-size-8);
+  margin-block-start: var(--base-size-8);
 }
 
 .Testimonial--variant-expressive .Testimonial-link {
   align-self: flex-start;
   width: -moz-fit-content;
   width: fit-content;
-  margin-top: 0;
+  margin-block-start: 0;
 }
 
 .Testimonial__quoteMark--default {
@@ -341,12 +316,6 @@
   --brand-Testimonial-quoteMarkBackground: var(--brand-Testimonial-quoteMarkBackground-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);
-  --brand-Testimonial-quoteMarkBackground: var(--brand-Testimonial-quoteMarkBackground-blue-purple);
-}
-
 .Testimonial__quoteMark--coral {
   --brand-Testimonial-quoteMarkColor: var(--brand-Testimonial-quoteMarkColor-coral);
   --brand-Testimonial-quoteMarkBackground: var(--brand-Testimonial-quoteMarkBackground-coral);
@@ -357,12 +326,6 @@
   --brand-Testimonial-quoteMarkBackground: var(--brand-Testimonial-quoteMarkBackground-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);
-  --brand-Testimonial-quoteMarkBackground: var(--brand-Testimonial-quoteMarkBackground-green-blue);
-}
-
 .Testimonial__quoteMark--gray {
   --brand-Testimonial-quoteMarkColor: var(--brand-Testimonial-quoteMarkColor-gray);
   --brand-Testimonial-quoteMarkBackground: var(--brand-Testimonial-quoteMarkBackground-gray);
@@ -393,34 +356,16 @@
   --brand-Testimonial-quoteMarkBackground: var(--brand-Testimonial-quoteMarkBackground-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);
-  --brand-Testimonial-quoteMarkBackground: var(--brand-Testimonial-quoteMarkBackground-pink-blue);
-}
-
 .Testimonial__quoteMark--purple {
   --brand-Testimonial-quoteMarkColor: var(--brand-Testimonial-quoteMarkColor-purple);
   --brand-Testimonial-quoteMarkBackground: var(--brand-Testimonial-quoteMarkBackground-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);
-  --brand-Testimonial-quoteMarkBackground: var(--brand-Testimonial-quoteMarkBackground-purple-red);
-}
-
 .Testimonial__quoteMark--red {
   --brand-Testimonial-quoteMarkColor: var(--brand-Testimonial-quoteMarkColor-red);
   --brand-Testimonial-quoteMarkBackground: var(--brand-Testimonial-quoteMarkBackground-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);
-  --brand-Testimonial-quoteMarkBackground: var(--brand-Testimonial-quoteMarkBackground-red-orange);
-}
-
 .Testimonial__quoteMark--teal {
   --brand-Testimonial-quoteMarkColor: var(--brand-Testimonial-quoteMarkColor-teal);
   --brand-Testimonial-quoteMarkBackground: var(--brand-Testimonial-quoteMarkBackground-teal);
@@ -430,3 +375,85 @@
   --brand-Testimonial-quoteMarkColor: var(--brand-Testimonial-quoteMarkColor-yellow);
   --brand-Testimonial-quoteMarkBackground: var(--brand-Testimonial-quoteMarkBackground-yellow);
 }
+
+.Testimonial--variant-minimal {
+  margin: 0;
+  width: 100%;
+}
+
+.Testimonial--variant-minimal .Testimonial__quoteWrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: calc(var(--base-size-24) + var(--base-size-16));
+}
+
+.Testimonial--variant-minimal.Testimonial--size-large .Testimonial__quoteWrapper {
+  gap: var(--base-size-48);
+}
+
+.Testimonial--variant-minimal blockquote {
+  margin: 0;
+}
+
+.Testimonial--variant-minimal .Testimonial-quote {
+  font-size: var(--brand-Testimonial-quote-fontSize-default);
+  font-weight: var(--brand-Testimonial-quote-fontWeight-default);
+  line-height: 1.2;
+  letter-spacing: 0;
+}
+
+.Testimonial--variant-minimal.Testimonial--size-large .Testimonial-quote {
+  font-size: var(--brand-text-size-600);
+  font-weight: var(--brand-heading-weight-500);
+  line-height: var(--brand-Testimonial-minimal-quote-lineHeight);
+}
+
+.Testimonial--variant-minimal .Testimonial__media {
+  gap: var(--base-size-16);
+  margin-block-start: calc(var(--base-size-32) + var(--base-size-8));
+  padding-block-start: 0;
+}
+
+.Testimonial--variant-minimal.Testimonial--size-large .Testimonial__media {
+  margin-block-start: var(--base-size-32);
+  padding-block-start: var(--base-size-8);
+}
+
+.Testimonial--variant-minimal .Testimonial-caption {
+  min-width: 0;
+  gap: var(--base-size-2);
+}
+
+.Testimonial--variant-minimal .Testimonial-from,
+.Testimonial--variant-minimal .Testimonial-position {
+  font-family: var(--brand-fontStack-sansSerif);
+  font-size: var(--brand-text-size-200);
+  font-weight: var(--base-text-weight-normal);
+  line-height: var(--brand-text-lineHeight-200);
+  letter-spacing: var(--brand-text-letterSpacing-200);
+  text-transform: none;
+}
+
+.Testimonial--variant-minimal .Testimonial-avatar {
+  width: var(--base-size-64);
+  height: var(--base-size-64);
+}
+
+@media screen and (min-width: 63.25rem) {
+  .Testimonial--variant-subtle .Testimonial__quoteWrapper,
+  .Testimonial--variant-default .Testimonial__quoteWrapper,
+  .Testimonial--variant-minimal .Testimonial__quoteWrapper {
+    gap: var(--base-size-48);
+  }
+
+  .Testimonial--variant-minimal.Testimonial--size-large .Testimonial-quote {
+    font-size: var(--brand-Testimonial-minimal-quote-fontSize-large);
+  }
+}
+
+@media screen and (min-width: 34rem) and (max-width: 47.99rem) {
+  .Testimonial--variant-minimal.Testimonial--size-large .Testimonial-quote {
+    font-size: var(--brand-text-size-700);
+  }
+}

package/components/TestimonialGroup/TestimonialGroup.css

@@ -0,0 +1,111 @@
+.TestimonialGroup {
+  width: 100%;
+  min-width: 0;
+  padding-block: calc(var(--base-size-48) + var(--base-size-8));
+  padding-inline: var(--base-size-32);
+}
+
+.TestimonialGroup__content {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+.TestimonialGroup__slides {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  width: 100%;
+}
+
+.TestimonialGroup__slide {
+  position: absolute;
+  width: 100%;
+  visibility: hidden;
+  pointer-events: none;
+}
+
+.TestimonialGroup__slide--active {
+  position: relative;
+  visibility: visible;
+  pointer-events: auto;
+}
+
+.TestimonialGroup__avatar {
+  flex: none;
+  border: var(--base-size-2) solid var(--brand-Testimonial-quoteMarkColor-green);
+  border-radius: 50%;
+}
+
+.TestimonialGroup__avatar.TestimonialGroup__avatar--size-large {
+  width: var(--base-size-48);
+  height: var(--base-size-48);
+}
+
+.TestimonialGroup__quoteMark,
+.TestimonialGroup__quote,
+.TestimonialGroup__media {
+  transition: opacity var(--brand-TestimonialGroup-fadeInDuration) ease-in-out;
+}
+
+.TestimonialGroup__testimonial--out .TestimonialGroup__quoteMark {
+  opacity: 0;
+  transition: opacity var(--brand-TestimonialGroup-fadeOutDuration) ease-in-out 120ms;
+}
+
+.TestimonialGroup__testimonial--out .TestimonialGroup__quote {
+  opacity: 0;
+  transition: opacity var(--brand-TestimonialGroup-fadeOutDuration) ease-in-out 80ms;
+}
+
+.TestimonialGroup__testimonial--out .TestimonialGroup__media {
+  opacity: 0;
+  transition: opacity var(--brand-TestimonialGroup-fadeOutDuration) ease-in-out 40ms;
+}
+
+.TestimonialGroup__testimonial--in .TestimonialGroup__quote {
+  transition-delay: 100ms;
+}
+
+.TestimonialGroup__testimonial--in .TestimonialGroup__media {
+  transition-delay: var(--brand-animation-duration-faster);
+}
+
+.TestimonialGroup__controls {
+  display: flex;
+  flex: none;
+  order: 1;
+  align-items: center;
+  margin-block-start: var(--base-size-32);
+  padding-block-start: var(--base-size-16);
+}
+
+.TestimonialGroup__content--expressive .TestimonialGroup__controls {
+  margin-block-start: 0;
+}
+
+.TestimonialGroup__announcement {
+  position: absolute;
+  width: var(--brand-borderWidth-thin);
+  height: var(--brand-borderWidth-thin);
+  padding: 0;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .TestimonialGroup__quoteMark,
+  .TestimonialGroup__quote,
+  .TestimonialGroup__media {
+    transition: none;
+  }
+}
+
+@media screen and (min-width: 63.25rem) {
+  .TestimonialGroup {
+    padding-block: var(--base-size-60);
+    padding-inline: var(--base-size-60);
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/brand-css",
-  "version": "0.80.0-rc.4bfa3a79",
+  "version": "0.80.0-rc.b232dc70",
   "description": "CSS stylesheets for Primer Brand components",
   "keywords": [
     "primer",