.ui-icon{display:block;width:20px;height:20px;flex:none}
[data-tone=teal]{--icon-color:#08776b;--icon-bg:#e4f5ef}
[data-tone=blue]{--icon-color:#246b9e;--icon-bg:#e8f2fa}
[data-tone=violet]{--icon-color:#6754a7;--icon-bg:#f0edfa}
[data-tone=green]{--icon-color:#287854;--icon-bg:#e9f5ec}
[data-tone=amber]{--icon-color:#986114;--icon-bg:#fff3dd}
[data-tone=orange]{--icon-color:#a65b2a;--icon-bg:#fff0e6}
[data-tone=rose]{--icon-color:#a34568;--icon-bg:#fbeaf1}
[data-tone=slate]{--icon-color:#536d7a;--icon-bg:#edf2f4}