Button tones (#1264)

* Adopt the family grey button and the danger tone

Phase 2 of the focus-and-colour plan. The `zoom` variant goes: it and
data-microbit-org's `solid` were the same grey filled button, now
@microbit/ui's `neutral`, and it keeps this app's hover/press stops. Four
call sites, the zoom and undo/redo pills.

The destructive pair becomes the `danger` tone of the shared `outline`
and `solid` shapes — the reset button and the confirm dialog. Colour is
identical: the deleted `warning`/`warningSolid` variants read the same
danger tokens the tone now aliases.

`sidebar` stays. It is the only white-on-dark icon button in the family
with a white-pill hover, so there is no second consumer to share it with.

* Upgrade to @microbit/ui@0.1.0-alpha.29

Author: microbit-matt-hillsdon

package-lock.json

@@ -21,7 +21,7 @@
     "@codemirror/view": "^6.26.3",
     "@microbit/microbit-connection": "^1.0.0",
     "@microbit/microbit-fs": "^0.10.0",
-    "@microbit/ui": "0.1.0-alpha.28",
+    "@microbit/ui": "0.1.0-alpha.29",
     "@microbit/ui-patterns": "0.1.0-alpha.3",
     "@sanity/block-content-to-react": "^3.0.0",
     "@sanity/image-url": "^1.0.1",

package.json

@@ -41,7 +41,7 @@ export const ConfirmDialog = ({
         <Button autoFocus onPress={() => callback(false)}>
           <FormattedMessage id="cancel-action" />
         </Button>
-        <Button variant="warningSolid" onPress={() => callback(true)}>
+        <Button variant="solid" tone="danger" onPress={() => callback(true)}>
           {actionLabel}
         </Button>
       </ModalFooter>

src/common/ConfirmDialog.tsx

@@ -96,10 +96,8 @@ export const appPreset = definePreset({
         text: {
           defaultVariants: { size: "md" },
         },
-        // python-editor's default button variant is `outline` (the family
-        // base recipe defaults to `secondary`): brand text over a
-        // transparent, brand-bordered button. Non-brand outline cases use
-        // `warning`.
+        // The app's own button vocabulary; everything else is the base
+        // recipe's, with destructive actions on `tone="danger"`.
         button: {
           variants: {
             variant: {
@@ -111,19 +109,6 @@ export const appPreset = definePreset({
                 _hover: { bg: "white", color: "gray.700" },
                 _active: { bg: "white", color: "gray.800" },
               },
-              // The editor zoom / undo-redo pill pairs: gray fill with
-              // darker hover/active.
-              zoom: {
-                color: "gray.800",
-                bg: "gray.100",
-                // Re-pointed for the neutral ink grades (@microbit/ui
-                // docs/gray-ramp.md): the branded build's hover/press were
-                // #c9c9c9/#b0b0b0 — hover's nearest stop is 300, and press
-                // takes the press-weight 350 (#b4b4b4, ≈ the old value; the
-                // old 400/500 names sit much darker post-re-grade).
-                _hover: { bg: "gray.300" },
-                _active: { bg: "gray.350" },
-              },
             },
           },
         },

src/deployment/default/panda-preset.ts

@@ -32,7 +32,7 @@ const UndoRedoControls = ({ css: cssProp }: UndoRedoControlsProps) => {
     >
       <IconButton
         isRound
-        variant="zoom"
+        variant="neutral"
         aria-label={intl.formatMessage({ id: "undo" })}
         onPress={actions?.undo}
         isDisabled={editorInfo.undo ? false : true}
@@ -41,7 +41,7 @@ const UndoRedoControls = ({ css: cssProp }: UndoRedoControlsProps) => {
       </IconButton>
       <IconButton
         isRound
-        variant="zoom"
+        variant="neutral"
         css={{ borderLeft: "1px solid", borderLeftColor: "gray.10" }}
         aria-label={intl.formatMessage({ id: "redo" })}
         onPress={actions?.redo}

src/editor/UndoRedoControls.tsx

@@ -47,7 +47,7 @@ const ZoomControls = ({ size, css: cssProp }: ZoomControlsProps) => {
       <IconButton
         size={size}
         isRound
-        variant="zoom"
+        variant="neutral"
         aria-label={intl.formatMessage({ id: "zoom-out-action" })}
         onPress={handleZoomOut}
       >
@@ -57,7 +57,7 @@ const ZoomControls = ({ size, css: cssProp }: ZoomControlsProps) => {
         css={{ borderLeft: "1px solid", borderLeftColor: "gray.10" }}
         size={size}
         isRound
-        variant="zoom"
+        variant="neutral"
         aria-label={intl.formatMessage({ id: "zoom-in-action" })}
         onPress={handleZoomIn}
       >

src/editor/ZoomControls.tsx

@@ -20,7 +20,12 @@ const ProjectAreaNav = ({ css: cssProp }: ProjectAreaNavProps) => {
         <NewButton mode="button" />
         <OpenButton mode="button" />
         <Box>
-          <ResetButton mode="button" variant="warning" css={{ mt: "5" }} />
+          <ResetButton
+            mode="button"
+            variant="outline"
+            tone="danger"
+            css={{ mt: "5" }}
+          />
         </Box>
       </VStack>
     </Flex>