@primer/brand-css 0.68.0-rc.0963e67e → 0.68.0-rc.20c2136f

package/components/Button/Button.css

@@ -8,12 +8,13 @@
   vertical-align: middle;
   align-items: center;
   justify-content: center;
-  transition: box-shadow var(--brand-animation-duration-faster);
+  transition: background-color 0.2s, border-color 0.2s;
   text-decoration: none;
-  border-radius: var(--brand-borderRadius-medium);
+  border-radius: var(--base-size-6);
   cursor: pointer;
-  border: solid var(--brand-borderWidth-thick) transparent;
+  border: solid var(--brand-borderWidth-thin) transparent;
   background: none;
+  box-sizing: border-box;
   display: inline-flex;
   gap: var(--brand-control-medium-gap);
 }
@@ -34,6 +35,10 @@
   cursor: not-allowed;
 }
 
+.Button--size-small .Button__text {
+  display: flex;
+}
+
 .Button__text {
   position: relative;
 }
@@ -77,7 +82,7 @@
 }
 
 .Button--primary:not(.Button[disabled], .Button[aria-disabled='true'], [aria-expanded='true']):hover {
-  background: var(--brand-button-primary-bgColor-hover);
+  background-color: var(--brand-button-primary-bgColor-hover);
 }
 
 .Button--primary:not(.Button[disabled], .Button[aria-disabled='true']):active,
@@ -109,21 +114,20 @@
 /* secondary */
 
 .Button--secondary {
-  transition: background var(--brand-animation-duration-faster), border-color var(--brand-animation-duration-faster);
-  background: var(--brand-button-secondary-bgColor-rest);
+  background-color: var(--brand-button-secondary-bgColor-rest);
   border-color: var(--brand-button-secondary-borderColor-rest);
   color: var(--brand-button-secondary-fgColor-rest);
   backdrop-filter: blur(var(--base-size-20));
 }
 
 .Button--secondary:not(.Button[disabled], .Button[aria-disabled='true'], [aria-expanded='true']):hover {
-  background: var(--brand-button-secondary-bgColor-hover);
+  background-color: var(--brand-button-secondary-bgColor-hover);
   border-color: var(--brand-button-secondary-borderColor-hover);
 }
 
 .Button--secondary:not(.Button[disabled], .Button[aria-disabled='true']):active,
 .Button--secondary[aria-expanded='true'] {
-  background: var(--brand-button-secondary-bgColor-active);
+  background-color: var(--brand-button-secondary-bgColor-active);
   border-color: var(--brand-button-secondary-borderColor-active);
 }
 
@@ -144,8 +148,7 @@
 /* subtle */
 
 .Button--subtle {
-  transition: background var(--brand-animation-duration-faster), border-color var(--brand-animation-duration-faster);
-  background: var(--brand-button-subtle-bgColor-rest);
+  background-color: var(--brand-button-subtle-bgColor-rest);
   border-width: var(--brand-borderWidth-thin);
   border-color: var(--brand-button-subtle-borderColor-rest);
   color: var(--brand-color-text-default);
@@ -153,13 +156,13 @@
 }
 
 .Button--subtle:not(.Button[disabled], .Button[aria-disabled='true'], [aria-expanded='true']):hover {
-  background: var(--brand-button-subtle-bgColor-hover);
+  background-color: var(--brand-button-subtle-bgColor-hover);
   border-color: var(--brand-button-subtle-borderColor-hover);
 }
 
 .Button--subtle:not(.Button[disabled], .Button[aria-disabled='true']):active,
 .Button--subtle[aria-expanded='true'] {
-  background: var(--brand-button-subtle-bgColor-active);
+  background-color: var(--brand-button-subtle-bgColor-active);
   border-color: var(--brand-button-subtle-borderColor-active);
 }
 
