From aa9008128b6c7bac9ecd2668af4c50970ff1b687 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Tue, 18 Aug 2026 23:22:36 +0000
Subject: [PATCH 1/9] Initial plan


From 170a45a625a6583a023ffa8a05c2ddd2049f32ff Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Tue, 18 Aug 2026 23:24:17 +0000
Subject: [PATCH 2/9] Remove important annotations from utilities

Co-authored-by: jonrohan <54012+jonrohan@users.noreply.github.com>
---
 __tests__/css.test.js                 |  18 ++++
 src/utilities/borders.scss            |  50 +++++------
 src/utilities/box-shadow.scss         |  12 +--
 src/utilities/colors.scss             | 122 +++++++++++++-------------
 src/utilities/flexbox.scss            |  72 +++++++--------
 src/utilities/index.scss              |   2 +-
 src/utilities/layout.scss             |  60 ++++++-------
 src/utilities/margin.scss             |  40 ++++-----
 src/utilities/padding.scss            |  30 +++----
 src/utilities/typography.scss         | 120 ++++++++++++-------------
 src/utilities/visibility-display.scss |  46 +++++-----
 11 files changed, 295 insertions(+), 277 deletions(-)

diff --git a/__tests__/css.test.js b/__tests__/css.test.js
index d646a8ce8a..6673e1f27b 100644
--- a/__tests__/css.test.js
+++ b/__tests__/css.test.js
@@ -23,6 +23,16 @@ describe('css', () => {
   })
 })
 
+describe('utilities', () => {
+  it('contains no !important annotations', () => {
+    const files = getFiles('./src/utilities')
+
+    for (const file of files) {
+      expect(fs.readFileSync(file, 'utf8')).not.toContain('!important')
+    }
+  })
+})
+
 describe('deprecations', () => {
   it('expects deprecations and their replacement to not be equal.', () => {
     const deprecations = currentVersionDeprecations()
@@ -64,3 +74,11 @@ describe('classnames', () => {
     expect([...cjsClassNames].sort()).toEqual([...classNames].sort())
   })
 })
+
+function getFiles(directory) {
+  return fs.readdirSync(directory, {withFileTypes: true}).flatMap(entry => {
+    const file = `${directory}/${entry.name}`
+
+    return entry.isDirectory() ? getFiles(file) : file
+  })
+}
diff --git a/src/utilities/borders.scss b/src/utilities/borders.scss
index 4056b46715..11bfcb3e84 100644
--- a/src/utilities/borders.scss
+++ b/src/utilities/borders.scss
@@ -4,17 +4,17 @@
 /* Add a gray border to the left and right */
 .border-x {
   // stylelint-disable-next-line primer/colors
-  border-right: $border-rem !important;
+  border-right: $border-rem;
   // stylelint-disable-next-line primer/colors
-  border-left: $border-rem !important;
+  border-left: $border-rem;
 }
 
 /* Add a gray border to the top and bottom */
 .border-y {
   // stylelint-disable-next-line primer/colors
-  border-top: $border-rem !important;
+  border-top: $border-rem;
   // stylelint-disable-next-line primer/colors
-  border-bottom: $border-rem !important;
+  border-bottom: $border-rem;
 }
 
 /* Responsive gray borders */
@@ -22,52 +22,52 @@
   @include breakpoint($breakpoint) {
     /* Add a gray border on all sides at/above this breakpoint */
     // stylelint-disable-next-line primer/colors
-    .border#{$variant}        { border: $border-rem !important; }
-    .border#{$variant}-0      { border: 0 !important; }
+    .border#{$variant}        { border: $border-rem; }
+    .border#{$variant}-0      { border: 0; }
 
     // stylelint-disable-next-line primer/colors
-    .border#{$variant}-top    { border-top: $border-rem !important; }
+    .border#{$variant}-top    { border-top: $border-rem; }
     // stylelint-disable-next-line primer/colors
-    .border#{$variant}-right  { border-right: $border-rem !important; }
+    .border#{$variant}-right  { border-right: $border-rem; }
     // stylelint-disable-next-line primer/colors
-    .border#{$variant}-bottom { border-bottom: $border-rem !important; }
+    .border#{$variant}-bottom { border-bottom: $border-rem; }
     // stylelint-disable-next-line primer/colors
-    .border#{$variant}-left   { border-left: $border-rem !important; }
+    .border#{$variant}-left   { border-left: $border-rem; }
 
-    .border#{$variant}-top-0    { border-top: 0 !important; }
-    .border#{$variant}-right-0  { border-right: 0 !important; }
-    .border#{$variant}-bottom-0 { border-bottom: 0 !important; }
-    .border#{$variant}-left-0   { border-left: 0 !important; }
+    .border#{$variant}-top-0    { border-top: 0; }
+    .border#{$variant}-right-0  { border-right: 0; }
+    .border#{$variant}-bottom-0 { border-bottom: 0; }
+    .border#{$variant}-left-0   { border-left: 0; }
 
     // Rounded corners
-    .rounded#{$variant}   { border-radius: var(--borderRadius-medium, $border-radius-2) !important; }
-    .rounded#{$variant}-0 { border-radius: 0 !important; }
-    .rounded#{$variant}-1 { border-radius: var(--borderRadius-small, $border-radius-1) !important; }
-    .rounded#{$variant}-2 { border-radius: var(--borderRadius-medium, $border-radius-2) !important; }
-    .rounded#{$variant}-3 { border-radius: var(--borderRadius-large, $border-radius-3) !important; }
+    .rounded#{$variant}   { border-radius: var(--borderRadius-medium, $border-radius-2); }
+    .rounded#{$variant}-0 { border-radius: 0; }
+    .rounded#{$variant}-1 { border-radius: var(--borderRadius-small, $border-radius-1); }
+    .rounded#{$variant}-2 { border-radius: var(--borderRadius-medium, $border-radius-2); }
+    .rounded#{$variant}-3 { border-radius: var(--borderRadius-large, $border-radius-3); }
 
     @each $edge, $corners in $edges {
       .rounded#{$variant}-#{$edge}-0 {
         @each $corner in $corners {
-          border-#{$corner}-radius: 0 !important;
+          border-#{$corner}-radius: 0;
         }
       }
 
       .rounded#{$variant}-#{$edge}-1 {
         @each $corner in $corners {
-          border-#{$corner}-radius: var(--borderRadius-small, $border-radius-1) !important;
+          border-#{$corner}-radius: var(--borderRadius-small, $border-radius-1);
         }
       }
 
       .rounded#{$variant}-#{$edge}-2 {
         @each $corner in $corners {
-          border-#{$corner}-radius: var(--borderRadius-medium, $border-radius-2) !important;
+          border-#{$corner}-radius: var(--borderRadius-medium, $border-radius-2);
         }
       }
 
       .rounded#{$variant}-#{$edge}-3 {
         @each $corner in $corners {
-          border-#{$corner}-radius: var(--borderRadius-medium, $border-radius-3) !important;
+          border-#{$corner}-radius: var(--borderRadius-medium, $border-radius-3);
         }
       }
     }
@@ -75,9 +75,9 @@
 }
 
 /* Add a 50% border-radius to make something into a circle */
-.circle { border-radius: var(--borderRadius-full, 50%) !important; }
+.circle { border-radius: var(--borderRadius-full, 50%); }
 
 /* Change the border style to dashed, in conjunction with another utility */
 .border-dashed {
-  border-style: dashed !important;
+  border-style: dashed;
 }
diff --git a/src/utilities/box-shadow.scss b/src/utilities/box-shadow.scss
index ab3207630d..4ed4768b88 100644
--- a/src/utilities/box-shadow.scss
+++ b/src/utilities/box-shadow.scss
@@ -3,27 +3,27 @@
 // Box shadows
 
 .color-shadow-small {
-  box-shadow: var(--shadow-resting-small, var(--color-shadow-small)) !important;
+  box-shadow: var(--shadow-resting-small, var(--color-shadow-small));
 }
 
 .color-shadow-medium {
-  box-shadow: var(--shadow-resting-medium, var(--color-shadow-medium)) !important;
+  box-shadow: var(--shadow-resting-medium, var(--color-shadow-medium));
 }
 
 .color-shadow-large {
-  box-shadow: var(--shadow-floating-large, var(--color-shadow-large)) !important;
+  box-shadow: var(--shadow-floating-large, var(--color-shadow-large));
 }
 
 .color-shadow-extra-large {
-  box-shadow: var(--shadow-floating-xlarge, var(--color-shadow-extra-large)) !important;
+  box-shadow: var(--shadow-floating-xlarge, var(--color-shadow-extra-large));
 }
 
 .shadow-floating-small {
-  box-shadow: var(--shadow-floating-small, var(--color-overlay-shadow)) !important;
+  box-shadow: var(--shadow-floating-small, var(--color-overlay-shadow));
 }
 
 // Turn off box shadow
 
 .box-shadow-none {
-  box-shadow: none !important;
+  box-shadow: none;
 }
