UI Library Starter

# Colors

Абстрагируйте все цвета из гайдлайна в короткие имена-маркеры.

~/src/stylus/utils/_variables.styl

// Palette
//////////////////////////////////////////////////////
$colors = {
  cat: #515bd4,
  dog: #ffffff,
  bird: #fd5f00,
  wood: #fed564,
  stone: #8bc24c,
  sea: #13334c,
}
// Dependencies colors
$colors["text"] = $colors.sea
$colors["placeholder"] = rgba($colors.sea, $opacites.rock)
$colors["primary"] = $colors.cat
$colors["secondary"] = $colors.dog

В любом месте кода препроцессора или секции стилей SFC (при условии импорта стилевой базы) библиотеки или дочерних проектов вы можете передавать правильные цвета:

.selector
  color $colors.primary

Легко поддерживать тестовый компонент наглядно демонстрирующий палитру:

  • cat
  • dog
  • bird
  • wood
  • stone
  • sea

@/src/components/tests/TestColors/TestColors.vue

<template>
  <ul class="colors">
    <li class="colors__1">cat</li>
    <li class="colors__2">dog</li>
    <li class="colors__3">bird</li>
    <li class="colors__4">wood</li>
    <li class="colors__5">stone</li>
    <li class="colors__6">sea</li>
  </ul>
</template>

<script>
export default {
  name: 'TestColors',
};
</script>

<style lang="stylus" scoped>
@import "~/src/stylus/_stylebase.styl";

.colors
  padding 0
  display grid
  grid-template-columns 1fr 1fr 1fr

  +$gadgets()
    display block

  > li
    @extend $flex--center // ~/src/stylus/utils/_placeholders.styl
    height 200px
    color $colors.stone
    $text("olga")

    +$gadgets()
      height 120px
      $text("anna")

  &__1
    background $colors.cat

  &__2
    background $colors.dog

  &__3
    background $colors.bird

  &__4
    background $colors.wood

  &__5
    color $colors.text !important
    background $colors.stone

  &__6
    background $colors.sea
</style>

← Breakpoints →