Component customization with @frontile/theme

[jamescarney3]

I'm looking for a way to customize Frontile 0.17.0-alpha.x component styles from a tailwind config file.

I think this is possible based on this issue (big thank you to @MichalBryxi for pointing me in this direction) and an old tailwind config file in the project I'm working on with @cloke, but I can't seem to produce the behavior I'm looking for. For example, I'd like to be able to make the border color on the FormInput (from @frontile/forms-legacy) something other than its default style.

I can see that the component imports the useStyles function from Frontile Theme to generate a Tailwind Variants object and then destructures classes from its slots property. I suspect that the registerCustomStyles function that the Frontile Theme package exports is what I should use in order to merge a custom styles config into the built-in component styles, but I can't tell where I need to call the function. I've tried calling it in the tailwind config file, but to no avail so far.

What's the proper usage of registerCustomStyles, and is it the right tool to change the default styling on a Frontile FormInput? I would be happy to write up some examples and/or docs for this if it would be helpful for other users.

[MichalBryxi]

Ok, I think I'd have some time to help with this and keen to make the "how-to customise" part of the documentation. Since (I guess) 0.17.x series could have changed quite a bit, I would appreciate a sample code or pointer to the code where I should look for the "correct" way to do things. To make sure I'm not doing something silly.

I guess the correct place to put the documentation for individual component's customisation would be to the component markdown file at the very end?

cc: @josemarluedke

[josemarluedke]

As you can see, this area does need documentation. I haven't had the chance to add docs for it yet, but here is a quick example of customizing a few component styles.

app/theme.ts

import { useStyles, registerCustomStyles, tv } from '@frontile/theme';

const components = useStyles();

registerCustomStyles({
  modal: tv({
    extend: components.modal,
    slots: {
      header: 'font-header text-2xl pt-12 pl-6 pb-6',
      body: 'pt-4 pb-4 pl-6 pr-12',
      footer: 'bg-transparent py-4 px-12 pb-8'
    },
    variants: {
      size: {
        lg: 'max-w-[48rem]',
        xl: 'max-w-[64rem]'
      }
    }
  }) as never,
  drawer: tv({
    extend: components.drawer,
    slots: {
      header: 'text-2xl px-4 py-6 bg-black text-white rounded-none',
      footer: 'px-4 py-6'
    },
    variants: {
      size: {
        lg: 'max-w-[48rem]',
        xl: 'max-w-[64rem]'
      }
    }
  }) as never,
  button: tv({
    ...components.button,
    base: ['font-header text-xl'],
    variants: {
      ...components.button.variants,
      appearance: {
        ...components.button.variants.appearance,
        default: 'shadow-depth-2'
      }
    },
    compoundVariants: [
      ...components.button.compoundVariants,
      {
        appearance: 'default',
        intent: 'default',
        class: 'bg-black text-white hover:bg-black/80'
      }
    ]
    //
  })
});

Then import that file in app/app.js:

import Application from '@ember/application';
import Resolver from 'ember-resolver';
import loadInitializers from 'ember-load-initializers';
import config from 'my-app/config/environment';
import './theme';

export default class App extends Application {
  modulePrefix = config.modulePrefix;
  podModulePrefix = config.podModulePrefix;
  Resolver = Resolver;
}

loadInitializers(App, config.modulePrefix);