@primer/brand-css 0.78.0-rc.bcc08c15 → 0.78.0-rc.c01d8371

package/components/SubNav/SubNav.css

@@ -97,9 +97,50 @@
   display: none;
 }
 
+.SubNav__overflow-container {
+  display: none;
+}
+
+.SubNav__overflow-menu {
+  position: absolute;
+  inset: auto;
+  margin: 0;
+  padding: 0;
+  z-index: 10;
+  width: -moz-max-content;
+  width: max-content;
+  min-width: var(--brand-SubNav-width-overflowMenuMin);
+  max-width: calc(100vw - var(--brand-SubNav-width-overflowMenuInset));
+  max-height: calc(100dvh - var(--brand-SubNav-height-overflowMenuInset));
+  overflow-x: hidden;
+  overflow-y: auto;
+  background-color: var(--brand-SubNav-overflowMenu-bgColor-rest);
+  border: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);
+  border-start-start-radius: 0;
+  border-start-end-radius: 0;
+  border-end-start-radius: var(--brand-borderRadius-medium);
+  border-end-end-radius: var(--brand-borderRadius-medium);
+  box-shadow: none;
+  transform: translateY(calc(0px - var(--brand-SubNav-offset-overflowMenu)));
+  animation: fade-in var(--brand-animation-duration-faster) var(--brand-animation-easing-default);
+}
+
+.SubNav__overflow-menu::backdrop {
+  background-color: transparent;
+}
+
+.SubNav__overflow-menu-list {
+  display: grid;
+  gap: var(--brand-borderWidth-thin);
+  list-style: none;
+  margin: 0;
+  padding: var(--base-size-8);
+  width: 100%;
+}
+
 /*
-   * Anchor Nav Submenu
-   */
+ * Anchor Nav Submenu
+ */
 
 .SubNav__anchor-menu-outer-container {
   position: sticky;
@@ -588,6 +629,7 @@
   .SubNav__header-container {
     display: flex;
     align-items: center;
+    flex-shrink: 0;
   }
 
   .SubNav__links-overlay {
@@ -595,10 +637,76 @@
     display: flex;
     gap: var(--base-size-2);
     z-index: 92;
-    flex-grow: 1;
+    flex: 1 1 0;
+    min-width: 0;
+    align-self: stretch;
     padding-inline-start: var(--base-size-24);
   }
 
+  .SubNav__links-overlay > li {
+    flex: 0 0 auto;
+    white-space: nowrap;
+  }
+
+  .SubNav__link--in-overlay {
+    display: inline-flex;
+    align-items: center;
+  }
+
+  .SubNav__link-item--overflowed {
+    position: absolute;
+    width: -moz-max-content;
+    width: max-content;
+    visibility: hidden;
+    pointer-events: none;
+  }
+
+  .SubNav__overflow-container {
+    display: flex;
+    align-items: center;
+    align-self: stretch;
+    position: absolute;
+    visibility: hidden;
+    pointer-events: none;
+  }
+
+  .SubNav__overflow-container--visible {
+    position: relative;
+    visibility: visible;
+    pointer-events: auto;
+  }
+
+  .SubNav__overflow-toggle {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--base-size-4);
+    padding: var(--base-size-4) var(--base-size-12);
+    color: var(--brand-SubNav-color-link-rest);
+    background: var(--brand-SubNav-overflowMenu-toggle-bgColor-rest);
+    border: 0;
+    border-radius: var(--brand-borderRadius-full);
+    font: inherit;
+    cursor: pointer;
+  }
+
+  .SubNav__overflow-toggle:hover {
+    background-color: var(--brand-SubNav-overflowMenu-toggle-bgColor-hover);
+  }
+
+  .SubNav__overflow-toggle[aria-expanded='true'],
+  .SubNav__overflow-toggle--active {
+    background-color: var(--brand-SubNav-overflowMenu-toggle-bgColor-active);
+  }
+
+  .SubNav__overflow-toggle .SubNav__link-label {
+    color: inherit;
+  }
+
+  .SubNav__overflow-toggle:focus-visible {
+    outline: var(--brand-borderWidth-thick) solid var(--brand-color-focus);
+    outline-offset: var(--base-size-2);
+  }
+
   .SubNav__link {
     text-decoration: none !important; /* dotcom override */
     transition: color 0.2s var(--brand-animation-easing-glide);
@@ -762,18 +870,63 @@
   .SubNav__sub-menu--anchor {
     padding-inline: var(--base-size-32);
   }
-}
 
