fix: change box-sizing to have less specificity (#1151)

Author: reesscot

Diff for: .changeset/gorgeous-queens-kick.md

@@ -0,0 +1,5 @@
+---
+"@aws-amplify/ui": patch
+---
+
+fix: change box-sizing to have less specificity

Diff for: docs/src/styles/docs/base.scss

@@ -38,8 +38,6 @@ html {
 
 // Remove this when this gets fixed in the UI package
 * {
-  box-sizing: border-box;
-
   /* Selection */
   &::-moz-selection {
     background: var(--amplify-colors-overlay-10);
@@ -111,7 +109,9 @@ code {
   background-color: var(--amplify-colors-background-secondary);
   font-size: 0.875em;
   border-radius: 0.3em;
-  font-family: "Source Code Pro", "Fira Code", "Fira Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  font-family: 'Source Code Pro', 'Fira Code', 'Fira Mono', ui-monospace,
+    SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',
+    monospace;
   direction: ltr;
   text-align: left;
   white-space: pre;

Diff for: packages/ui/src/theme/css/styles.scss

@@ -13,14 +13,15 @@
   }
 }
 
-[class*='amplify'] {
-  all: unset; /* protect against external styles */
+// Note: This rule can be easily overwritten when
+// needed due to very low specificity of 0 0 0
+* {
+  box-sizing: border-box;
 }
 
-// Must be defined AFTER `[class*='amplify']
-// or rules will be unset to initial/default
-[data-amplify-theme] * {
-  box-sizing: border-box;
+[class*='amplify'] {
+  all: unset; /* protect against external styles */
+  box-sizing: border-box; /* set box-sizing after unset above */
 }
 
 .sr-only {