You can try design component instead

Place it on top of your focusable element. There two rectangles inside to control radii, offset size and outline width. And it’s easy to bound colors to the outline

I understand your point. The problem isn’t about creating an offset outline around a rectangular shape. What we really need is an efficient way to handle focus states for a large library of components. Drawing shapes around each UI component manually is possible but not a productive way to manage libraries. Just think about having to adjust the stroke thickness across the entire library of 100s of components in your design system.

What we need is a property that accepts variables and can be applied to the parent container of a component.

Nah, you create single component, aka focus ring, and incorporate it whenever you need it. Separate component does wonders. Here are some examples

Master component

Base input

Inset labels input

And many others. Like buttons, nav elements etc. Mine on advanced side of things, I use component swap to control radii with a single prop without going down layers.

Once you have them all over focusable components, it’s easy to adjust the style as it is a single component. I would nevet bother adjusting stroke width for 1000 layers, there are design components for that.

If you are curious, have a read - Making of true multi-brand design system | by Pavel Kiselev | UX Collective

I expand in great detail on the issue

This is clear. You have to maintain a specific focus shape for each component type, such as one for a button and another for a checkbox. This requires a lot of effort, and if you need to make any changes, you have to update a significant number of shapes.

Please explain how this is superior to my example, where one must manage two existing properties: 0.01% transparency and a shadow, which can be applied to a component of any shape or size?

The second question is, how is that better than having stroke offset parameters?

Please explain how this is superior to my example, where one must manage two existing properties: 0.01% transparency and a shadow, which can be applied to a component of any shape or size?

Easy. First it is some magic knowledge. I have to know about 0.01% transparent border as an offset and it is manual labor to apply it. Second I need to pick proper shadow style. Now, if by some reason you decide to change the offset value or try different style, you screwed. It is the same reason we use design components for buttons, forms etc, it give control over visuals and saves effort to maintain and evolve.

The second question is, how is that better than having stroke offset parameters?

It’s not better, I just talking real. Stroke offset may never happen, design component is timeless

Good luck mate, I am not trying to sell you anything, just sharing

By definition, managing object properties is easier than managing shapes. The stroke fill can be variable, but currently, the stroke width cannot be variable. Hopefully, this will change based on the current trend of tokenization. The shadow can be a style, so you don’t need to worry about the component’s shape or size. Although not ideal, is still easier and more manageable than maintaining individual shapes.

It’s not better, I just talking real. Stroke offset may never happen, design component is timeless.

You meant talking current, I suppose. The shapes workaround is one way of doing it. It wouldn’t be my first choice, but I’m happy it works for you.