Default font change steps are incorrect

erangac commented 1 year ago

Check that this is really a bug

[X] I confirm

Reproduction link

.

Bug description

Configuration is not correct to change default font. Refer document link https://konstaui.com/react/fonts

There aren't properties called ios & material. The given configuration will generate an error

Cannot read properties of undefined (reading 'material')

The currently in the document are below.

const konstaConfig = require('konsta/config');

module.exports = konstaConfig({
  theme: {
    fontFamily: {
      ios: 'my-ios-font',
      material: 'my-material-font',
    }
  }
  ...
});

Expected Behavior

No response

Actual Behavior

No response

Konsta UI version

0.11.1

Platform/Target and Browser Versions

macOs / Chrome Version 107.0.5304.110 (Official Build) (arm64)

Validations

[X] Follow our Code of Conduct
[X] Read the docs.
[X] Check that there isn't already an issue that request the same feature to avoid creating a duplicate.
[X] Make sure this is a Konsta UI issue and not a framework-specific issue

Would you like to open a PR for this bug?

[ ] I'm willing to open a PR

github-actions[bot] commented 1 year ago

Hello @erangac. Please provide a online reproduction by Stack Blitz or a minimal GitHub repository. You can fork this Stack Blitz to get start. Issues labeled by missing demo will be closed if no activities in 3 days.

jkhaui commented 1 year ago

I wouldn't say this is a bug, rather the example provided in the documentation is incorrect.

Custom font implementation should extend the existing Konsta tailwind config like this:

module.exports = konstaConfig({
  theme: {
    extend: {
      fontFamily: {
        ios: 'my-ios-font',
        material: 'my-material-font',
      }
    }
  }
  ...
});

instead of replacing it, like:

module.exports = konstaConfig({
  theme: {
    fontFamily: {
      ios: 'my-ios-font',
      material: 'my-material-font',
    }
  }
  ...
});

konstaui / konsta