@@ -186,7 +189,7 @@
 
 .Button--size-medium {
   min-height: var(--brand-control-medium-size);
-  padding: var(--brand-control-medium-paddingBlock-condensed) var(--brand-control-medium-paddingInline-spacious);
+  padding: var(--brand-control-medium-paddingBlock-condensed) var(--base-size-20);
 }
 
 .Button--size-large {

package/components/Hero/Hero.css

@@ -246,7 +246,7 @@
 .Hero-label {
   text-transform: uppercase;
   letter-spacing: 1px;
-  margin-block-end: var(--base-size-16);
+  margin-block-end: calc(var(--base-size-16) - var(--base-size-2));
   display: flex;
   align-items: center;
 }

package/components/Icon/Icon.css

@@ -44,7 +44,7 @@
 
 .Icon--background {
   padding: var(--base-size-12);
-  border-radius: var(--brand-borderRadius-medium);
+  border-radius: var(--base-size-12);
 }
 
 .Icon--color-default {

package/components/LogoSuite/LogoSuite.css

@@ -68,18 +68,7 @@
 .LogoSuite__logobar--variant-emphasis img,
 .LogoSuite__logobar--variant-emphasis a {
   width: auto;
-  height: var(--base-size-28);
-}
-
-@media screen and (min-width: 48rem) {
-  .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 {
-    height: var(--base-size-32);
-  }
+  height: var(--base-size-32);
 }
 
 .LogoSuite__logobar--variant-muted svg,
@@ -241,7 +230,6 @@
 .LogoSuite--gridline-expressive .LogoSuite__content {
   padding-inline: 0;
   gap: 0;
-  max-width: 618px; /* From the Figma design */
 }
 
 .LogoSuite--gridline-expressive .LogoSuite__textContainer {
@@ -276,8 +264,12 @@
 }
 
 @media screen and (min-width: 48rem) {
+  .LogoSuite--gridline-expressive {
+    padding-inline: 91px;
+  }
+
   .LogoSuite--gridline-expressive .LogoSuite__logobarContainer {
-    padding: var(--base-size-36);
+    padding: var(--base-size-40);
   }
   .LogoSuite--gridline-expressive .LogoSuite__content {
     border-inline: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);
@@ -288,6 +280,10 @@
 }
 
 @media screen and (min-width: 64rem) {
+  .LogoSuite--gridline-expressive {
+    padding-inline: 0;
+  }
+
   .LogoSuite--gridline-expressive .LogoSuite__content {
     max-width: 1280px;
   }

package/components/MediaPlaylist/MediaPlaylist.css

@@ -0,0 +1,358 @@
+.MediaPlaylist {
+  padding-block-start: var(--base-size-36);
+  padding-inline: var(--base-size-20);
+}
+
+@media screen and (max-width: 63.24rem) {
+  .MediaPlaylist {
+    width: 100%;
+    max-width: 38.625rem;
+    margin-inline: auto;
+    padding: 0;
+  }
+}
+
+.MediaPlaylist__layout {
+  display: flex;
+  flex-direction: column;
+  background: var(--brand-MediaPlaylist-bgColor);
+}
+
+.MediaPlaylist__playlist {
+  order: 2;
+  min-width: 0;
+  border-block-start: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);
+}
+
+.MediaPlaylist__heading {
+  display: flex;
+  min-height: var(--base-size-48);
+  align-items: center;
+  gap: var(--base-size-8);
+  padding: var(--base-size-12) var(--base-size-16);
+  border-block-end: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);
+  color: var(--brand-color-text-muted);
+  font-family: var(--brand-fontStack-monospace);
+  font-size: var(--brand-text-size-100);
+  line-height: var(--brand-text-lineHeight-100);
+  text-transform: uppercase;
+}
+
+.MediaPlaylist__headingLabel {
+  margin: 0;
+  color: inherit;
+  font-family: inherit;
+  font-size: inherit;
+  font-weight: inherit;
+  letter-spacing: inherit;
+  line-height: inherit;
+  text-transform: inherit;
+}
+
+.MediaPlaylist__headingCounter {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--base-size-8);
+  color: var(--brand-color-text-default);
+}
+
+.MediaPlaylist__headingCounter::before {
+  content: '•';
+  color: var(--brand-color-text-muted);
+}
+
+.MediaPlaylist__mediaPanels {
+  order: 1;
+  width: 100%;
+  padding: var(--base-size-16);
+}
+
+.MediaPlaylist__mediaPanel {
+  min-width: 0;
+}
+
+.MediaPlaylist__mediaPanel[hidden] {
+  display: none;
+}
+
+.MediaPlaylist__panel {
+  display: flex;
+  flex-direction: column;
+  gap: var(--base-size-20);
+  width: 100%;
+}
+
+.MediaPlaylist__panelContent {
+  max-width: var(--brand-Prose-lineLength);
+}
+
+.MediaPlaylist__media {
+  overflow: hidden;
+  background-color: var(--base-color-scale-black-0);
+}
+
+.MediaPlaylist__media :is(img, picture, video, iframe) {
+  display: block;
+  width: 100%;
+  max-width: 100%;
+}
+
+.MediaPlaylist__tablist {
+  order: 2;
+  display: flex;
+  flex-direction: column;
+  overflow-x: hidden;
+}
+
+.MediaPlaylist--overflowItems .MediaPlaylist__tablist {
+  max-block-size: calc((3 * var(--base-size-64)) + (6 * var(--base-size-12)));
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  scroll-padding-block: var(--base-size-24);
+}
+
+.MediaPlaylist__pagination {
+  order: 3;
+  display: flex;
+  justify-content: center;
+  margin: 0;
+  padding: var(--base-size-12) var(--base-size-16) var(--base-size-16);
+  border-block-start: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);
+}
+
+.MediaPlaylist__item {
+  position: relative;
+  min-width: 0;
+  display: flex;
+  flex: 0 0 auto;
+  flex-direction: column;
+  align-items: flex-start;
+  min-block-size: calc(var(--base-size-64) + (2 * var(--base-size-12)));
+  overflow-x: hidden;
+}
+
+.MediaPlaylist__item::before {
+  content: '';
+  position: absolute;
+  inset-block-end: 0;
+  inset-inline: 0;
+  height: var(--brand-borderWidth-thin);
+  transform: scaleY(1);
+  transform-origin: 50% 100%;
+  background-color: var(--brand-color-border-muted);
+  transition: transform var(--brand-animation-duration-fast) ease,
+    background-color var(--brand-animation-duration-fast) ease;
+}
+
+.MediaPlaylist__item--selected {
+  background-color: var(--brand-color-canvas-subtle);
+}
+
+.MediaPlaylist__item--selected::before {
+  transform: scaleY(2);
+  background-color: var(--brand-color-accent-primary);
+}
+
+.MediaPlaylist__itemHeading {
+  display: block;
+  margin: 0;
+  color: var(--brand-color-text-muted);
+}
+
+.MediaPlaylist__item--selected .MediaPlaylist__itemHeading {
+  color: var(--brand-color-text-default);
+}
+
+.MediaPlaylist__itemHeadingContent {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.MediaPlaylist__itemHeadingDetails {
+  display: flex;
+  flex-direction: column;
+  gap: var(--base-size-4);
+  min-width: 0;
+}
+
+.MediaPlaylist__itemHeadingTitle {
+  display: -webkit-box;
+  color: inherit;
+  overflow: hidden;
+  overflow-wrap: anywhere;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+}
+
+.MediaPlaylist__tab {
+  box-sizing: border-box;
+  width: 100%;
+  min-block-size: calc(var(--base-size-64) + (2 * var(--base-size-12)));
+  border: 0;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  text-align: left;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  cursor: pointer;
+  outline: none;
+  padding: var(--base-size-12) var(--base-size-16);
+}
+
+.MediaPlaylist__tabContent {
+  display: flex;
+  align-items: flex-start;
+  min-width: 0;
+  width: 100%;
+  gap: var(--base-size-12);
+}
+
+.MediaPlaylist__thumbnail {
+  display: block;
+  flex-shrink: 0;
+  width: var(--base-size-112);
+  block-size: calc(var(--base-size-64) - var(--brand-borderWidth-thin));
+  overflow: hidden;
+  aspect-ratio: 16 / 9;
+  border-radius: var(--brand-borderRadius-small);
+  background-color: var(--brand-color-canvas-subtle);
+}
+
+.MediaPlaylist__thumbnail > * {
+  display: block;
+  width: 100%;
+  height: 100%;
+  -o-object-fit: cover;
+     object-fit: cover;
+}
+
+.MediaPlaylist__tab:focus-visible {
+  outline: var(--brand-borderWidth-thick) solid var(--brand-color-focus);
+  outline-offset: var(--base-size-4);
+}
+
+.MediaPlaylist__content {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--base-size-12);
+}
+
+@media screen and (min-width: 38.625rem) {
+  .MediaPlaylist {
+    border-inline: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);
+  }
+}
+
+@media screen and (min-width: 63.25rem) {
+  .MediaPlaylist {
+    box-sizing: border-box;
+    width: 100%;
+    max-inline-size: 80rem;
+    margin-inline: auto;
+    padding: 0;
+    border-inline: none;
+  }
+
+  .MediaPlaylist__layout {
+    --brand-MediaPlaylist-desktopGutter: 3.75rem;
+    --brand-MediaPlaylist-sidebarWidth: 27rem;
+
+    display: grid;
+    box-sizing: border-box;
+    width: 100%;
+    grid-template-areas: 'media tabs';
+    grid-template-columns: minmax(0, 1fr) minmax(0, var(--brand-MediaPlaylist-sidebarWidth));
+    -moz-column-gap: var(--brand-MediaPlaylist-desktopGutter);
+         column-gap: var(--brand-MediaPlaylist-desktopGutter);
+    padding-inline-start: var(--brand-MediaPlaylist-desktopGutter);
+  }
+
+  .MediaPlaylist__playlist {
+    grid-area: tabs;
+    display: flex;
+    flex-direction: column;
+    align-self: stretch;
+    padding-block-start: calc(var(--base-size-48) + var(--base-size-12));
+    border: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);
+  }
+
+  .MediaPlaylist--overflowItems .MediaPlaylist__tablist {
+    max-block-size: calc((3 * var(--base-size-64)) + (6 * var(--base-size-20)));
+  }
+
+  .MediaPlaylist__mediaPanels {
+    grid-area: media;
+    display: flex;
+    align-items: flex-start;
+    justify-content: flex-start;
+    padding-block: var(--base-size-80);
+    padding-inline: 0;
+  }
+
+  .MediaPlaylist__mediaPanel {
+    width: 100%;
+  }
+
+  .MediaPlaylist__panel {
+    gap: var(--base-size-40);
+  }
+
+  .MediaPlaylist__panelContent {
+    width: 100%;
+  }
+
+  .MediaPlaylist__media {
+    width: 100%;
+  }
+
+  .MediaPlaylist__media iframe {
+    aspect-ratio: 16 / 9;
+    border-radius: var(--base-size-6);
+  }
+
+  .MediaPlaylist__itemHeadingDetails {
+    font-size: var(--brand-text-size-200);
+    line-height: var(--brand-text-lineHeight-200);
+  }
+
+  .MediaPlaylist__panelContent :is(h1, h2, h3) + p {
+    margin-block-start: var(--base-size-12);
+  }
+
+  .MediaPlaylist__heading {
+    min-height: auto;
+    padding-block-start: var(--base-size-24);
+    padding-block-end: var(--base-size-12);
+    padding-inline-start: var(--base-size-32);
+    padding-inline-end: var(--brand-MediaPlaylist-desktopGutter);
+  }
+
+  .MediaPlaylist__item {
+    min-block-size: calc(var(--base-size-64) + (2 * var(--base-size-20)));
+  }
+
+  .MediaPlaylist__tab {
+    min-block-size: calc(var(--base-size-64) + (2 * var(--base-size-20)));
+    padding-block: var(--base-size-20);
+    padding-inline-start: var(--base-size-32);
+    padding-inline-end: var(--brand-MediaPlaylist-desktopGutter);
+  }
+
+  .MediaPlaylist__tabContent {
+    align-items: center;
+  }
+}
+
+@media screen and (min-width: 80rem) {
+  .MediaPlaylist {
+    border-inline: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);
+  }
+
+  .MediaPlaylist__playlist {
+    border-inline-end: 0;
+  }
+}

