feat: add CSS Layer support to Button prerequisites

.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

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;
+  }
 }

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);
+  }
 }

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;
+  }
 }

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);
+  }
 }

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);
+  }
 }

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);
+  }
 }