diff --git a/src/utilities/colors.scss b/src/utilities/colors.scss
index 6ea5a90026..2b651c775b 100644
--- a/src/utilities/colors.scss
+++ b/src/utilities/colors.scss
@@ -1,94 +1,94 @@
 
 // Foreground
 
-.color-fg-default, .fgColor-default     { color: var(--fgColor-default, var(--color-fg-default)) !important; }
-.color-fg-muted, .fgColor-muted      { color: var(--fgColor-muted, var(--color-fg-muted)) !important; }
-.color-fg-subtle      { color: var(--fgColor-muted, var(--color-fg-subtle)) !important; }
-
-.color-fg-accent, .fgColor-accent    { color: var(--fgColor-accent, var(--color-accent-fg)) !important; }
-.color-fg-success, .fgColor-success   { color: var(--fgColor-success, var(--color-success-fg)) !important; }
-.color-fg-attention, .fgColor-attention { color: var(--fgColor-attention, var(--color-attention-fg)) !important; }
-.color-fg-severe, .fgColor-severe    { color: var(--fgColor-severe, var(--color-severe-fg)) !important; }
-.color-fg-danger, .fgColor-danger    { color: var(--fgColor-danger, var(--color-danger-fg)) !important; }
-.color-fg-open, .fgColor-open      { color: var(--fgColor-open, var(--color-open-fg)) !important; }
-.color-fg-closed, .fgColor-closed    { color: var(--fgColor-closed, var(--color-closed-fg)) !important; }
-.color-fg-done, .fgColor-done      { color: var(--fgColor-done, var(--color-done-fg)) !important; }
-.color-fg-sponsors, .fgColor-sponsors  { color: var(--fgColor-sponsors, var(--color-sponsors-fg)) !important; }
-
-.color-fg-on-emphasis, .fgColor-onEmphasis { color: var(--fgColor-onEmphasis, var(--color-fg-on-emphasis)) !important; }
+.color-fg-default, .fgColor-default     { color: var(--fgColor-default, var(--color-fg-default)); }
+.color-fg-muted, .fgColor-muted      { color: var(--fgColor-muted, var(--color-fg-muted)); }
+.color-fg-subtle      { color: var(--fgColor-muted, var(--color-fg-subtle)); }
+
+.color-fg-accent, .fgColor-accent    { color: var(--fgColor-accent, var(--color-accent-fg)); }
+.color-fg-success, .fgColor-success   { color: var(--fgColor-success, var(--color-success-fg)); }
+.color-fg-attention, .fgColor-attention { color: var(--fgColor-attention, var(--color-attention-fg)); }
+.color-fg-severe, .fgColor-severe    { color: var(--fgColor-severe, var(--color-severe-fg)); }
+.color-fg-danger, .fgColor-danger    { color: var(--fgColor-danger, var(--color-danger-fg)); }
+.color-fg-open, .fgColor-open      { color: var(--fgColor-open, var(--color-open-fg)); }
+.color-fg-closed, .fgColor-closed    { color: var(--fgColor-closed, var(--color-closed-fg)); }
+.color-fg-done, .fgColor-done      { color: var(--fgColor-done, var(--color-done-fg)); }
+.color-fg-sponsors, .fgColor-sponsors  { color: var(--fgColor-sponsors, var(--color-sponsors-fg)); }
+
+.color-fg-on-emphasis, .fgColor-onEmphasis { color: var(--fgColor-onEmphasis, var(--color-fg-on-emphasis)); }
 
 // Background
 
-.color-bg-default, .bgColor-default  { background-color: var(--bgColor-default, var(--color-canvas-default)) !important; }
-.color-bg-overlay  { background-color: var(--overlay-bgColor, var(--color-canvas-overlay)) !important; }
-.color-bg-inset, .bgColor-inset    { background-color: var(--bgColor-inset, var(--color-canvas-inset)) !important; }
-.color-bg-subtle, .bgColor-muted   { background-color: var(--bgColor-muted, var(--color-canvas-subtle)) !important; }
-.color-bg-emphasis, .bgColor-emphasis { background-color: var(--bgColor-emphasis, var(--color-neutral-emphasis-plus)) !important; }
+.color-bg-default, .bgColor-default  { background-color: var(--bgColor-default, var(--color-canvas-default)); }
+.color-bg-overlay  { background-color: var(--overlay-bgColor, var(--color-canvas-overlay)); }
+.color-bg-inset, .bgColor-inset    { background-color: var(--bgColor-inset, var(--color-canvas-inset)); }
+.color-bg-subtle, .bgColor-muted   { background-color: var(--bgColor-muted, var(--color-canvas-subtle)); }
+.color-bg-emphasis, .bgColor-emphasis { background-color: var(--bgColor-emphasis, var(--color-neutral-emphasis-plus)); }
 
-.color-bg-accent, .bgColor-accent-muted          { background-color: var(--bgColor-accent-muted, var(--color-accent-subtle)) !important; }
-.color-bg-accent-emphasis, .bgColor-accent-emphasis { background-color: var(--bgColor-accent-emphasis, var(--color-accent-emphasis)) !important; }
+.color-bg-accent, .bgColor-accent-muted          { background-color: var(--bgColor-accent-muted, var(--color-accent-subtle)); }
+.color-bg-accent-emphasis, .bgColor-accent-emphasis { background-color: var(--bgColor-accent-emphasis, var(--color-accent-emphasis)); }
 
-.color-bg-success, .bgColor-success-muted          { background-color: var(--bgColor-success-muted, var(--color-success-subtle)) !important; }
-.color-bg-success-emphasis, .bgColor-success-emphasis { background-color: var(--bgColor-success-emphasis, var(--color-success-emphasis)) !important; }
+.color-bg-success, .bgColor-success-muted          { background-color: var(--bgColor-success-muted, var(--color-success-subtle)); }
+.color-bg-success-emphasis, .bgColor-success-emphasis { background-color: var(--bgColor-success-emphasis, var(--color-success-emphasis)); }
 
-.color-bg-attention, .bgColor-attention-muted          { background-color: var(--bgColor-attention-muted, var(--color-attention-subtle)) !important; }
-.color-bg-attention-emphasis, .bgColor-attention-emphasis { background-color: var(--bgColor-attention-emphasis, var(--color-attention-emphasis)) !important; }
+.color-bg-attention, .bgColor-attention-muted          { background-color: var(--bgColor-attention-muted, var(--color-attention-subtle)); }
+.color-bg-attention-emphasis, .bgColor-attention-emphasis { background-color: var(--bgColor-attention-emphasis, var(--color-attention-emphasis)); }
 
-.color-bg-severe, .bgColor-severe-muted          { background-color: var(--bgColor-severe-muted, var(--color-severe-subtle)) !important; }
-.color-bg-severe-emphasis, .bgColor-severe-emphasis { background-color: var(--bgColor-severe-emphasis, var(--color-severe-emphasis)) !important; }
+.color-bg-severe, .bgColor-severe-muted          { background-color: var(--bgColor-severe-muted, var(--color-severe-subtle)); }
+.color-bg-severe-emphasis, .bgColor-severe-emphasis { background-color: var(--bgColor-severe-emphasis, var(--color-severe-emphasis)); }
 
-.color-bg-danger, .bgColor-danger-muted          { background-color: var(--bgColor-danger-muted, var(--color-danger-subtle)) !important; }
-.color-bg-danger-emphasis, .bgColor-danger-emphasis { background-color: var(--bgColor-danger-emphasis, var(--color-danger-emphasis)) !important; }
+.color-bg-danger, .bgColor-danger-muted          { background-color: var(--bgColor-danger-muted, var(--color-danger-subtle)); }
+.color-bg-danger-emphasis, .bgColor-danger-emphasis { background-color: var(--bgColor-danger-emphasis, var(--color-danger-emphasis)); }
 
