Customisation examples

[MichalBryxi]

My original goal was to simply tell <Button @intent='primary' /> that it's supposed to be different color (background and text) than the default. I know that I can tell it to @appearance="custom" and add custom classes, but that seems like an overkill given that I just want different pick on the colors. I've seen PRs talking about customisation, but those don't really live in the documentation & I'm not really sure how would that translate to my case.

So I thought that section with customisation examples & list of options for each component would be the best thing to ask for the sake of other users?

[betocantu93]

I struggled with this too, TBH! specially because I was completely new to tailwind (still a newb) just wandering...

Here's an example!

const defaultTheme = require('tailwindcss/resolveConfig')(
  require('tailwindcss/defaultConfig')
).theme;

module.exports = {
  future: {
    // removeDeprecatedGapUtilities: true,
    // purgeLayersByDefault: true,
  },
  purge: ['./app/**/*.html', './app/**/*.hbs'],
  theme: {
    frontile: {
      buttons: {
        config: {
          minimal: {
            hoverBackgroundColor: defaultTheme.colors.indigo[200],
            activeBackgroundColor: defaultTheme.colors.indigo[300],
          },
          primary: {
            contrastColor: defaultTheme.colors.white,
            color: defaultTheme.colors.indigo[700],
            hoverColor: defaultTheme.colors.indigo[800],
            activeColor: defaultTheme.colors.indigo[900],
          },
        },
      },
      overlays: {
        config: {
          drawer: {
            sizes: {
              xl: '64rem',
            },
          },
        },
      },
    },
    extend: {
      screens: {
        standalone: { raw: '(display-mode: standalone)' },
      },
      maxWidth: {
        '30rem': '30rem',
        '20rem': '20rem',
        '15rem': '15rem'
      },
      minWidth: {
        '30rem': '30rem',
        '20rem': '20rem',
        '15rem': '15rem'
      },
      
    },
  },
  variants: {},
  plugins: [
    require('@frontile/core/tailwind'),
    require('@frontile/overlays/tailwind'),
    require('@frontile/buttons/tailwind'),
    require('@frontile/forms/tailwind'),
    require('tailwindcss-ember-power-select'),
    require('@frontile/notifications/tailwind'),
  ],
};

Had to place a few console.logs to understand how to custormize the primary color, and you can see the options inside each particular plugin, i.e.

frontile/packages/buttons/tailwind/default-options.js

Line 5 in b9f1082

const defaultConfig = {

But I do agree, documentation for this could pave the way for adopters, I really had a bad time there haha

[josemarluedke]

Sorry about the missing documentation here. I totally agree that we need documentation for this section.

The good news is being able to fully change the styles is one of the founding goals of this project.

[acorncom]

@josemarluedke do you have thoughts on where you'd want this type of example put? Our team just got snagged by this, so I'd happily put in a bit of time to build out a basic page on the docs site that would explain what @betocantu93 wrote up above ...