Making custom extension ToolBarButton's match "native" UI button color

For some reason the custom ToolbarButton’s for the extension I am creating show up as a different color than the built in buttons. I’ve tried the following custom CSS, but the colors are not the same. How can I make them match?

.button-style {
    color: var(--jp-ui-font-color1) !important;

Screenshot 2024-07-11 at 01.11.31

How are you creating the custom button? Does it include an svg icon?

 const button = new ToolbarButton({
          label: 'Button',
          onClick: () => {
notebookPanel.toolbar.insertItem(1, 'button', button);