RAC: swap custom outline variant for ui library secondary (#1254)

* Use the library's `secondary` for the default button variant

The app preset's `outline` variant had no pressed state, so the Save button and
every other default-variant button gave no press feedback.

It went missing in the Chakra port. The old `outline` was a partial override of
Chakra's own `outline`, and `extendTheme` deep-merges function variants by
calling both — so it inherited `_active: { bg: <colorScheme>.100 }` from the
`ghost` variant Chakra's outline spreads. It set `_hover.bg: transparent` to
suppress ghost's hover wash but left `_active` alone, so read as a standalone
definition there was nothing to suggest a pressed state existed.

Rather than restate it, drop the fork: the difference from the library's
`secondary` is text one stop darker at rest, and hover darkening the border
instead of the text. 0.17% of pixels change and nothing moves.

The three explicit `variant="outline"` sites in the simulator action bar move
to `secondary` with it.

Needs the paired brand.50 alias in the private theme package, or the pressed
wash resolves to Chakra blue.

* Bump private preset for brand.50 stop

Author: microbit-matt-hillsdon

.github/workflows/build.yml

@@ -40,7 +40,7 @@ jobs:
       - run: npm ci
         env:
           NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-      - run: npm install --no-save @microbit-foundation/python-editor-v3-microbit@0.2.0-experiment.rai.66 @microbit-foundation/website-deploy-aws@0.6.0 @microbit-foundation/website-deploy-aws-config@0.9.0 @microbit-foundation/circleci-npm-package-versioner@1
+      - run: npm install --no-save @microbit-foundation/python-editor-v3-microbit@0.2.0-experiment.rai.67 @microbit-foundation/website-deploy-aws@0.6.0 @microbit-foundation/website-deploy-aws-config@0.9.0 @microbit-foundation/circleci-npm-package-versioner@1
         if: github.repository_owner == 'microbit-foundation'
         env:
           NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }}

src/deployment/default/panda-preset.ts

@@ -109,13 +109,6 @@ export const appPreset = definePreset({
         button: {
           variants: {
             variant: {
-              outline: {
-                borderWidth: "2px",
-                borderColor: "currentColor",
-                color: "brand.500",
-                bg: "transparent",
-                _hover: { color: "brand.600", bg: "transparent" },
-              },
               // Icon buttons on the app's dark chrome (sidebar header,
               // serial bar): white glyph, white pill on hover. The Chakra
               // variant was ghost-based with callers passing color="white";
@@ -143,7 +136,6 @@ export const appPreset = definePreset({
               },
             },
           },
-          defaultVariants: { variant: "outline" },
         },
       },
     },

src/simulator/SimulatorActionBar.tsx

@@ -92,7 +92,7 @@ const SimulatorActionBar = ({
     >
       <IconButton
         size={size}
-        variant="outline"
+        variant="secondary"
         onPress={() => handleStop("user")}
         aria-label={intl.formatMessage({ id: "simulator-stop" })}
         isDisabled={running === RunningStatus.STOPPED}
@@ -101,7 +101,7 @@ const SimulatorActionBar = ({
       </IconButton>
       <IconButton
         size={size}
-        variant="outline"
+        variant="secondary"
         onPress={device.reset}
         aria-label={intl.formatMessage({ id: "simulator-reset" })}
         isDisabled={running === RunningStatus.STOPPED}
@@ -110,7 +110,7 @@ const SimulatorActionBar = ({
       </IconButton>
       <IconButton
         size={size}
-        variant="outline"
+        variant="secondary"
         onPress={handleMuteUnmute}
         aria-label={
           isMuted