package/components/Pagination/Pagination.css

@@ -6,133 +6,75 @@
 
 .Pagination__inner {
   display: inline-flex;
+  flex-wrap: wrap;
   align-items: center;
+  justify-content: center;
   gap: var(--base-size-8);
 }
 
-.Pagination__item {
-  min-width: var(--base-size-32);
-  height: var(--base-size-32);
-  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);
-  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 span {
-  font-size: var(--brand-text-size-100);
-  line-height: var(--base-size-20);
-}
-
-.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__pageItem {
+  transition: none; /* Prevents flash of background color when changing pages */
+  --brand-button-subtle-borderColor-rest: transparent;
+  --brand-button-subtle-borderColor-hover: transparent;
+  --brand-button-subtle-borderColor-active: transparent;
 }
 
-.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__controlContent {
+  position: relative;
+  display: inline-flex;
+  gap: var(--base-size-4);
+  align-items: center;
 }
 
-.Pagination__showPages .Pagination__item[rel='prev'] span,
-.Pagination__showPages .Pagination__item[rel='next'] span {
+.Pagination__controlArrowWrapper {
   display: none;
+  flex-shrink: 0;
 }
 
-.Pagination__item[rel='prev'] svg,
-.Pagination__item[rel='next'] svg {
-  margin-inline: 0;
-  position: relative;
+.Pagination__controlArrowWrapper--previous {
+  transform: translateX(var(--base-size-2));
 }
 
-.Pagination__item[rel='prev'] svg {
-  left: var(--base-size-2);
+.Pagination__controlArrowWrapper--next {
+  transform: translateX(calc(var(--base-size-2) * -1));
 }
 
-.Pagination__item[rel='next'] svg {
-  right: var(--base-size-2);
+.Pagination__controlArrow {
+  width: var(--base-size-16);
+  height: var(--base-size-16);
 }
 
-@media screen and (min-width: 48rem) {
-  .Pagination__item[rel='prev'] span,
-  .Pagination__item[rel='next'] span {
-    display: block !important;
+@media screen and (max-width: 47.99rem) {
+  .Pagination__controlItem {
+    padding-inline: var(--base-size-8);
+    --brand-button-subtle-borderColor-rest: transparent;
+    --brand-button-subtle-borderColor-hover: transparent;
+    --brand-button-subtle-borderColor-active: transparent;
   }
 
-  .Pagination__item[rel='prev'] svg,
-  .Pagination__item[rel='next'] svg {
-    margin-inline: unset;
-    left: 0;
-    right: 0;
+  .Pagination__controlText {
+    position: absolute;
+    width: var(--base-size-2);
+    height: var(--base-size-2);
+    padding: 0;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    word-wrap: normal;
+    border: 0;
   }
 
-  .Pagination__item[rel='prev'][aria-disabled] svg,
-  .Pagination__item[rel='next'][aria-disabled] svg {
-    display: none;
+  .Pagination__controlArrowWrapper {
+    display: flex;
   }
-}
 
-@media (forced-colors: active) {
-  .Pagination__item[aria-current],
-  .Pagination__item[aria-current]:hover {
-    border-color: Highlight;
-    border-width: var(--brand-borderWidth-thicker);
+  .Pagination__controlItem > span {
+    display: flex;
+    align-items: center;
   }
-}
 
-/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
-@media (prefers-reduced-motion: reduce) {
-  .Pagination,
-  .Pagination::before,
-  .Pagination::after,
-  .Pagination * {
-    animation: none !important;
-    transition: none !important;
-    scroll-behavior: auto !important;
+  .Pagination__controlItem > span > span {
+    display: flex;
+    align-items: center;
+    line-height: 0;
   }
 }