-.color-bg-open, .bgColor-open-muted          { background-color: var(--bgColor-open-muted, var(--color-open-subtle)) !important; }
-.color-bg-open-emphasis, .bgColor-open-emphasis { background-color: var(--bgColor-open-emphasis, var(--color-open-emphasis)) !important; }
+.color-bg-open, .bgColor-open-muted          { background-color: var(--bgColor-open-muted, var(--color-open-subtle)); }
+.color-bg-open-emphasis, .bgColor-open-emphasis { background-color: var(--bgColor-open-emphasis, var(--color-open-emphasis)); }
 
-.color-bg-closed, .bgColor-closed-muted          { background-color: var(--bgColor-closed-muted, var(--color-closed-subtle)) !important; }
-.color-bg-closed-emphasis, .bgColor-closed-emphasis { background-color: var(--bgColor-closed-emphasis, var(--color-closed-emphasis)) !important; }
+.color-bg-closed, .bgColor-closed-muted          { background-color: var(--bgColor-closed-muted, var(--color-closed-subtle)); }
+.color-bg-closed-emphasis, .bgColor-closed-emphasis { background-color: var(--bgColor-closed-emphasis, var(--color-closed-emphasis)); }
 
-.color-bg-done, .bgColor-done-muted          { background-color: var(--bgColor-done-muted, var(--color-done-subtle)) !important; }
-.color-bg-done-emphasis, .bgColor-done-emphasis { background-color: var(--bgColor-done-emphasis, var(--color-done-emphasis)) !important; }
+.color-bg-done, .bgColor-done-muted          { background-color: var(--bgColor-done-muted, var(--color-done-subtle)); }
+.color-bg-done-emphasis, .bgColor-done-emphasis { background-color: var(--bgColor-done-emphasis, var(--color-done-emphasis)); }
 
-.color-bg-sponsors, .bgColor-sponsors-muted          { background-color: var(--bgColor-sponsors-muted, var(--color-sponsors-subtle)) !important; }
-.color-bg-sponsors-emphasis, .bgColor-sponsors-emphasis { background-color: var(--bgColor-sponsors-emphasis, var(--color-sponsors-emphasis)) !important; }
+.color-bg-sponsors, .bgColor-sponsors-muted          { background-color: var(--bgColor-sponsors-muted, var(--color-sponsors-subtle)); }
+.color-bg-sponsors-emphasis, .bgColor-sponsors-emphasis { background-color: var(--bgColor-sponsors-emphasis, var(--color-sponsors-emphasis)); }
 
-.color-bg-transparent, .bgColor-transparent { background-color: transparent !important; }
+.color-bg-transparent, .bgColor-transparent { background-color: transparent; }
 
 // Border
 
-.color-border-default, .borderColor-default { border-color: var(--borderColor-default, var(--color-border-default)) !important; }
-.color-border-muted, .borderColor-muted   { border-color: var(--borderColor-muted, var(--color-border-muted)) !important; }
-.color-border-subtle  { border-color: var(--borderColor-muted, var(--color-border-subtle)) !important; }
+.color-border-default, .borderColor-default { border-color: var(--borderColor-default, var(--color-border-default)); }
+.color-border-muted, .borderColor-muted   { border-color: var(--borderColor-muted, var(--color-border-muted)); }
+.color-border-subtle  { border-color: var(--borderColor-muted, var(--color-border-subtle)); }
 
-.color-border-accent, .borderColor-accent-muted          { border-color: var(--borderColor-accent-muted, var(--color-accent-muted)) !important; }
-.color-border-accent-emphasis, .borderColor-accent-emphasis { border-color: var(--borderColor-accent-emphasis, var(--color-accent-emphasis)) !important; }
+.color-border-accent, .borderColor-accent-muted          { border-color: var(--borderColor-accent-muted, var(--color-accent-muted)); }
+.color-border-accent-emphasis, .borderColor-accent-emphasis { border-color: var(--borderColor-accent-emphasis, var(--color-accent-emphasis)); }
 
-.color-border-success, .borderColor-success-muted          { border-color: var(--borderColor-success-muted, var(--color-success-muted)) !important; }
-.color-border-success-emphasis, .borderColor-success-emphasis { border-color: var(--borderColor-success-emphasis, var(--color-success-emphasis)) !important; }
+.color-border-success, .borderColor-success-muted          { border-color: var(--borderColor-success-muted, var(--color-success-muted)); }
+.color-border-success-emphasis, .borderColor-success-emphasis { border-color: var(--borderColor-success-emphasis, var(--color-success-emphasis)); }
 
-.color-border-attention, .borderColor-attention-muted          { border-color: var(--borderColor-attention-muted, var(--color-attention-muted)) !important; }
-.color-border-attention-emphasis, .borderColor-attention-emphasis { border-color: var(--borderColor-attention-emphasis, var(--color-attention-emphasis)) !important; }
+.color-border-attention, .borderColor-attention-muted          { border-color: var(--borderColor-attention-muted, var(--color-attention-muted)); }
+.color-border-attention-emphasis, .borderColor-attention-emphasis { border-color: var(--borderColor-attention-emphasis, var(--color-attention-emphasis)); }
 
-.color-border-severe, .borderColor-severe-muted          { border-color: var(--borderColor-severe-muted, var(--color-severe-muted)) !important; }
-.color-border-severe-emphasis, .borderColor-severe-emphasis { border-color: var(--borderColor-severe-emphasis, var(--color-severe-emphasis)) !important; }
+.color-border-severe, .borderColor-severe-muted          { border-color: var(--borderColor-severe-muted, var(--color-severe-muted)); }
+.color-border-severe-emphasis, .borderColor-severe-emphasis { border-color: var(--borderColor-severe-emphasis, var(--color-severe-emphasis)); }
 
-.color-border-danger, .borderColor-danger-muted          { border-color: var(--borderColor-danger-muted, var(--color-danger-muted)) !important; }
-.color-border-danger-emphasis, .borderColor-danger-emphasis { border-color: var(--borderColor-danger-emphasis, var(--color-danger-emphasis)) !important; }
+.color-border-danger, .borderColor-danger-muted          { border-color: var(--borderColor-danger-muted, var(--color-danger-muted)); }
+.color-border-danger-emphasis, .borderColor-danger-emphasis { border-color: var(--borderColor-danger-emphasis, var(--color-danger-emphasis)); }
 
-.color-border-open, .borderColor-open-muted          { border-color: var(--borderColor-open-muted, var(--color-open-muted)) !important; }
-.color-border-open-emphasis, .borderColor-open-emphasis { border-color: var(--borderColor-open-emphasis, var(--color-open-emphasis)) !important; }
+.color-border-open, .borderColor-open-muted          { border-color: var(--borderColor-open-muted, var(--color-open-muted)); }
+.color-border-open-emphasis, .borderColor-open-emphasis { border-color: var(--borderColor-open-emphasis, var(--color-open-emphasis)); }
 
-.color-border-closed, .borderColor-closed-muted          { border-color: var(--borderColor-closed-muted, var(--color-closed-muted)) !important; }
-.color-border-closed-emphasis, .borderColor-closed-emphasis { border-color: var(--borderColor-closed-emphasis, var(--color-closed-emphasis)) !important; }
+.color-border-closed, .borderColor-closed-muted          { border-color: var(--borderColor-closed-muted, var(--color-closed-muted)); }
+.color-border-closed-emphasis, .borderColor-closed-emphasis { border-color: var(--borderColor-closed-emphasis, var(--color-closed-emphasis)); }
 
-.color-border-done, .borderColor-done-muted          { border-color: var(--borderColor-done-muted, var(--color-done-muted)) !important; }
-.color-border-done-emphasis, .borderColor-done-emphasis { border-color: var(--borderColor-done-emphasis, var(--color-done-emphasis)) !important; }
+.color-border-done, .borderColor-done-muted          { border-color: var(--borderColor-done-muted, var(--color-done-muted)); }
+.color-border-done-emphasis, .borderColor-done-emphasis { border-color: var(--borderColor-done-emphasis, var(--color-done-emphasis)); }
 
-.color-border-sponsors, .borderColor-sponsors-muted          { border-color: var(--borderColor-sponsors-muted, var(--color-sponsors-muted)) !important; }
-.color-border-sponsors-emphasis, .borderColor-sponsors-emphasis { border-color: var(--borderColor-sponsors-emphasis, var(--color-sponsors-emphasis)) !important; }
+.color-border-sponsors, .borderColor-sponsors-muted          { border-color: var(--borderColor-sponsors-muted, var(--color-sponsors-muted)); }
+.color-border-sponsors-emphasis, .borderColor-sponsors-emphasis { border-color: var(--borderColor-sponsors-emphasis, var(--color-sponsors-emphasis)); }
 
 // Misc
 
 .color-fg-inherit, .fgColor-inherit {
-  color: inherit !important;
+  color: inherit;
 }
diff --git a/src/utilities/flexbox.scss b/src/utilities/flexbox.scss
index 2092f7c6bb..8e68a9949f 100644
--- a/src/utilities/flexbox.scss
+++ b/src/utilities/flexbox.scss
@@ -3,49 +3,49 @@
   @include breakpoint($breakpoint) {
     // Flexbox classes
     // Container
-    .flex#{$variant}-row            { flex-direction: row !important; }
-    .flex#{$variant}-row-reverse    { flex-direction: row-reverse !important; }
-    .flex#{$variant}-column         { flex-direction: column !important; }
-    .flex#{$variant}-column-reverse { flex-direction: column-reverse !important; }
+    .flex#{$variant}-row            { flex-direction: row; }
+    .flex#{$variant}-row-reverse    { flex-direction: row-reverse; }
+    .flex#{$variant}-column         { flex-direction: column; }
+    .flex#{$variant}-column-reverse { flex-direction: column-reverse; }
 
-    .flex#{$variant}-wrap             { flex-wrap: wrap !important; }
-    .flex#{$variant}-nowrap           { flex-wrap: nowrap !important; }
-    .flex#{$variant}-wrap-reverse     { flex-wrap: wrap-reverse !important; }
+    .flex#{$variant}-wrap             { flex-wrap: wrap; }
+    .flex#{$variant}-nowrap           { flex-wrap: nowrap; }
+    .flex#{$variant}-wrap-reverse     { flex-wrap: wrap-reverse; }
 
-    .flex#{$variant}-justify-start    { justify-content: flex-start !important; }
-    .flex#{$variant}-justify-end      { justify-content: flex-end !important; }
-    .flex#{$variant}-justify-center   { justify-content: center !important; }
-    .flex#{$variant}-justify-between  { justify-content: space-between !important; }
-    .flex#{$variant}-justify-around   { justify-content: space-around !important; }
+    .flex#{$variant}-justify-start    { justify-content: flex-start; }
+    .flex#{$variant}-justify-end      { justify-content: flex-end; }
+    .flex#{$variant}-justify-center   { justify-content: center; }
+    .flex#{$variant}-justify-between  { justify-content: space-between; }
+    .flex#{$variant}-justify-around   { justify-content: space-around; }
 
-    .flex#{$variant}-items-start      { align-items: flex-start !important; }
-    .flex#{$variant}-items-end        { align-items: flex-end !important; }
-    .flex#{$variant}-items-center     { align-items: center !important; }
-    .flex#{$variant}-items-baseline   { align-items: baseline !important; }
-    .flex#{$variant}-items-stretch    { align-items: stretch !important; }
+    .flex#{$variant}-items-start      { align-items: flex-start; }
+    .flex#{$variant}-items-end        { align-items: flex-end; }
+    .flex#{$variant}-items-center     { align-items: center; }
+    .flex#{$variant}-items-baseline   { align-items: baseline; }
+    .flex#{$variant}-items-stretch    { align-items: stretch; }
 
-    .flex#{$variant}-content-start    { align-content: flex-start !important; }
-    .flex#{$variant}-content-end      { align-content: flex-end !important; }
-    .flex#{$variant}-content-center   { align-content: center !important; }
-    .flex#{$variant}-content-between  { align-content: space-between !important; }
-    .flex#{$variant}-content-around   { align-content: space-around !important; }
-    .flex#{$variant}-content-stretch  { align-content: stretch !important; }
+    .flex#{$variant}-content-start    { align-content: flex-start; }
+    .flex#{$variant}-content-end      { align-content: flex-end; }
+    .flex#{$variant}-content-center   { align-content: center; }
+    .flex#{$variant}-content-between  { align-content: space-between; }
+    .flex#{$variant}-content-around   { align-content: space-around; }
+    .flex#{$variant}-content-stretch  { align-content: stretch; }
 
     // Item
-    .flex#{$variant}-1        { flex: 1 !important; }
-    .flex#{$variant}-auto     { flex: auto !important; }
-    .flex#{$variant}-grow-0   { flex-grow: 0 !important; }
-    .flex#{$variant}-shrink-0 { flex-shrink: 0 !important; }
+    .flex#{$variant}-1        { flex: 1; }
+    .flex#{$variant}-auto     { flex: auto; }
+    .flex#{$variant}-grow-0   { flex-grow: 0; }
+    .flex#{$variant}-shrink-0 { flex-shrink: 0; }
 
-    .flex#{$variant}-self-auto        { align-self: auto !important; }
-    .flex#{$variant}-self-start       { align-self: flex-start !important; }
-    .flex#{$variant}-self-end         { align-self: flex-end !important; }
-    .flex#{$variant}-self-center      { align-self: center !important; }
-    .flex#{$variant}-self-baseline    { align-self: baseline !important; }
-    .flex#{$variant}-self-stretch     { align-self: stretch !important; }
+    .flex#{$variant}-self-auto        { align-self: auto; }
+    .flex#{$variant}-self-start       { align-self: flex-start; }
+    .flex#{$variant}-self-end         { align-self: flex-end; }
+    .flex#{$variant}-self-center      { align-self: center; }
+    .flex#{$variant}-self-baseline    { align-self: baseline; }
+    .flex#{$variant}-self-stretch     { align-self: stretch; }
 
-    .flex#{$variant}-order-1 { order: 1 !important; }
-    .flex#{$variant}-order-2 { order: 2 !important; }
-    .flex#{$variant}-order-none { order: inherit !important; }
+    .flex#{$variant}-order-1 { order: 1; }
+    .flex#{$variant}-order-2 { order: 2; }
+    .flex#{$variant}-order-none { order: inherit; }
   }
 }
diff --git a/src/utilities/index.scss b/src/utilities/index.scss
index f03006c2bc..9d286c8ad4 100644
--- a/src/utilities/index.scss
+++ b/src/utilities/index.scss
@@ -10,5 +10,5 @@
 @import './margin.scss';
 @import './padding.scss';
 @import './typography.scss';
-// Visibility and display should always come last in the imports so that they override other utilities with !important
+// Visibility and display should always come last in the imports so that they can override other utilities
 @import './visibility-display.scss';
diff --git a/src/utilities/layout.scss b/src/utilities/layout.scss
index f87fd4aa7e..6527aa1dbb 100644
--- a/src/utilities/layout.scss
+++ b/src/utilities/layout.scss
@@ -5,7 +5,7 @@
   @include breakpoint($breakpoint) {
     @each $position in $responsive-positions {
       .position#{$variant}-#{$position} {
-        position: $position !important;
+        position: $position;
       }
     }
   }
@@ -14,37 +14,37 @@
 /* Final position */
 @each $breakpoint, $variant in $responsive-variants {
   @include breakpoint($breakpoint) {
-    .top#{$variant}-0 { top: 0 !important; }
-    .right#{$variant}-0 { right: 0 !important; }
-    .bottom#{$variant}-0 { bottom: 0 !important; }
-    .left#{$variant}-0 { left: 0 !important; }
-    .top#{$variant}-auto { top: auto !important; }
-    .right#{$variant}-auto { right: auto !important; }
-    .bottom#{$variant}-auto { bottom: auto !important; }
-    .left#{$variant}-auto { left: auto !important; }
+    .top#{$variant}-0 { top: 0; }
+    .right#{$variant}-0 { right: 0; }
+    .bottom#{$variant}-0 { bottom: 0; }
+    .left#{$variant}-0 { left: 0; }
+    .top#{$variant}-auto { top: auto; }
+    .right#{$variant}-auto { right: auto; }
+    .bottom#{$variant}-auto { bottom: auto; }
+    .left#{$variant}-auto { left: auto; }
   }
 }
 
 /* Vertical align middle */
-.v-align-middle      { vertical-align: middle !important; }
+.v-align-middle      { vertical-align: middle; }
 /* Vertical align top */
-.v-align-top         { vertical-align: top !important; }
+.v-align-top         { vertical-align: top; }
 /* Vertical align bottom */
-.v-align-bottom      { vertical-align: bottom !important; }
+.v-align-bottom      { vertical-align: bottom; }
 /* Vertical align to the top of the text */
-.v-align-text-top    { vertical-align: text-top !important; }
+.v-align-text-top    { vertical-align: text-top; }
 /* Vertical align to the bottom of the text */
-.v-align-text-bottom { vertical-align: text-bottom !important; }
+.v-align-text-bottom { vertical-align: text-bottom; }
 /* Vertical align to the parent's baseline */
-.v-align-baseline    { vertical-align: baseline !important; }
+.v-align-baseline    { vertical-align: baseline; }
 
 // Overflow utilities
 @each $breakpoint, $variant in $responsive-variants {
   @include breakpoint($breakpoint) {
     @each $overflow in (visible, hidden, auto, scroll) {
-      .overflow#{$variant}-#{$overflow}   { overflow: $overflow !important; }
-      .overflow#{$variant}-x-#{$overflow} { overflow-x: $overflow !important; }
-      .overflow#{$variant}-y-#{$overflow} { overflow-y: $overflow !important; }
+      .overflow#{$variant}-#{$overflow}   { overflow: $overflow; }
+      .overflow#{$variant}-x-#{$overflow} { overflow-x: $overflow; }
+      .overflow#{$variant}-y-#{$overflow} { overflow-y: $overflow; }
     }
   }
 }
@@ -59,39 +59,39 @@
 @each $breakpoint, $variant in $responsive-variants {
   @include breakpoint($breakpoint) {
     /* Float to the left */
-    .float#{$variant}-left  { float: left !important; }
+    .float#{$variant}-left  { float: left; }
     /* Float to the right */
-    .float#{$variant}-right  { float: right !important; }
+    .float#{$variant}-right  { float: right; }
     /* No float */
-    .float#{$variant}-none { float: none !important; }
+    .float#{$variant}-none { float: none; }
   }
 }
 
 // Width and height utilities, helpful in combination
 // with display-table utilities and images
 /* Max width 100% */
-.width-fit         { max-width: 100% !important; }
+.width-fit         { max-width: 100%; }
 /* Set the width to 100% */
-.width-full        { width: 100% !important; }
+.width-full        { width: 100%; }
 /* Set the max-width to 65 characters */
-.width-comfortable { max-width: 65ch !important; }
+.width-comfortable { max-width: 65ch; }
 /* Max height 100% */
-.height-fit        { max-height: 100% !important; }
+.height-fit        { max-height: 100%; }
 /* Set the height to 100% */
-.height-full       { height: 100% !important; }
+.height-full       { height: 100%; }
 
 /* Remove min-width from element */
-.min-width-0 { min-width: 0 !important; }
+.min-width-0 { min-width: 0; }
 
 @each $breakpoint, $variant in $responsive-variants {
   @include breakpoint($breakpoint) {
 
     // Auto variants
-    .width#{$variant}-auto { width: auto !important; }
+    .width#{$variant}-auto { width: auto; }
 
     /* Set the direction to rtl */
-    .direction#{$variant}-rtl { direction: rtl !important; }
+    .direction#{$variant}-rtl { direction: rtl; }
     /* Set the direction to ltr */
-    .direction#{$variant}-ltr { direction: ltr !important; }
+    .direction#{$variant}-ltr { direction: ltr; }
   }
 }
diff --git a/src/utilities/margin.scss b/src/utilities/margin.scss
index 2aed93001d..159d96997a 100644
--- a/src/utilities/margin.scss
+++ b/src/utilities/margin.scss
@@ -8,61 +8,61 @@
     @each $scale, $size in $spacer-map-rem-extended {
       @if ($scale < length($spacer-map-rem)) {
         /* Set a $size margin to all sides at $breakpoint */
-        .m#{$variant}-#{$scale}  { margin: $size !important; }
+        .m#{$variant}-#{$scale}  { margin: $size; }
       }
 
       /* Set a $size margin on the top at $breakpoint */
-      .mt#{$variant}-#{$scale} { margin-top: $size !important; }
+      .mt#{$variant}-#{$scale} { margin-top: $size; }
       /* Set a $size margin on the bottom at $breakpoint */
-      .mb#{$variant}-#{$scale} { margin-bottom: $size !important; }
+      .mb#{$variant}-#{$scale} { margin-bottom: $size; }
 
       @if ($scale < length($spacer-map-rem)) {
         /* Set a $size margin on the right at $breakpoint */
-        .mr#{$variant}-#{$scale} { margin-right: $size !important; }
+        .mr#{$variant}-#{$scale} { margin-right: $size; }
         /* Set a $size margin on the left at $breakpoint */
-        .ml#{$variant}-#{$scale} { margin-left: $size !important; }
+        .ml#{$variant}-#{$scale} { margin-left: $size; }
       }
 
       @if ($size != 0) {
         /* Set a negative $size margin on top at $breakpoint */
-        .mt#{$variant}-n#{$scale} { margin-top: calc(-1 * $size) !important; }
+        .mt#{$variant}-n#{$scale} { margin-top: calc(-1 * $size); }
         /* Set a negative $size margin on the bottom at $breakpoint */
-        .mb#{$variant}-n#{$scale} { margin-bottom: calc(-1 * $size) !important; }
+        .mb#{$variant}-n#{$scale} { margin-bottom: calc(-1 * $size); }
 
         @if ($scale < length($spacer-map-rem)) {
           /* Set a negative $size margin on the right at $breakpoint */
-          .mr#{$variant}-n#{$scale} { margin-right : calc(-1 * $size) !important; }
+          .mr#{$variant}-n#{$scale} { margin-right : calc(-1 * $size); }
           /* Set a negative $size margin on the left at $breakpoint */
-          .ml#{$variant}-n#{$scale} { margin-left  : calc(-1 * $size) !important; }
+          .ml#{$variant}-n#{$scale} { margin-left  : calc(-1 * $size); }
         }
       }
 
       @if ($scale < length($spacer-map-rem)) {
         /* Set a $size margin on the left & right at $breakpoint */
         .mx#{$variant}-#{$scale} {
-          margin-right: $size !important;
-          margin-left: $size !important;
+          margin-right: $size;
+          margin-left: $size;
         }
       }
 
       /* Set a $size margin on the top & bottom at $breakpoint */
       .my#{$variant}-#{$scale} {
-        margin-top: $size !important;
-        margin-bottom: $size !important;
+        margin-top: $size;
+        margin-bottom: $size;
       }
     }
 
     /* responsive horizontal auto margins */
     .mx#{$variant}-auto {
-      margin-right: auto !important;
-      margin-left: auto !important;
+      margin-right: auto;
+      margin-left: auto;
     }
   }
 }
 
-.m-auto { margin: auto !important; }
+.m-auto { margin: auto; }
 
-.mt-auto { margin-top: auto !important; }
-.mr-auto { margin-right: auto !important; }
-.mb-auto { margin-bottom: auto !important; }
-.ml-auto { margin-left: auto !important; }
+.mt-auto { margin-top: auto; }
+.mr-auto { margin-right: auto; }
+.mb-auto { margin-bottom: auto; }
+.ml-auto { margin-left: auto; }
diff --git a/src/utilities/padding.scss b/src/utilities/padding.scss
index faf11fdcf4..9883ea350a 100644
--- a/src/utilities/padding.scss
+++ b/src/utilities/padding.scss
@@ -8,30 +8,30 @@
     @each $scale, $size in $spacer-map-rem-extended {
       @if ($scale < length($spacer-map-rem)) {
         /* Set a $size padding to all sides at $breakpoint */
-        .p#{$variant}-#{$scale}  { padding: $size !important; }
+        .p#{$variant}-#{$scale}  { padding: $size; }
       }
 
       /* Set a $size padding to the top at $breakpoint */
-      .pt#{$variant}-#{$scale} { padding-top: $size !important; }
+      .pt#{$variant}-#{$scale} { padding-top: $size; }
       /* Set a $size padding to the right at $breakpoint */
-      .pr#{$variant}-#{$scale} { padding-right: $size !important; }
+      .pr#{$variant}-#{$scale} { padding-right: $size; }
       /* Set a $size padding to the bottom at $breakpoint */
-      .pb#{$variant}-#{$scale} { padding-bottom: $size !important; }
+      .pb#{$variant}-#{$scale} { padding-bottom: $size; }
       /* Set a $size padding to the left at $breakpoint */
-      .pl#{$variant}-#{$scale} { padding-left: $size !important; }
+      .pl#{$variant}-#{$scale} { padding-left: $size; }
 
       @if ($scale < length($spacer-map-rem)) {
         /* Set a $size padding to the left & right at $breakpoint */
         .px#{$variant}-#{$scale} {
-          padding-right: $size !important;
-          padding-left: $size !important;
+          padding-right: $size;
+          padding-left: $size;
         }
       }
 
       /* Set a $size padding to the top & bottom at $breakpoint */
       .py#{$variant}-#{$scale} {
-        padding-top: $size !important;
-        padding-bottom: $size !important;
+        padding-top: $size;
+        padding-bottom: $size;
       }
     }
   }
@@ -39,16 +39,16 @@
 
 // responsive padding for containers
 .p-responsive {
-  padding-right: var(--base-size-16) !important;
-  padding-left: var(--base-size-16) !important;
+  padding-right: var(--base-size-16);
+  padding-left: var(--base-size-16);
 
   @include breakpoint(sm) {
-    padding-right: var(--base-size-40) !important;
-    padding-left: var(--base-size-40) !important;
+    padding-right: var(--base-size-40);
+    padding-left: var(--base-size-40);
   }
 
   @include breakpoint(lg) {
-    padding-right: var(--base-size-16) !important;
-    padding-left: var(--base-size-16) !important;
+    padding-right: var(--base-size-16);
+    padding-left: var(--base-size-16);
   }
 }
diff --git a/src/utilities/typography.scss b/src/utilities/typography.scss
index 7e5ba393b0..a7ea676419 100644
--- a/src/utilities/typography.scss
+++ b/src/utilities/typography.scss
@@ -17,46 +17,46 @@
 
 /* Set the font size to 26px */
 .h1 {
-  font-size: var(--h1-size-mobile, $h1-size-mobile) !important;
+  font-size: var(--h1-size-mobile, $h1-size-mobile);
 
   @include breakpoint(md) {
-    font-size: var(--h1-size, $h1-size) !important;
+    font-size: var(--h1-size, $h1-size);
   }
 }
 
 /* Set the font size to 22px */
 .h2 {
-  font-size: var(--h2-size-mobile, $h2-size-mobile) !important;
+  font-size: var(--h2-size-mobile, $h2-size-mobile);
 
   @include breakpoint(md) {
-    font-size: var(--h2-size, $h2-size) !important;
+    font-size: var(--h2-size, $h2-size);
   }
 }
 
 /* Set the font size to 18px */
 .h3 {
-  font-size: var(--h3-size-mobile, $h3-size-mobile) !important;
+  font-size: var(--h3-size-mobile, $h3-size-mobile);
 
   @include breakpoint(md) {
-    font-size: var(--h3-size, $h3-size) !important;
+    font-size: var(--h3-size, $h3-size);
   }
 }
 
 /* Set the font size to #{$h4-size} */
 .h4 {
-  font-size: var(--h4-size, $h4-size) !important;
+  font-size: var(--h4-size, $h4-size);
 }
 
 /* Set the font size to #{$h5-size} */
 .h5 {
-  font-size: var(--h5-size, $h5-size) !important;
+  font-size: var(--h5-size, $h5-size);
 }
 
 // Does not include color property like typography base
 // styles, color should be applied with color utilities.
 /* Set the font size to #{$h6-size} */
 .h6 {
-  font-size: var(--h6-size, $h6-size) !important;
+  font-size: var(--h6-size, $h6-size);
 }
 
 // Heading utilities
@@ -66,112 +66,112 @@
 .h4,
 .h5,
 .h6 {
-  font-weight: $font-weight-bold !important;
+  font-weight: $font-weight-bold;
 }
 
 // Type utilities that match type sale
 /* Set the font size to 26px */
 .f1 {
-  font-size: var(--h1-size-mobile, $h1-size-mobile) !important;
+  font-size: var(--h1-size-mobile, $h1-size-mobile);
 
   @include breakpoint(md) {
-    font-size: var(--h1-size, $h1-size) !important;
+    font-size: var(--h1-size, $h1-size);
   }
 }
 
 /* Set the font size to 22px */
 .f2 {
-  font-size: var(--h2-size-mobile, $h2-size-mobile) !important;
+  font-size: var(--h2-size-mobile, $h2-size-mobile);
 
   @include breakpoint(md) {
-    font-size: var(--h2-size, $h2-size) !important;
+    font-size: var(--h2-size, $h2-size);
   }
 }
 
 /* Set the font size to 18px */
 .f3 {
-  font-size: var(--h3-size-mobile, $h3-size-mobile) !important;
+  font-size: var(--h3-size-mobile, $h3-size-mobile);
 
   @include breakpoint(md) {
-    font-size: var(--h3-size, $h3-size) !important;
+    font-size: var(--h3-size, $h3-size);
   }
 }
 
 /* Set the font size to #{$h4-size} */
 .f4 {
-  font-size: var(--h4-size, $h4-size) !important;
+  font-size: var(--h4-size, $h4-size);
 
   @include breakpoint(md) {
-    font-size: var(--h4-size, $h4-size) !important;
+    font-size: var(--h4-size, $h4-size);
   }
 }
 
 /* Set the font size to #{$h5-size} */
 .f5 {
-  font-size: var(--h5-size, $h5-size) !important;
+  font-size: var(--h5-size, $h5-size);
 }
 
 /* Set the font size to #{$h6-size} */
 .f6 {
-  font-size: var(--h6-size, $h6-size) !important;
+  font-size: var(--h6-size, $h6-size);
 }
 
 // Type utils with light weight that match type scale
 /* Set the font size to 40px and weight to light */
 .f00-light {
-  font-size: var(--h00-size-mobile, $h00-size-mobile) !important;
-  font-weight: $font-weight-light !important;
+  font-size: var(--h00-size-mobile, $h00-size-mobile);
+  font-weight: $font-weight-light;
 
   @include breakpoint(md) {
-    font-size: var(--h00-size, $h00-size) !important;
+    font-size: var(--h00-size, $h00-size);
   }
 }
 
 /* Set the font size to 32px and weight to light */
 .f0-light {
-  font-size: var(--h0-size-mobile, $h0-size-mobile) !important;
-  font-weight: $font-weight-light !important;
+  font-size: var(--h0-size-mobile, $h0-size-mobile);
+  font-weight: $font-weight-light;
 
   @include breakpoint(md) {
-    font-size: var(--h0-size, $h0-size) !important;
+    font-size: var(--h0-size, $h0-size);
   }
 }
 
 /* Set the font size to 26px and weight to light */
 .f1-light {
-  font-size: var(--h1-size-mobile, $h1-size-mobile) !important;
-  font-weight: $font-weight-light !important;
+  font-size: var(--h1-size-mobile, $h1-size-mobile);
+  font-weight: $font-weight-light;
 
   @include breakpoint(md) {
-    font-size: var(--h1-size, $h1-size) !important;
+    font-size: var(--h1-size, $h1-size);
   }
 }
 
 /* Set the font size to 22px and weight to light */
 .f2-light {
-  font-size: var(--h2-size-mobile, $h2-size-mobile) !important;
-  font-weight: $font-weight-light !important;
+  font-size: var(--h2-size-mobile, $h2-size-mobile);
+  font-weight: $font-weight-light;
 
   @include breakpoint(md) {
-    font-size: var(--h2-size, $h2-size) !important;
+    font-size: var(--h2-size, $h2-size);
   }
 }
 
 // Same size and weight as .lead but without color property
 /* Set the font size to 18px and weight to light */
 .f3-light {
-  font-size: var(--h3-size-mobile, $h3-size-mobile) !important;
-  font-weight: $font-weight-light !important;
+  font-size: var(--h3-size-mobile, $h3-size-mobile);
+  font-weight: $font-weight-light;
 
   @include breakpoint(md) {
-    font-size: var(--h3-size, $h3-size) !important;
+    font-size: var(--h3-size, $h3-size);
   }
 }
 
 // Smallest text size
 /* Set the font size to ${#h6-size} */
 .text-small {
-  font-size: var(--h6-size, $h6-size) !important;
+  font-size: var(--h6-size, $h6-size);
 }
 
 // 12px
@@ -194,22 +194,22 @@
 
     /* Set the line height to ultra condensed */
     .lh#{$variant}-condensed-ultra {
-      line-height: $lh-condensed-ultra !important;
+      line-height: $lh-condensed-ultra;
     }
 
     /* Set the line height to condensed */
     .lh#{$variant}-condensed {
-      line-height: $lh-condensed !important;
+      line-height: $lh-condensed;
     }
 
     /* Set the line height to default */
     .lh#{$variant}-default {
-      line-height: $lh-default !important;
+      line-height: $lh-default;
     }
 
     /* Set the line height to zero */
     .lh#{$variant}-0 {
