feat: add CSS Layer support to navigation and skeleton styles

.changeset/css-layers-navigation-skeletons.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+ScrollableRegion, Select, SideNav, Skeleton, SkeletonAvatar, SkeletonText, Stack, StateLabel, SubNav, TabNav: Add CSS layer support for component styles

packages/react/src/ScrollableRegion/ScrollableRegion.module.css

@@ -1,8 +1,10 @@
-.ScrollableRegion {
-  /* When setting overflow, we also set `position: relative` to avoid
-  *  `position: absolute` items breaking out of the container and causing
-  *  scrollbars on the page. This can occur with common classes like `sr-only`
-  *  and can cause difficult to track down layout issues */
-  position: relative;
-  overflow: auto;
+@layer primer.components.ScrollableRegion {
+  .ScrollableRegion {
+    /* When setting overflow, we also set `position: relative` to avoid
+    *  `position: absolute` items breaking out of the container and causing
+    *  scrollbars on the page. This can occur with common classes like `sr-only`
+    *  and can cause difficult to track down layout issues */
+    position: relative;
+    overflow: auto;
+  }
 }

packages/react/src/Select/Select.module.css

@@ -1,69 +1,71 @@
-.Select {
-  width: 100%;
-  /* stylelint-disable-next-line primer/spacing */
-  margin-top: 1px;
-  /* stylelint-disable-next-line primer/spacing */
-  margin-bottom: 1px;
-  /* stylelint-disable-next-line primer/spacing */
-  margin-left: 1px;
-  font-size: inherit;
-  color: currentColor;
+@layer primer.components.Select {
+  .Select {
+    width: 100%;
+    /* stylelint-disable-next-line primer/spacing */
+    margin-top: 1px;
+    /* stylelint-disable-next-line primer/spacing */
+    margin-bottom: 1px;
+    /* stylelint-disable-next-line primer/spacing */
+    margin-left: 1px;
+    font-size: inherit;
+    color: currentColor;
 
-  /* Firefox hacks:
-   * 1. Makes Firefox's native dropdown menu's background match the theme.
-   *    background-color should be 'transparent', but Firefox uses the background-color on
-   *    <select> to determine the background color used for the dropdown menu.
-   * 2. Adds 1px margins to the <select> so the background color doesn't hide the focus outline created with an inset box-shadow.
-   */
-  background-color: inherit;
-  border: 0;
-  border-radius: inherit;
-  outline: none;
-  appearance: none;
+    /* Firefox hacks:
+     * 1. Makes Firefox's native dropdown menu's background match the theme.
+     *    background-color should be 'transparent', but Firefox uses the background-color on
+     *    <select> to determine the background color used for the dropdown menu.
+     * 2. Adds 1px margins to the <select> so the background color doesn't hide the focus outline created with an inset box-shadow.
+     */
+    background-color: inherit;
+    border: 0;
+    border-radius: inherit;
+    outline: none;
+    appearance: none;
 
-  /* 2. Prevents visible overlap of partially transparent background colors.
-   *    'colors.input.disabledBg' happens to be partially transparent in light mode, so we use a
-   *    transparent background-color on a disabled <select>. 
-   */
-  &:disabled {
-    background-color: transparent;
-  }
-
-  /* 3. Maintain dark bg color in Firefox on Windows high-contrast mode
-   *    Firefox makes the <select>'s background color white when setting 'background-color: transparent;'   
-   */
-  @media screen and (forced-colors: active) {
+    /* 2. Prevents visible overlap of partially transparent background colors.
+     *    'colors.input.disabledBg' happens to be partially transparent in light mode, so we use a
+     *    transparent background-color on a disabled <select>.
+     */
     &:disabled {
-      background-color: -moz-combobox;
+      background-color: transparent;
+    }
+
+    /* 3. Maintain dark bg color in Firefox on Windows high-contrast mode
+     *    Firefox makes the <select>'s background color white when setting 'background-color: transparent;'
+     */
+    @media screen and (forced-colors: active) {
+      &:disabled {
+        background-color: -moz-combobox;
+      }
     }
   }
-}
 
-.TextInputWrapper {
-  position: relative;
-  overflow: hidden;
+  .TextInputWrapper {
+    position: relative;
+    overflow: hidden;
 
-  @media screen and (forced-colors: active) {
-    svg {
-      /* stylelint-disable-next-line declaration-property-value-no-unknown */
-      fill: 'FieldText';
+    @media screen and (forced-colors: active) {
+      svg {
+        /* stylelint-disable-next-line declaration-property-value-no-unknown */
+        fill: 'FieldText';
+      }
     }
   }
-}
 
-.Disabled {
-  @media screen and (forced-colors: active) {
-    svg {
-      /* stylelint-disable-next-line declaration-property-value-no-unknown */
-      fill: 'GrayText';
+  .Disabled {
+    @media screen and (forced-colors: active) {
+      svg {
+        /* stylelint-disable-next-line declaration-property-value-no-unknown */
+        fill: 'GrayText';
+      }
     }
   }
-}
 
-.ArrowIndicator {
-  position: absolute;
-  top: 50%;
-  right: var(--base-size-4);
-  pointer-events: none;
-  transform: translateY(-50%);
+  .ArrowIndicator {
+    position: absolute;
+    top: 50%;
+    right: var(--base-size-4);
+    pointer-events: none;
+    transform: translateY(-50%);
+  }
 }

packages/react/src/SideNav.module.css

@@ -1,114 +1,116 @@
-.SideNav {
-  background-color: var(--bgColor-muted);
-}
-
-.SideNavBordered {
-  border-color: var(--borderColor-default);
-  border-style: solid;
-  border-width: var(--borderWidth-thin);
-  border-radius: var(--borderRadius-medium);
-
-  /*  Remove duplicate borders from nested SideNavs */
-  & > & {
-    border-right: 0;
-    border-bottom: 0;
-    border-left: 0;
-  }
-}
-
-.SideNavLink {
-  position: relative;
-  display: block;
-  width: 100%;
-  /* stylelint-disable-next-line primer/typography */
-  font-size: 14px;
-  text-align: left;
-  text-decoration: none;
-
-  & > .SideNav {
-    border-bottom: none;
+@layer primer.components.SideNav {
+  .SideNav {
+    background-color: var(--bgColor-muted);
   }
 
-  .SideNav.SideNavVariant--normal > & {
-    padding: var(--base-size-16);
-    color: var(--fgColor-default);
-    border: 0;
-    border-top: var(--borderWidth-thin) solid var(--borderColor-muted);
-
-    &:first-child {
-      border-top: 0;
-      border-top-left-radius: var(--borderRadius-medium);
-      border-top-right-radius: var(--borderRadius-medium);
-    }
-
-    &:last-child {
-      border-bottom-right-radius: var(--borderRadius-medium);
-      border-bottom-left-radius: var(--borderRadius-medium);
+  .SideNavBordered {
+    border-color: var(--borderColor-default);
+    border-style: solid;
+    border-width: var(--borderWidth-thin);
+    border-radius: var(--borderRadius-medium);
+
+    /*  Remove duplicate borders from nested SideNavs */
+    & > & {
+      border-right: 0;
+      border-bottom: 0;
+      border-left: 0;
     }
+  }
 
-    /* Bar on the left */
-    &::before {
-      position: absolute;
-      top: 0;
-      bottom: 0;
-      left: 0;
-      z-index: 1;
-      width: 3px;
-      pointer-events: none;
-      content: '';
+  .SideNavLink {
+    position: relative;
+    display: block;
+    width: 100%;
+    /* stylelint-disable-next-line primer/typography */
+    font-size: 14px;
+    text-align: left;
+    text-decoration: none;
+
+    & > .SideNav {
+      border-bottom: none;
     }
 
-    &:hover {
-      text-decoration: none;
-      background-color: var(--bgColor-neutral-muted);
-    }
+    .SideNav.SideNavVariant--normal > & {
+      padding: var(--base-size-16);
+      color: var(--fgColor-default);
+      border: 0;
+      border-top: var(--borderWidth-thin) solid var(--borderColor-muted);
 
-    &:focus {
-      z-index: 1;
-      text-decoration: none;
-      background-color: var(--bgColor-neutral-muted);
-      outline: solid 2px var(--fgColor-accent);
-    }
+      &:first-child {
+        border-top: 0;
+        border-top-left-radius: var(--borderRadius-medium);
+        border-top-right-radius: var(--borderRadius-medium);
+      }
 
-    &[aria-current='page'],
-    &[aria-selected='true'] {
-      background-color: var(--bgColor-default);
+      &:last-child {
+        border-bottom-right-radius: var(--borderRadius-medium);
+        border-bottom-left-radius: var(--borderRadius-medium);
+      }
 
       /* Bar on the left */
-      /* stylelint-disable-next-line selector-max-specificity */
       &::before {
-        /* stylelint-disable-next-line primer/colors */
-        background-color: var(--underlineNav-borderColor-active, var(--color-primer-border-active, #fd8c73));
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        left: 0;
+        z-index: 1;
+        width: 3px;
+        pointer-events: none;
+        content: '';
       }
-    }
-  }
 
-  .SideNav.SideNavVariant--lightweight > & {
-    padding: var(--base-size-4) 0;
-    color: var(--fgColor-accent);
+      &:hover {
+        text-decoration: none;
+        background-color: var(--bgColor-neutral-muted);
+      }
 
-    &:hover {
-      color: var(--fgColor-default);
-      text-decoration: none;
-    }
+      &:focus {
+        z-index: 1;
+        text-decoration: none;
+        background-color: var(--bgColor-neutral-muted);
+        outline: solid 2px var(--fgColor-accent);
+      }
 
-    &:focus {
-      z-index: 1;
-      color: var(--fgColor-default);
-      text-decoration: none;
-      outline: solid 1px var(--fgColor-accent);
+      &[aria-current='page'],
+      &[aria-selected='true'] {
+        background-color: var(--bgColor-default);
+
+        /* Bar on the left */
+        /* stylelint-disable-next-line selector-max-specificity */
+        &::before {
+          /* stylelint-disable-next-line primer/colors */
+          background-color: var(--underlineNav-borderColor-active, var(--color-primer-border-active, #fd8c73));
+        }
+      }
     }
 
-    &[aria-current='page'],
-    &[aria-selected='true'] {
-      font-weight: var(--base-text-weight-medium);
-      color: var(--fgColor-default);
+    .SideNav.SideNavVariant--lightweight > & {
+      padding: var(--base-size-4) 0;
+      color: var(--fgColor-accent);
+
+      &:hover {
+        color: var(--fgColor-default);
+        text-decoration: none;
+      }
+
+      &:focus {
+        z-index: 1;
+        color: var(--fgColor-default);
+        text-decoration: none;
+        outline: solid 1px var(--fgColor-accent);
+      }
+
+      &[aria-current='page'],
+      &[aria-selected='true'] {
+        font-weight: var(--base-text-weight-medium);
+        color: var(--fgColor-default);
+      }
     }
   }
-}
 
-.SideNavLinkFull {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
+  .SideNavLinkFull {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
 }