Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add more options to createAppStylesBaseline #218

Open
ellie-me opened this issue May 12, 2024 · 0 comments
Open

Add more options to createAppStylesBaseline #218

ellie-me opened this issue May 12, 2024 · 0 comments

Comments

@ellie-me
Copy link

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant