From 2055a54f081f5a54f6540e82c4ba9ff18cdd9b19 Mon Sep 17 00:00:00 2001
From: Josefina Mancilla <josefinanoemi4@gmail.com>
Date: Fri, 11 Feb 2022 00:43:54 -0600
Subject: [PATCH 1/3] fix: v11 audit styles

---
 .../number-input/_number-input.scss           | 46 +++++++++++--------
 1 file changed, 28 insertions(+), 18 deletions(-)

diff --git a/packages/styles/scss/components/number-input/_number-input.scss b/packages/styles/scss/components/number-input/_number-input.scss
index c273d8ceb69d..8adef1ee675b 100644
--- a/packages/styles/scss/components/number-input/_number-input.scss
+++ b/packages/styles/scss/components/number-input/_number-input.scss
@@ -31,7 +31,7 @@
   }
 
   .#{$prefix}--number input[type='number'] {
-    @include type-style('body-short-01');
+    @include type-style('code-01');
     @include focus-outline('reset');
 
     display: inline-flex;
@@ -88,8 +88,7 @@
     padding-right: rem(112px);
   }
 
-  .#{$prefix}--number input[type='number']:disabled,
-  .#{$prefix}--number--readonly input[type='number'] {
+  .#{$prefix}--number input[type='number']:disabled {
     border-bottom-color: transparent;
     background-color: $field;
     color: $text-disabled;
@@ -301,10 +300,6 @@
     background-color: transparent;
   }
 
-  .#{$prefix}--number--readonly .#{$prefix}--number__control-btn {
-    display: none;
-  }
-
   .#{$prefix}--number__invalid {
     position: absolute;
     right: rem(96px);
@@ -368,10 +363,7 @@
   }
 
   // V11: Possibly deprecate
-  .#{$prefix}--number--light input[type='number']:disabled,
-  .#{$prefix}--number--light
-    .#{$prefix}--number--readonly
-    input[type='number'] {
+  .#{$prefix}--number--light input[type='number']:disabled {
     background-color: $field-02;
   }
 
@@ -381,18 +373,22 @@
     background-color: $field-02;
   }
 
-  // V11: Possibly deprecate
-  .#{$prefix}--number--light .#{$prefix}--number__control-btn:hover,
-  .#{$prefix}--number--light .#{$prefix}--number__control-btn:hover::before,
-  .#{$prefix}--number--light .#{$prefix}--number__control-btn:hover::after {
-    background-color: $layer-hover-02;
-  }
-
   .#{$prefix}--number--light .#{$prefix}--number__control-btn:focus::before,
   .#{$prefix}--number--light .#{$prefix}--number__control-btn:focus::after {
     background-color: transparent;
   }
 
+  // V11: Possibly deprecate
+  // We include `:not(:focus)` here because the pseudo elements will overlap the
+  // focus outline on the button if we set their background-color on focus
+  .#{$prefix}--number--light .#{$prefix}--number__control-btn:hover,
+  .#{$prefix}--number--light
+    .#{$prefix}--number__control-btn:not(:focus):hover::before,
+  .#{$prefix}--number--light
+    .#{$prefix}--number__control-btn:not(:focus):hover::after {
+    background-color: $layer-hover-02;
+  }
+
   // Size Variant styles
   // TODO V11: Remove xl selector
   .#{$prefix}--number--xl input[type='number'],
@@ -452,6 +448,20 @@
     right: rem(16px);
   }
 
+  // Readonly
+  .#{$prefix}--number--readonly input[type='number'] {
+    background: transparent;
+  }
+
+  .#{$prefix}--number--readonly .#{$prefix}--number__controls {
+    display: none;
+  }
+
+  .#{$prefix}--number__readonly-icon {
+    position: absolute;
+    right: rem(16px);
+  }
+
   // Skeleton State
   .#{$prefix}--number.#{$prefix}--skeleton {
     @include skeleton;

From 01f89ea88addc833616c80d3e87a45b55d37a505 Mon Sep 17 00:00:00 2001
From: Josefina Mancilla <josefinanoemi4@gmail.com>
Date: Fri, 11 Feb 2022 00:44:09 -0600
Subject: [PATCH 2/3] fix: v10 type style

---
 .../components/src/components/number-input/_number-input.scss   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/components/src/components/number-input/_number-input.scss b/packages/components/src/components/number-input/_number-input.scss
index 4c5032ecee7a..aea9652f877a 100644
--- a/packages/components/src/components/number-input/_number-input.scss
+++ b/packages/components/src/components/number-input/_number-input.scss
@@ -26,7 +26,7 @@
   }
 
   .#{$prefix}--number input[type='number'] {
-    @include type-style('body-short-01');
+    @include type-style('code-01');
     @include focus-outline('reset');
 
     display: inline-flex;

From a44f970699d53fb804d8d7b29e946381bf907743 Mon Sep 17 00:00:00 2001
From: Josefina Mancilla <josefinanoemi4@gmail.com>
Date: Fri, 11 Feb 2022 01:13:32 -0600
Subject: [PATCH 3/3] fix: firefox z-index

---
 packages/styles/scss/components/number-input/_number-input.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/styles/scss/components/number-input/_number-input.scss b/packages/styles/scss/components/number-input/_number-input.scss
index 8adef1ee675b..1987a349cde8 100644
--- a/packages/styles/scss/components/number-input/_number-input.scss
+++ b/packages/styles/scss/components/number-input/_number-input.scss
@@ -16,6 +16,7 @@
 @use '../../utilities/high-contrast-mode' as *;
 @use '../../utilities/focus-outline' as *;
 @use '../../utilities/convert' as *;
+@use '../../utilities/z-index' as *;
 
 /// Number input styles
 /// @access public