Unintuitive behavior of button styles, specially around sizing and clases

[cibernox]

I've found some specific design choices of the public API of the components somewhat unintuitive and I wanted to bring it up to raise awareness of wether is is a trade off we want to make on purpose or not.

A lot of components that have different "sizes" instead of having a size attribute or using special size classes (e.g. sui-small), they instead "suggest" in the documentation in the source code a set of tailwind classes that achieve the desired look, but it'a up to the user to use that collection of classes everywhere they want that look.

One example from the documentation in the sourcecode of the accordion component:

  @doc """
  The accordion component renders a list of items with child content that can be expanded or collapsed.

  ## Example

  <.accordion>
    <:header>
      Title something 1
    </:header>
    <:content>
      Content something 1
    </:content>
  </.accordion>

  Suggested size classes for `header` (default: md):

  sm: "p-1 text-base sm:text-lg gap-x-0.5"
  md: "p-1 text-base sm:text-lg md:text-xl md:py-1 md:pr-1 md:pl-1.5 md:gap-x-1"
  lg: "p-1 text-base sm:text-lg md:text-xl lg:text-2xl md:py-1 md:pr-1 md:pl-1.5 lg:pl-2 md:gap-x-1 lg:gap-x-1.5"
  xl: "p-1 text-base sm:text-lg md:text-xl lg:text-2xl xl:text-3xl md:pt-1 md:pb-0 md:pr-1 md:pl-1.5 lg:pl-4 sm:gap-x-3 md:gap-x-4 lg:gap-x-5"

  Suggested size classes for `content` (default: md):

  sm: "text-base"
  md: "grid transition-grid-rows text-base md:text-lg"
  lg: "md:text-lg lg:text-xl"
  xl: "md:text-lg lg:text-xl xl:text-2xl"
  """

Which means a user that wants to render a large accordion component needs to write something like this every time:

<.accordion id="accordion-single-large">
  <:header class="p-1 text-base sm:text-lg md:text-xl lg:text-2xl md:py-1 md:pr-1 md:pl-1.5 lg:pl-2 md:gap-x-1 lg:gap-x-1.5">Large</:header>
  <:content class="md:text-lg lg:text-xl">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</:content>
</.accordion>

That alone is unplesantly verbose compared with a size="large" or a class="sui-large".

Another problem with this is that in many components, the default style is only applied if no other class is applied. For instance, buttons, which default to sui-primary as their color scheme, need to explicitly provide the style if they change the size of the button or the default will not apply.
See screenshot from the storybook:

This may be something we want to do on purpose, but as someone using the library for the first time I found those design decisions unexpected.