Upgrade @microbit/ui to 0.1.0-alpha.6; adopt LinkButton

FirmwareDialog's hand-rolled anchor+button() combo becomes the new
LinkButton; the OSS preset's languageText/languageTextHover overrides
go (the base default is now brand.500/600 - this app's exact values).

Author: microbit-matt-hillsdon

package-lock.json

@@ -20,7 +20,7 @@
     "@codemirror/state": "^6.4.1",
     "@codemirror/view": "^6.26.3",
     "@microbit/microbit-connection": "^1.0.0",
-    "@microbit/ui": "0.1.0-alpha.5",
+    "@microbit/ui": "0.1.0-alpha.6",
     "@microbit/microbit-fs": "^0.10.0",
     "@sanity/block-content-to-react": "^3.0.0",
     "@sanity/image-url": "^1.0.1",

package.json

@@ -99,11 +99,9 @@ export const appPreset = definePreset({
           sidebarTablistBg: { value: "black" },
           sidebarTabSelectedText: { value: "black" },
           sidebarTabSelectedBg: { value: "{colors.gray.50}" },
-          // Button `language` variant text. The base preset defaults these to
-          // the grey brand2 ramp; python-editor uses the primary brand ramp, so
-          // the brand divergence flows through the brand ramp values.
-          languageText: { value: "{colors.brand.500}" },
-          languageTextHover: { value: "{colors.brand.600}" },
+          // `languageText`/`languageTextHover`: the base preset defaults are
+          // brand.500/600 (since 0.1.0-alpha.6) — exactly this app's values,
+          // so no override; divergence flows through the brand ramp.
         },
       },
       slotRecipes: {

src/deployment/default/panda-preset.ts

@@ -3,13 +3,11 @@
  *
  * SPDX-License-Identifier: MIT
  */
-import { Button, Icon, Image, Link, Text } from "@microbit/ui";
+import { Button, Icon, Image, Link, LinkButton, Text } from "@microbit/ui";
 import { ReactNode, useCallback, useState } from "react";
 import { RiExternalLinkLine } from "react-icons/ri";
 import { FormattedMessage } from "react-intl";
-import { css, cx } from "styled-system/css";
 import { HStack, VStack } from "styled-system/jsx";
-import { button } from "styled-system/recipes";
 import { GenericDialog } from "../../common/GenericDialog";
 import firmwareUpgrade from "./firmware-upgrade.svg";
 import { FinalFocusRef } from "../../project/project-actions";
@@ -122,25 +120,17 @@ const FirmwareDialogFooter = ({
       <Button onPress={onTryAgain} size="lg" css={{ minWidth: buttonWidth }}>
         <FormattedMessage id="try-again-action" />
       </Button>
-      {/* An anchor styled as a primary button (Chakra's Button as="a"). No
-          @microbit/ui link-button primitive yet — flagged for review. */}
-      <a
-        className={cx(
-          button({ variant: "primary", size: "lg" }),
-          css({
-            minWidth: buttonWidth,
-            gap: "2",
-            textDecoration: "none",
-            _hover: { textDecoration: "none" },
-          })
-        )}
+      <LinkButton
+        variant="primary"
+        size="lg"
+        css={{ minWidth: buttonWidth }}
         target="_blank"
         rel="noreferrer"
         href="https://microbit.org/get-started/user-guide/firmware/"
+        rightIcon={<Icon as={RiExternalLinkLine} />}
       >
         <FormattedMessage id="update-firmware-action" />
-        <Icon as={RiExternalLinkLine} />
-      </a>
+      </LinkButton>
     </HStack>
   );
 };