Button font-family missing from dist/htwoo.min.css

gabbsmo commented 6 months ago

Describe the bug I noticed that buttons was using Arial in my project from the user agent style. Could not reproduce in Pattern Lab but found that the style fixing it was in style.scss.

To Reproduce Steps to reproduce the behavior:

Use htwoo.min.css, rather than compiling the SASS yourself.

Expected behavior Buttons should have same font-family as in Pattern Lab.

Desktop (please complete the following information):

OS: Windows 10
Browser: Edge
Version: 125

Additional context I have added the following after htwoo.min.css in my project:

body {
    font-family: var(--mediumFontFamily);
    background-color: var(--bodyBackground);
    color: var(--bodyText);
    margin: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

button[class^='hoo'],
input[class^='hoo'],
textarea[class^='hoo'] {
    font-family: inherit;
}

Thought that body styles was omitted to allow for customization, but since I noticed that buttons were not working right in my case I am not certain anymore.

StfBauer commented 5 months ago

That is the correct way to do it. Since I don't like to overwrite all the style in things like SharePoint I left out that body piece.

The second part I put in the wrong place 🤦‍♂️

gabbsmo commented 5 months ago

Yes that makes sense. Please let me know when your fix is on npm and I should be able to remove my workaround for the buttons.

StfBauer commented 5 months ago

Commited a couple of changes the new version goes out today I think.

StfBauer commented 5 months ago

🛳️ Shipped in 2.5.0 - https://lab.n8d.studio/htwoo/changelog/htwoo-core-cl/

n8design / htwoo

Button font-family missing from dist/htwoo.min.css #140