CustomGradientPicker: Show the control point's focus ring with the design system's outline

[R1shabh-Gupta]

What?

Part of #80138

Removes a transparent outline on the gradient control point that was canceling the design system focus ring, and replaces it with the outset-ring__focus() mixin.

Why?

The control point button's &:focus, &.is-active rule set outline: … solid transparent. Because that rule is nested under .gradient-bar, its compiled selector outranks Button's own focus rule by CSS specificity, so it was overriding Button's real design-system ring with a transparent one whenever a swatch was focused. In a normal browser this meant no visible ring at all beyond the swatch's own white halo.

How?

Moved the transparent outline out of the shared :focus, .is-active block and into its own :focus-only block using @include outset-ring__focus(). The box-shadow halo stays shared between both states.

Testing Instructions

1. Run npm run storybook:dev and open Components > CustomGradientPicker.
2. Click once inside the canvas, then press Tab until a control point swatch is focused.
3. Confirm a solid ring now shows just outside the swatch's white halo, with a small gap. Before this change there was no ring here, only the halo.
4. Click the swatch to open its color picker, then Tab into the popover (for example onto the hex input). The swatch should keep its enlarged white halo even though it's no longer focused, and should not show the outline ring.
5. Turn on a forced-colors theme (DevTools > Rendering > "Emulate CSS media feature forced-colors", or macOS Increase Contrast) and confirm the ring is still visible. It should look the same as on trunk.

Testing Instructions for Keyboard

Tab to a control point and confirm the focus ring is visible. Arrow keys still move the point along the gradient bar, and the swatch remains marked as active by its halo after focus leaves it for the popover.

Screenshots or screencast

	Before	After
Normal
Popup - Normal
High Contrast
Popup - High Contrast

Use of AI Tools

This PR was developed with the assistance of Claude Code.

[github-actions]

🤖 PR meta 🤖

🏷️ Labels

This pull request needs exactly one label indicating its type, and has 0.

• Required: any label starting with [Type].
• Found: none.

Read more about Type labels in Gutenberg. If you cannot add labels yourself, a reviewer can do it for you.