Update demo app

Author: rafgraph

demo/src/ui/Link.tsx

@@ -12,52 +12,36 @@ const StyledLink = styled(Interactive.A, {
   textDecorationColor: '$green',
   textDecorationThickness: 'from-font',
 
+  // padding used to provide offset for boxShadow focus styles,
+  // margin undoes padding for page layout so boxShadow works like outline
+  padding: '2px 3px',
+  margin: '-2px -3px',
+  // this is the main reason to use boxShadow instead of outline for focus styles,
+  // with outline can only have square corners,
+  // with boxShadow can use borderRadius to soften the corners
+  borderRadius: '3px',
+
   '&.hover': {
     textDecorationColor: '$green',
     textDecorationStyle: 'solid',
   },
   '&.mouseActive': {
+    color: '$green',
     textDecorationColor: '$green',
     textDecorationStyle: 'solid',
-    color: '$green',
   },
   '&.touchActive': {
+    color: '$blue',
     textDecorationColor: '$blue',
     textDecorationStyle: 'solid',
-    color: '$blue',
   },
   '&.keyActive': {
+    color: '$purple',
     textDecorationColor: '$purple',
     textDecorationStyle: 'solid',
-    color: '$purple',
-  },
-  variants: {
-    focus: {
-      outline: {
-        '&.focusFromKey': {
-          outline: '2px solid $colors$purple',
-          outlineOffset: '2px',
-        },
-      },
-      boxShadow: {
-        // padding used to provide offset for boxShadow
-        // margin undoes padding for page layout so boxShadow works like outline
-        padding: '2px 3px',
-        margin: '-2px -3px',
-
-        // this is the main reason to use boxShadow instead of outline
-        // with outline can only have square corners,
-        // with boxShadow can use borderRadius to soften the corners
-        borderRadius: '3px',
-
-        '&.focusFromKey': {
-          boxShadow: '0 0 0 2px $colors$purple',
-        },
-      },
-    },
   },
-  defaultVariants: {
-    focus: 'boxShadow',
+  '&.focusFromKey': {
+    boxShadow: '0 0 0 2px $colors$purple',
   },
 });