arwes icon indicating copy to clipboard operation
arwes copied to clipboard

Add more options to createAppStylesBaseline

Open ellie-me opened this issue 9 months ago • 0 comments

Hey! I just want to point out this file

#packages/core/src/createAppStylesBaseline/createAppStylesBaseline.ts

The styles are generated by JavaScript and any person that is new at using this framework would find troubles overriding the default styles to suit their needs, is it possible that instead of using JavaScript, we move the values into CSS variables injected by JavaScript? then these variables can be picked up by standard CSS which then allows users to "opt in" into the mini-reset from their preferred pipeline (sass, less, postcss etc) with any CSS framework?

This would ensure compatibility with other design systems and reduce the technical complexity needed to use ARWES.

Currently the only way I can opt out of the mini reset with createAppTheme and createAppStylesBaseline is by overriding each value in Javascript. There's some controls but the current options which we have are not enough. Another solution can be to just add options in createAppTheme, I think the scrollbar options are conflicting and the miniReset, or even the colour scheme defaults which other CSS frameworks might include and an end user might want to use.

So for the second solution I would propose to add to createAppTheme the following settings:

{
    includeMinireset: Boolean,
    styleScrollbars: Boolean,
    scrollbarColours: {
      track: ThemeSettingsColor,
      thumb: ThemeSettingsColor,
      width: "thin" | "thick" | string
    }
    selectionColor: ThemeSettingsColor,
}

Though this is not an exhaustive list, is just an example on what this change might look like.

My third proposed solution is to split ARWES from the design system, so that the style system is purely based on sass and the component library, animations, sounds, are then included with Javascript, to be honest it's quite difficult because then how can I think about making the library compatible with other Javascript Frameworks than react? I think you had thought of a solution already and we should stick to it. So option 1 and 2 are better suited for the task.

ellie-me avatar May 12 '24 11:05 ellie-me