Global focus style CSS from feature flag (#2046)

langermank · jonrohan · web-flow · commit 55e2b069a4cb · 2022-04-27T11:24:23.000-07:00
* extra CSS found from cleaning up feat flag

* lint

* Create young-trainers-yell.md

* fix mixin

Co-authored-by: Jon Rohan &lt;yes@jonrohan.codes&gt;
diff --git a/.changeset/young-trainers-yell.md b/.changeset/young-trainers-yell.md
@@ -0,0 +1,5 @@
+---
+"@primer/css": major
+---
+
+Global focus style CSS from feature flag (next major)
diff --git a/src/autocomplete/autocomplete.scss b/src/autocomplete/autocomplete.scss
@@ -42,6 +42,14 @@
     // stylelint-disable-next-line
     border: none;
     box-shadow: none;
+
+    &:focus {
+      box-shadow: none;
+    }
+
+    &:focus-visible {
+      box-shadow: none;
+    }
   }
 }
 
diff --git a/src/forms/form-validation.scss b/src/forms/form-validation.scss
@@ -235,15 +235,16 @@ dl.form-group > dd, // TODO: Deprecate
   }
 
   &.focused {
-    border-radius: $border-radius;
-    box-shadow: var(--color-primer-shadow-inset), var(--color-primer-shadow-focus);
+    @include focusBoxShadowInset(2px, var(--color-accent-fg));
 
     .form-control {
+      border-color: transparent;
+      border-bottom-color: var(--color-accent-fg);
       box-shadow: none;
     }
 
     .drag-and-drop {
-      border-color: var(--color-accent-emphasis);
+      border-color: transparent;
     }
   }
 }
@@ -272,7 +273,9 @@ dl.form-group > dd, // TODO: Deprecate
     border: $border-width $border-style var(--color-border-default);
   }
 
-  .comment-form-error { margin-bottom: $spacer-2; }
+  .comment-form-error {
+    margin-bottom: $spacer-2;
+  }
 
   .write-content,
   .preview-content {
@@ -317,8 +320,10 @@ div.composer {
   min-height: 200px;
 }
 
-// stylelint-disable-next-line primer/spacing
-.composer .tabnav { margin: 0 0 10px; }
+.composer .tabnav {
+  // stylelint-disable-next-line primer/spacing
+  margin: 0 0 10px;
+}
 
 // Misc CSS
 //

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +"@primer/css": major
 +---
++
 +Global focus style CSS from feature flag (next major)
Original file line number	Diff line number	Diff line change
`@@ -42,6 +42,14 @@`
`42`	`42`	`// stylelint-disable-next-line`
`43`	`43`	`border: none;`
`44`	`44`	`box-shadow: none;`
	`45`	`+`
	`46`	`+ &:focus {`
	`47`	`+ box-shadow: none;`
	`48`	`+ }`
	`49`	`+`
	`50`	`+ &:focus-visible {`
	`51`	`+ box-shadow: none;`
	`52`	`+ }`
`45`	`53`	`}`
`46`	`54`	`}`
`47`	`55`
Original file line number	Diff line number	Diff line change
`@@ -235,15 +235,16 @@ dl.form-group > dd, // TODO: Deprecate`
`235`	`235`	`}`
`236`	`236`
`237`	`237`	`&.focused {`
`238`		`- border-radius: $border-radius;`
`239`		`- box-shadow: var(--color-primer-shadow-inset), var(--color-primer-shadow-focus);`
	`238`	`+ @include focusBoxShadowInset(2px, var(--color-accent-fg));`
`240`	`239`
`241`	`240`	`.form-control {`
	`241`	`+ border-color: transparent;`
	`242`	`+ border-bottom-color: var(--color-accent-fg);`
`242`	`243`	`box-shadow: none;`
`243`	`244`	`}`
`244`	`245`
`245`	`246`	`.drag-and-drop {`
`246`		`- border-color: var(--color-accent-emphasis);`
	`247`	`+ border-color: transparent;`
`247`	`248`	`}`
`248`	`249`	`}`
`249`	`250`	`}`
`@@ -272,7 +273,9 @@ dl.form-group > dd, // TODO: Deprecate`
`272`	`273`	`border: $border-width $border-style var(--color-border-default);`
`273`	`274`	`}`
`274`	`275`
`275`		`- .comment-form-error { margin-bottom: $spacer-2; }`
	`276`	`+ .comment-form-error {`
	`277`	`+ margin-bottom: $spacer-2;`
	`278`	`+ }`
`276`	`279`
`277`	`280`	`.write-content,`
`278`	`281`	`.preview-content {`
`@@ -317,8 +320,10 @@ div.composer {`
`317`	`320`	`min-height: 200px;`
`318`	`321`	`}`
`319`	`322`
`320`		`-// stylelint-disable-next-line primer/spacing`
`321`		`-.composer .tabnav { margin: 0 0 10px; }`
	`323`	`+.composer .tabnav {`
	`324`	`+ // stylelint-disable-next-line primer/spacing`
	`325`	`+ margin: 0 0 10px;`
	`326`	`+}`
`322`	`327`
`323`	`328`	`// Misc CSS`
`324`	`329`	`//`