如何用CSS和HTML实现可配置参数的双颜色虚线？

我希望仅用最少的CSS和HTML代码实现下图所示的双颜色虚线效果：

具体要求：

• 两种颜色的虚线占比可通过CSS变量调整：设置灰色虚线的占比，剩余部分（100%—灰色占比）为浅灰色
• 可设置虚线的宽高以及间隙宽度

我尝试过以下方法但均未成功：

• 使用repeat()、Grid布局
• 结合background-image、background-size、background-position、background-repeat属性，搭配linear-gradient()和repeating-linear-gradient()函数，调整各种值组合后仍无法实现
• 参考过两篇相关技术文章，但无法修改适配我的需求

我期望实现的效果如下：

恳请各位帮忙解决这个技术难题！

内容的提问来源于stack exchange，提问作者yahya