-@keyframes fade-in {
-  0% {
-    opacity: 0;
+  .SubNav__overflow-menu .SubNav__link {
+    display: block;
+    width: 100%;
+    min-height: var(--brand-SubNav-height-overflowMenuItemMin);
+    padding: var(--base-size-8) var(--base-size-12);
+    color: var(--brand-SubNav-overflowMenu-fgColor-rest);
+    white-space: normal;
+    overflow-wrap: anywhere;
+    border-radius: var(--brand-borderRadius-medium);
+    background-color: var(--brand-SubNav-overflowMenu-bgColor-rest);
   }
-  100% {
+
+  .SubNav__overflow-menu .SubNav__link .SubNav__link-label {
+    color: inherit;
+    font-weight: var(--base-text-weight-normal);
+    line-height: var(--brand-text-lineHeight-200);
+  }
+
+  .SubNav__overflow-menu .SubNav__link:hover,
+  .SubNav__overflow-menu .SubNav__link:focus,
+  .SubNav__overflow-menu .SubNav__link:focus-visible,
+  .SubNav__overflow-menu .SubNav__link[aria-current]:not([aria-current='false']) {
+    color: var(--brand-SubNav-overflowMenu-fgColor-hover);
+    background-color: var(--brand-SubNav-overflowMenu-bgColor-hover);
+  }
+
+  .SubNav__overflow-menu .SubNav__link:focus-visible {
+    box-shadow: inset 0 0 0 var(--brand-borderWidth-thick) var(--brand-color-focus);
+    outline: none;
+  }
+
+  .SubNav__overflow-menu .SubNav__link--has-sub-menu {
+    display: block;
+    background: transparent;
+    padding: 0;
+  }
+
+  .SubNav__overflow-menu .SubNav__link--has-sub-menu::after {
+    content: none;
+  }
+
+  .SubNav__overflow-menu .SubNav__sub-menu--dropdown {
+    position: static;
+    width: auto;
+    margin: 0;
+    padding: 0;
+    padding-inline-start: var(--base-size-16);
+    border: 0;
+    background-color: var(--brand-SubNav-overflowMenu-bgColor-rest);
+    visibility: visible;
     opacity: 1;
+    transform: none;
   }
 }
 
-@keyframes fade-in-down {
+@keyframes fade-in {
   0% {
     opacity: 0;
   }

package/components/SubdomainNavBar/SubdomainNavBar.css

@@ -322,9 +322,6 @@
   color: var(--brand-color-text-default);
   font-family: var(--brand-heading-fontFamily);
   font-weight: var(--base-text-weight-normal);
-  font-size: var(--base-size-20);
-  line-height: var(--base-size-20);
-  padding: var(--base-size-8) var(--base-size-16) var(--base-size-16) var(--base-size-28);
   text-decoration: none;
 }
 
@@ -343,85 +340,42 @@
 }
 
 @media screen and (max-width: 767px) {
-  .SubdomainNavBar-link:first-of-type {
-    padding-top: var(--base-size-24);
-  }
-
   .SubdomainNavBar-link--title {
     font-weight: var(--base-text-weight-medium);
   }
 }
 
 @media screen and (min-width: 48rem) {
-  .SubdomainNavBar-link {
-    font-family: var(--brand-heading-fontFamily);
-    font-weight: var(--base-text-weight-normal);
-    font-size: var(--base-size-16);
-    line-height: var(--base-size-16);
-    padding: var(--base-size-16) var(--base-size-16);
-  }
-
-  .SubdomainNavBar-link-text::after {
-    content: '';
-    position: absolute;
-    bottom: -6px;
-    left: 0;
+  .SubdomainNavBar .SubdomainNavBar-overflow-menu-item .SubdomainNavBar-link {
     width: 100%;
-    height: 2px;
-    background-color: var(--brand-SubdomainNavBar-border-nav-default);
-    opacity: 0;
-    transition: opacity var(--brand-animation-duration-fast), transform var(--brand-animation-duration-fast);
-    transform: scale(0);
-    transform-origin: center;
-  }
-
-  .SubdomainNavBar-link:hover .SubdomainNavBar-link-text::after,
-  .SubdomainNavBar-link:focus .SubdomainNavBar-link-text::after {
-    opacity: 1;
-    transform: scale(0.75);
-  }
-
-  .SubdomainNavBar-link:active .SubdomainNavBar-link-text::after {
-    background-color: var(--brand-SubdomainNavBar-border-nav-pressed);
-    transform: scale(0.75);
-  }
-
-  .SubdomainNavBar-overflow-menu-item .SubdomainNavBar-link {
+    min-height: var(--base-size-40);
+    padding: var(--base-size-8) var(--base-size-12);
+    color: var(--brand-color-text-muted);
+    background-color: var(--brand-color-canvas-default);
+    border-radius: var(--brand-borderRadius-medium);
+    font-size: var(--brand-text-size-100);
+    line-height: var(--brand-text-lineHeight-200);
     transition: background-color var(--brand-animation-easing-default) 250ms;
-    background-color: var(--brand-SubdomainNavBar-canvas-overflow-default);
-    color: var(--brand-SubdomainNavBar-fg-overflow-default);
   }
 
-  .SubdomainNavBar-overflow-menu-item .SubdomainNavBar-link .SubdomainNavBar-link-text::after {
-    display: none;
-  }
-
-  .SubdomainNavBar-overflow-menu-item .SubdomainNavBar-link:hover {
-    background-color: var(--brand-SubdomainNavBar-canvas-overflow-hover);
+  .SubdomainNavBar .SubdomainNavBar-overflow-menu-item .SubdomainNavBar-link:hover,
+  .SubdomainNavBar .SubdomainNavBar-overflow-menu-item .SubdomainNavBar-link:focus,
+  .SubdomainNavBar .SubdomainNavBar-overflow-menu-item .SubdomainNavBar-link:focus-visible {
+    color: var(--brand-color-text-default);
+    background-color: var(--brand-color-canvas-subtle);
   }
 
-  .SubdomainNavBar-overflow-menu-item .SubdomainNavBar-link:focus,
-  .SubdomainNavBar-overflow-menu-item .SubdomainNavBar-link:focus-visible {
-    box-shadow: inset 0px 0px 0px 2px var(--brand-color-focus);
+  .SubdomainNavBar .SubdomainNavBar-overflow-menu-item .SubdomainNavBar-link:focus,
+  .SubdomainNavBar .SubdomainNavBar-overflow-menu-item .SubdomainNavBar-link:focus-visible {
+    box-shadow: inset 0 0 0 var(--brand-borderWidth-thick) var(--brand-color-focus);
     outline: none;
   }
 }
 
-@media screen and (min-width: 63.25rem) {
-  .SubdomainNavBar-link {
-    padding: var(--base-size-16) var(--base-size-24);
-  }
-}
-
 .SubdomainNavBar-more-link {
   display: none;
 }
 
-.SubdomainNavBar-more-link[aria-expanded='true']:hover::after,
-.SubdomainNavBar-more-link[aria-expanded='true']:focus::after {
-  display: none;
-}
-
 @media screen and (min-width: 48rem) {
   .SubdomainNavBar-more-link {
     cursor: pointer;
@@ -436,25 +390,30 @@
   }
 }
 
-.SubdomainNavBar-overflow-menu {
+.SubdomainNavBar .SubdomainNavBar-overflow-menu {
   position: absolute;
   z-index: 100;
   right: auto;
   background-color: var(--brand-color-canvas-default);
-  border-radius: var(--brand-borderRadius-large);
-  animation: fade-in-down 0.25s, enlarge-shadow 250ms forwards;
+  border: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);
+  border-start-start-radius: 0;
+  border-start-end-radius: 0;
+  border-end-start-radius: var(--brand-borderRadius-medium);
+  border-end-end-radius: var(--brand-borderRadius-medium);
+  animation: fade-in-down-overflow var(--brand-animation-duration-faster);
   animation-timing-function: var(--brand-animation-easing-default);
-  box-shadow: 0px 8px 24px rgba(1, 4, 9, 0.15);
+  min-width: calc(var(--base-size-128) + var(--base-size-32));
+  transform: translateY(calc(0px - var(--base-size-4)));
   overflow: hidden;
 }
 
-.SubdomainNavBar-overflow-menu-list {
+.SubdomainNavBar .SubdomainNavBar-overflow-menu-list {
   display: grid;
+  gap: var(--brand-borderWidth-thin);
   list-style-type: none;
-  padding: 0;
+  padding: var(--base-size-8);
   margin: 0;
-  width: -moz-max-content;
-  width: max-content;
+  width: 100%;
 }
 
 /*
@@ -1316,47 +1275,6 @@
     outline-offset: var(--base-size-2);
   }
 
-  .SubdomainNavBar .SubdomainNavBar-link-text::after {
-    display: none;
-  }
-
-  .SubdomainNavBar .SubdomainNavBar-overflow-menu {
-    animation: fade-in-down-overflow var(--brand-animation-duration-faster);
-    animation-timing-function: var(--brand-animation-easing-default);
-    border: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);
-    border-start-start-radius: 0;
-    border-start-end-radius: 0;
-    border-end-start-radius: var(--brand-borderRadius-medium);
-    border-end-end-radius: var(--brand-borderRadius-medium);
-    box-shadow: none;
-    min-width: calc(var(--base-size-128) + var(--base-size-32));
-    transform: translateY(calc(0px - var(--base-size-4)));
-  }
-
-  .SubdomainNavBar .SubdomainNavBar-overflow-menu-list {
-    gap: var(--brand-borderWidth-thin);
-    padding: var(--base-size-8);
-    width: 100%;
-  }
-
-  .SubdomainNavBar .SubdomainNavBar-overflow-menu-item .SubdomainNavBar-link {
-    width: 100%;
-    min-height: var(--base-size-40);
-    padding: var(--base-size-8) var(--base-size-12);
-    color: var(--brand-color-text-muted);
-    background-color: var(--brand-color-canvas-default);
-    border-radius: var(--brand-borderRadius-medium);
-    font-size: var(--brand-text-size-100);
-    line-height: var(--brand-text-lineHeight-200);
-  }
-
-  .SubdomainNavBar .SubdomainNavBar-overflow-menu-item .SubdomainNavBar-link:hover,
-  .SubdomainNavBar .SubdomainNavBar-overflow-menu-item .SubdomainNavBar-link:focus,
-  .SubdomainNavBar .SubdomainNavBar-overflow-menu-item .SubdomainNavBar-link:focus-visible {
-    color: var(--brand-color-text-default);
-    background-color: var(--brand-color-canvas-subtle);
-  }
-
   @media (prefers-reduced-motion: no-preference) {
     .SubdomainNavBar
       .SubdomainNavBar-primary-nav-list-item:not(.SubdomainNavBar-overflow-menu-item)
@@ -1849,17 +1767,6 @@
   }
 }
 
-@keyframes enlarge-shadow {
-  0% {
-    scale: 0.98;
-    box-shadow: 0px 8px 0 rgba(1, 4, 9, 0.15);
-  }
-  100% {
-    scale: 1;
-    box-shadow: 0px 8px 24px rgba(1, 4, 9, 0.15);
-  }
-}
-
 @keyframes fade-in-down-staggered {
   0% {
     opacity: 0;

package/components/Tiles/Tiles.css

@@ -4,89 +4,52 @@
 }
 
 .Tiles-grid {
-  --tiles-columns: 2;
+  --tiles-columns: var(--tiles-columns-xsmall);
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   list-style: none;
   margin: 0;
+  margin-inline: auto;
   padding: 0;
 }
 
+.Tiles--layout-default .Tiles-grid,
 .Tiles--layout-compact .Tiles-grid {
-  --tiles-columns: 4;
-}
-
-@media screen and (min-width: 48rem) {
-  .Tiles--layout-default .Tiles-grid {
-    --tiles-columns: 4;
-  }
+  max-width: min(100%, calc(var(--brand-Tiles-item-maxSize) * var(--tiles-columns)));
 }
 
 @media screen and (min-width: 34rem) and (max-width: 47.99rem) {
   .Tiles-grid {
-    --tiles-columns: 3;
-  }
-}
-
-@media screen and (min-width: 63.25rem) {
-  .Tiles--layout-default .Tiles-grid {
-    --tiles-columns: 6;
+    --tiles-columns: var(--tiles-columns-small);
   }
 }
 
 @media screen and (min-width: 48rem) {
-  .Tiles--layout-compact .Tiles-grid {
-    --tiles-columns: 6;
+  .Tiles-grid {
+    --tiles-columns: var(--tiles-columns-medium);
   }
 }
 
 @media screen and (min-width: 63.25rem) {
-  .Tiles--layout-compact .Tiles-grid {
-    --tiles-columns: 8;
+  .Tiles-grid {
+    --tiles-columns: var(--tiles-columns-large);
   }
 }
 
 .Tiles--variant-gridlines .Tiles-grid {
-  --tiles-grid-border-color: var(--brand-color-border-muted);
-  position: relative;
   padding-right: var(--brand-borderWidth-thin);
   padding-bottom: var(--brand-borderWidth-thin);
 }
 
-.Tiles--variant-gridlines .Tiles-grid::before,
-.Tiles--variant-gridlines .Tiles-grid::after {
-  content: '';
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  width: 0;
-  border-left: var(--brand-borderWidth-thin) solid var(--tiles-grid-border-color);
-  z-index: 1;
-  pointer-events: none;
-}
-
-.Tiles--variant-gridlines .Tiles-grid::before {
-  left: 0;
-}
-
-.Tiles--variant-gridlines .Tiles-grid::after {
-  right: 0;
-}
-
-@media screen and (min-width: 63.25rem) {
-  .Tiles--variant-gridlines.Tiles--layout-default .Tiles-grid:not(:has(> .Tiles-item:nth-child(6))),
-  .Tiles--variant-gridlines.Tiles--layout-compact .Tiles-grid:not(:has(> .Tiles-item:nth-child(8))) {
-    --tiles-grid-border-color: transparent;
-  }
-}
-
 .Tiles-item {
   --tiles-inset-shadow: inset 0 0 0 transparent;
   position: relative;
   display: flex;
   flex-direction: column;
   width: calc(100% / var(--tiles-columns));
+  max-width: var(--brand-Tiles-item-maxSize);
+  max-height: var(--brand-Tiles-item-maxSize);
   box-sizing: border-box;
   background-color: var(--brand-tiles-bgColor-rest);
   border-top: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/brand-css",
-  "version": "0.78.0-rc.bcc08c15",
+  "version": "0.78.0-rc.c01d8371",
   "description": "CSS stylesheets for Primer Brand components",
   "keywords": [
     "primer",