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

Separate packages for themes #154

Closed
diegohaz opened this issue Jul 18, 2018 · 10 comments

Comments

Projects
None yet
5 participants
@diegohaz
Copy link
Member

commented Jul 18, 2018

The main complaint I see regarding libraries like this is about the difficulty of customizing the style of the components, since you often have to reset many of them, and it turns out it would be easier to create from scratch.

On the other hand, libraries like material-ui are also very popular for providing an elegant look for people who don't want to deal with styles.

ReaKit stays in the middle, which can be bad. It's not stylized enough to please those who don't want to create styles, while others who want still have to reset a few things.

To address this problem, I'm thinking about removing all the unnecessary styles from the core package, like backgrounds, paddings, margins, borders etc., and creating separate packages for them. This means that those who want to customize everything will be able to plug their own theme into Provider without having to reset library specific styles, while others could just install a theme and use it.

This also means that some components, which are there only for styling purposes, like Fit and Shadow, will be removed. Others will be drastically cleaned up, like Button, which will, without any theme, resemble the browser's <button>.

Some styling will still be needed, like transforms for transitions etc.

  • Turn the repository into a monorepo (#183).
  • Create Provider component (#184).
  • Remove styling-only components: Box, Fit, Shadow.
  • Extract unnecessary styles from the main package
  • Variables
  • Create another package for the styles called reakit-theme-default.
@wordofchristian

This comment has been minimized.

Copy link
Contributor

commented Jul 18, 2018

This is an excellent idea. I know what initially drew me to this library was how un-opinionated it was about appearance. There should definitely be some kind of bare bones theme that gives you the very basics essentials of spacing and layout so you could actually build a website without customizing anything.

@diegohaz

This comment has been minimized.

Copy link
Member Author

commented Jul 18, 2018

A problem I see with this is that whenever we add a new component to the core library, every theme will have to be updated to style it. They might not need to be updated immediately though, so I guess it's fine.

A great advantage is that decoupling styles from the core library will make it easier to deal with versions (at least, on the core package). Every style change is a breaking change, which makes releasing reakit v1.0.0 very difficult.

Putting styles into their own theme packages would give us the possibility to release reakit v1.0.0 faster (as long as it's stable and used in production a few times), while keeping theme packages at v0.x until they mature.

@wordofchristian

This comment has been minimized.

Copy link
Contributor

commented Jul 18, 2018

@diegohaz

This comment has been minimized.

Copy link
Member Author

commented Jul 18, 2018

That's a great solution.

@renatorib

This comment has been minimized.

Copy link
Contributor

commented Jul 18, 2018

I think bootstrap handle this problem very well. Is a great case to follow the steps for sure.
But unlike your idea, they already have a stylized theme by default, others just overwrite. (I don't know if I like it...)

@renatorib

This comment has been minimized.

Copy link
Contributor

commented Jul 18, 2018

Maybe the components like Shadow could still exist but respecting the shadows that come from the theme settings. Obviously if you use Shadow without a theme, it would appear blank.

material-ui uses Paper with elevation prop that corresponds to the shadow elevature. There are 24 different levels (elevation1...elevation24) that you can override in the theme. They are just a shadows prop in theme 👇

default mui shadowscaptura de tela 2018-07-18 as 17 40 15

@wordofchristian

This comment has been minimized.

Copy link
Contributor

commented Jul 18, 2018

I think a lot of these decisions come down to a user's particular use cases and needs.

I think there will be some users who want to use the core utility features of ReaKit such as as or Base but care less about the presentational ones because they have very specific presentational needs. Those users can just ignore the presentational components and just use the utility and functional components (e.g. Step and Hidden).

I dislike the idea of the Shadow component having no appearance if no theme is included. That could be confusing for new users. I think the default happy path should be to have some kind of basic appearance. Maybe the basic default appearance is derived from a default theme, then there is a sepearate "blank slate" theme that removes all appearance and lets the user start from scratch.

@renatorib

This comment has been minimized.

Copy link
Contributor

commented Jul 19, 2018

Agreed.

@Thomazella Thomazella self-assigned this Jul 27, 2018

@xuopled

This comment has been minimized.

Copy link

commented Aug 2, 2018

It could be very nice to multiples themes, separted from the core feature.

 impost {ThemeProvider} from "styled-components"

const theme = {
   // styled-components basic theme key
   ... 
   // reakit theme key
}

<ThemeProvider theme={theme}>
...
</ThemeProvider>

libraries like material-ui are also very popular for providing an elegant look for people who don't want to deal with styles.

True, I was looking for a library and I discover this one. But I'm afraid to use it from now if you plan to remove all styles in the near future

@wordofchristian

This comment has been minimized.

Copy link
Contributor

commented Aug 2, 2018

True, I was looking for a library and I discover this one. But I'm afraid to use it from now if you plan to remove all styles in the near future

Ne t'inquiète pas @xuopled

The the current styling would still be available. One likely way we might do this is to turn the current styles into the recommended basic them, or you can create your own, or use a third party theme.

diegohaz added a commit that referenced this issue Sep 7, 2018

feat: Add `reakit-theme-default` package (#188)
Closes #154

BREAKING CHANGE: `Arrow`, `Box`, `Shadow` and `Fit` were removed.

  If you need their styles, look at the [source code before this commit](https://github.com/reakit/reakit/tree/100a833940b65284958988b888c0172ea5468d35/packages/reakit/src) and copy them.

BREAKING CHANGE: Almost all styles have been removed from components.

  If you need some basic styles, you should install `reakit-theme-default`. But, since they were rewritten, they may be slightly different from the old styles.

  To learn more, see [Theming](https://reakit.io/guide/theming).

@diegohaz diegohaz closed this Sep 7, 2018

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.