@primer/brand-css 0.68.0-rc.01cf5f7c → 0.68.0-rc.20c2136f

package/components/ActionMenu/ActionMenu.css

@@ -70,6 +70,10 @@
   padding: var(--brand-control-medium-paddingBlock-condensed) var(--brand-control-medium-paddingInline-normal); /* Override the default button padding */
 }
 
+.ActionMenu__inner-button-dropdown-icon {
+  vertical-align: middle !important;
+}
+
 .ActionMenu__innerButton--split-button:last-child {
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;

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,10 +35,21 @@
   cursor: not-allowed;
 }
 
+.Button--size-small .Button__text {
+  display: flex;
+}
+
 .Button__text {
   position: relative;
 }
 
+.Button--label {
+  font-family: var(--brand-body-fontFamily);
+  font-style: normal;
+  font-weight: var(--base-text-weight-medium);
+  text-align: center;
+}
+
 .Button__icon-visual {
   display: flex;
   align-self: center;
@@ -63,19 +75,20 @@
 .Button--primary {
   color: var(--brand-button-primary-fgColor-rest);
   background-color: var(--brand-button-primary-bgColor-rest);
-  border: solid var(--brand-borderWidth-thin) var(--brand-button-primary-borderColor-rest);
+}
+
+.Button--size-small.Button--primary {
+  border-width: var(--brand-borderWidth-thin);
 }
 
 .Button--primary:not(.Button[disabled], .Button[aria-disabled='true'], [aria-expanded='true']):hover {
   background-color: var(--brand-button-primary-bgColor-hover);
-  border-color: var(--brand-button-primary-borderColor-hover);
 }
 
 .Button--primary:not(.Button[disabled], .Button[aria-disabled='true']):active,
 .Button--primary[aria-expanded='true'] {
-  background-color: var(--brand-button-primary-bgColor-active);
+  background: var(--brand-button-primary-bgColor-active);
   border-color: var(--brand-button-primary-borderColor-active);
-  box-shadow: var(--brand-button-primary-shadow-active);
 }
 
 .Button--label-primary {
@@ -86,7 +99,6 @@
 .Button--primary[aria-disabled='true'],
 .Button--primary.Button--disabled {
   background-color: var(--brand-button-primary-bgColor-disabled);
-  border-color: var(--brand-button-primary-borderColor-disabled);
 }
 
 .Button--primary:disabled .Button-arrow--disabled,
@@ -99,61 +111,23 @@
   color: var(--brand-button-primary-fgColor-disabled);
 }
 
-/* accent */
-
-.Button--accent {
-  color: var(--brand-button-accent-fgColor-rest);
-  background-color: var(--brand-button-accent-bgColor-rest);
-}
-
-.Button--size-small.Button--accent {
-  border-width: var(--brand-borderWidth-thin);
-}
-
-.Button--accent:not(.Button[disabled], .Button[aria-disabled='true'], [aria-expanded='true']):hover {
-  background: var(--brand-button-accent-bgColor-hover);
-}
-
-.Button--accent:not(.Button[disabled], .Button[aria-disabled='true']):active,
-.Button--accent[aria-expanded='true'] {
-  background-color: var(--brand-button-accent-bgColor-active);
-  border-color: var(--brand-button-accent-borderColor-active);
-}
-
-.Button--label-accent {
-  color: var(--brand-button-accent-fgColor-rest);
-}
-
-.Button--accent:disabled,
-.Button--accent[aria-disabled='true'],
-.Button--accent.Button--disabled {
-  background-color: var(--brand-button-accent-bgColor-disabled);
-}
-
-.Button--accent:disabled .Button-arrow--disabled,
-.Button--accent[aria-disabled='true'] .Button-arrow--disabled,
-.Button--accent.Button--disabled .Button-arrow--disabled,
-.Button--accent:disabled .Button__icon-visual--disabled,
-.Button--accent[aria-disabled='true'] .Button__icon-visual--disabled,
-.Button--accent.Button--disabled .Button__icon-visual--disabled,
-.Button--label-accent.Button-label--disabled {
-  color: var(--brand-button-accent-fgColor-disabled);
-}
-
 /* secondary */
 
 .Button--secondary {
-  transition: background-color, border-color 200ms;
+  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-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-color: var(--brand-button-secondary-bgColor-active);
   border-color: var(--brand-button-secondary-borderColor-active);
 }
 
@@ -175,18 +149,21 @@
 
 .Button--subtle {
   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);
-  transition: background-color, border-color var(--brand-animation-duration-faster);
+  backdrop-filter: blur(var(--base-size-20));
 }
 
 .Button--subtle:not(.Button[disabled], .Button[aria-disabled='true'], [aria-expanded='true']):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-color: var(--brand-button-subtle-bgColor-active);
-  border-color: transparent;
+  border-color: var(--brand-button-subtle-borderColor-active);
 }
 
 .Button--label-subtle {
@@ -212,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 {
@@ -227,8 +204,9 @@
 }
 
 .Button--label-medium {
-  font-size: var(--brand-text-subhead-size-medium);
-  line-height: var(--brand-text-subhead-lineHeight-medium);
+  font-size: var(--brand-text-size-200);
+  line-height: var(--brand-text-lineHeight-200);
+  letter-spacing: 0.01rem;
 }
 
 .Button--label-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;
+  }
+}