diff --git a/.changeset/css-layers-button-prerequisites.md b/.changeset/css-layers-button-prerequisites.md
new file mode 100644
index 00000000000..5cfc4fd2d64
--- /dev/null
+++ b/.changeset/css-layers-button-prerequisites.md
@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+KeybindingHint, Spinner, Textarea, TextInput, ToggleSwitch, Token, TextInputWithTokens, TooltipV2: Add CSS layer support for component styles
diff --git a/packages/react/src/KeybindingHint/KeybindingHint.module.css b/packages/react/src/KeybindingHint/KeybindingHint.module.css
index 980830b0e8f..9eee373a7b2 100644
--- a/packages/react/src/KeybindingHint/KeybindingHint.module.css
+++ b/packages/react/src/KeybindingHint/KeybindingHint.module.css
@@ -1,15 +1,17 @@
-.KeybindingHint {
-  position: relative;
-  padding: 0;
-  overflow: visible;
-  font-family: inherit;
-  font-size: inherit;
-  /* stylelint-disable-next-line primer/typography */
-  line-height: unset;
-  color: inherit;
-  white-space: nowrap;
-  vertical-align: baseline;
-  background: none;
-  border: none;
-  box-shadow: none;
+@layer primer.components.KeybindingHint {
+  .KeybindingHint {
+    position: relative;
+    padding: 0;
+    overflow: visible;
+    font-family: inherit;
+    font-size: inherit;
+    /* stylelint-disable-next-line primer/typography */
+    line-height: unset;
+    color: inherit;
+    white-space: nowrap;
+    vertical-align: baseline;
+    background: none;
+    border: none;
+    box-shadow: none;
+  }
 }
diff --git a/packages/react/src/KeybindingHint/components/Chord.module.css b/packages/react/src/KeybindingHint/components/Chord.module.css
index 204ef191baa..0f46034b84b 100644
--- a/packages/react/src/KeybindingHint/components/Chord.module.css
+++ b/packages/react/src/KeybindingHint/components/Chord.module.css
@@ -1,48 +1,50 @@
-.Chord {
-  display: inline-flex;
-  border: var(--borderWidth-thin) solid;
-  font-weight: var(--base-text-weight-normal);
-  gap: 0.5ch;
-  box-shadow: none;
-  vertical-align: baseline;
-  overflow: hidden;
-  justify-content: center;
-  border-radius: var(--borderRadius-default);
-  font-size: var(--text-body-size-small);
-  padding: var(--base-size-4);
-  line-height: 10px; /* stylelint-disable-line primer/typography */
-}
+@layer primer.components.KeybindingHint {
+  .Chord {
+    display: inline-flex;
+    border: var(--borderWidth-thin) solid;
+    font-weight: var(--base-text-weight-normal);
+    gap: 0.5ch;
+    box-shadow: none;
+    vertical-align: baseline;
+    overflow: hidden;
+    justify-content: center;
+    border-radius: var(--borderRadius-default);
+    font-size: var(--text-body-size-small);
+    padding: var(--base-size-4);
+    line-height: 10px; /* stylelint-disable-line primer/typography */
+  }
 
-.ChordNormal {
-  background: var(--bgColor-transparent);
-  color: var(--fgColor-muted);
-  border-color: var(--borderColor-default);
-}
+  .ChordNormal {
+    background: var(--bgColor-transparent);
+    color: var(--fgColor-muted);
+    border-color: var(--borderColor-default);
+  }
 
-.ChordOnEmphasis {
-  background: var(--counter-bgColor-emphasis);
-  color: var(--fgColor-onEmphasis);
-  border-color: transparent;
-}
+  .ChordOnEmphasis {
+    background: var(--counter-bgColor-emphasis);
+    color: var(--fgColor-onEmphasis);
+    border-color: transparent;
+  }
 
-.ChordOnPrimary {
-  background: var(--button-primary-bgColor-active);
-  color: var(--fgColor-onEmphasis);
-  border-color: transparent;
-}
+  .ChordOnPrimary {
+    background: var(--button-primary-bgColor-active);
+    color: var(--fgColor-onEmphasis);
+    border-color: transparent;
+  }
 
-.ChordSmall {
-  border-radius: var(--borderRadius-small);
-  font-size: 11px; /* stylelint-disable-line primer/typography */
-  padding: var(--base-size-2);
-  line-height: var(--base-size-8); /* stylelint-disable-line primer/typography */
-  min-width: var(--base-size-16);
-}
+  .ChordSmall {
+    border-radius: var(--borderRadius-small);
+    font-size: 11px; /* stylelint-disable-line primer/typography */
+    padding: var(--base-size-2);
+    line-height: var(--base-size-8); /* stylelint-disable-line primer/typography */
+    min-width: var(--base-size-16);
+  }
 
-.ChordNormal:not(.ChordSmall) {
-  border-radius: var(--borderRadius-medium);
-  font-size: var(--text-body-size-small, 0.75rem);
-  padding: var(--base-size-4);
-  line-height: 10px; /* stylelint-disable-line primer/typography */
-  min-width: var(--base-size-20);
+  .ChordNormal:not(.ChordSmall) {
+    border-radius: var(--borderRadius-medium);
+    font-size: var(--text-body-size-small, 0.75rem);
+    padding: var(--base-size-4);
+    line-height: 10px; /* stylelint-disable-line primer/typography */
+    min-width: var(--base-size-20);
+  }
 }
diff --git a/packages/react/src/Spinner/Spinner.module.css b/packages/react/src/Spinner/Spinner.module.css
index 5554ed37490..b922de987c6 100644
--- a/packages/react/src/Spinner/Spinner.module.css
+++ b/packages/react/src/Spinner/Spinner.module.css
@@ -1,13 +1,15 @@
-.Box {
-  display: inline-flex;
-}
+@layer primer.components.Spinner {
+  .Box {
+    display: inline-flex;
+  }
 
-@keyframes rotate-keyframes {
-  100% {
-    transform: rotate(360deg);
+  @keyframes rotate-keyframes {
+    100% {
+      transform: rotate(360deg);
+    }
   }
-}
 
-.SpinnerAnimation {
-  animation: rotate-keyframes var(--base-duration-1000) var(--base-easing-linear) infinite;
+  .SpinnerAnimation {
+    animation: rotate-keyframes var(--base-duration-1000) var(--base-easing-linear) infinite;
+  }
 }
diff --git a/packages/react/src/TextInput/TextInput.module.css b/packages/react/src/TextInput/TextInput.module.css
index c261a151557..89d9e26403d 100644
--- a/packages/react/src/TextInput/TextInput.module.css
+++ b/packages/react/src/TextInput/TextInput.module.css
@@ -1,10 +1,12 @@
-.CharacterCounter {
-  display: flex;
-  align-items: center;
-  gap: var(--control-xsmall-gap);
-  color: var(--fgColor-muted);
-}
+@layer primer.components.TextInput {
+  .CharacterCounter {
+    display: flex;
+    align-items: center;
+    gap: var(--control-xsmall-gap);
+    color: var(--fgColor-muted);
+  }
 
-.CharacterCounter--error {
-  color: var(--fgColor-danger);
+  .CharacterCounter--error {
+    color: var(--fgColor-danger);
+  }
 }
diff --git a/packages/react/src/TextInputWithTokens/TextInputWithTokens.module.css b/packages/react/src/TextInputWithTokens/TextInputWithTokens.module.css
index 75fa82130b9..cd0ca9bb8be 100644
--- a/packages/react/src/TextInputWithTokens/TextInputWithTokens.module.css
+++ b/packages/react/src/TextInputWithTokens/TextInputWithTokens.module.css
@@ -1,62 +1,64 @@
-.TextInputWrapper {
-  padding-top: var(--base-size-6);
-  padding-bottom: var(--base-size-6);
-  padding-left: var(--base-size-12);
+@layer primer.components.TextInputWithTokens {
+  .TextInputWrapper {
+    padding-top: var(--base-size-6);
+    padding-bottom: var(--base-size-6);
+    padding-left: var(--base-size-12);
 
-  &:where([data-block]) {
-    display: flex;
-    width: 100%;
+    &:where([data-block]) {
+      display: flex;
+      width: 100%;
+    }
+
+    &:where([data-token-wrapping='true']) {
+      overflow: auto;
+    }
   }
 
-  &:where([data-token-wrapping='true']) {
-    overflow: auto;
+  .UnstyledTextInput {
+    height: 100%;
   }
-}
 
-.UnstyledTextInput {
-  height: 100%;
-}
+  .InputWrapper {
+    order: 1;
+    flex-grow: 1;
+  }
 
-.InputWrapper {
-  order: 1;
-  flex-grow: 1;
-}
+  .Container {
+    display: flex;
+    margin-bottom: calc(var(--base-size-4) * -1);
+    margin-left: calc(var(--base-size-4) * -1);
+    align-items: center;
+    flex-wrap: wrap;
+    flex-grow: 1;
 
-.Container {
-  display: flex;
-  margin-bottom: calc(var(--base-size-4) * -1);
-  margin-left: calc(var(--base-size-4) * -1);
-  align-items: center;
-  flex-wrap: wrap;
-  flex-grow: 1;
+    &:where([data-prevent-token-wrapping='true']) {
+      flex-wrap: nowrap;
+    }
 
-  &:where([data-prevent-token-wrapping='true']) {
-    flex-wrap: nowrap;
+    > * {
+      margin-bottom: var(--base-size-4);
+      margin-left: var(--base-size-4);
+      flex-shrink: 0;
+    }
   }
 
-  > * {
-    margin-bottom: var(--base-size-4);
-    margin-left: var(--base-size-4);
-    flex-shrink: 0;
+  .OverflowCountSmall {
+    color: var(--fgColor-muted);
+    font-size: var(--text-body-size-small);
   }
-}
 
-.OverflowCountSmall {
-  color: var(--fgColor-muted);
-  font-size: var(--text-body-size-small);
-}
-
-.OverflowCountMedium {
-  color: var(--fgColor-muted);
-  font-size: var(--text-body-size-medium);
-}
+  .OverflowCountMedium {
+    color: var(--fgColor-muted);
+    font-size: var(--text-body-size-medium);
+  }
 
-.OverflowCountLarge {
-  color: var(--fgColor-muted);
-  font-size: var(--text-body-size-medium);
-}
+  .OverflowCountLarge {
+    color: var(--fgColor-muted);
+    font-size: var(--text-body-size-medium);
+  }
 
-.OverflowCountXLarge {
-  color: var(--fgColor-muted);
-  font-size: var(--text-body-size-large);
+  .OverflowCountXLarge {
+    color: var(--fgColor-muted);
+    font-size: var(--text-body-size-large);
+  }
 }
diff --git a/packages/react/src/Textarea/TextArea.module.css b/packages/react/src/Textarea/TextArea.module.css
index 9397b4f8b3d..3da0bc1b634 100644
--- a/packages/react/src/Textarea/TextArea.module.css
+++ b/packages/react/src/Textarea/TextArea.module.css
@@ -1,45 +1,47 @@
-.TextArea {
-  width: 100%;
-  font-family: inherit;
-  font-size: inherit;
-  color: inherit;
-  resize: both;
-  background-color: transparent;
-  border: 0;
-  appearance: none;
-}
-
-.TextArea:focus {
-  outline: 0;
-}
-
-.TextArea[data-resize='none'] {
-  resize: none;
-}
-
-.TextArea[data-resize='both'] {
-  resize: both;
-}
-
-.TextArea[data-resize='horizontal'] {
-  resize: horizontal;
-}
-
-.TextArea[data-resize='vertical'] {
-  resize: vertical;
-}
-
-.TextArea:disabled {
-  resize: none;
-}
-
-.CharacterCounter {
-  display: flex;
-  align-items: center;
-  gap: var(--control-xsmall-gap);
-  color: var(--fgColor-muted);
-}
-
-.CharacterCounter--error {
-  color: var(--fgColor-danger);
+@layer primer.components.Textarea {
+  .TextArea {
+    width: 100%;
+    font-family: inherit;
+    font-size: inherit;
+    color: inherit;
+    resize: both;
+    background-color: transparent;
+    border: 0;
+    appearance: none;
+  }
+
+  .TextArea:focus {
+    outline: 0;
+  }
+
+  .TextArea[data-resize='none'] {
+    resize: none;
+  }
+
+  .TextArea[data-resize='both'] {
+    resize: both;
+  }
+
+  .TextArea[data-resize='horizontal'] {
+    resize: horizontal;
+  }
+
+  .TextArea[data-resize='vertical'] {
+    resize: vertical;
+  }
+
+  .TextArea:disabled {
+    resize: none;
+  }
+
+  .CharacterCounter {
+    display: flex;
+    align-items: center;
+    gap: var(--control-xsmall-gap);
+    color: var(--fgColor-muted);
+  }
+
+  .CharacterCounter--error {
+    color: var(--fgColor-danger);
+  }
 }
diff --git a/packages/react/src/ToggleSwitch/ToggleSwitch.module.css b/packages/react/src/ToggleSwitch/ToggleSwitch.module.css
index cd047d536f1..5958c0680ea 100644
--- a/packages/react/src/ToggleSwitch/ToggleSwitch.module.css
+++ b/packages/react/src/ToggleSwitch/ToggleSwitch.module.css
@@ -1,271 +1,273 @@
-.ToggleSwitch {
-  --toggleSwitch-transition-duration: 80ms;
-  --toggleSwitch-transition-easing: cubic-bezier(0.5, 1, 0.89, 1);
+@layer primer.components.ToggleSwitch {
+  .ToggleSwitch {
+    --toggleSwitch-transition-duration: 80ms;
+    --toggleSwitch-transition-easing: cubic-bezier(0.5, 1, 0.89, 1);
 
-  display: inline-flex;
-  align-items: center;
-}
+    display: inline-flex;
+    align-items: center;
+  }
 
-.ToggleSwitch:where([data-status-label-position='start']) {
-  flex-direction: row;
-}
+  .ToggleSwitch:where([data-status-label-position='start']) {
+    flex-direction: row;
+  }
 
-.ToggleSwitch:where([data-status-label-position='end']) {
-  flex-direction: row-reverse;
-}
+  .ToggleSwitch:where([data-status-label-position='end']) {
+    flex-direction: row-reverse;
+  }
 
-.LoadingSpinner {
-  display: inline-flex;
-}
+  .LoadingSpinner {
+    display: inline-flex;
+  }
 
-.LoadingSpinner:where([data-status-label-position='end']) {
-  margin-right: 0;
-  margin-left: var(--base-size-8);
-}
+  .LoadingSpinner:where([data-status-label-position='end']) {
+    margin-right: 0;
+    margin-left: var(--base-size-8);
+  }
 
-.StatusText {
-  margin-left: var(--base-size-8);
-  margin-right: var(--base-size-8);
-  position: relative;
-  color: var(--fgColor-default);
-  font-size: var(--text-body-size-medium);
-  cursor: pointer;
-}
+  .StatusText {
+    margin-left: var(--base-size-8);
+    margin-right: var(--base-size-8);
+    position: relative;
+    color: var(--fgColor-default);
+    font-size: var(--text-body-size-medium);
+    cursor: pointer;
+  }
 
-.StatusText:where([data-disabled='true']) {
-  cursor: not-allowed;
-  color: var(--fgColor-muted);
-}
+  .StatusText:where([data-disabled='true']) {
+    cursor: not-allowed;
+    color: var(--fgColor-muted);
+  }
 
-.StatusText:where([data-size='small']) {
-  font-size: var(--text-body-size-small);
-}
+  .StatusText:where([data-size='small']) {
+    font-size: var(--text-body-size-small);
+  }
 
-.StatusText:where([data-size='medium']) {
-  font-size: var(--text-body-size-medium);
-}
+  .StatusText:where([data-size='medium']) {
+    font-size: var(--text-body-size-medium);
+  }
 
-.StatusTextItem {
-  display: block;
-  text-align: right;
-}
+  .StatusTextItem {
+    display: block;
+    text-align: right;
+  }
 
-.StatusTextItem:where([data-hidden='true']) {
-  visibility: hidden;
-  height: 0;
-}
+  .StatusTextItem:where([data-hidden='true']) {
+    visibility: hidden;
+    height: 0;
+  }
 
-.SwitchButton {
-  cursor: pointer;
-  user-select: none;
-  appearance: none;
-  text-decoration: none;
-  padding: 0;
-  transition-property: background-color, border-color;
-  transition-duration: var(--toggleSwitch-transition-duration);
-  transition-timing-function: var(--toggleSwitch-transition-easing);
-  border-radius: var(--borderRadius-default);
-  border-style: solid;
-  border-width: var(--borderWidth-thin);
-  display: block;
-  position: relative;
-  overflow: hidden;
-
-  /* Default medium size */
-  height: 32px;
-  width: 64px;
-
-  /* Focus styles */
-  &:focus-visible {
-    outline: var(--focus-outline);
-    outline-offset: 3px;
-  }
-
-  &:focus:not(:focus-visible) {
-    outline: solid 1px transparent;
-  }
-
-  /* Touch device support */
-  @media (pointer: coarse) {
-    &::before {
-      content: '';
-      position: absolute;
-      left: 0;
-      right: 0;
-      transform: translateY(-50%);
-      top: 50%;
-      min-height: 44px;
+  .SwitchButton {
+    cursor: pointer;
+    user-select: none;
+    appearance: none;
+    text-decoration: none;
+    padding: 0;
+    transition-property: background-color, border-color;
+    transition-duration: var(--toggleSwitch-transition-duration);
+    transition-timing-function: var(--toggleSwitch-transition-easing);
+    border-radius: var(--borderRadius-default);
+    border-style: solid;
+    border-width: var(--borderWidth-thin);
+    display: block;
+    position: relative;
+    overflow: hidden;
+
+    /* Default medium size */
+    height: 32px;
+    width: 64px;
+
+    /* Focus styles */
+    &:focus-visible {
+      outline: var(--focus-outline);
+      outline-offset: 3px;
     }
-  }
 
-  /* Reduced motion support */
-  @media (prefers-reduced-motion) {
-    transition: none;
+    &:focus:not(:focus-visible) {
+      outline: solid 1px transparent;
+    }
 
-    * {
+    /* Touch device support */
+    @media (pointer: coarse) {
+      &::before {
+        content: '';
+        position: absolute;
+        left: 0;
+        right: 0;
+        transform: translateY(-50%);
+        top: 50%;
+        min-height: 44px;
+      }
+    }
+
+    /* Reduced motion support */
+    @media (prefers-reduced-motion) {
       transition: none;
+
+      * {
+        transition: none;
+      }
     }
   }
-}
 
-/* Size variants */
-.SwitchButton:where([data-size='small']) {
-  height: 24px;
-  width: 48px;
-}
+  /* Size variants */
+  .SwitchButton:where([data-size='small']) {
+    height: 24px;
+    width: 48px;
+  }
 
-/* State variants */
-.SwitchButton:where([data-disabled='true']) {
-  /* stylelint-disable-next-line primer/colors */
-  background-color: var(--controlTrack-bgColor-disabled, var(--color-switch-track-disabled-bg, #8c959f));
-  border-color: transparent;
-  cursor: not-allowed;
-  transition-property: none;
+  /* State variants */
+  .SwitchButton:where([data-disabled='true']) {
+    /* stylelint-disable-next-line primer/colors */
+    background-color: var(--controlTrack-bgColor-disabled, var(--color-switch-track-disabled-bg, #8c959f));
+    border-color: transparent;
+    cursor: not-allowed;
+    transition-property: none;
 
-  @media (forced-colors: active) {
-    border-color: GrayText;
+    @media (forced-colors: active) {
+      border-color: GrayText;
+    }
   }
-}
 
-.SwitchButton:where([data-checked='false']:not([data-disabled='true'])) {
-  /* stylelint-disable-next-line primer/colors */
-  background-color: var(--controlTrack-bgColor-rest, var(--color-switch-track-bg, #eaeef2));
-  border-color: var(--controlTrack-borderColor-rest);
-}
-
-.SwitchButton:where([data-checked='false']:not([data-disabled='true']):hover),
-.SwitchButton:where([data-checked='false']:not([data-disabled='true']):focus-visible) {
-  /* stylelint-disable-next-line primer/colors */
-  background-color: var(--controlTrack-bgColor-hover, var(--color-switch-track-hover-bg, hsl(210deg, 24%, 90%, 1)));
-}
+  .SwitchButton:where([data-checked='false']:not([data-disabled='true'])) {
+    /* stylelint-disable-next-line primer/colors */
+    background-color: var(--controlTrack-bgColor-rest, var(--color-switch-track-bg, #eaeef2));
+    border-color: var(--controlTrack-borderColor-rest);
+  }
 
-.SwitchButton:where([data-checked='false']:not([data-disabled='true']):active),
-.SwitchButton:where([data-checked='false']:not([data-disabled='true']):active:focus-visible) {
-  /* stylelint-disable-next-line primer/colors */
-  background-color: var(--controlTrack-bgColor-active, var(--color-switch-track-active-bg, hsl(210deg, 24%, 88%, 1)));
-}
+  .SwitchButton:where([data-checked='false']:not([data-disabled='true']):hover),
+  .SwitchButton:where([data-checked='false']:not([data-disabled='true']):focus-visible) {
+    /* stylelint-disable-next-line primer/colors */
+    background-color: var(--controlTrack-bgColor-hover, var(--color-switch-track-hover-bg, hsl(210deg, 24%, 90%, 1)));
+  }
 
-.SwitchButton:where([data-checked='true']:not([data-disabled='true'])) {
-  /* stylelint-disable-next-line primer/colors */
-  background-color: var(--control-checked-bgColor-rest, var(--color-switch-track-checked-bg, #0969da));
-  border-color: var(--control-checked-borderColor-rest, transparent);
-}
+  .SwitchButton:where([data-checked='false']:not([data-disabled='true']):active),
+  .SwitchButton:where([data-checked='false']:not([data-disabled='true']):active:focus-visible) {
+    /* stylelint-disable-next-line primer/colors */
+    background-color: var(--controlTrack-bgColor-active, var(--color-switch-track-active-bg, hsl(210deg, 24%, 88%, 1)));
+  }
 
-.SwitchButton:where([data-checked='true']:not([data-disabled='true']):hover),
-.SwitchButton:where([data-checked='true']:not([data-disabled='true']):focus-visible) {
-  /* stylelint-disable-next-line primer/colors */
-  background-color: var(--control-checked-bgColor-hover, var(--color-switch-track-checked-hover-bg, #0860ca));
-}
+  .SwitchButton:where([data-checked='true']:not([data-disabled='true'])) {
+    /* stylelint-disable-next-line primer/colors */
+    background-color: var(--control-checked-bgColor-rest, var(--color-switch-track-checked-bg, #0969da));
+    border-color: var(--control-checked-borderColor-rest, transparent);
+  }
 
-.SwitchButton:where([data-checked='true']:not([data-disabled='true']):active),
-.SwitchButton:where([data-checked='true']:not([data-disabled='true']):active:focus-visible) {
-  /* stylelint-disable-next-line primer/colors */
-  background-color: var(--control-checked-bgColor-active, var(--color-switch-track-checked-active-bg, #0757ba));
-}
+  .SwitchButton:where([data-checked='true']:not([data-disabled='true']):hover),
+  .SwitchButton:where([data-checked='true']:not([data-disabled='true']):focus-visible) {
+    /* stylelint-disable-next-line primer/colors */
+    background-color: var(--control-checked-bgColor-hover, var(--color-switch-track-checked-hover-bg, #0860ca));
+  }
 
-.SwitchButtonContent {
-  display: flex;
-  align-items: center;
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-}
+  .SwitchButton:where([data-checked='true']:not([data-disabled='true']):active),
+  .SwitchButton:where([data-checked='true']:not([data-disabled='true']):active:focus-visible) {
+    /* stylelint-disable-next-line primer/colors */
+    background-color: var(--control-checked-bgColor-active, var(--color-switch-track-checked-active-bg, #0757ba));
+  }
 
-.IconContainer {
-  flex-grow: 1;
-  flex-shrink: 0;
-  flex-basis: 50%;
-  /* stylelint-disable-next-line primer/typography */
-  line-height: 0;
-  transition-property: transform;
-  transition-duration: var(--toggleSwitch-transition-duration);
-  transition-timing-function: var(--toggleSwitch-transition-easing);
+  .SwitchButtonContent {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+  }
 
-  @media (prefers-reduced-motion) {
-    transition: none;
+  .IconContainer {
+    flex-grow: 1;
+    flex-shrink: 0;
+    flex-basis: 50%;
+    /* stylelint-disable-next-line primer/typography */
+    line-height: 0;
+    transition-property: transform;
+    transition-duration: var(--toggleSwitch-transition-duration);
+    transition-timing-function: var(--toggleSwitch-transition-easing);
+
+    @media (prefers-reduced-motion) {
+      transition: none;
+    }
   }
-}
 
-.LineIconContainer {
-  /* stylelint-disable-next-line primer/colors */
-  color: var(--control-checked-fgColor-rest, var(--color-switch-track-checked-fg, #fff));
-}
+  .LineIconContainer {
+    /* stylelint-disable-next-line primer/colors */
+    color: var(--control-checked-fgColor-rest, var(--color-switch-track-checked-fg, #fff));
+  }
 
-.LineIconContainer:where([data-disabled='true']) {
-  /* stylelint-disable-next-line primer/colors */
-  color: var(--control-checked-fgColor-disabled, var(--color-switch-track-checked-disabled-fg, #fff));
-}
+  .LineIconContainer:where([data-disabled='true']) {
+    /* stylelint-disable-next-line primer/colors */
+    color: var(--control-checked-fgColor-disabled, var(--color-switch-track-checked-disabled-fg, #fff));
+  }
 
-.LineIconContainer:where([data-checked='true']) {
-  transform: translateX(0);
-}
+  .LineIconContainer:where([data-checked='true']) {
+    transform: translateX(0);
+  }
 
-.LineIconContainer:where([data-checked='false']) {
-  transform: translateX(-100%);
-}
+  .LineIconContainer:where([data-checked='false']) {
+    transform: translateX(-100%);
+  }
 
-.CircleIconContainer {
-  /* stylelint-disable-next-line primer/colors */
-  color: var(--controlTrack-fgColor-rest, var(--color-switch-track-fg, #656d76));
-}
+  .CircleIconContainer {
+    /* stylelint-disable-next-line primer/colors */
+    color: var(--controlTrack-fgColor-rest, var(--color-switch-track-fg, #656d76));
+  }
 
-.CircleIconContainer:where([data-disabled='true']) {
-  /* stylelint-disable-next-line primer/colors */
-  color: var(--controlTrack-fgColor-disabled, var(--color-switch-track-disabled-fg, #fff));
-}
+  .CircleIconContainer:where([data-disabled='true']) {
+    /* stylelint-disable-next-line primer/colors */
+    color: var(--controlTrack-fgColor-disabled, var(--color-switch-track-disabled-fg, #fff));
+  }
 
-.CircleIconContainer:where([data-checked='true']) {
-  transform: translateX(100%);
-}
+  .CircleIconContainer:where([data-checked='true']) {
+    transform: translateX(100%);
+  }
 
-.CircleIconContainer:where([data-checked='false']) {
-  transform: translateX(0);
-}
+  .CircleIconContainer:where([data-checked='false']) {
+    transform: translateX(0);
+  }
 
-.ToggleKnob {
-  /* stylelint-disable-next-line primer/colors */
-  background-color: var(--controlKnob-bgColor-rest, var(--color-switch-knob-bg, #fff));
-  border-width: var(--borderWidth-thin);
-  border-style: solid;
-  /* stylelint-disable-next-line primer/colors */
-  border-color: var(--controlKnob-borderColor-rest, var(--color-switch-knob-border, #858f99));
-  /* Use calc to account for 1px border around the control */
-  /* stylelint-disable-next-line primer/borders */
-  border-radius: calc(var(--borderRadius-default) - var(--borderWidth-thick));
-  width: 50%;
-  position: absolute;
-  /* stylelint-disable-next-line primer/spacing */
-  top: 1px;
-  /* stylelint-disable-next-line primer/spacing */
-  bottom: 1px;
-  /* stylelint-disable-next-line primer/spacing */
-  left: 1px;
-  transition-property: transform;
-  transition-duration: var(--toggleSwitch-transition-duration);
-  transition-timing-function: var(--toggleSwitch-transition-easing);
-  z-index: 1;
-
-  @media (prefers-reduced-motion) {
-    transition: none;
+  .ToggleKnob {
+    /* stylelint-disable-next-line primer/colors */
+    background-color: var(--controlKnob-bgColor-rest, var(--color-switch-knob-bg, #fff));
+    border-width: var(--borderWidth-thin);
+    border-style: solid;
+    /* stylelint-disable-next-line primer/colors */
+    border-color: var(--controlKnob-borderColor-rest, var(--color-switch-knob-border, #858f99));
+    /* Use calc to account for 1px border around the control */
+    /* stylelint-disable-next-line primer/borders */
+    border-radius: calc(var(--borderRadius-default) - var(--borderWidth-thick));
+    width: 50%;
+    position: absolute;
+    /* stylelint-disable-next-line primer/spacing */
+    top: 1px;
+    /* stylelint-disable-next-line primer/spacing */
+    bottom: 1px;
+    /* stylelint-disable-next-line primer/spacing */
+    left: 1px;
+    transition-property: transform;
+    transition-duration: var(--toggleSwitch-transition-duration);
+    transition-timing-function: var(--toggleSwitch-transition-easing);
+    z-index: 1;
+
+    @media (prefers-reduced-motion) {
+      transition: none;
+    }
   }
-}
 
-.ToggleKnob:where([data-checked='false']) {
-  transform: translateX(0);
-}
+  .ToggleKnob:where([data-checked='false']) {
+    transform: translateX(0);
+  }
 
-.ToggleKnob:where([data-checked='true']) {
-  transform: translateX(calc(100% - 2px));
-  /* stylelint-disable-next-line primer/colors */
-  border-color: var(--controlKnob-borderColor-checked, var(--color-switch-knob-checked-border, #0969da));
-}
+  .ToggleKnob:where([data-checked='true']) {
+    transform: translateX(calc(100% - 2px));
+    /* stylelint-disable-next-line primer/colors */
+    border-color: var(--controlKnob-borderColor-checked, var(--color-switch-knob-checked-border, #0969da));
+  }
 
-.ToggleKnob:where([data-disabled='true']) {
-  background-color: var(--controlKnob-bgColor-disabled);
-  /* stylelint-disable-next-line primer/colors */
-  border-color: var(--controlTrack-bgColor-disabled, var(--color-switch-track-disabled-bg, #8c959f));
+  .ToggleKnob:where([data-disabled='true']) {
+    background-color: var(--controlKnob-bgColor-disabled);
+    /* stylelint-disable-next-line primer/colors */
+    border-color: var(--controlTrack-bgColor-disabled, var(--color-switch-track-disabled-bg, #8c959f));
 
-  @media (forced-colors: active) {
-    color: GrayText;
+    @media (forced-colors: active) {
+      color: GrayText;
+    }
   }
 }
diff --git a/packages/react/src/Token/IssueLabelToken.module.css b/packages/react/src/Token/IssueLabelToken.module.css
index 15b74bdd64e..519e1179648 100644
--- a/packages/react/src/Token/IssueLabelToken.module.css
+++ b/packages/react/src/Token/IssueLabelToken.module.css
@@ -1,141 +1,143 @@
-/* stylelint-disable primer/colors */
-@define-mixin lightThemeIssueLabel {
-  --lightness-threshold: 0.453;
-  --border-threshold: 0.96;
-  --border-alpha: max(0, min(calc((var(--perceived-lightness) - var(--border-threshold)) * 100), 1));
-
-  background: rgb(var(--label-r), var(--label-g), var(--label-b));
-  color: hsl(0deg, 0%, calc(var(--lightness-switch) * 100%));
-  border-color: hsl(var(--label-h), calc(var(--label-s) * 1%), calc((var(--label-l) - 25) * 1%), var(--border-alpha));
-
-  /* Selected state */
-  /* stylelint-disable-next-line nesting-selector-no-missing-scoping-root */
-  &:where([data-selected='true']) {
-    background: hsl(var(--label-h), calc(var(--label-s) * 1%), calc((var(--label-l) - 5) * 1%));
+@layer primer.components.Token {
+  /* stylelint-disable primer/colors */
+  @define-mixin lightThemeIssueLabel {
+    --lightness-threshold: 0.453;
+    --border-threshold: 0.96;
+    --border-alpha: max(0, min(calc((var(--perceived-lightness) - var(--border-threshold)) * 100), 1));
+
+    background: rgb(var(--label-r), var(--label-g), var(--label-b));
+    color: hsl(0deg, 0%, calc(var(--lightness-switch) * 100%));
+    border-color: hsl(var(--label-h), calc(var(--label-s) * 1%), calc((var(--label-l) - 25) * 1%), var(--border-alpha));
+
+    /* Selected state */
+    /* stylelint-disable-next-line nesting-selector-no-missing-scoping-root */
+    &:where([data-selected='true']) {
+      background: hsl(var(--label-h), calc(var(--label-s) * 1%), calc((var(--label-l) - 5) * 1%));
+    }
+
+    /* stylelint-disable-next-line nesting-selector-no-missing-scoping-root */
+    &:where([data-selected='true'])::after {
+      /* stylelint-disable-next-line primer/box-shadow */
+      box-shadow: 0 0 0 2px rgb(var(--label-r), var(--label-g), var(--label-b));
+    }
+
+    /* Interactive hover states */
+    /* stylelint-disable-next-line nesting-selector-no-missing-scoping-root */
+    &:where([data-cursor-is-interactive='true']:hover) {
+      background-image: linear-gradient(rgb(0, 0, 0, 0.15), rgb(0, 0, 0, 0.15)),
+        linear-gradient(
+          rgb(var(--label-r), var(--label-g), var(--label-b)),
+          rgb(var(--label-r), var(--label-g), var(--label-b))
+        );
+      box-shadow: var(--shadow-resting-medium);
+    }
   }
 
-  /* stylelint-disable-next-line nesting-selector-no-missing-scoping-root */
-  &:where([data-selected='true'])::after {
-    /* stylelint-disable-next-line primer/box-shadow */
-    box-shadow: 0 0 0 2px rgb(var(--label-r), var(--label-g), var(--label-b));
+  @define-mixin darkThemeIssueLabel {
+    --lightness-threshold: 0.6;
+    --background-alpha: 0.18;
+    --border-alpha: 0.3;
+    --lighten-by: calc(((var(--lightness-threshold) - var(--perceived-lightness)) * 100) * var(--lightness-switch));
+
+    background: rgb(var(--label-r), var(--label-g), var(--label-b), var(--background-alpha));
+    color: hsl(var(--label-h), calc(var(--label-s) * 1%), calc((var(--label-l) + var(--lighten-by)) * 1%));
+    border-color: hsl(
+      var(--label-h),
+      calc(var(--label-s) * 1%),
+      calc((var(--label-l) + var(--lighten-by)) * 1%),
+      var(--border-alpha)
+    );
+
+    /* Selected state */
+    /* stylelint-disable-next-line nesting-selector-no-missing-scoping-root */
+    &:where([data-selected='true'])::after {
+      /* stylelint-disable-next-line primer/box-shadow */
+      box-shadow: 0 0 0 2px
+        hsl(var(--label-h), calc(var(--label-s) * 1%), calc((var(--label-l) + var(--lighten-by)) * 1%));
+    }
+
+    /* Interactive hover states */
+    /* stylelint-disable-next-line nesting-selector-no-missing-scoping-root */
+    &:where([data-cursor-is-interactive='true']:hover) {
+      background: hsl(var(--label-h), calc(var(--label-s) * 1%), calc(calc(var(--label-l) + 10) * 1%), 0.3);
+      box-shadow: var(--shadow-resting-medium);
+    }
   }
 
-  /* Interactive hover states */
-  /* stylelint-disable-next-line nesting-selector-no-missing-scoping-root */
-  &:where([data-cursor-is-interactive='true']:hover) {
-    background-image: linear-gradient(rgb(0, 0, 0, 0.15), rgb(0, 0, 0, 0.15)),
-      linear-gradient(
-        rgb(var(--label-r), var(--label-g), var(--label-b)),
-        rgb(var(--label-r), var(--label-g), var(--label-b))
-      );
-    box-shadow: var(--shadow-resting-medium);
+  .IssueLabel {
+    /* Color variables - dynamically set via inline CSS custom properties */
+    --label-r: 153;
+    --label-g: 153;
+    --label-b: 153;
+    --label-h: 0;
+    --label-s: 0;
+    --label-l: 60;
+    --perceived-lightness: calc(
+      ((var(--label-r) * 0.2126) + (var(--label-g) * 0.7152) + (var(--label-b) * 0.0722)) / 255
+    );
+    --lightness-switch: max(0, min(calc(1 / (var(--lightness-threshold) - var(--perceived-lightness))), 1));
+
+    position: relative;
+    border-width: var(--borderWidth-thin);
+    border-style: solid;
   }
-}
 
-@define-mixin darkThemeIssueLabel {
-  --lightness-threshold: 0.6;
-  --background-alpha: 0.18;
-  --border-alpha: 0.3;
-  --lighten-by: calc(((var(--lightness-threshold) - var(--perceived-lightness)) * 100) * var(--lightness-switch));
-
-  background: rgb(var(--label-r), var(--label-g), var(--label-b), var(--background-alpha));
-  color: hsl(var(--label-h), calc(var(--label-s) * 1%), calc((var(--label-l) + var(--lighten-by)) * 1%));
-  border-color: hsl(
-    var(--label-h),
-    calc(var(--label-s) * 1%),
-    calc((var(--label-l) + var(--lighten-by)) * 1%),
-    var(--border-alpha)
-  );
-
-  /* Selected state */
-  /* stylelint-disable-next-line nesting-selector-no-missing-scoping-root */
-  &:where([data-selected='true'])::after {
-    /* stylelint-disable-next-line primer/box-shadow */
-    box-shadow: 0 0 0 2px
-      hsl(var(--label-h), calc(var(--label-s) * 1%), calc((var(--label-l) + var(--lighten-by)) * 1%));
-  }
+  @media (prefers-color-scheme: light) {
+    [data-color-mode='auto'][data-light-theme*='light'] .IssueLabel {
+      @mixin lightThemeIssueLabel;
+    }
 
-  /* Interactive hover states */
-  /* stylelint-disable-next-line nesting-selector-no-missing-scoping-root */
-  &:where([data-cursor-is-interactive='true']:hover) {
-    background: hsl(var(--label-h), calc(var(--label-s) * 1%), calc(calc(var(--label-l) + 10) * 1%), 0.3);
-    box-shadow: var(--shadow-resting-medium);
+    [data-color-mode='auto'][data-light-theme*='dark'] .IssueLabel {
+      @mixin darkThemeIssueLabel;
+    }
   }
-}
 
-.IssueLabel {
-  /* Color variables - dynamically set via inline CSS custom properties */
-  --label-r: 153;
-  --label-g: 153;
-  --label-b: 153;
-  --label-h: 0;
-  --label-s: 0;
-  --label-l: 60;
-  --perceived-lightness: calc(
-    ((var(--label-r) * 0.2126) + (var(--label-g) * 0.7152) + (var(--label-b) * 0.0722)) / 255
-  );
-  --lightness-switch: max(0, min(calc(1 / (var(--lightness-threshold) - var(--perceived-lightness))), 1));
-
-  position: relative;
-  border-width: var(--borderWidth-thin);
-  border-style: solid;
-}
+  @media (prefers-color-scheme: dark) {
+    [data-color-mode='auto'][data-dark-theme*='light'] .IssueLabel {
+      @mixin lightThemeIssueLabel;
+    }
 
-@media (prefers-color-scheme: light) {
-  [data-color-mode='auto'][data-light-theme*='light'] .IssueLabel {
-    @mixin lightThemeIssueLabel;
+    [data-color-mode='auto'][data-dark-theme*='dark'] .IssueLabel {
+      @mixin darkThemeIssueLabel;
+    }
   }
 
-  [data-color-mode='auto'][data-light-theme*='dark'] .IssueLabel {
-    @mixin darkThemeIssueLabel;
-  }
-}
-
-@media (prefers-color-scheme: dark) {
-  [data-color-mode='auto'][data-dark-theme*='light'] .IssueLabel {
+  /* Light mode styles */
+  [data-color-mode='light'] .IssueLabel {
     @mixin lightThemeIssueLabel;
   }
 
-  [data-color-mode='auto'][data-dark-theme*='dark'] .IssueLabel {
+  /* Dark mode styles */
+  [data-color-mode='dark'] .IssueLabel {
     @mixin darkThemeIssueLabel;
   }
-}
-
-/* Light mode styles */
-[data-color-mode='light'] .IssueLabel {
-  @mixin lightThemeIssueLabel;
-}
 
-/* Dark mode styles */
-[data-color-mode='dark'] .IssueLabel {
-  @mixin darkThemeIssueLabel;
-}
-
-/* Selected state */
+  /* Selected state */
 
-.IssueLabel:where([data-selected='true']) {
-  outline: none;
-}
+  .IssueLabel:where([data-selected='true']) {
+    outline: none;
+  }
 
-.IssueLabel:where([data-selected='true'])::after {
-  content: '';
-  position: absolute;
-  z-index: 1;
-  top: calc(var(--base-size-2) * -1);
-  right: calc(var(--base-size-2) * -1);
-  bottom: calc(var(--base-size-2) * -1);
-  left: calc(var(--base-size-2) * -1);
-  display: block;
-  pointer-events: none;
-  border-radius: var(--borderRadius-full);
-}
+  .IssueLabel:where([data-selected='true'])::after {
+    content: '';
+    position: absolute;
+    z-index: 1;
+    top: calc(var(--base-size-2) * -1);
+    right: calc(var(--base-size-2) * -1);
+    bottom: calc(var(--base-size-2) * -1);
+    left: calc(var(--base-size-2) * -1);
+    display: block;
+    pointer-events: none;
+    border-radius: var(--borderRadius-full);
+  }
 
-/* Remove button styling */
-.IssueLabel:where([data-has-remove-button='true']) {
-  padding-right: 0;
-}
+  /* Remove button styling */
+  .IssueLabel:where([data-has-remove-button='true']) {
+    padding-right: 0;
+  }
 
-.RemoveButton:where([data-has-multiple-action-targets='true']) {
-  position: relative;
-  z-index: 1;
+  .RemoveButton:where([data-has-multiple-action-targets='true']) {
+    position: relative;
+    z-index: 1;
+  }
 }
diff --git a/packages/react/src/Token/Token.module.css b/packages/react/src/Token/Token.module.css
index 1e362cd3ca5..6e3e270c530 100644
--- a/packages/react/src/Token/Token.module.css
+++ b/packages/react/src/Token/Token.module.css
@@ -1,34 +1,36 @@
-.Token {
-  max-width: 100%;
-  color: var(--fgColor-muted);
-  background-color: var(--bgColor-neutral-muted);
-  border-color: var(--borderColor-muted);
-  border-style: solid;
-}
+@layer primer.components.Token {
+  .Token {
+    max-width: 100%;
+    color: var(--fgColor-muted);
+    background-color: var(--bgColor-neutral-muted);
+    border-color: var(--borderColor-muted);
+    border-style: solid;
+  }
 
-.Token:where([data-interactive='true']):hover {
-  color: var(--fgColor-default);
-  background-color: var(--bgColor-neutral-muted);
-  box-shadow: var(--shadow-resting-medium);
-}
+  .Token:where([data-interactive='true']):hover {
+    color: var(--fgColor-default);
+    background-color: var(--bgColor-neutral-muted);
+    box-shadow: var(--shadow-resting-medium);
+  }
 
-.Token:where([data-is-selected='true']) {
-  color: var(--fgColor-default);
-  border-style: solid;
-  border-color: var(--borderColor-emphasis);
-}
+  .Token:where([data-is-selected='true']) {
+    color: var(--fgColor-default);
+    border-style: solid;
+    border-color: var(--borderColor-emphasis);
+  }
 
-.Token[data-is-remove-btn='true'] {
-  padding-right: 0;
-}
+  .Token[data-is-remove-btn='true'] {
+    padding-right: 0;
+  }
 
-.LeadingVisualContainer {
-  margin-right: var(--base-size-4);
-  /* stylelint-disable-next-line primer/typography */
-  line-height: 0;
-  flex-shrink: 0;
-}
+  .LeadingVisualContainer {
+    margin-right: var(--base-size-4);
+    /* stylelint-disable-next-line primer/typography */
+    line-height: 0;
+    flex-shrink: 0;
+  }
 
-.LargeLeadingVisual {
-  margin-right: var(--base-size-6);
+  .LargeLeadingVisual {
+    margin-right: var(--base-size-6);
+  }
 }
diff --git a/packages/react/src/Token/TokenBase.module.css b/packages/react/src/Token/TokenBase.module.css
index ad303de6e5e..7f9c1393963 100644
--- a/packages/react/src/Token/TokenBase.module.css
+++ b/packages/react/src/Token/TokenBase.module.css
@@ -1,54 +1,56 @@
-.TokenBase {
-  position: relative;
-  display: inline-flex;
-  font-family: inherit;
-  font-weight: var(--base-text-weight-semibold);
-  text-decoration: none;
-  white-space: nowrap;
-  border-radius: var(--borderRadius-full);
-  align-items: center;
-  /* stylelint-disable-next-line primer/typography */
-  line-height: 1;
-}
+@layer primer.components.Token {
+  .TokenBase {
+    position: relative;
+    display: inline-flex;
+    font-family: inherit;
+    font-weight: var(--base-text-weight-semibold);
+    text-decoration: none;
+    white-space: nowrap;
+    border-radius: var(--borderRadius-full);
+    align-items: center;
+    /* stylelint-disable-next-line primer/typography */
+    line-height: 1;
+  }
 
-.TokenBase:where([data-cursor-is-interactive='true']) {
-  cursor: pointer;
-}
+  .TokenBase:where([data-cursor-is-interactive='true']) {
+    cursor: pointer;
+  }
 
-.TokenBase:where([data-cursor-is-interactive='false']) {
-  cursor: auto;
-}
+  .TokenBase:where([data-cursor-is-interactive='false']) {
+    cursor: auto;
+  }
 
-.TokenBase:where([data-size='small']) {
-  width: auto;
-  height: var(--base-size-16);
-  padding-right: var(--base-size-4);
-  padding-left: var(--base-size-4);
-  font-size: var(--text-body-size-small);
-}
+  .TokenBase:where([data-size='small']) {
+    width: auto;
+    height: var(--base-size-16);
+    padding-right: var(--base-size-4);
+    padding-left: var(--base-size-4);
+    font-size: var(--text-body-size-small);
+  }
 
-.TokenBase:where([data-size='medium']) {
-  width: auto;
-  height: var(--base-size-20);
-  padding-right: var(--base-size-6);
-  padding-left: var(--base-size-6);
-  font-size: var(--text-body-size-small);
-}
+  .TokenBase:where([data-size='medium']) {
+    width: auto;
+    height: var(--base-size-20);
+    padding-right: var(--base-size-6);
+    padding-left: var(--base-size-6);
+    font-size: var(--text-body-size-small);
+  }
 
-.TokenBase[data-size='large'] {
-  width: auto;
-  height: var(--base-size-24);
-  padding-right: var(--base-size-8);
-  padding-left: var(--base-size-8);
-  font-size: var(--text-body-size-medium);
-}
+  .TokenBase[data-size='large'] {
+    width: auto;
+    height: var(--base-size-24);
+    padding-right: var(--base-size-8);
+    padding-left: var(--base-size-8);
+    font-size: var(--text-body-size-medium);
+  }
 
-.TokenBase[data-size='xlarge'] {
-  width: auto;
-  height: var(--base-size-32);
-  padding-top: 0;
-  padding-right: var(--base-size-12);
-  padding-bottom: 0;
-  padding-left: var(--base-size-12);
-  font-size: var(--text-body-size-medium);
+  .TokenBase[data-size='xlarge'] {
+    width: auto;
+    height: var(--base-size-32);
+    padding-top: 0;
+    padding-right: var(--base-size-12);
+    padding-bottom: 0;
+    padding-left: var(--base-size-12);
+    font-size: var(--text-body-size-medium);
+  }
 }
diff --git a/packages/react/src/Token/_RemoveTokenButton.module.css b/packages/react/src/Token/_RemoveTokenButton.module.css
index 4424094c3e2..68b22a829c1 100644
--- a/packages/react/src/Token/_RemoveTokenButton.module.css
+++ b/packages/react/src/Token/_RemoveTokenButton.module.css
@@ -1,48 +1,50 @@
-.TokenButton {
-  display: inline-flex;
-  padding: 0;
-  margin-left: var(--base-size-4);
-  font-family: inherit;
-  color: currentColor;
-  text-decoration: none;
-  cursor: pointer;
-  user-select: none;
-  background-color: transparent;
-  border: 0;
-  border-radius: var(--borderRadius-full);
-  justify-content: center;
-  align-items: center;
-  appearance: none;
-  align-self: baseline;
-}
+@layer primer.components.Token {
+  .TokenButton {
+    display: inline-flex;
+    padding: 0;
+    margin-left: var(--base-size-4);
+    font-family: inherit;
+    color: currentColor;
+    text-decoration: none;
+    cursor: pointer;
+    user-select: none;
+    background-color: transparent;
+    border: 0;
+    border-radius: var(--borderRadius-full);
+    justify-content: center;
+    align-items: center;
+    appearance: none;
+    align-self: baseline;
+  }
 
-.TokenButton[data-size='small'] {
-  width: var(--base-size-16);
-  height: var(--base-size-16);
-}
+  .TokenButton[data-size='small'] {
+    width: var(--base-size-16);
+    height: var(--base-size-16);
+  }
 
-.TokenButton[data-size='medium'] {
-  width: var(--base-size-20);
-  height: var(--base-size-20);
-}
+  .TokenButton[data-size='medium'] {
+    width: var(--base-size-20);
+    height: var(--base-size-20);
+  }
 
-.TokenButton[data-size='large'] {
-  width: var(--base-size-24);
-  height: var(--base-size-24);
-  margin-left: var(--base-size-6);
-}
+  .TokenButton[data-size='large'] {
+    width: var(--base-size-24);
+    height: var(--base-size-24);
+    margin-left: var(--base-size-6);
+  }
 
-.TokenButton[data-size='xlarge'] {
-  width: var(--base-size-32);
-  height: var(--base-size-32);
-  margin-left: var(--base-size-6);
-}
+  .TokenButton[data-size='xlarge'] {
+    width: var(--base-size-32);
+    height: var(--base-size-32);
+    margin-left: var(--base-size-6);
+  }
 
-.TokenButton:hover,
-.TokenButton:focus {
-  background-color: var(--control-transparent-bgColor-hover);
-}
+  .TokenButton:hover,
+  .TokenButton:focus {
+    background-color: var(--control-transparent-bgColor-hover);
+  }
 
-.TokenButton:active {
-  background-color: var(--control-transparent-bgColor-active);
+  .TokenButton:active {
+    background-color: var(--control-transparent-bgColor-active);
+  }
 }
diff --git a/packages/react/src/Token/_TokenTextContainer.module.css b/packages/react/src/Token/_TokenTextContainer.module.css
index 0ed58cdaf33..f5e9014f7e6 100644
--- a/packages/react/src/Token/_TokenTextContainer.module.css
+++ b/packages/react/src/Token/_TokenTextContainer.module.css
@@ -1,47 +1,49 @@
-.TokenTextContainer {
-  width: auto;
-  min-width: 0;
-  padding: 0;
-  margin: 0;
-  overflow: hidden;
-  font: inherit;
-  line-height: var(--base-text-lineHeight-normal);
-  color: inherit;
+@layer primer.components.Token {
+  .TokenTextContainer {
+    width: auto;
+    min-width: 0;
+    padding: 0;
+    margin: 0;
+    overflow: hidden;
+    font: inherit;
+    line-height: var(--base-text-lineHeight-normal);
+    color: inherit;
 
-  /* reset anchor styles */
-  color: currentColor;
-  text-decoration: none;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+    /* reset anchor styles */
+    color: currentColor;
+    text-decoration: none;
+    text-overflow: ellipsis;
+    white-space: nowrap;
 
-  /* reset button styles, make the cursor a pointer, and add line-height */
-  background: transparent;
-  border: none;
-  flex-grow: 1;
-  -webkit-font-smoothing: inherit;
-  -moz-osx-font-smoothing: inherit;
-  appearance: none;
-}
+    /* reset button styles, make the cursor a pointer, and add line-height */
+    background: transparent;
+    border: none;
+    flex-grow: 1;
+    -webkit-font-smoothing: inherit;
+    -moz-osx-font-smoothing: inherit;
+    appearance: none;
+  }
 
-/* Position psuedo-element above text content, but below the
-  remove button.
-  This ensures the <a> or <button> receives the click no
-  matter where on the token the user clicks. */
-/* stylelint-disable-next-line selector-max-type, selector-no-qualifying-type */
-.TokenTextContainer:is(a, button, [tabIndex='0']) {
-  cursor: pointer;
-}
+  /* Position psuedo-element above text content, but below the
+    remove button.
+    This ensures the <a> or <button> receives the click no
+    matter where on the token the user clicks. */
+  /* stylelint-disable-next-line selector-max-type, selector-no-qualifying-type */
+  .TokenTextContainer:is(a, button, [tabIndex='0']) {
+    cursor: pointer;
+  }
 
-/* Position psuedo-element above text content, but below the
-  remove button.
-  This ensures the <a> or <button> receives the click no
-  matter where on the token the user clicks. */
-/* stylelint-disable-next-line selector-max-type, selector-no-qualifying-type */
-.TokenTextContainer:is(a, button, [tabIndex='0'])::after {
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  content: '';
+  /* Position psuedo-element above text content, but below the
+    remove button.
+    This ensures the <a> or <button> receives the click no
+    matter where on the token the user clicks. */
+  /* stylelint-disable-next-line selector-max-type, selector-no-qualifying-type */
+  .TokenTextContainer:is(a, button, [tabIndex='0'])::after {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    content: '';
+  }
 }
diff --git a/packages/react/src/TooltipV2/Tooltip.module.css b/packages/react/src/TooltipV2/Tooltip.module.css
index d95789c1299..4b3e5d8fabd 100644
--- a/packages/react/src/TooltipV2/Tooltip.module.css
+++ b/packages/react/src/TooltipV2/Tooltip.module.css
@@ -1,132 +1,134 @@
-/* Animation definition */
-@keyframes tooltip-appear {
-  from {
-    opacity: 0;
-  }
-
-  to {
-    opacity: 1;
-  }
-}
+@layer primer.components.TooltipV2 {
+  /* Animation definition */
+  @keyframes tooltip-appear {
+    from {
+      opacity: 0;
+    }
 
-.Tooltip {
-  /* Overriding the default popover styles */
-  display: none;
-
-  &[popover] {
-    position: absolute;
-    width: max-content;
-    max-width: 250px;
-    /* stylelint-disable-next-line primer/spacing */
-    padding: var(--overlay-paddingBlock-condensed) var(--overlay-padding-condensed);
-    margin: auto;
-
-    /* for scrollbar */
-    overflow: visible;
-    /* stylelint-disable-next-line property-no-deprecated */
-    clip: auto;
-    font: var(--text-body-shorthand-small);
-    color: var(--tooltip-fgColor);
-    text-align: center;
-    overflow-wrap: break-word;
-    white-space: normal;
-    background: var(--tooltip-bgColor);
-    border: 0;
-    border-radius: var(--borderRadius-medium);
-    -webkit-font-smoothing: subpixel-antialiased;
-    inset: auto;
-    text-wrap: balance;
+    to {
+      opacity: 1;
+    }
   }
 
-  /* class name in chrome is :popover-open */
-  &[popover]:popover-open {
-    display: block;
-  }
+  .Tooltip {
+    /* Overriding the default popover styles */
+    display: none;
+
+    &[popover] {
+      position: absolute;
+      width: max-content;
+      max-width: 250px;
+      /* stylelint-disable-next-line primer/spacing */
+      padding: var(--overlay-paddingBlock-condensed) var(--overlay-padding-condensed);
+      margin: auto;
+
+      /* for scrollbar */
+      overflow: visible;
+      /* stylelint-disable-next-line property-no-deprecated */
+      clip: auto;
+      font: var(--text-body-shorthand-small);
+      color: var(--tooltip-fgColor);
+      text-align: center;
+      overflow-wrap: break-word;
+      white-space: normal;
+      background: var(--tooltip-bgColor);
+      border: 0;
+      border-radius: var(--borderRadius-medium);
+      -webkit-font-smoothing: subpixel-antialiased;
+      inset: auto;
+      text-wrap: balance;
+    }
 
-  /* class name in firefox and safari is \:popover-open */
-  /* stylelint-disable-next-line selector-class-pattern */
-  &[popover]:global(.\\:popover-open) {
-    display: block;
-  }
+    /* class name in chrome is :popover-open */
+    &[popover]:popover-open {
+      display: block;
+    }
 
-  @media (forced-colors: active) {
-    outline: 1px solid transparent;
-  }
+    /* class name in firefox and safari is \:popover-open */
+    /* stylelint-disable-next-line selector-class-pattern */
+    &[popover]:global(.\\:popover-open) {
+      display: block;
+    }
 
-  /* This is needed to keep the tooltip open when the user leaves the trigger element to hover tooltip */
-  &::after {
-    position: absolute;
-    right: 0;
-    left: 0;
-    display: block;
-    height: var(--overlay-offset);
-    content: '';
-  }
+    @media (forced-colors: active) {
+      outline: 1px solid transparent;
+    }
 
-  /* South, East, Southeast, Southwest after */
-  &[data-direction='n']::after,
-  &[data-direction='ne']::after,
-  &[data-direction='nw']::after {
-    top: 100%;
-  }
+    /* This is needed to keep the tooltip open when the user leaves the trigger element to hover tooltip */
+    &::after {
+      position: absolute;
+      right: 0;
+      left: 0;
+      display: block;
+      height: var(--overlay-offset);
+      content: '';
+    }
 
-  &[data-direction='s']::after,
-  &[data-direction='se']::after,
-  &[data-direction='sw']::after {
-    bottom: 100%;
-  }
+    /* South, East, Southeast, Southwest after */
+    &[data-direction='n']::after,
+    &[data-direction='ne']::after,
+    &[data-direction='nw']::after {
+      top: 100%;
+    }
 
-  &[data-direction='w']::after {
-    position: absolute;
-    bottom: 0;
-    left: 100%;
-    display: block;
-    width: 8px;
-    height: 100%;
-    content: '';
-  }
+    &[data-direction='s']::after,
+    &[data-direction='se']::after,
+    &[data-direction='sw']::after {
+      bottom: 100%;
+    }
 
-  /* East before and after */
-  &[data-direction='e']::after {
-    position: absolute;
-    right: 100%;
-    bottom: 0;
-    display: block;
-    width: 8px;
-    height: 100%;
-    /* stylelint-disable-next-line primer/spacing */
-    margin-left: -8px;
-    content: '';
-  }
+    &[data-direction='w']::after {
+      position: absolute;
+      bottom: 0;
+      left: 100%;
+      display: block;
+      width: 8px;
+      height: 100%;
+      content: '';
+    }
 
-  /* Only show animations if users don't have a preference for reduced motion */
-  @media screen and (prefers-reduced-motion: no-preference) {
-    /* Animation styles */
-    &:popover-open,
-    &:popover-open::before {
-      animation-name: tooltip-appear;
-      animation-duration: 0.1s;
-      animation-fill-mode: forwards;
-      animation-timing-function: ease-in;
-      animation-delay: 0s;
+    /* East before and after */
+    &[data-direction='e']::after {
+      position: absolute;
+      right: 100%;
+      bottom: 0;
+      display: block;
+      width: 8px;
+      height: 100%;
+      /* stylelint-disable-next-line primer/spacing */
+      margin-left: -8px;
+      content: '';
     }
 
-    /* Animation styles */
-    &:global(.\\:popover-open) /* stylelint-disable-line selector-class-pattern */,
-    &:global(.\\:popover-open)::before /* stylelint-disable-line selector-class-pattern */ {
-      animation-name: tooltip-appear;
-      animation-duration: 0.1s;
-      animation-fill-mode: forwards;
-      animation-timing-function: ease-in;
-      animation-delay: 0s;
+    /* Only show animations if users don't have a preference for reduced motion */
+    @media screen and (prefers-reduced-motion: no-preference) {
+      /* Animation styles */
+      &:popover-open,
+      &:popover-open::before {
+        animation-name: tooltip-appear;
+        animation-duration: 0.1s;
+        animation-fill-mode: forwards;
+        animation-timing-function: ease-in;
+        animation-delay: 0s;
+      }
+
+      /* Animation styles */
+      &:global(.\\:popover-open) /* stylelint-disable-line selector-class-pattern */,
+      &:global(.\\:popover-open)::before /* stylelint-disable-line selector-class-pattern */ {
+        animation-name: tooltip-appear;
+        animation-duration: 0.1s;
+        animation-fill-mode: forwards;
+        animation-timing-function: ease-in;
+        animation-delay: 0s;
+      }
     }
   }
-}
 
-.KeybindingHintContainer.HasTextBefore {
-  margin-left: var(--base-size-6);
-}
+  .KeybindingHintContainer.HasTextBefore {
+    margin-left: var(--base-size-6);
+  }
 
-.KeybindingHintContainer.HasTextBefore.HasMultipleHints {
-  margin-left: var(--base-size-8);
+  .KeybindingHintContainer.HasTextBefore.HasMultipleHints {
+    margin-left: var(--base-size-8);
+  }
 }
diff --git a/packages/react/src/__tests__/css-layers.test.ts b/packages/react/src/__tests__/css-layers.test.ts
index 6e921a8d425..7b72598fba5 100644
--- a/packages/react/src/__tests__/css-layers.test.ts
+++ b/packages/react/src/__tests__/css-layers.test.ts
@@ -71,6 +71,19 @@ const allowlist = new Set([
   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'),
+  path.resolve(import.meta.dirname, '../KeybindingHint/KeybindingHint.module.css'),
+  path.resolve(import.meta.dirname, '../KeybindingHint/components/Chord.module.css'),
+  path.resolve(import.meta.dirname, '../Spinner/Spinner.module.css'),
+  path.resolve(import.meta.dirname, '../Textarea/TextArea.module.css'),
+  path.resolve(import.meta.dirname, '../TextInput/TextInput.module.css'),
+  path.resolve(import.meta.dirname, '../ToggleSwitch/ToggleSwitch.module.css'),
+  path.resolve(import.meta.dirname, '../Token/IssueLabelToken.module.css'),
+  path.resolve(import.meta.dirname, '../Token/Token.module.css'),
+  path.resolve(import.meta.dirname, '../Token/TokenBase.module.css'),
+  path.resolve(import.meta.dirname, '../Token/_RemoveTokenButton.module.css'),
+  path.resolve(import.meta.dirname, '../Token/_TokenTextContainer.module.css'),
+  path.resolve(import.meta.dirname, '../TextInputWithTokens/TextInputWithTokens.module.css'),
+  path.resolve(import.meta.dirname, '../TooltipV2/Tooltip.module.css'),
 ])
 const files = Array.from(allowlist).map(file => {
   return [path.relative(path.resolve(import.meta.dirname, '..'), file), file]