basscss-color-lighten's Introduction

Basscss Color Lighten

Lighten colors, backgrounds, and borders for Basscss.

<div class="bg-navy white">
  <a href="#" class="btn btn-outline lighten-1">.lighten-1</a>
  <a href="#" class="btn btn-outline lighten-2">.lighten-2</a>
  <a href="#" class="btn btn-outline lighten-3">.lighten-3</a>
  <a href="#" class="btn btn-outline lighten-4">.lighten-4</a>

  <p class="rounded bg-lighten-1">.bg-lighten-1</p>
  <p class="rounded bg-lighten-2">.bg-lighten-2</p>
  <p class="rounded bg-lighten-3">.bg-lighten-3</p>
  <p class="rounded bg-lighten-4">.bg-lighten-4</p>

  <p class="rounded border border-lighten-1">.border-lighten-1</p>
  <p class="rounded border border-lighten-2">.border-lighten-2</p>
  <p class="rounded border border-lighten-3">.border-lighten-3</p>
  <p class="rounded border border-lighten-4">.border-lighten-4</p>
</div>

basscss-color-lighten's People

Contributors

Watchers

basscss-color-lighten's Issues

Thoughts/Feedback

Hey, thanks for putting this together – just wanted to share some thoughts and feedback.

Although it's not documented, I've split up the color modules by property in v7. See https://github.com/basscss/background-colors and https://github.com/basscss/border-colors – it would be good to follow a similar organization, but I'm open to splitting the darken and lighten modules apart from the core colors.
I'm not sure I see the value in the .lighten-x styles for foreground colors. It seems like it would cause color contrast issues and set people up for making mistakes (i.e. low-contrast type) in their designs. There is already a .muted style to adjust opacity for text.
Would you eventually want to pass ownership of this module to the Basscss org? There's a few private scripts that I use to manage everything, and I wouldn't want this module to get left behind (Although it does seem fairly feature complete already).
Just putting this out there as an alternative: you could also make a pull request for the background-colors and border-colors modules, including these styles in each one.

Recommend Projects