-      line-height: 0 !important;
+      line-height: 0;
     }
   }
 }
@@ -221,17 +221,17 @@
 
     /* Text align to the right */
     .text#{$variant}-right {
-      text-align: right !important;
+      text-align: right;
     }
 
     /* Text align to the left */
     .text#{$variant}-left {
-      text-align: left !important;
+      text-align: left;
     }
 
     /* Text align to the center */
     .text#{$variant}-center {
-      text-align: center !important;
+      text-align: center;
     }
   }
 }
@@ -239,57 +239,57 @@
 // Text styles
 /* Set the font weight to normal */
 .text-normal {
-  font-weight: $font-weight-normal !important;
+  font-weight: $font-weight-normal;
 }
 
 /* Set the font weight to bold */
 .text-bold {
-  font-weight: $font-weight-bold !important;
+  font-weight: $font-weight-bold;
 }
 
 .text-semibold {
-  font-weight: $font-weight-semibold !important;
+  font-weight: $font-weight-semibold;
 }
 
 .text-light {
-  font-weight: $font-weight-light !important;
+  font-weight: $font-weight-light;
 }
 
 /* Set the font to italic */
 .text-italic {
-  font-style: italic !important;
+  font-style: italic;
 }
 
 /* Make text uppercase */
 .text-uppercase {
-  text-transform: uppercase !important;
+  text-transform: uppercase;
 }
 
 /* Underline text */
 .text-underline {
-  text-decoration: underline !important;
+  text-decoration: underline;
 }
 
 /* Don't underline text */
 .no-underline {
-  text-decoration: none !important;
+  text-decoration: none;
 }
 
 /* Don't wrap white space */
 .no-wrap {
-  white-space: nowrap !important;
+  white-space: nowrap;
 }
 
 /* Normal white space */
 .ws-normal {
-  white-space: normal !important;
+  white-space: normal;
 }
 
 /* Force long "words" to wrap if they exceed the width of the container */
 .wb-break-word {
     // stylelint-disable-next-line declaration-property-value-keyword-no-deprecated
-  word-break: break-word !important;
-  overflow-wrap: break-word !important;
+  word-break: break-word;
+  overflow-wrap: break-word;
 }
 
 /*
@@ -303,7 +303,7 @@
  * see: https://developer.mozilla.org/en-US/docs/Web/CSS/word-break#Values
  */
 .wb-break-all {
-  word-break: break-all !important;
+  word-break: break-all;
 }
 
 .text-emphasized {
@@ -312,20 +312,20 @@
 
 // List styles
 .list-style-none {
-  list-style: none !important;
+  list-style: none;
 }
 
 /* Set to monospace font */
 .text-mono {
-  font-family: $mono-font !important;
+  font-family: $mono-font;
 }
 
 /* Disallow user from selecting text */
 .user-select-none {
-  user-select: none !important;
+  user-select: none;
 }
 
 /* Make text capitalized (transforms first character to uppercase) */
 .text-capitalize {
-  text-transform: capitalize !important;
+  text-transform: capitalize;
 }
diff --git a/src/utilities/visibility-display.scss b/src/utilities/visibility-display.scss
index d421cc51cf..e68d2266b8 100644
--- a/src/utilities/visibility-display.scss
+++ b/src/utilities/visibility-display.scss
@@ -4,37 +4,37 @@
 @each $breakpoint, $variant in $responsive-variants {
   @include breakpoint($breakpoint) {
     @each $display in $display-values {
-      .d#{$variant}-#{$display} { display: $display !important; }
+      .d#{$variant}-#{$display} { display: $display; }
     }
   }
 }
 
-.v-hidden { visibility: hidden !important; }
-.v-visible { visibility: visible !important; }
+.v-hidden { visibility: hidden; }
+.v-visible { visibility: visible; }
 
 // Hide utilities for each breakpoint
 // Each hide utility only applies to one breakpoint range.
 @media (max-width: $width-sm - 0.02px) {
   .hide-sm {
-    display: none !important;
+    display: none;
   }
 }
 
 @media (min-width: $width-sm) and (max-width: $width-md - 0.02px) {
   .hide-md {
-    display: none !important;
+    display: none;
   }
 }
 
 @media (min-width: $width-md) and (max-width: $width-lg - 0.02px) {
   .hide-lg {
-    display: none !important;
+    display: none;
   }
 }
 
 @media (min-width: $width-lg) {
   .hide-xl {
-    display: none !important;
+    display: none;
   }
 }
 
@@ -44,33 +44,33 @@
 .show-whenRegular,
 .show-whenWide,
 .show-whenRegular.hide-whenWide {
-  display: none !important;
+  display: none;
 }
 
 .hide-whenNarrow,
 .hide-whenRegular,
 .hide-whenWide {
-  display: block !important;
+  display: block;
 }
 
 @media (max-width: $width-md - 0.02px) {
   .show-whenNarrow {
-    display: block !important;
+    display: block;
   }
 
   .hide-whenNarrow {
-    display: none !important;
+    display: none;
   }
 }
 
 @media (min-width: $width-md) {
   .show-whenRegular,
   .show-whenRegular.hide-whenWide {
-    display: block !important;
+    display: block;
   }
 
   .hide-whenRegular {
-    display: none !important;
+    display: none;
   }
 }
 
@@ -78,17 +78,17 @@
 // the Primer primitives viewport ranges proposal
 @media (min-width: $width-xl) {
   .show-whenWide {
-    display: block !important;
+    display: block;
   }
 
   .hide-whenWide,
   .show-whenRegular.hide-whenWide {
-    display: none !important;
+    display: none;
   }
 }
 
 /* Set the table-layout to fixed */
-.table-fixed { table-layout: fixed !important; }
+.table-fixed { table-layout: fixed; }
 
 // Only display content to screen readers
 //
@@ -107,15 +107,15 @@
 
 // Only display content on focus
 .show-on-focus {
-  position: absolute !important;
+  position: absolute;
 
   &:not(:focus) {
-    width: 1px !important;
-    height: 1px !important;
-    padding: 0 !important;
-    overflow: hidden !important;
-    clip: rect(1px, 1px, 1px, 1px) !important; /* stylelint-disable-line property-no-deprecated */
-    border: 0 !important;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    overflow: hidden;
+    clip: rect(1px, 1px, 1px, 1px); /* stylelint-disable-line property-no-deprecated */
+    border: 0;
   }
 
   &:focus {

From d1e81678b16a847ebdfb50f77a211e677b88106b Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Tue, 18 Aug 2026 23:26:19 +0000
Subject: [PATCH 3/9] Add utilities important regression test

Co-authored-by: jonrohan <54012+jonrohan@users.noreply.github.com>
---
 __tests__/css.test.js | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/__tests__/css.test.js b/__tests__/css.test.js
index 6673e1f27b..9cfb42a39b 100644
--- a/__tests__/css.test.js
+++ b/__tests__/css.test.js
@@ -3,8 +3,9 @@ import {
   getPackageStats,
   getSelectorDiff,
   getVariableDiff,
-  currentVersionDeprecations
+  currentVersionDeprecations,
 } from './utils/css'
+import fs from 'fs'
 import semver from 'semver'
 import {createRequire} from 'module'
 
@@ -36,8 +37,8 @@ describe('utilities', () => {
 describe('deprecations', () => {
   it('expects deprecations and their replacement to not be equal.', () => {
     const deprecations = currentVersionDeprecations()
-    Object.keys(deprecations["selectors"]).forEach(deprecation => {
-      const replacement = deprecations["selectors"][deprecation]
+    Object.keys(deprecations['selectors']).forEach(deprecation => {
+      const replacement = deprecations['selectors'][deprecation]
       expect(deprecation).not.toEqual(replacement)
     })
   })

From 043bf4252a9a363bfb2c0e72f8356bd77b6c41dc Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Tue, 18 Aug 2026 23:27:15 +0000
Subject: [PATCH 4/9] Clarify utilities import-order comment

Co-authored-by: jonrohan <54012+jonrohan@users.noreply.github.com>
---
 src/utilities/index.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/utilities/index.scss b/src/utilities/index.scss
index 9d286c8ad4..e8dc812a9b 100644
--- a/src/utilities/index.scss
+++ b/src/utilities/index.scss
@@ -10,5 +10,5 @@
 @import './margin.scss';
 @import './padding.scss';
 @import './typography.scss';
-// Visibility and display should always come last in the imports so that they can override other utilities
+// Visibility and display should always come last in the imports so equal-specificity declarations take precedence
 @import './visibility-display.scss';

From 2a377695b58693dbb3519ae2ff6e543fee983d4f Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Tue, 18 Aug 2026 23:28:06 +0000
Subject: [PATCH 5/9] Improve utilities important test failure message

Co-authored-by: jonrohan <54012+jonrohan@users.noreply.github.com>
---
 __tests__/css.test.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/__tests__/css.test.js b/__tests__/css.test.js
index 9cfb42a39b..f57b0e49e0 100644
--- a/__tests__/css.test.js
+++ b/__tests__/css.test.js
@@ -29,7 +29,9 @@ describe('utilities', () => {
     const files = getFiles('./src/utilities')
 
     for (const file of files) {
-      expect(fs.readFileSync(file, 'utf8')).not.toContain('!important')
+      if (fs.readFileSync(file, 'utf8').includes('!important')) {
+        throw new Error(`${file} contains !important`)
+      }
     }
   })
 })

From c8d625790dc73ee07fc734577d6f1fdf31f4dced Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Tue, 18 Aug 2026 23:37:08 +0000
Subject: [PATCH 6/9] Restore important declarations for show-on-focus

Co-authored-by: jonrohan <54012+jonrohan@users.noreply.github.com>
---
 __tests__/css.test.js                 | 64 +++++++++++++++++++++++++--
 src/utilities/visibility-display.scss | 14 +++---
 2 files changed, 67 insertions(+), 11 deletions(-)

diff --git a/__tests__/css.test.js b/__tests__/css.test.js
index f57b0e49e0..403b47b51b 100644
--- a/__tests__/css.test.js
+++ b/__tests__/css.test.js
@@ -25,12 +25,31 @@ describe('css', () => {
 })
 
 describe('utilities', () => {
-  it('contains no !important annotations', () => {
-    const files = getFiles('./src/utilities')
+  it('keeps show-on-focus declarations important', () => {
+    const content = fs.readFileSync('./src/utilities/visibility-display.scss', 'utf8')
+    const showOnFocus = getShowOnFocus(content)
+
+    for (const declaration of [
+      'position: absolute !important;',
+      'width: 1px !important;',
+      'height: 1px !important;',
+      'padding: 0 !important;',
+      'overflow: hidden !important;',
+      'clip: rect(1px, 1px, 1px, 1px) !important;',
+      'border: 0 !important;',
+    ]) {
+      expect(showOnFocus).toContain(declaration)
+    }
+  })
+
+  it('contains !important annotations only in show-on-focus', () => {
+    const files = getFiles('./src/utilities').filter(file => file.endsWith('.scss'))
 
     for (const file of files) {
-      if (fs.readFileSync(file, 'utf8').includes('!important')) {
-        throw new Error(`${file} contains !important`)
+      const content = stripShowOnFocus(fs.readFileSync(file, 'utf8'))
+
+      if (content.includes('!important')) {
+        throw new Error(`${file} contains !important outside show-on-focus`)
       }
     }
   })
@@ -85,3 +104,40 @@ function getFiles(directory) {
     return entry.isDirectory() ? getFiles(file) : file
   })
 }
+
+function stripShowOnFocus(content) {
+  const showOnFocus = getShowOnFocus(content)
+
+  if (showOnFocus === null) {
+    return content
+  }
+
+  const start = content.indexOf('.show-on-focus {')
+
+  return `${content.slice(0, start)}${content.slice(start + showOnFocus.length)}`
+}
+
+function getShowOnFocus(content) {
+  const start = content.indexOf('.show-on-focus {')
+
+  if (start === -1) {
+    return null
+  }
+
+  const blockStart = content.indexOf('{', start)
+  let depth = 0
+
+  for (let index = blockStart; index < content.length; index++) {
+    if (content[index] === '{') {
+      depth++
+    } else if (content[index] === '}') {
+      depth--
+    }
+
+    if (depth === 0) {
+      return content.slice(start, index + 1)
+    }
+  }
+
+  return null
+}
diff --git a/src/utilities/visibility-display.scss b/src/utilities/visibility-display.scss
index e68d2266b8..efbf08fcde 100644
--- a/src/utilities/visibility-display.scss
+++ b/src/utilities/visibility-display.scss
@@ -107,15 +107,15 @@
 
 // Only display content on focus
 .show-on-focus {
-  position: absolute;
+  position: absolute !important;
 
   &:not(:focus) {
-    width: 1px;
-    height: 1px;
-    padding: 0;
-    overflow: hidden;
-    clip: rect(1px, 1px, 1px, 1px); /* stylelint-disable-line property-no-deprecated */
-    border: 0;
+    width: 1px !important;
+    height: 1px !important;
+    padding: 0 !important;
+    overflow: hidden !important;
+    clip: rect(1px, 1px, 1px, 1px) !important; /* stylelint-disable-line property-no-deprecated */
+    border: 0 !important;
   }
 
   &:focus {

From d5302d47f098a515937924184e352596c8a38b2d Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Tue, 18 Aug 2026 23:37:55 +0000
Subject: [PATCH 7/9] Refine show-on-focus test helper

Co-authored-by: jonrohan <54012+jonrohan@users.noreply.github.com>
---
 __tests__/css.test.js | 17 +++++++++++------
 1 file changed, 11 insertions(+), 6 deletions(-)

diff --git a/__tests__/css.test.js b/__tests__/css.test.js
index 403b47b51b..363e3299bb 100644
--- a/__tests__/css.test.js
+++ b/__tests__/css.test.js
@@ -10,6 +10,7 @@ import semver from 'semver'
 import {createRequire} from 'module'
 
 let selectorsDiff, variablesDiff, version
+const showOnFocusSelector = '.show-on-focus {'
 
 beforeAll(async () => {
   selectorsDiff = getSelectorDiff()
@@ -106,19 +107,23 @@ function getFiles(directory) {
 }
 
 function stripShowOnFocus(content) {
-  const showOnFocus = getShowOnFocus(content)
+  const showOnFocus = getShowOnFocusRange(content)
 
   if (showOnFocus === null) {
     return content
   }
 
-  const start = content.indexOf('.show-on-focus {')
-
-  return `${content.slice(0, start)}${content.slice(start + showOnFocus.length)}`
+  return `${content.slice(0, showOnFocus.start)}${content.slice(showOnFocus.end)}`
 }
 
 function getShowOnFocus(content) {
-  const start = content.indexOf('.show-on-focus {')
+  const range = getShowOnFocusRange(content)
+
+  return range === null ? null : content.slice(range.start, range.end)
+}
+
+function getShowOnFocusRange(content) {
+  const start = content.indexOf(showOnFocusSelector)
 
   if (start === -1) {
     return null
@@ -135,7 +140,7 @@ function getShowOnFocus(content) {
     }
 
     if (depth === 0) {
-      return content.slice(start, index + 1)
+      return {start, end: index + 1}
     }
   }
 

From 6b9268457e9b523b11f2ea187923a8d7329770d4 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Tue, 18 Aug 2026 23:38:51 +0000
Subject: [PATCH 8/9] Clarify missing show-on-focus assertion

Co-authored-by: jonrohan <54012+jonrohan@users.noreply.github.com>
---
 __tests__/css.test.js | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/__tests__/css.test.js b/__tests__/css.test.js
index 363e3299bb..0d21d84171 100644
--- a/__tests__/css.test.js
+++ b/__tests__/css.test.js
@@ -30,6 +30,10 @@ describe('utilities', () => {
     const content = fs.readFileSync('./src/utilities/visibility-display.scss', 'utf8')
     const showOnFocus = getShowOnFocus(content)
 
+    if (showOnFocus === null) {
+      throw new Error('Could not find .show-on-focus block')
+    }
+
     for (const declaration of [
       'position: absolute !important;',
       'width: 1px !important;',

From 3bce22052661be7649d98db6c9a4d655b09064a9 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Tue, 18 Aug 2026 23:40:10 +0000
Subject: [PATCH 9/9] Guard show-on-focus test helper

Co-authored-by: jonrohan <54012+jonrohan@users.noreply.github.com>
---
 __tests__/css.test.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/__tests__/css.test.js b/__tests__/css.test.js
index 0d21d84171..52e0442c8a 100644
--- a/__tests__/css.test.js
+++ b/__tests__/css.test.js
@@ -148,5 +148,5 @@ function getShowOnFocusRange(content) {
     }
   }
 
-  return null
+  throw new Error('Could not find closing brace for .show-on-focus block')
 }