diff --git a/.changeset/css-layers-text-token-foundations.md b/.changeset/css-layers-text-token-foundations.md
new file mode 100644
index 00000000000..d07080bd6db
--- /dev/null
+++ b/.changeset/css-layers-text-token-foundations.md
@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+Text, Timeline, Tooltip, TopicTag, Truncate, ActionList (deprecated), VisuallyHidden, CounterLabel, DataTable, CheckboxOrRadioGroup: Add CSS layer support for component styles
diff --git a/packages/react/src/CounterLabel/CounterLabel.module.css b/packages/react/src/CounterLabel/CounterLabel.module.css
index 2c34d567a1f..0e3c7390bc6 100644
--- a/packages/react/src/CounterLabel/CounterLabel.module.css
+++ b/packages/react/src/CounterLabel/CounterLabel.module.css
@@ -1,25 +1,27 @@
-.CounterLabel {
-  display: inline-block;
-  padding: var(--base-size-2) var(--base-size-6);
-  font-size: var(--text-body-size-small);
-  font-weight: var(--base-text-weight-semibold);
-  /* stylelint-disable-next-line primer/typography */
-  line-height: 1;
-  border: var(--borderWidth-thin) solid var(--counter-borderColor);
-  /* stylelint-disable-next-line primer/borders */
-  border-radius: 20px;
+@layer primer.components.CounterLabel {
+  .CounterLabel {
+    display: inline-block;
+    padding: var(--base-size-2) var(--base-size-6);
+    font-size: var(--text-body-size-small);
+    font-weight: var(--base-text-weight-semibold);
+    /* stylelint-disable-next-line primer/typography */
+    line-height: 1;
+    border: var(--borderWidth-thin) solid var(--counter-borderColor);
+    /* stylelint-disable-next-line primer/borders */
+    border-radius: 20px;
 
-  &:where([data-variant='primary']) {
-    color: var(--fgColor-onEmphasis);
-    background-color: var(--bgColor-neutral-emphasis);
-  }
+    &:where([data-variant='primary']) {
+      color: var(--fgColor-onEmphasis);
+      background-color: var(--bgColor-neutral-emphasis);
+    }
 
-  &:where([data-variant='secondary']) {
-    color: var(--fgColor-default);
-    background-color: var(--bgColor-neutral-muted);
-  }
+    &:where([data-variant='secondary']) {
+      color: var(--fgColor-default);
+      background-color: var(--bgColor-neutral-muted);
+    }
 
-  &:where(:empty) {
-    display: none;
+    &:where(:empty) {
+      display: none;
+    }
   }
 }
diff --git a/packages/react/src/DataTable/Pagination.module.css b/packages/react/src/DataTable/Pagination.module.css
index e56f7f787b2..728cf16b855 100644
--- a/packages/react/src/DataTable/Pagination.module.css
+++ b/packages/react/src/DataTable/Pagination.module.css
@@ -1,138 +1,140 @@
-.TablePagination {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  column-gap: 1rem;
-  width: 100%;
-  grid-area: footer;
-  padding: var(--base-size-8) var(--base-size-16);
-  border: var(--borderWidth-thin) solid var(--borderColor-default);
-  border-top-width: 0;
-  border-end-start-radius: var(--borderRadius-medium);
-  border-end-end-radius: var(--borderRadius-medium);
-}
-
-@media ((max-width: calc(768px - 0.02px))) {
-  .TablePaginationSteps[data-hidden-viewport-ranges*='narrow'] > *:not(:first-child):not(:last-child) {
-    display: none;
+@layer primer.components.DataTable {
+  .TablePagination {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    column-gap: 1rem;
+    width: 100%;
+    grid-area: footer;
+    padding: var(--base-size-8) var(--base-size-16);
+    border: var(--borderWidth-thin) solid var(--borderColor-default);
+    border-top-width: 0;
+    border-end-start-radius: var(--borderRadius-medium);
+    border-end-end-radius: var(--borderRadius-medium);
   }
 
-  .TablePaginationSteps[data-hidden-viewport-ranges*='narrow'] > *:first-child {
-    margin-inline-end: 0;
-  }
+  @media ((max-width: calc(768px - 0.02px))) {
+    .TablePaginationSteps[data-hidden-viewport-ranges*='narrow'] > *:not(:first-child):not(:last-child) {
+      display: none;
+    }
 
-  .TablePaginationSteps[data-hidden-viewport-ranges*='narrow'] > *:last-child {
-    margin-inline-start: 0;
-  }
-}
+    .TablePaginationSteps[data-hidden-viewport-ranges*='narrow'] > *:first-child {
+      margin-inline-end: 0;
+    }
 
-@media ((min-width: 768px)) {
-  .TablePaginationSteps[data-hidden-viewport-ranges*='regular'] > *:not(:first-child):not(:last-child) {
-    display: none;
+    .TablePaginationSteps[data-hidden-viewport-ranges*='narrow'] > *:last-child {
+      margin-inline-start: 0;
+    }
   }
 
-  .TablePaginationSteps[data-hidden-viewport-ranges*='regular'] > *:first-child {
-    margin-inline-end: 0;
-  }
+  @media ((min-width: 768px)) {
+    .TablePaginationSteps[data-hidden-viewport-ranges*='regular'] > *:not(:first-child):not(:last-child) {
+      display: none;
+    }
 
-  .TablePaginationSteps[data-hidden-viewport-ranges*='regular'] > *:last-child {
-    margin-inline-start: 0;
-  }
-}
+    .TablePaginationSteps[data-hidden-viewport-ranges*='regular'] > *:first-child {
+      margin-inline-end: 0;
+    }
 
-@media ((min-width: 1400px)) {
-  .TablePaginationSteps[data-hidden-viewport-ranges*='wide'] > *:not(:first-child):not(:last-child) {
-    display: none;
+    .TablePaginationSteps[data-hidden-viewport-ranges*='regular'] > *:last-child {
+      margin-inline-start: 0;
+    }
   }
 
-  .TablePaginationSteps[data-hidden-viewport-ranges*='wide'] > *:first-child {
-    margin-inline-end: 0;
-  }
+  @media ((min-width: 1400px)) {
+    .TablePaginationSteps[data-hidden-viewport-ranges*='wide'] > *:not(:first-child):not(:last-child) {
+      display: none;
+    }
+
+    .TablePaginationSteps[data-hidden-viewport-ranges*='wide'] > *:first-child {
+      margin-inline-end: 0;
+    }
 
-  .TablePaginationSteps[data-hidden-viewport-ranges*='wide'] > *:last-child {
-    margin-inline-start: 0;
+    .TablePaginationSteps[data-hidden-viewport-ranges*='wide'] > *:last-child {
+      margin-inline-start: 0;
+    }
   }
-}
 
-.TablePaginationRange {
-  color: var(--fgColor-muted);
-  font-size: var(--text-body-size-small);
-  margin: 0;
-}
+  .TablePaginationRange {
+    color: var(--fgColor-muted);
+    font-size: var(--text-body-size-small);
+    margin: 0;
+  }
 
-.TablePaginationSteps {
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-  list-style: none;
-  color: var(--fgColor-default);
-  font-size: var(--text-body-size-medium);
-  margin: 0;
-  padding: 0;
-}
+  .TablePaginationSteps {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    list-style: none;
+    color: var(--fgColor-default);
+    font-size: var(--text-body-size-medium);
+    margin: 0;
+    padding: 0;
+  }
 
-.TablePaginationStep:first-of-type {
-  margin-right: var(--base-size-16);
-}
+  .TablePaginationStep:first-of-type {
+    margin-right: var(--base-size-16);
+  }
 
-.TablePaginationStep:last-of-type {
-  margin-left: var(--base-size-16);
-}
+  .TablePaginationStep:last-of-type {
+    margin-left: var(--base-size-16);
+  }
 
-.TablePaginationAction {
-  display: flex;
-  align-items: center;
-  color: var(--fgColor-muted);
-  font-size: var(--text-body-size-medium);
-  /* stylelint-disable-next-line primer/typography */
-  line-height: calc(20 / 14);
-  user-select: none;
-  padding: var(--base-size-8);
-  border-radius: var(--borderRadius-medium);
-}
+  .TablePaginationAction {
+    display: flex;
+    align-items: center;
+    color: var(--fgColor-muted);
+    font-size: var(--text-body-size-medium);
+    /* stylelint-disable-next-line primer/typography */
+    line-height: calc(20 / 14);
+    user-select: none;
+    padding: var(--base-size-8);
+    border-radius: var(--borderRadius-medium);
+  }
 
-.TablePaginationAction[data-has-page] {
-  color: var(--fgColor-accent);
-}
+  .TablePaginationAction[data-has-page] {
+    color: var(--fgColor-accent);
+  }
 
-.TablePaginationPage {
-  min-width: 2rem;
-  min-height: 2rem;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: var(--text-body-size-medium);
-  /* stylelint-disable-next-line primer/typography */
-  line-height: calc(20 / 14);
-  user-select: none;
-  border-radius: var(--borderRadius-medium);
-  padding: var(--base-size-8) calc((var(--base-size-32) - var(--base-size-20)) / 2); /* primer.control.medium.paddingInline.condensed primer.control.medium.paddingBlock */
-}
+  .TablePaginationPage {
+    min-width: 2rem;
+    min-height: 2rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: var(--text-body-size-medium);
+    /* stylelint-disable-next-line primer/typography */
+    line-height: calc(20 / 14);
+    user-select: none;
+    border-radius: var(--borderRadius-medium);
+    padding: var(--base-size-8) calc((var(--base-size-32) - var(--base-size-20)) / 2); /* primer.control.medium.paddingInline.condensed primer.control.medium.paddingBlock */
+  }
 
-.TablePaginationAction[data-has-page]:hover,
-.TablePaginationAction[data-has-page]:focus,
-.TablePaginationPage:hover,
-.TablePaginationPage:focus {
-  background-color: var(--control-transparent-bgColor-hover);
-}
+  .TablePaginationAction[data-has-page]:hover,
+  .TablePaginationAction[data-has-page]:focus,
+  .TablePaginationPage:hover,
+  .TablePaginationPage:focus {
+    background-color: var(--control-transparent-bgColor-hover);
+  }
 
-.TablePaginationPage[data-active='true'] {
-  background-color: var(--bgColor-accent-emphasis);
-  color: var(--fgColor-onEmphasis);
-}
+  .TablePaginationPage[data-active='true'] {
+    background-color: var(--bgColor-accent-emphasis);
+    color: var(--fgColor-onEmphasis);
+  }
 
-.TablePaginationPage[data-active='true']:focus-visible {
-  outline: 2px solid var(--bgColor-accent-emphasis);
-  outline-offset: -2px;
-  /* stylelint-disable-next-line primer/box-shadow */
-  box-shadow: inset 0 0 0 3px var(--fgColor-onEmphasis);
-}
+  .TablePaginationPage[data-active='true']:focus-visible {
+    outline: 2px solid var(--bgColor-accent-emphasis);
+    outline-offset: -2px;
+    /* stylelint-disable-next-line primer/box-shadow */
+    box-shadow: inset 0 0 0 3px var(--fgColor-onEmphasis);
+  }
 
-.TablePaginationTruncationStep {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  min-width: 2rem;
-  min-height: 2rem;
-  user-select: none;
+  .TablePaginationTruncationStep {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 2rem;
+    min-height: 2rem;
+    user-select: none;
+  }
 }
diff --git a/packages/react/src/DataTable/Table.module.css b/packages/react/src/DataTable/Table.module.css
index 142ca253d3e..6d0884478a9 100644
--- a/packages/react/src/DataTable/Table.module.css
+++ b/packages/react/src/DataTable/Table.module.css
@@ -1,291 +1,293 @@
-/* Container ---------------------------------------------------------------- */
-.TableContainer {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  grid-template-areas:
-    'title actions'
-    'divider divider'
-    'subtitle subtitle'
-    'filter filter'
-    'table table'
-    'footer footer';
-  column-gap: var(--base-size-8);
-}
-
-/* TableTitle */
-.TableTitle {
-  margin: 0;
-  font-size: var(--text-body-size-medium);
-  font-weight: var(--base-text-weight-semibold);
-  /* stylelint-disable-next-line primer/typography */
-  line-height: 20px;
-  color: var(--fgColor-default);
-  grid-area: title;
-  align-self: center;
-}
-
-/* TableSubtitle */
-.TableSubtitle {
-  margin: 0;
-  font-size: var(--text-body-size-small);
-  font-weight: var(--base-text-weight-normal);
-  line-height: var(--text-title-lineHeight-small);
-  color: var(--fgColor-default);
-  grid-area: subtitle;
-}
-
-/* TableActions */
-.TableActions {
-  display: flex;
-  column-gap: var(--base-size-8);
-  align-items: center;
-  grid-area: actions;
-  justify-self: end;
-}
-
-/* TableDivider */
-.TableDivider {
-  width: 100%;
-  height: 1px;
-  /* stylelint-disable-next-line primer/colors */
-  background-color: var(--borderColor-default);
-  grid-area: divider;
-  margin-block-start: var(--base-size-16);
-  margin-block-end: var(--base-size-8);
-}
-
-/* Spacing before the table */
-.TableTitle + .TableOverflowWrapper,
-.TableSubtitle + .TableOverflowWrapper,
-.TableActions + .TableOverflowWrapper {
-  margin-block-start: var(--base-size-8);
-}
+@layer primer.components.DataTable {
+  /* Container ---------------------------------------------------------------- */
+  .TableContainer {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-template-areas:
+      'title actions'
+      'divider divider'
+      'subtitle subtitle'
+      'filter filter'
+      'table table'
+      'footer footer';
+    column-gap: var(--base-size-8);
+  }
 
-.TableOverflowWrapper {
-  grid-area: table;
-}
+  /* TableTitle */
+  .TableTitle {
+    margin: 0;
+    font-size: var(--text-body-size-medium);
+    font-weight: var(--base-text-weight-semibold);
+    /* stylelint-disable-next-line primer/typography */
+    line-height: 20px;
+    color: var(--fgColor-default);
+    grid-area: title;
+    align-self: center;
+  }
 
-/* Table -------------------------------------------------------------------- */
-.Table {
-  /* Default table styles */
-  --table-border-radius: 0.375rem;
-  --table-cell-padding: var(--cell-padding-block, 0.5rem) var(--cell-padding-inline, 0.75rem);
-  --table-font-size: 0.75rem;
-
-  display: grid;
-  width: 100%;
-  /* stylelint-disable-next-line primer/typography */
-  font-size: var(--table-font-size);
-  /* stylelint-disable-next-line primer/typography */
-  line-height: calc(20 / 12);
-  border-spacing: 0;
-  /* stylelint-disable-next-line primer/borders */
-  border-collapse: separate;
-  background-color: var(--bgColor-default);
-  grid-area: table;
-  grid-template-columns: var(--grid-template-columns);
-
-  /* Density modes: condensed, normal, spacious */
-  &:where([data-cell-padding='condensed']) {
-    --cell-padding-block: 0.25rem;
-    --cell-padding-inline: 0.5rem;
-  }
-
-  &:where([data-cell-padding='normal']) {
-    --cell-padding-block: 0.5rem;
-    --cell-padding-inline: 0.75rem;
-  }
-
-  &:where([data-cell-padding='spacious']) {
-    --cell-padding-block: 0.75rem;
-    --cell-padding-inline: 1rem;
+  /* TableSubtitle */
+  .TableSubtitle {
+    margin: 0;
+    font-size: var(--text-body-size-small);
+    font-weight: var(--base-text-weight-normal);
+    line-height: var(--text-title-lineHeight-small);
+    color: var(--fgColor-default);
+    grid-area: subtitle;
   }
-}
 
-/* Borders */
-.TableCell:first-child,
-.TableHeader:first-child {
-  border-inline-start: var(--borderWidth-thin) solid var(--borderColor-default);
-}
+  /* TableActions */
+  .TableActions {
+    display: flex;
+    column-gap: var(--base-size-8);
+    align-items: center;
+    grid-area: actions;
+    justify-self: end;
+  }
 
-.TableCell:last-child,
-.TableHeader:last-child {
-  border-inline-end: var(--borderWidth-thin) solid var(--borderColor-default);
-}
+  /* TableDivider */
+  .TableDivider {
+    width: 100%;
+    height: 1px;
+    /* stylelint-disable-next-line primer/colors */
+    background-color: var(--borderColor-default);
+    grid-area: divider;
+    margin-block-start: var(--base-size-16);
+    margin-block-end: var(--base-size-8);
+  }
 
-.TableHeader,
-.TableCell {
-  display: flex;
-  /* stylelint-disable-next-line primer/spacing */
-  padding: var(--table-cell-padding);
-  text-align: start;
-  align-items: center;
-  border-block-end: var(--borderWidth-thin) solid var(--borderColor-default);
-}
+  /* Spacing before the table */
+  .TableTitle + .TableOverflowWrapper,
+  .TableSubtitle + .TableOverflowWrapper,
+  .TableActions + .TableOverflowWrapper {
+    margin-block-start: var(--base-size-8);
+  }
 
-.TableHeader:where([data-cell-align='end']),
-.TableCell:where([data-cell-align='end']) {
-  display: flex;
-  text-align: end;
-  justify-content: flex-end;
-}
+  .TableOverflowWrapper {
+    grid-area: table;
+  }
 
-.TableHeader[data-cell-align='end'] .TableSortButton {
-  display: flex;
-  flex-direction: row-reverse;
-}
+  /* Table -------------------------------------------------------------------- */
+  .Table {
+    /* Default table styles */
+    --table-border-radius: 0.375rem;
+    --table-cell-padding: var(--cell-padding-block, 0.5rem) var(--cell-padding-inline, 0.75rem);
+    --table-font-size: 0.75rem;
 
-.TableHead .TableRow:first-of-type .TableHeader {
-  border-block-start: var(--borderWidth-thin) solid var(--borderColor-default);
-}
+    display: grid;
+    width: 100%;
+    /* stylelint-disable-next-line primer/typography */
+    font-size: var(--table-font-size);
+    /* stylelint-disable-next-line primer/typography */
+    line-height: calc(20 / 12);
+    border-spacing: 0;
+    /* stylelint-disable-next-line primer/borders */
+    border-collapse: separate;
+    background-color: var(--bgColor-default);
+    grid-area: table;
+    grid-template-columns: var(--grid-template-columns);
+
+    /* Density modes: condensed, normal, spacious */
+    &:where([data-cell-padding='condensed']) {
+      --cell-padding-block: 0.25rem;
+      --cell-padding-inline: 0.5rem;
+    }
+
+    &:where([data-cell-padding='normal']) {
+      --cell-padding-block: 0.5rem;
+      --cell-padding-inline: 0.75rem;
+    }
+
+    &:where([data-cell-padding='spacious']) {
+      --cell-padding-block: 0.75rem;
+      --cell-padding-inline: 1rem;
+    }
+  }
 
-/* Border radius */
-/* stylelint-disable-next-line selector-max-specificity */
-.TableHead .TableRow:first-of-type .TableHeader:first-child {
-  /* stylelint-disable-next-line primer/borders */
-  border-top-left-radius: var(--table-border-radius);
-}
+  /* Borders */
+  .TableCell:first-child,
+  .TableHeader:first-child {
+    border-inline-start: var(--borderWidth-thin) solid var(--borderColor-default);
+  }
 
-/* stylelint-disable-next-line selector-max-specificity */
-.TableHead .TableRow:first-of-type .TableHeader:last-child {
-  /* stylelint-disable-next-line primer/borders */
-  border-top-right-radius: var(--table-border-radius);
-}
+  .TableCell:last-child,
+  .TableHeader:last-child {
+    border-inline-end: var(--borderWidth-thin) solid var(--borderColor-default);
+  }
 
-/* stylelint-disable-next-line selector-max-compound-selectors,selector-max-specificity */
-.TableOverflowWrapper:last-child .Table .TableBody .TableRow:last-of-type .TableCell:first-child {
-  /* stylelint-disable-next-line primer/borders */
-  border-bottom-left-radius: var(--table-border-radius);
-}
+  .TableHeader,
+  .TableCell {
+    display: flex;
+    /* stylelint-disable-next-line primer/spacing */
+    padding: var(--table-cell-padding);
+    text-align: start;
+    align-items: center;
+    border-block-end: var(--borderWidth-thin) solid var(--borderColor-default);
+  }
 
-/* stylelint-disable-next-line selector-max-compound-selectors,selector-max-specificity */
-.TableOverflowWrapper:last-child .Table .TableBody .TableRow:last-of-type .TableCell:last-child {
-  /* stylelint-disable-next-line primer/borders */
-  border-bottom-right-radius: var(--table-border-radius);
-}
+  .TableHeader:where([data-cell-align='end']),
+  .TableCell:where([data-cell-align='end']) {
+    display: flex;
+    text-align: end;
+    justify-content: flex-end;
+  }
 
-/**
- * Offset padding to make sure type aligns regardless of cell padding
- * selection
- */
-.TableRow > *:first-child:not(.TableCellSkeleton),
-.TableRow > *:first-child .TableCellSkeletonItem {
-  padding-inline-start: var(--base-size-16);
-}
+  .TableHeader[data-cell-align='end'] .TableSortButton {
+    display: flex;
+    flex-direction: row-reverse;
+  }
 
-.TableRow > *:last-child:not(.TableCellSkeleton),
-.TableRow > *:last-child .TableCellSkeletonItem {
-  padding-inline-end: var(--base-size-16);
-}
+  .TableHead .TableRow:first-of-type .TableHeader {
+    border-block-start: var(--borderWidth-thin) solid var(--borderColor-default);
+  }
 
-/* TableHeader */
-.TableHeader {
-  font-weight: var(--base-text-weight-semibold);
-  color: var(--fgColor-muted);
-  background-color: var(--bgColor-muted);
-  border-block-start: var(--borderWidth-thin) solid var(--borderColor-default);
-}
+  /* Border radius */
+  /* stylelint-disable-next-line selector-max-specificity */
+  .TableHead .TableRow:first-of-type .TableHeader:first-child {
+    /* stylelint-disable-next-line primer/borders */
+    border-top-left-radius: var(--table-border-radius);
+  }
 
-.TableHeader:where([aria-sort='descending']),
-.TableHeader:where([aria-sort='ascending']) {
-  color: var(--fgColor-default);
-}
+  /* stylelint-disable-next-line selector-max-specificity */
+  .TableHead .TableRow:first-of-type .TableHeader:last-child {
+    /* stylelint-disable-next-line primer/borders */
+    border-top-right-radius: var(--table-border-radius);
+  }
 
-/* Control visibility of sort icons */
-.TableSortIcon {
-  visibility: hidden;
-}
+  /* stylelint-disable-next-line selector-max-compound-selectors,selector-max-specificity */
+  .TableOverflowWrapper:last-child .Table .TableBody .TableRow:last-of-type .TableCell:first-child {
+    /* stylelint-disable-next-line primer/borders */
+    border-bottom-left-radius: var(--table-border-radius);
+  }
 
-/* The ASC icon is visible if the header is sortable and is hovered or focused */
-.TableHeader:hover .TableSortIcon--ascending,
-.TableHeader .TableSortButton:focus .TableSortIcon--ascending {
-  visibility: visible;
-}
+  /* stylelint-disable-next-line selector-max-compound-selectors,selector-max-specificity */
+  .TableOverflowWrapper:last-child .Table .TableBody .TableRow:last-of-type .TableCell:last-child {
+    /* stylelint-disable-next-line primer/borders */
+    border-bottom-right-radius: var(--table-border-radius);
+  }
 
-/* Each sort icon is visible if the TableHeader is currently in the corresponding sort state */
-.TableHeader[aria-sort='ascending'] .TableSortIcon--ascending,
-.TableHeader[aria-sort='descending'] .TableSortIcon--descending {
-  visibility: visible;
-}
+  /**
+   * Offset padding to make sure type aligns regardless of cell padding
+   * selection
+   */
+  .TableRow > *:first-child:not(.TableCellSkeleton),
+  .TableRow > *:first-child .TableCellSkeletonItem {
+    padding-inline-start: var(--base-size-16);
+  }
 
-/* TableRow */
-.TableRow:hover .TableCell:not(.TableCellSkeleton) {
-  background-color: var(--control-transparent-bgColor-hover);
-}
+  .TableRow > *:last-child:not(.TableCellSkeleton),
+  .TableRow > *:last-child .TableCellSkeletonItem {
+    padding-inline-end: var(--base-size-16);
+  }
 
-/* TableCell */
-.TableCell:where([scope='row']) {
-  display: flex;
-  font-weight: var(--base-text-weight-semibold);
-  color: var(--fgColor-default);
-  align-items: center;
-}
+  /* TableHeader */
+  .TableHeader {
+    font-weight: var(--base-text-weight-semibold);
+    color: var(--fgColor-muted);
+    background-color: var(--bgColor-muted);
+    border-block-start: var(--borderWidth-thin) solid var(--borderColor-default);
+  }
 
-/* TableCellSkeleton */
-.TableCellSkeleton {
-  padding: 0;
-}
+  .TableHeader:where([aria-sort='descending']),
+  .TableHeader:where([aria-sort='ascending']) {
+    color: var(--fgColor-default);
+  }
 
-.TableCellSkeletonItems {
-  display: flex;
-  width: 100%;
-  flex-direction: column;
-}
+  /* Control visibility of sort icons */
+  .TableSortIcon {
+    visibility: hidden;
+  }
 
-.TableCellSkeletonItem {
-  /* stylelint-disable-next-line primer/spacing */
-  padding: var(--table-cell-padding);
+  /* The ASC icon is visible if the header is sortable and is hovered or focused */
+  .TableHeader:hover .TableSortIcon--ascending,
+  .TableHeader .TableSortButton:focus .TableSortIcon--ascending {
+    visibility: visible;
+  }
 
-  &:nth-of-type(5n + 1) {
-    --skeleton-item-width: 85%;
+  /* Each sort icon is visible if the TableHeader is currently in the corresponding sort state */
+  .TableHeader[aria-sort='ascending'] .TableSortIcon--ascending,
+  .TableHeader[aria-sort='descending'] .TableSortIcon--descending {
+    visibility: visible;
   }
 
-  &:nth-of-type(5n + 2) {
-    --skeleton-item-width: 67.5%;
+  /* TableRow */
+  .TableRow:hover .TableCell:not(.TableCellSkeleton) {
+    background-color: var(--control-transparent-bgColor-hover);
   }
 
-  &:nth-of-type(5n + 3) {
-    --skeleton-item-width: 80%;
+  /* TableCell */
+  .TableCell:where([scope='row']) {
+    display: flex;
+    font-weight: var(--base-text-weight-semibold);
+    color: var(--fgColor-default);
+    align-items: center;
   }
 
-  &:nth-of-type(5n + 4) {
-    --skeleton-item-width: 60%;
+  /* TableCellSkeleton */
+  .TableCellSkeleton {
+    padding: 0;
   }
 
-  &:nth-of-type(5n + 5) {
-    --skeleton-item-width: 75%;
+  .TableCellSkeletonItems {
+    display: flex;
+    width: 100%;
+    flex-direction: column;
   }
-}
 
-.TableCellSkeletonItem [data-component='SkeletonText'] {
-  width: var(--skeleton-item-width);
-}
+  .TableCellSkeletonItem {
+    /* stylelint-disable-next-line primer/spacing */
+    padding: var(--table-cell-padding);
 
-.TableCellSkeletonItem:not(:last-of-type) {
-  border-block-end: var(--borderWidth-thin) solid var(--borderColor-default);
-}
+    &:nth-of-type(5n + 1) {
+      --skeleton-item-width: 85%;
+    }
 
-.TableSortButton {
-  column-gap: 0.5rem;
-}
+    &:nth-of-type(5n + 2) {
+      --skeleton-item-width: 67.5%;
+    }
 
-/* Grid layout */
-.TableHead,
-.TableBody,
-.TableRow {
-  display: contents;
-}
+    &:nth-of-type(5n + 3) {
+      --skeleton-item-width: 80%;
+    }
+
+    &:nth-of-type(5n + 4) {
+      --skeleton-item-width: 60%;
+    }
+
+    &:nth-of-type(5n + 5) {
+      --skeleton-item-width: 75%;
+    }
+  }
+
+  .TableCellSkeletonItem [data-component='SkeletonText'] {
+    width: var(--skeleton-item-width);
+  }
 
-@supports (grid-template-columns: subgrid) {
+  .TableCellSkeletonItem:not(:last-of-type) {
+    border-block-end: var(--borderWidth-thin) solid var(--borderColor-default);
+  }
+
+  .TableSortButton {
+    column-gap: 0.5rem;
+  }
+
+  /* Grid layout */
   .TableHead,
   .TableBody,
   .TableRow {
-    display: grid;
-    grid-template-columns: subgrid;
-    grid-column: -1 /1;
+    display: contents;
+  }
+
+  @supports (grid-template-columns: subgrid) {
+    .TableHead,
+    .TableBody,
+    .TableRow {
+      display: grid;
+      grid-template-columns: subgrid;
+      grid-column: -1 /1;
+    }
   }
-}
 
-.PlaceholderText {
-  color: var(--fgColor-muted);
+  .PlaceholderText {
+    color: var(--fgColor-muted);
+  }
 }
diff --git a/packages/react/src/Text/Text.module.css b/packages/react/src/Text/Text.module.css
index 66ea88707dd..03d558ecabc 100644
--- a/packages/react/src/Text/Text.module.css
+++ b/packages/react/src/Text/Text.module.css
@@ -1,52 +1,54 @@
-.Text {
-  &:where([data-size='small']) {
-    font-size: var(--text-body-size-small);
-    line-height: var(--text-body-lineHeight-small);
-  }
-
-  &:where([data-size='medium']) {
-    font-size: var(--text-body-size-medium);
-    line-height: var(--text-body-lineHeight-medium);
-  }
-
-  &:where([data-size='large']) {
-    font-size: var(--text-body-size-large);
-    line-height: var(--text-body-lineHeight-large);
-  }
-
-  &:where([data-weight='light']) {
-    font-weight: var(--base-text-weight-light);
-  }
-
-  &:where([data-weight='normal']) {
-    font-weight: var(--base-text-weight-normal);
-  }
-
-  &:where([data-weight='medium']) {
-    font-weight: var(--base-text-weight-medium);
-  }
-
-  &:where([data-weight='semibold']) {
-    font-weight: var(--base-text-weight-semibold);
-  }
-
-  &:where([data-white-space='pre']) {
-    white-space: pre;
-  }
-
-  &:where([data-white-space='normal']) {
-    white-space: normal;
-  }
-
-  &:where([data-white-space='nowrap']) {
-    white-space: nowrap;
-  }
-
-  &:where([data-white-space='pre-wrap']) {
-    white-space: pre-wrap;
-  }
-
-  &:where([data-white-space='pre-line']) {
-    white-space: pre-line;
+@layer primer.components.Text {
+  .Text {
+    &:where([data-size='small']) {
+      font-size: var(--text-body-size-small);
+      line-height: var(--text-body-lineHeight-small);
+    }
+
+    &:where([data-size='medium']) {
+      font-size: var(--text-body-size-medium);
+      line-height: var(--text-body-lineHeight-medium);
+    }
+
+    &:where([data-size='large']) {
+      font-size: var(--text-body-size-large);
+      line-height: var(--text-body-lineHeight-large);
+    }
+
+    &:where([data-weight='light']) {
+      font-weight: var(--base-text-weight-light);
+    }
+
+    &:where([data-weight='normal']) {
+      font-weight: var(--base-text-weight-normal);
+    }
+
+    &:where([data-weight='medium']) {
+      font-weight: var(--base-text-weight-medium);
+    }
+
+    &:where([data-weight='semibold']) {
+      font-weight: var(--base-text-weight-semibold);
+    }
+
+    &:where([data-white-space='pre']) {
+      white-space: pre;
+    }
+
+    &:where([data-white-space='normal']) {
+      white-space: normal;
+    }
+
+    &:where([data-white-space='nowrap']) {
+      white-space: nowrap;
+    }
+
+    &:where([data-white-space='pre-wrap']) {
+      white-space: pre-wrap;
+    }
+
+    &:where([data-white-space='pre-line']) {
+      white-space: pre-line;
+    }
   }
 }
diff --git a/packages/react/src/Timeline/Timeline.module.css b/packages/react/src/Timeline/Timeline.module.css
index bbedaee66a7..982710f480a 100644
--- a/packages/react/src/Timeline/Timeline.module.css
+++ b/packages/react/src/Timeline/Timeline.module.css
@@ -1,196 +1,198 @@
-.Timeline {
-  display: flex;
-  flex-direction: column;
-  list-style: none;
-  padding: 0;
-  margin: 0;
-
-  &:where([data-clip-sidebar='start']),
-  &:where([data-clip-sidebar='both']) {
-    .TimelineItem:first-child {
-      padding-top: 0;
-
-      .TimelineItemAvatar {
-        /* No padding-top on first item: badge center is at 0 + 16px (half-badge) */
-        top: var(--base-size-16);
+@layer primer.components.Timeline {
+  .Timeline {
+    display: flex;
+    flex-direction: column;
+    list-style: none;
+    padding: 0;
+    margin: 0;
+
+    &:where([data-clip-sidebar='start']),
+    &:where([data-clip-sidebar='both']) {
+      .TimelineItem:first-child {
+        padding-top: 0;
+
+        .TimelineItemAvatar {
+          /* No padding-top on first item: badge center is at 0 + 16px (half-badge) */
+          top: var(--base-size-16);
+        }
+
+        &:where([data-condensed])::before {
+          top: var(--base-size-12);
+        }
+
+        &:where([data-condensed]) .TimelineItemAvatar {
+          /* No padding-top + condensed: badge center is at 0 + 8px margin + 8px half-badge */
+          top: calc(var(--base-size-8) + var(--base-size-8));
+        }
       }
+    }
 
-      &:where([data-condensed])::before {
-        top: var(--base-size-12);
-      }
+    &:where([data-clip-sidebar='end']),
+    &:where([data-clip-sidebar='both']) {
+      .TimelineItem:last-child {
+        padding-bottom: 0;
 
-      &:where([data-condensed]) .TimelineItemAvatar {
-        /* No padding-top + condensed: badge center is at 0 + 8px margin + 8px half-badge */
-        top: calc(var(--base-size-8) + var(--base-size-8));
+        &:where([data-condensed])::before {
+          height: var(--base-size-12);
+        }
       }
     }
   }
 
-  &:where([data-clip-sidebar='end']),
-  &:where([data-clip-sidebar='both']) {
-    .TimelineItem:last-child {
+  .TimelineItem {
+    position: relative;
+    display: flex;
+    padding: var(--base-size-16) 0;
+    margin-left: var(--base-size-16);
+
+    &::before {
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: 0;
+      display: block;
+      width: 2px;
+      content: '';
+      /* stylelint-disable-next-line primer/colors */
+      background-color: var(--borderColor-muted);
+    }
+
+    &:where([data-condensed]) {
+      padding-top: var(--base-size-4);
       padding-bottom: 0;
 
-      &:where([data-condensed])::before {
-        height: var(--base-size-12);
+      &:last-child {
+        padding-bottom: var(--base-size-16);
+      }
+
+      .TimelineBadge {
+        height: 16px;
+        margin-top: var(--base-size-8);
+        margin-bottom: var(--base-size-8);
+        color: var(--fgColor-muted);
+        background-color: var(--bgColor-default);
+        border: 0;
+      }
+
+      .TimelineItemAvatar {
+        /* Vertically center against the condensed badge (4px padding-top + 8px badge top margin + 8px half-badge) */
+        top: calc(var(--base-size-4) + var(--base-size-8) + var(--base-size-8));
       }
     }
   }
-}
-
-.TimelineItem {
-  position: relative;
-  display: flex;
-  padding: var(--base-size-16) 0;
-  margin-left: var(--base-size-16);
 
-  &::before {
+  .TimelineItemAvatar {
     position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    display: block;
-    width: 2px;
-    content: '';
-    /* stylelint-disable-next-line primer/colors */
-    background-color: var(--borderColor-muted);
+    /* Place avatar in the left gutter, aligned with surrounding actor avatars (~72px from item content) */
+    left: calc(-1 * (var(--base-size-40) + var(--base-size-32)));
+    /* Vertically center against the default badge (16px padding-top + 16px half-badge) */
+    top: calc(var(--base-size-16) + var(--base-size-16));
+    z-index: 1;
+    transform: translateY(-50%);
   }
 
-  &:where([data-condensed]) {
-    padding-top: var(--base-size-4);
-    padding-bottom: 0;
+  .TimelineBadgeWrapper {
+    position: relative;
+    z-index: 1;
+  }
 
-    &:last-child {
-      padding-bottom: var(--base-size-16);
+  .TimelineBadge {
+    display: flex;
+    width: 32px;
+    height: 32px;
+    margin-right: var(--base-size-8);
+    /* stylelint-disable-next-line primer/spacing */
+    margin-left: -15px;
+    flex-shrink: 0;
+    overflow: hidden;
+    color: var(--fgColor-muted);
+
+    /* TODOl not quite sure if this is the correct migration for this line */
+    background-color: var(--timelineBadge-bgColor);
+    /* stylelint-disable-next-line primer/colors */
+    border-color: var(--bgColor-default);
+    border-style: solid;
+    border-width: var(--borderWidth-thick);
+    border-radius: 50%;
+    align-items: center;
+    justify-content: center;
+
+    &:where([data-variant]) {
+      color: var(--fgColor-onEmphasis);
     }
 
-    .TimelineBadge {
-      height: 16px;
-      margin-top: var(--base-size-8);
-      margin-bottom: var(--base-size-8);
-      color: var(--fgColor-muted);
-      background-color: var(--bgColor-default);
-      border: 0;
+    &:where([data-variant='accent']) {
+      background-color: var(--bgColor-accent-emphasis);
     }
 
-    .TimelineItemAvatar {
-      /* Vertically center against the condensed badge (4px padding-top + 8px badge top margin + 8px half-badge) */
-      top: calc(var(--base-size-4) + var(--base-size-8) + var(--base-size-8));
+    &:where([data-variant='success']) {
+      background-color: var(--bgColor-success-emphasis);
     }
-  }
-}
-
-.TimelineItemAvatar {
-  position: absolute;
-  /* Place avatar in the left gutter, aligned with surrounding actor avatars (~72px from item content) */
-  left: calc(-1 * (var(--base-size-40) + var(--base-size-32)));
-  /* Vertically center against the default badge (16px padding-top + 16px half-badge) */
-  top: calc(var(--base-size-16) + var(--base-size-16));
-  z-index: 1;
-  transform: translateY(-50%);
-}
-
-.TimelineBadgeWrapper {
-  position: relative;
-  z-index: 1;
-}
 
-.TimelineBadge {
-  display: flex;
-  width: 32px;
-  height: 32px;
-  margin-right: var(--base-size-8);
-  /* stylelint-disable-next-line primer/spacing */
-  margin-left: -15px;
-  flex-shrink: 0;
-  overflow: hidden;
-  color: var(--fgColor-muted);
-
-  /* TODOl not quite sure if this is the correct migration for this line */
-  background-color: var(--timelineBadge-bgColor);
-  /* stylelint-disable-next-line primer/colors */
-  border-color: var(--bgColor-default);
-  border-style: solid;
-  border-width: var(--borderWidth-thick);
-  border-radius: 50%;
-  align-items: center;
-  justify-content: center;
-
-  &:where([data-variant]) {
-    color: var(--fgColor-onEmphasis);
-  }
-
-  &:where([data-variant='accent']) {
-    background-color: var(--bgColor-accent-emphasis);
-  }
+    &:where([data-variant='attention']) {
+      background-color: var(--bgColor-attention-emphasis);
+    }
 
-  &:where([data-variant='success']) {
-    background-color: var(--bgColor-success-emphasis);
-  }
+    &:where([data-variant='severe']) {
+      background-color: var(--bgColor-severe-emphasis);
+    }
 
-  &:where([data-variant='attention']) {
-    background-color: var(--bgColor-attention-emphasis);
-  }
+    &:where([data-variant='danger']) {
+      background-color: var(--bgColor-danger-emphasis);
+    }
 
-  &:where([data-variant='severe']) {
-    background-color: var(--bgColor-severe-emphasis);
-  }
+    &:where([data-variant='done']) {
+      background-color: var(--bgColor-done-emphasis);
+    }
 
-  &:where([data-variant='danger']) {
-    background-color: var(--bgColor-danger-emphasis);
-  }
+    &:where([data-variant='open']) {
+      background-color: var(--bgColor-open-emphasis);
+    }
 
-  &:where([data-variant='done']) {
-    background-color: var(--bgColor-done-emphasis);
-  }
+    &:where([data-variant='closed']) {
+      background-color: var(--bgColor-closed-emphasis);
+    }
 
-  &:where([data-variant='open']) {
-    background-color: var(--bgColor-open-emphasis);
+    &:where([data-variant='sponsors']) {
+      background-color: var(--bgColor-sponsors-emphasis);
+    }
   }
 
-  &:where([data-variant='closed']) {
-    background-color: var(--bgColor-closed-emphasis);
+  .TimelineBody {
+    min-width: 0;
+    max-width: 100%;
+    /* stylelint-disable-next-line primer/spacing */
+    margin-top: calc(var(--base-size-4) + 1px);
+    font-size: var(--text-body-size-medium);
+    color: var(--fgColor-muted);
+    flex: auto;
   }
 
-  &:where([data-variant='sponsors']) {
-    background-color: var(--bgColor-sponsors-emphasis);
+  .TimelineBreak {
+    position: relative;
+    z-index: 1;
+    height: var(--base-size-24);
+    margin: 0;
+    margin-bottom: calc(-1 * var(--base-size-16));
+    margin-left: 0;
+    background-color: var(--bgColor-default);
+    border: 0;
+    border-top: var(--borderWidth-thicker) solid var(--borderColor-default);
+
+    /* stylelint-disable-next-line selector-pseudo-class-disallowed-list -- scoped to CSS Module, audited (github/github-ui#17224) */
+    &:has(+ [data-condensed]) {
+      margin-bottom: calc(-1 * var(--base-size-12));
+    }
   }
-}
-
-.TimelineBody {
-  min-width: 0;
-  max-width: 100%;
-  /* stylelint-disable-next-line primer/spacing */
-  margin-top: calc(var(--base-size-4) + 1px);
-  font-size: var(--text-body-size-medium);
-  color: var(--fgColor-muted);
-  flex: auto;
-}
 
-.TimelineBreak {
-  position: relative;
-  z-index: 1;
-  height: var(--base-size-24);
-  margin: 0;
-  margin-bottom: calc(-1 * var(--base-size-16));
-  margin-left: 0;
-  background-color: var(--bgColor-default);
-  border: 0;
-  border-top: var(--borderWidth-thicker) solid var(--borderColor-default);
-
-  /* stylelint-disable-next-line selector-pseudo-class-disallowed-list -- scoped to CSS Module, audited (github/github-ui#17224) */
-  &:has(+ [data-condensed]) {
-    margin-bottom: calc(-1 * var(--base-size-12));
+  .TimelineItemActions {
+    display: flex;
+    align-items: center;
+    align-self: flex-start;
+    /* Match the badge wrapper height (32px in both default and condensed) so contents vertically center against the badge */
+    min-height: var(--base-size-32);
+    margin-left: auto;
+    gap: var(--base-size-8);
+    flex-shrink: 0;
   }
 }
-
-.TimelineItemActions {
-  display: flex;
-  align-items: center;
-  align-self: flex-start;
-  /* Match the badge wrapper height (32px in both default and condensed) so contents vertically center against the badge */
-  min-height: var(--base-size-32);
-  margin-left: auto;
-  gap: var(--base-size-8);
-  flex-shrink: 0;
-}
diff --git a/packages/react/src/Tooltip/Tooltip.module.css b/packages/react/src/Tooltip/Tooltip.module.css
index 00b804da962..fcdeb92d259 100644
--- a/packages/react/src/Tooltip/Tooltip.module.css
+++ b/packages/react/src/Tooltip/Tooltip.module.css
@@ -1,161 +1,163 @@
-/* stylelint-disable primer/typography, primer/borders, selector-class-pattern */
+@layer primer.components.Tooltip {
+  /* stylelint-disable primer/typography, primer/borders, selector-class-pattern */
 
-.Tooltip {
-  position: relative;
-  display: inline-block;
-}
-
-.Tooltip::after {
-  position: absolute;
-  z-index: 1000000;
-  display: none;
-  /* stylelint-disable-next-line primer/spacing */
-  padding: 0.5em 0.75em;
-  font: normal normal var(--text-body-size-small) / var(--text-body-lineHeight-small) var(--fontStack-system);
-  -webkit-font-smoothing: subpixel-antialiased;
-  color: var(--tooltip-fgColor, var(--fgColor-onEmphasis));
-  text-align: center;
-  text-decoration: none;
-  text-shadow: none;
-  text-transform: none;
-  letter-spacing: normal;
-  overflow-wrap: break-word;
-  white-space: pre;
-  pointer-events: none;
-  content: attr(aria-label);
-  background: var(--tooltip-bgColor, var(--bgColor-emphasis));
-  border-radius: var(--borderRadius-medium);
-  opacity: 0;
-}
+  .Tooltip {
+    position: relative;
+    display: inline-block;
+  }
 
-/* delay animation for tooltip */
-@keyframes tooltip-appear {
-  from {
+  .Tooltip::after {
+    position: absolute;
+    z-index: 1000000;
+    display: none;
+    /* stylelint-disable-next-line primer/spacing */
+    padding: 0.5em 0.75em;
+    font: normal normal var(--text-body-size-small) / var(--text-body-lineHeight-small) var(--fontStack-system);
+    -webkit-font-smoothing: subpixel-antialiased;
+    color: var(--tooltip-fgColor, var(--fgColor-onEmphasis));
+    text-align: center;
+    text-decoration: none;
+    text-shadow: none;
+    text-transform: none;
+    letter-spacing: normal;
+    overflow-wrap: break-word;
+    white-space: pre;
+    pointer-events: none;
+    content: attr(aria-label);
+    background: var(--tooltip-bgColor, var(--bgColor-emphasis));
+    border-radius: var(--borderRadius-medium);
     opacity: 0;
   }
 
-  to {
-    opacity: 1;
+  /* delay animation for tooltip */
+  @keyframes tooltip-appear {
+    from {
+      opacity: 0;
+    }
+
+    to {
+      opacity: 1;
+    }
   }
-}
 
-.Tooltip:hover::after,
-.Tooltip:active::after,
-.Tooltip:focus::after,
-.Tooltip:focus-within::after {
-  display: inline-block;
-  text-decoration: none;
-  animation-name: tooltip-appear;
-  animation-duration: 0.1s;
-  animation-fill-mode: forwards;
-  animation-timing-function: ease-in;
-  animation-delay: 0s;
-}
+  .Tooltip:hover::after,
+  .Tooltip:active::after,
+  .Tooltip:focus::after,
+  .Tooltip:focus-within::after {
+    display: inline-block;
+    text-decoration: none;
+    animation-name: tooltip-appear;
+    animation-duration: 0.1s;
+    animation-fill-mode: forwards;
+    animation-timing-function: ease-in;
+    animation-delay: 0s;
+  }
 
-.Tooltip--noDelay:hover::after,
-.Tooltip--noDelay:active::after,
-.Tooltip--noDelay:focus::after,
-.Tooltip--noDelay:focus-within::after {
-  animation-delay: 0s;
-}
+  .Tooltip--noDelay:hover::after,
+  .Tooltip--noDelay:active::after,
+  .Tooltip--noDelay:focus::after,
+  .Tooltip--noDelay:focus-within::after {
+    animation-delay: 0s;
+  }
 
-.Tooltip--multiline:hover::after,
-.Tooltip--multiline:active::after,
-.Tooltip--multiline:focus::after,
-.Tooltip--multiline:focus-within::after {
-  display: table-cell;
-}
+  .Tooltip--multiline:hover::after,
+  .Tooltip--multiline:active::after,
+  .Tooltip--multiline:focus::after,
+  .Tooltip--multiline:focus-within::after {
+    display: table-cell;
+  }
 
-/* Tooltipped south */
-.Tooltip--s::after,
-.Tooltip--se::after,
-.Tooltip--sw::after {
-  top: 100%;
-  right: 50%;
-  /* stylelint-disable-next-line primer/spacing */
-  margin-top: 6px;
-}
+  /* Tooltipped south */
+  .Tooltip--s::after,
+  .Tooltip--se::after,
+  .Tooltip--sw::after {
+    top: 100%;
+    right: 50%;
+    /* stylelint-disable-next-line primer/spacing */
+    margin-top: 6px;
+  }
 
-.Tooltip--se::after {
-  right: auto;
-  left: 50%;
-  margin-left: calc(-1 * var(--base-size-16));
-}
+  .Tooltip--se::after {
+    right: auto;
+    left: 50%;
+    margin-left: calc(-1 * var(--base-size-16));
+  }
 
-.Tooltip--sw::after {
-  margin-right: calc(-1 * var(--base-size-16));
-}
+  .Tooltip--sw::after {
+    margin-right: calc(-1 * var(--base-size-16));
+  }
 
-/* Tooltips above the object */
-.Tooltip--n::after,
-.Tooltip--ne::after,
-.Tooltip--nw::after {
-  right: 50%;
-  bottom: 100%;
-  /* stylelint-disable-next-line primer/spacing */
-  margin-bottom: 6px;
-}
+  /* Tooltips above the object */
+  .Tooltip--n::after,
+  .Tooltip--ne::after,
+  .Tooltip--nw::after {
+    right: 50%;
+    bottom: 100%;
+    /* stylelint-disable-next-line primer/spacing */
+    margin-bottom: 6px;
+  }
 
-.Tooltip--ne::after {
-  right: auto;
-  left: 50%;
-  margin-left: calc(-1 * var(--base-size-16));
-}
+  .Tooltip--ne::after {
+    right: auto;
+    left: 50%;
+    margin-left: calc(-1 * var(--base-size-16));
+  }
 
-.Tooltip--nw::after {
-  margin-right: calc(-1 * var(--base-size-16));
-}
+  .Tooltip--nw::after {
+    margin-right: calc(-1 * var(--base-size-16));
+  }
 
-/* Move the tooltip body to the center of the object. */
-.Tooltip--s::after,
-.Tooltip--n::after {
-  transform: translateX(50%);
-}
+  /* Move the tooltip body to the center of the object. */
+  .Tooltip--s::after,
+  .Tooltip--n::after {
+    transform: translateX(50%);
+  }
 
-/* Tooltipped to the left */
-.Tooltip--w::after {
-  right: 100%;
-  bottom: 50%;
-  /* stylelint-disable-next-line primer/spacing */
-  margin-right: 6px;
-  transform: translateY(50%);
-}
+  /* Tooltipped to the left */
+  .Tooltip--w::after {
+    right: 100%;
+    bottom: 50%;
+    /* stylelint-disable-next-line primer/spacing */
+    margin-right: 6px;
+    transform: translateY(50%);
+  }
 
-/* tooltipped to the right */
-.Tooltip--e::after {
-  bottom: 50%;
-  left: 100%;
-  /* stylelint-disable-next-line primer/spacing */
-  margin-left: 6px;
-  transform: translateY(50%);
-}
+  /* tooltipped to the right */
+  .Tooltip--e::after {
+    bottom: 50%;
+    left: 100%;
+    /* stylelint-disable-next-line primer/spacing */
+    margin-left: 6px;
+    transform: translateY(50%);
+  }
 
-.Tooltip--multiline::after {
-  width: max-content;
-  max-width: 250px;
-  overflow-wrap: break-word;
-  white-space: pre-line;
-  border-collapse: separate;
-}
+  .Tooltip--multiline::after {
+    width: max-content;
+    max-width: 250px;
+    overflow-wrap: break-word;
+    white-space: pre-line;
+    border-collapse: separate;
+  }
 
-.Tooltip--multiline.Tooltip--s::after,
-.Tooltip--multiline.Tooltip--n::after {
-  right: auto;
-  left: 50%;
-  transform: translateX(-50%);
-}
+  .Tooltip--multiline.Tooltip--s::after,
+  .Tooltip--multiline.Tooltip--n::after {
+    right: auto;
+    left: 50%;
+    transform: translateX(-50%);
+  }
 
-.Tooltip--multiline.Tooltip--w::after,
-.Tooltip--multiline.Tooltip--e::after {
-  right: 100%;
-}
+  .Tooltip--multiline.Tooltip--w::after,
+  .Tooltip--multiline.Tooltip--e::after {
+    right: 100%;
+  }
 
-.Tooltip--alignRight::after {
-  right: 0;
-  margin-right: 0;
-}
+  .Tooltip--alignRight::after {
+    right: 0;
+    margin-right: 0;
+  }
 
-.Tooltip--alignLeft::after {
-  left: 0;
-  margin-left: 0;
+  .Tooltip--alignLeft::after {
+    left: 0;
+    margin-left: 0;
+  }
 }
diff --git a/packages/react/src/TopicTag/TopicTag.module.css b/packages/react/src/TopicTag/TopicTag.module.css
index 21f575beb90..f6ff8d6836d 100644
--- a/packages/react/src/TopicTag/TopicTag.module.css
+++ b/packages/react/src/TopicTag/TopicTag.module.css
@@ -1,35 +1,37 @@
-/* Add a reset for when TopicTag is an <a> element since our link styles apply an underline text-decoration by default */
-/* stylelint-disable-next-line selector-no-qualifying-type */
-.TopicTag:where(a) {
-  text-decoration: none;
-}
+@layer primer.components.TopicTag {
+  /* Add a reset for when TopicTag is an <a> element since our link styles apply an underline text-decoration by default */
+  /* stylelint-disable-next-line selector-no-qualifying-type */
+  .TopicTag:where(a) {
+    text-decoration: none;
+  }
 
-/* Add a reset for when TopicTag is a <button> element */
-/* stylelint-disable-next-line selector-no-qualifying-type */
-.TopicTag:where(button) {
-  @mixin buttonReset;
-}
+  /* Add a reset for when TopicTag is a <button> element */
+  /* stylelint-disable-next-line selector-no-qualifying-type */
+  .TopicTag:where(button) {
+    @mixin buttonReset;
+  }
 
-.TopicTag {
-  background-color: var(--bgColor-accent-muted);
-  color: var(--fgColor-accent);
-  font-size: var(--text-body-size-small);
-  font-weight: var(--base-text-weight-semibold);
-  line-height: var(--text-body-lineHeight-small);
-  border-radius: var(--borderRadius-full);
-  padding: var(--base-size-2) var(--base-size-12);
-  border: var(--borderWidth-thin) solid var(--topicTag-borderColor, transparent);
-  display: inline-flex;
-  white-space: nowrap;
+  .TopicTag {
+    background-color: var(--bgColor-accent-muted);
+    color: var(--fgColor-accent);
+    font-size: var(--text-body-size-small);
+    font-weight: var(--base-text-weight-semibold);
+    line-height: var(--text-body-lineHeight-small);
+    border-radius: var(--borderRadius-full);
+    padding: var(--base-size-2) var(--base-size-12);
+    border: var(--borderWidth-thin) solid var(--topicTag-borderColor, transparent);
+    display: inline-flex;
+    white-space: nowrap;
 
-  &:hover {
-    background-color: var(--bgColor-accent-emphasis);
-    color: var(--fgColor-onEmphasis);
-  }
+    &:hover {
+      background-color: var(--bgColor-accent-emphasis);
+      color: var(--fgColor-onEmphasis);
+    }
 
-  /* stylelint-disable-next-line selector-max-type */
-  &:where(a, button) {
-    cursor: pointer;
-    user-select: none;
+    /* stylelint-disable-next-line selector-max-type */
+    &:where(a, button) {
+      cursor: pointer;
+      user-select: none;
+    }
   }
 }
diff --git a/packages/react/src/TopicTag/TopicTagGroup.module.css b/packages/react/src/TopicTag/TopicTagGroup.module.css
index 1652fd9cedd..c76d1747282 100644
--- a/packages/react/src/TopicTag/TopicTagGroup.module.css
+++ b/packages/react/src/TopicTag/TopicTagGroup.module.css
@@ -1,6 +1,8 @@
-.TopicTagGroup {
-  display: flex;
-  flex-wrap: wrap;
-  column-gap: var(--base-size-2);
-  row-gap: var(--base-size-8);
+@layer primer.components.TopicTag {
+  .TopicTagGroup {
+    display: flex;
+    flex-wrap: wrap;
+    column-gap: var(--base-size-2);
+    row-gap: var(--base-size-8);
+  }
 }
diff --git a/packages/react/src/Truncate/Truncate.module.css b/packages/react/src/Truncate/Truncate.module.css
index a0b2df85f87..3c8d18aa51f 100644
--- a/packages/react/src/Truncate/Truncate.module.css
+++ b/packages/react/src/Truncate/Truncate.module.css
@@ -1,16 +1,18 @@
-.Truncate {
-  display: inherit;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  max-width: var(--truncate-max-width);
+@layer primer.components.Truncate {
+  .Truncate {
+    display: inherit;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    max-width: var(--truncate-max-width);
 
-  &:where([data-expandable]):hover {
-    max-width: 10000px;
-  }
+    &:where([data-expandable]):hover {
+      max-width: 10000px;
+    }
 
-  &:where([data-inline]) {
-    display: inline-block;
-    vertical-align: top;
+    &:where([data-inline]) {
+      display: inline-block;
+      vertical-align: top;
+    }
   }
 }
diff --git a/packages/react/src/VisuallyHidden/VisuallyHidden.module.css b/packages/react/src/VisuallyHidden/VisuallyHidden.module.css
index 0b7ea0f8148..cac313da2aa 100644
--- a/packages/react/src/VisuallyHidden/VisuallyHidden.module.css
+++ b/packages/react/src/VisuallyHidden/VisuallyHidden.module.css
@@ -1,10 +1,12 @@
-.VisuallyHidden {
-  &:not(:focus):not(:active):not(:focus-within) {
-    position: absolute;
-    width: 1px;
-    height: 1px;
-    overflow: hidden;
-    white-space: nowrap;
-    clip-path: inset(50%);
+@layer primer.components.VisuallyHidden {
+  .VisuallyHidden {
+    &:not(:focus):not(:active):not(:focus-within) {
+      position: absolute;
+      width: 1px;
+      height: 1px;
+      overflow: hidden;
+      white-space: nowrap;
+      clip-path: inset(50%);
+    }
   }
 }
diff --git a/packages/react/src/_VisuallyHidden.module.css b/packages/react/src/_VisuallyHidden.module.css
index b82245305e8..ddeb36d60ac 100644
--- a/packages/react/src/_VisuallyHidden.module.css
+++ b/packages/react/src/_VisuallyHidden.module.css
@@ -1,13 +1,15 @@
-.InternalVisuallyHidden {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  /* stylelint-disable-next-line primer/spacing */
-  margin: -1px;
-  overflow: hidden;
-  /* stylelint-disable-next-line property-no-deprecated */
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border-width: 0;
+@layer primer.components.VisuallyHidden {
+  .InternalVisuallyHidden {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    /* stylelint-disable-next-line primer/spacing */
+    margin: -1px;
+    overflow: hidden;
+    /* stylelint-disable-next-line property-no-deprecated */
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border-width: 0;
+  }
 }
diff --git a/packages/react/src/__tests__/css-layers.test.ts b/packages/react/src/__tests__/css-layers.test.ts
index 65c09e4da69..6e921a8d425 100644
--- a/packages/react/src/__tests__/css-layers.test.ts
+++ b/packages/react/src/__tests__/css-layers.test.ts
@@ -55,6 +55,22 @@ const allowlist = new Set([
   path.resolve(import.meta.dirname, '../StateLabel/StateLabel.module.css'),
   path.resolve(import.meta.dirname, '../SubNav/SubNav.module.css'),
   path.resolve(import.meta.dirname, '../TabNav/TabNav.module.css'),
+  path.resolve(import.meta.dirname, '../Text/Text.module.css'),
+  path.resolve(import.meta.dirname, '../Timeline/Timeline.module.css'),
+  path.resolve(import.meta.dirname, '../Tooltip/Tooltip.module.css'),
+  path.resolve(import.meta.dirname, '../TopicTag/TopicTag.module.css'),
+  path.resolve(import.meta.dirname, '../TopicTag/TopicTagGroup.module.css'),
+  path.resolve(import.meta.dirname, '../Truncate/Truncate.module.css'),
+  path.resolve(import.meta.dirname, '../deprecated/ActionList/Divider.module.css'),
+  path.resolve(import.meta.dirname, '../deprecated/ActionList/Header.module.css'),
+  path.resolve(import.meta.dirname, '../deprecated/ActionList/Item.module.css'),
+  path.resolve(import.meta.dirname, '../deprecated/ActionList/List.module.css'),
+  path.resolve(import.meta.dirname, '../VisuallyHidden/VisuallyHidden.module.css'),
+  path.resolve(import.meta.dirname, '../_VisuallyHidden.module.css'),
+  path.resolve(import.meta.dirname, '../CounterLabel/CounterLabel.module.css'),
+  path.resolve(import.meta.dirname, '../DataTable/Pagination.module.css'),
+  path.resolve(import.meta.dirname, '../DataTable/Table.module.css'),
+  path.resolve(import.meta.dirname, '../internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroup.module.css'),
 ])
 const files = Array.from(allowlist).map(file => {
   return [path.relative(path.resolve(import.meta.dirname, '..'), file), file]
diff --git a/packages/react/src/deprecated/ActionList/Divider.module.css b/packages/react/src/deprecated/ActionList/Divider.module.css
index e0050fc4ea3..1169f3687e8 100644
--- a/packages/react/src/deprecated/ActionList/Divider.module.css
+++ b/packages/react/src/deprecated/ActionList/Divider.module.css
@@ -1,8 +1,10 @@
-.Divider {
-  height: var(--borderWidth-thin);
-  /* stylelint-disable-next-line primer/colors */
-  background: var(--borderColor-muted);
-  /* stylelint-disable-next-line primer/spacing */
-  margin-top: calc(var(--base-size-8) - 1px);
-  margin-bottom: var(--base-size-8);
+@layer primer.components.DeprecatedActionList {
+  .Divider {
+    height: var(--borderWidth-thin);
+    /* stylelint-disable-next-line primer/colors */
+    background: var(--borderColor-muted);
+    /* stylelint-disable-next-line primer/spacing */
+    margin-top: calc(var(--base-size-8) - 1px);
+    margin-bottom: var(--base-size-8);
+  }
 }
diff --git a/packages/react/src/deprecated/ActionList/Header.module.css b/packages/react/src/deprecated/ActionList/Header.module.css
index f9cbf6c2bee..2f038357206 100644
--- a/packages/react/src/deprecated/ActionList/Header.module.css
+++ b/packages/react/src/deprecated/ActionList/Header.module.css
@@ -1,25 +1,27 @@
-.Header {
-  /* 6px vertical padding + 20px line height = 32px total height
-   *
-   * TODO: When rem-based spacing on a 4px scale lands, replace
-   * hardcoded '6px' with 'calc((${get('space.s32')} - ${get('space.20')}) / 2)'.
-   */
-  /* stylelint-disable-next-line primer/spacing */
-  padding: 6px var(--base-size-16);
-  font-size: var(--text-body-size-small);
-  font-weight: var(--text-title-weight-large);
-  color: var(--fgColor-muted);
+@layer primer.components.DeprecatedActionList {
+  .Header {
+    /* 6px vertical padding + 20px line height = 32px total height
+     *
+     * TODO: When rem-based spacing on a 4px scale lands, replace
+     * hardcoded '6px' with 'calc((${get('space.s32')} - ${get('space.20')}) / 2)'.
+     */
+    /* stylelint-disable-next-line primer/spacing */
+    padding: 6px var(--base-size-16);
+    font-size: var(--text-body-size-small);
+    font-weight: var(--text-title-weight-large);
+    color: var(--fgColor-muted);
 
-  &:where([data-filled]) {
-    background: var(--bgColor-muted);
-    margin: var(--base-size-8) 0;
-    /* stylelint-disable-next-line primer/colors */
-    border-top: var(--borderWidth-thin) solid var(--bgColor-neutral-muted);
-    /* stylelint-disable-next-line primer/colors */
-    border-bottom: var(--borderWidth-thin) solid var(--bgColor-neutral-muted);
+    &:where([data-filled]) {
+      background: var(--bgColor-muted);
+      margin: var(--base-size-8) 0;
+      /* stylelint-disable-next-line primer/colors */
+      border-top: var(--borderWidth-thin) solid var(--bgColor-neutral-muted);
+      /* stylelint-disable-next-line primer/colors */
+      border-bottom: var(--borderWidth-thin) solid var(--bgColor-neutral-muted);
 
-    &:first-child {
-      margin-top: 0;
+      &:first-child {
+        margin-top: 0;
+      }
     }
   }
 }
diff --git a/packages/react/src/deprecated/ActionList/Item.module.css b/packages/react/src/deprecated/ActionList/Item.module.css
index 05e892c0c2e..4b8dd2f3947 100644
--- a/packages/react/src/deprecated/ActionList/Item.module.css
+++ b/packages/react/src/deprecated/ActionList/Item.module.css
@@ -1,255 +1,259 @@
-/* stylelint-disable selector-max-specificity */
-.DividedContent {
-  display: flex;
-  min-width: 0;
-
-  /* Required for dividers */
-  position: relative;
-  flex-grow: 1;
-}
-
-.MainContent {
-  align-items: baseline;
-  display: flex;
-  min-width: 0;
-  flex-direction: var(--main-content-flex-direction);
-  flex-grow: 1;
-}
-
-.Item {
-  /* 6px vertical padding + 20px line height = 32px total height */
-  /* stylelint-disable-next-line primer/spacing */
-  padding: 6px var(--base-size-8);
-  display: flex;
-  border-radius: var(--borderRadius-medium);
-  color: var(--fgColor-default);
-  /* 2 frames on a 60hz monitor */
-  transition: background 33.333ms linear;
-  text-decoration: none;
-}
-
-.Item--danger {
-  color: var(--fgColor-danger);
-}
+@layer primer.components.DeprecatedActionList {
+  /* stylelint-disable selector-max-specificity */
+  .DividedContent {
+    display: flex;
+    min-width: 0;
+
+    /* Required for dividers */
+    position: relative;
+    flex-grow: 1;
+  }
 
-.Item--disabled {
-  color: var(--fgColor-disabled);
-  cursor: default;
-}
+  .MainContent {
+    align-items: baseline;
+    display: flex;
+    min-width: 0;
+    flex-direction: var(--main-content-flex-direction);
+    flex-grow: 1;
+  }
 
-@media (hover: hover) and (pointer: fine) {
-  .Item:hover {
-    /* allow override in case another item in the list is active/focused */
-    background: var(--item-hover-bg-override, var(--bgColor-muted));
-    cursor: pointer;
+  .Item {
+    /* 6px vertical padding + 20px line height = 32px total height */
+    /* stylelint-disable-next-line primer/spacing */
+    padding: 6px var(--base-size-8);
+    display: flex;
+    border-radius: var(--borderRadius-medium);
+    color: var(--fgColor-default);
+    /* 2 frames on a 60hz monitor */
+    transition: background 33.333ms linear;
+    text-decoration: none;
   }
 
-  .Item--danger:hover {
-    background: var(--item-hover-bg-override, var(--bgColor-danger-muted));
+  .Item--danger {
     color: var(--fgColor-danger);
   }
 
-  .Item--disabled:hover {
-    background: transparent;
+  .Item--disabled {
+    color: var(--fgColor-disabled);
     cursor: default;
   }
-}
 
-/* Item dividers */
-.Item:not(:first-of-type):not([data-component='ActionList.Divider'] + *):not([data-component='ActionList.Header'] + *) {
-  margin-top: 0;
+  @media (hover: hover) and (pointer: fine) {
+    .Item:hover {
+      /* allow override in case another item in the list is active/focused */
+      background: var(--item-hover-bg-override, var(--bgColor-muted));
+      cursor: pointer;
+    }
+
+    .Item--danger:hover {
+      background: var(--item-hover-bg-override, var(--bgColor-danger-muted));
+      color: var(--fgColor-danger);
+    }
+
+    .Item--disabled:hover {
+      background: transparent;
+      cursor: default;
+    }
+  }
 
-  :where([data-divider]) {
-    /* stylelint-disable-next-line primer/spacing */
-    margin-top: 1px;
+  /* Item dividers */
+  .Item:not(:first-of-type):not([data-component='ActionList.Divider'] + *):not(
+      [data-component='ActionList.Header'] + *
+    ) {
+    margin-top: 0;
+
+    :where([data-divider]) {
+      /* stylelint-disable-next-line primer/spacing */
+      margin-top: 1px;
+    }
   }
-}
 
-/* stylelint-disable-next-line selector-max-compound-selectors */
-.Item:not(:first-of-type):not([data-component='ActionList.Divider'] + *):not([data-component='ActionList.Header'] + *)
-  .DividedContent::before {
-  content: ' ';
-  display: block;
-  position: absolute;
-  width: 100%;
-  /* stylelint-disable-next-line primer/spacing */
-  top: -7px;
-  border: 0 solid var(--borderColor-muted);
-  border-top-width: 0;
-}
+  /* stylelint-disable-next-line selector-max-compound-selectors */
+  .Item:not(:first-of-type):not([data-component='ActionList.Divider'] + *):not([data-component='ActionList.Header'] + *)
+    .DividedContent::before {
+    content: ' ';
+    display: block;
+    position: absolute;
+    width: 100%;
+    /* stylelint-disable-next-line primer/spacing */
+    top: -7px;
+    border: 0 solid var(--borderColor-muted);
+    border-top-width: 0;
+  }
 
-:where([data-divider]) {
-  .DividedContent::before {
-    /* stylelint-disable-next-line primer/borders */
-    border-top-width: 1px;
+  :where([data-divider]) {
+    .DividedContent::before {
+      /* stylelint-disable-next-line primer/borders */
+      border-top-width: 1px;
+    }
   }
-}
 
-/* Item dividers should not be visible above/below hovered items */
-.Item:hover .DividedContent::before,
-:hover + .Item .DividedContent::before {
-  /* allow override in case another item in the list is active/focused */
-  /* stylelint-disable-next-line primer/colors */
-  border-color: var(--item-hover-divider-border-color-override, transparent) !important;
-}
+  /* Item dividers should not be visible above/below hovered items */
+  .Item:hover .DividedContent::before,
+  :hover + .Item .DividedContent::before {
+    /* allow override in case another item in the list is active/focused */
+    /* stylelint-disable-next-line primer/colors */
+    border-color: var(--item-hover-divider-border-color-override, transparent) !important;
+  }
 
-/* Item dividers should not be visible above/below focused items */
-.Item:focus .DividedContent::before,
-:focus + .Item .DividedContent::before,
-.Item[data-is-active-descendant] .DividedContent::before,
-[data-active-descendant] + .Item .DividedContent::before {
-  /* !important because all the :not's above give higher specificity */
-  border-color: transparent !important;
-}
+  /* Item dividers should not be visible above/below focused items */
+  .Item:focus .DividedContent::before,
+  :focus + .Item .DividedContent::before,
+  .Item[data-is-active-descendant] .DividedContent::before,
+  [data-active-descendant] + .Item .DividedContent::before {
+    /* !important because all the :not's above give higher specificity */
+    border-color: transparent !important;
+  }
 
-/* Active Descendant */
-.Item[data-is-active-descendant='activated-directly'] {
-  background: var(--bgColor-accent-muted);
-}
+  /* Active Descendant */
+  .Item[data-is-active-descendant='activated-directly'] {
+    background: var(--bgColor-accent-muted);
+  }
 
-.Item[data-is-active-descendant='activated-indirectly'] {
-  background: var(--bgColor-muted);
-}
+  .Item[data-is-active-descendant='activated-indirectly'] {
+    background: var(--bgColor-muted);
+  }
 
-.Item:focus {
-  background: var(--bgColor-accent-muted);
-  outline: none;
-}
+  .Item:focus {
+    background: var(--bgColor-accent-muted);
+    outline: none;
+  }
 
-.Item:active {
-  background: var(--bgColor-accent-muted);
-}
+  .Item:active {
+    background: var(--bgColor-accent-muted);
+  }
 
-.MainContent--inline {
-  flex-direction: row;
-}
+  .MainContent--inline {
+    flex-direction: row;
+  }
 
-.MainContent--block {
-  flex-direction: column;
-}
+  .MainContent--block {
+    flex-direction: column;
+  }
 
-.BaseVisualContainer {
-  /* Match visual height to adjacent text line height. */
-  height: 20px;
-  width: var(--base-size-16);
-  margin-right: var(--base-size-8);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-shrink: 0;
-}
+  .BaseVisualContainer {
+    /* Match visual height to adjacent text line height. */
+    height: 20px;
+    width: var(--base-size-16);
+    margin-right: var(--base-size-8);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-shrink: 0;
+  }
 
-.LeadingVisualContainer {
-  /* Match visual height to adjacent text line height. */
-  height: 20px;
-  width: var(--base-size-16);
-  margin-right: var(--base-size-8);
-  align-items: center;
-  flex-shrink: 0;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-}
+  .LeadingVisualContainer {
+    /* Match visual height to adjacent text line height. */
+    height: 20px;
+    width: var(--base-size-16);
+    margin-right: var(--base-size-8);
+    align-items: center;
+    flex-shrink: 0;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+  }
 
-.LeadingVisualContainer svg {
-  fill: var(--fgColor-muted);
-  font-size: var(--text-body-size-small);
-}
+  .LeadingVisualContainer svg {
+    fill: var(--fgColor-muted);
+    font-size: var(--text-body-size-small);
+  }
 
-.LeadingVisualContainer:where([data-variant='danger']) svg {
-  fill: var(--fgColor-danger);
-}
+  .LeadingVisualContainer:where([data-variant='danger']) svg {
+    fill: var(--fgColor-danger);
+  }
 
-.LeadingVisualContainer:where([data-disabled]) svg {
-  fill: var(--fgColor-disabled);
-}
+  .LeadingVisualContainer:where([data-disabled]) svg {
+    fill: var(--fgColor-disabled);
+  }
 
-.TrailingContent {
-  /* Match visual height to adjacent text line height. */
-  color: var(--fgColor-muted);
-  height: 20px;
-  width: auto;
-  margin-left: var(--base-size-8);
-  margin-right: 0;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-shrink: 0;
-}
+  .TrailingContent {
+    /* Match visual height to adjacent text line height. */
+    color: var(--fgColor-muted);
+    height: 20px;
+    width: auto;
+    margin-left: var(--base-size-8);
+    margin-right: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-shrink: 0;
+  }
 
-.TrailingContent:where([data-variant='danger']) {
-  color: var(--fgColor-muted);
-}
+  .TrailingContent:where([data-variant='danger']) {
+    color: var(--fgColor-muted);
+  }
 
-.TrailingContent:where([data-disabled]) {
-  color: var(--fgColor-disabled);
-}
+  .TrailingContent:where([data-disabled]) {
+    color: var(--fgColor-disabled);
+  }
 
-.TrailingContent div:nth-child(2) {
-  margin-left: var(--base-size-8);
-}
+  .TrailingContent div:nth-child(2) {
+    margin-left: var(--base-size-8);
+  }
 
-.TrailingContent svg {
-  fill: var(--fgColor-muted);
-  font-size: var(--text-body-size-small);
-}
+  .TrailingContent svg {
+    fill: var(--fgColor-muted);
+    font-size: var(--text-body-size-small);
+  }
 
-.TrailingContent:where([data-variant='danger']) svg {
-  fill: var(--fgColor-danger);
-}
+  .TrailingContent:where([data-variant='danger']) svg {
+    fill: var(--fgColor-danger);
+  }
 
-.TrailingContent:where([data-disabled]) svg {
-  fill: var(--fgColor-disabled);
-}
+  .TrailingContent:where([data-disabled]) svg {
+    fill: var(--fgColor-disabled);
+  }
 
-.DescriptionContainer {
-  color: var(--fgColor-muted);
-  font-size: var(--text-body-size-small);
-  /* stylelint-disable-next-line primer/typography */
-  line-height: 16px;
-  min-width: 0;
-  flex-grow: 1;
-  /* stylelint-disable-next-line primer/spacing */
-  margin-left: var(--description-container-margin-left);
-  flex-basis: var(--description-container-flex-basis);
-}
+  .DescriptionContainer {
+    color: var(--fgColor-muted);
+    font-size: var(--text-body-size-small);
+    /* stylelint-disable-next-line primer/typography */
+    line-height: 16px;
+    min-width: 0;
+    flex-grow: 1;
+    /* stylelint-disable-next-line primer/spacing */
+    margin-left: var(--description-container-margin-left);
+    flex-basis: var(--description-container-flex-basis);
+  }
 
-.MultiSelectIcon {
-  color: var(--fgColor-muted);
-}
+  .MultiSelectIcon {
+    color: var(--fgColor-muted);
+  }
 
-.MultiSelectIcon rect {
-  fill: var(--bgColor-default);
-  stroke: var(--borderColor-default);
-  shape-rendering: auto; /* this is a workaround to override global style in github/github, see primer/react#1666 */
-}
+  .MultiSelectIcon rect {
+    fill: var(--bgColor-default);
+    stroke: var(--borderColor-default);
+    shape-rendering: auto; /* this is a workaround to override global style in github/github, see primer/react#1666 */
+  }
 
-.MultiSelectIcon path {
-  fill: var(--fgColor-onEmphasis);
-  box-shadow: var(--shadow-resting-small);
-  opacity: 0;
-}
+  .MultiSelectIcon path {
+    fill: var(--fgColor-onEmphasis);
+    box-shadow: var(--shadow-resting-small);
+    opacity: 0;
+  }
 
-.MultiSelectIcon:where([data-selected]) rect {
-  fill: var(--bgColor-accent-emphasis);
-  stroke: var(--bgColor-accent-emphasis);
-}
+  .MultiSelectIcon:where([data-selected]) rect {
+    fill: var(--bgColor-accent-emphasis);
+    stroke: var(--bgColor-accent-emphasis);
+  }
 
-.MultiSelectIcon:where([data-selected]) path {
-  opacity: 1;
-}
+  .MultiSelectIcon:where([data-selected]) path {
+    opacity: 1;
+  }
 
-/* stylelint-disable-next-line selector-max-compound-selectors */
-.Item[data-divider]:not(:first-of-type):not([data-component='ActionList.Divider'] + .Item):not(
-    [data-component='ActionList.Header'] + .Item
-  )
-  .DividedContent::before {
-  border-top-width: var(--borderWidth-thin);
-}
+  /* stylelint-disable-next-line selector-max-compound-selectors */
+  .Item[data-divider]:not(:first-of-type):not([data-component='ActionList.Divider'] + .Item):not(
+      [data-component='ActionList.Header'] + .Item
+    )
+    .DividedContent::before {
+    border-top-width: var(--borderWidth-thin);
+  }
 
-.Item[data-divider]:not(:first-of-type):not([data-component='ActionList.Divider'] + .Item):not(
-    [data-component='ActionList.Header'] + .Item
-  ) {
-  /* stylelint-disable-next-line primer/spacing */
-  margin-top: 1px;
+  .Item[data-divider]:not(:first-of-type):not([data-component='ActionList.Divider'] + .Item):not(
+      [data-component='ActionList.Header'] + .Item
+    ) {
+    /* stylelint-disable-next-line primer/spacing */
+    margin-top: 1px;
+  }
 }
diff --git a/packages/react/src/deprecated/ActionList/List.module.css b/packages/react/src/deprecated/ActionList/List.module.css
index 2c97f08a294..3fa4fc5fca6 100644
--- a/packages/react/src/deprecated/ActionList/List.module.css
+++ b/packages/react/src/deprecated/ActionList/List.module.css
@@ -1,5 +1,7 @@
-.List[data-has-active-descendant],
-.List:focus-within {
-  --item-hover-bg-override: none;
-  --item-hover-divider-border-color-override: var(--borderColor-muted);
+@layer primer.components.DeprecatedActionList {
+  .List[data-has-active-descendant],
+  .List:focus-within {
+    --item-hover-bg-override: none;
+    --item-hover-divider-border-color-override: var(--borderColor-muted);
+  }
 }
diff --git a/packages/react/src/internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroup.module.css b/packages/react/src/internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroup.module.css
index 0b44f6dc447..e67b814aa8e 100644
--- a/packages/react/src/internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroup.module.css
+++ b/packages/react/src/internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroup.module.css
@@ -1,48 +1,50 @@
-.Body {
-  display: flex;
-  padding: 0;
-  margin: 0;
-  list-style: none;
-  flex-direction: column;
-
-  & > * + * {
-    margin-top: var(--base-size-8);
+@layer primer.components.CheckboxOrRadioGroup {
+  .Body {
+    display: flex;
+    padding: 0;
+    margin: 0;
+    list-style: none;
+    flex-direction: column;
+
+    & > * + * {
+      margin-top: var(--base-size-8);
+    }
   }
-}
 
-.GroupFieldset {
-  padding: 0;
-  margin: 0;
-  border: none;
+  .GroupFieldset {
+    padding: 0;
+    margin: 0;
+    border: none;
 
-  &:where([data-validation]) {
-    margin-bottom: var(--base-size-8);
+    &:where([data-validation]) {
+      margin-bottom: var(--base-size-8);
+    }
   }
-}
 
-.GroupLegend {
-  padding: 0;
+  .GroupLegend {
+    padding: 0;
 
-  &:where([data-legend-visible]) {
-    margin-bottom: var(--base-size-8);
+    &:where([data-legend-visible]) {
+      margin-bottom: var(--base-size-8);
+    }
   }
-}
 
-.CheckboxOrRadioGroupCaption {
-  font-size: var(--text-body-size-medium);
-  color: var(--fgColor-muted);
-}
+  .CheckboxOrRadioGroupCaption {
+    font-size: var(--text-body-size-medium);
+    color: var(--fgColor-muted);
+  }
 
-.RadioGroupLabel {
-  display: block;
-  font-size: var(--text-body-size-medium);
-  font-weight: var(--base-text-weight-semibold);
+  .RadioGroupLabel {
+    display: block;
+    font-size: var(--text-body-size-medium);
+    font-weight: var(--base-text-weight-semibold);
 
-  &:where([data-label-disabled]) {
-    color: var(--fgColor-muted);
+    &:where([data-label-disabled]) {
+      color: var(--fgColor-muted);
+    }
   }
-}
 
-.GroupLabelChildren {
-  margin-right: var(--base-size-8);
+  .GroupLabelChildren {
+    margin-right: var(--base-size-8);
+  }
 }