Add outline: none to css reset in demo app

Author: rafgraph

demo/src/App.tsx

@@ -30,7 +30,7 @@ const HeaderIconContainer = styled('span', {
   width: '78px',
   display: 'inline-flex',
   justifyContent: 'space-between',
-  gap: '10px',
+  gap: '12px',
 });
 
 export const App = () => {

demo/src/demos/ShowOn.tsx

@@ -35,9 +35,6 @@ const InteractiveInfo = styled(Interactive.Span, {
   height: 30,
   display: 'inline-block',
   verticalAlign: 'top',
-  // outline: 'none' required because this is a span (with tabIndex)
-  // which doesn't have "unset: all" in css reset applied
-  outline: 'none',
   borderRadius: '50%',
   '&.hover': {
     color: '$green',

demo/src/demos/StateLog.tsx

@@ -53,9 +53,6 @@ const StateLogContainer = styled('div', {
   border: '1px solid $highContrast',
   overflowY: 'scroll',
   fontFamily: '$mono',
-  // outline: 'none' required because this is a div (with tabIndex)
-  // which doesn't have "unset: all" in css reset applied
-  outline: 'none',
   '&.focusFromKey': {
     outline: '3px solid $colors$purple',
     outlineOffset: '1px',

demo/src/other/PageJumpEdgeCase.tsx

@@ -47,7 +47,6 @@ const InteractiveLink = styled(Interactive.A, {
 const InteractiveDiv = styled(Interactive.Div, {
   padding: '5px',
   border: '1px solid',
-  outline: 'none',
   ...interactiveStyles,
 });
 

demo/src/stitches.config.ts

@@ -11,7 +11,7 @@ export const stitchesConfig = createCss({
       red: 'hsl(0,100%,50%)',
       orange: 'hsl(30,100%,50%)',
       yellow: 'hsl(51,100%,40%)',
-      green: 'hsl(120,100%,30%)',
+      green: 'hsl(120,100%,33%)', // same as rgb(0,168,0)
       outlineGreen: 'hsl(120,40%,55%)',
       blue: 'hsl(240,100%,50%)',
       outlineBlue: 'hsl(240,100%,70%)',
@@ -71,6 +71,7 @@ export const globalCss = createGlobalCss({
     wordBreak: 'inherit',
     color: 'inherit',
     background: 'transparent',
+    outline: 'none',
     WebkitTapHighlightColor: 'transparent',
   },
   // set base styles for the app