Color

Color vs Palettes#

Цвет, один из самых недооцененных элементов в плане функциональности во многих UI библиотеках. Объект Color является мощным инструментом по манипуляции с цветом.

Например мы можете использовать цвет из Palettes набора напрямую или с помощью Color.

  • Color(pink700).Base()
    #C2185B
  • Color(purple700).Base()
    #7B1FA2
  • Color(blue700).Base()
    #1976D2

    • Объект Color умеет работать с цветами из темы.

  • Color(primary).Base()
    #1E88E5
  • Color(success).Base()
    #43A047
  • Color(fail).Base()
    #E53935

    • Так же можно использовать --css-var.

    :root {
    --css-var-color-hex: #7B1FA2;
    --css-var-color-purple: purple300;
    }
  • --css-var-color-hex
    #FFFFFF
  • --css-var-color-purple
    #FFFFFF

    • Метод Base() по умолчанию возвращает цвет в том формате в котором он был передан.

    Color('#7B1FA2').Base() -> '#7B1FA2'
    Color('rgb(123,31,162)').Base() -> 'rgb(123,31,162)'
    Color('hsl(282,68%,38%)').Base() -> 'hsl(282,68%,38%)'

    Но так же, метод Base() умеет конвертировать цвет в другой формат.

    Color('#7B1FA2').Base('rgb') -> 'rgb(123,31,162)'
    Color('rgb(123,31,162)').Base('hsl') -> 'hsl(282,68%,38%)'
    Color('hsl(282,68%,38%)').Base('hex') -> '#7B1FA2'

    Доступные форматы:

    • hex
    • hexa
    • rgb
    • rgba
    • hsl
    • hsla

    Alpha#

    Что на счет прозрачности(альфа-канал)? Вы так же можете использовать форматы поддерживающие альфа-канал.

    Color('#7b1fa221').Base('rgba') -> 'rgba(123,31,162,0.13)'
    Color('rgba(123,31,162,0.13)').Base('hsla') -> 'hsl(282,68%,38%,0.13)'
    Color('hsla(282,68%,38%,0.13)').Base('hexa') -> '#7b1fa221'

    В форматах hexa/rgba/hsla всегда будет alpha равен 1, если не указано другое значение вторым параметром, в функции Base(format,alpha).

    Color('#7B1FA2').Base('rgba') -> 'rgba(123,31,162,1)' // alpha = 1
    Color('#7B1FA2').Base('rgba',0.78) -> 'rgba(123,31,162,0.78)' // alpha = 0.78

    Contrast#

    Метод Contrast(format,alpha) возвращает цвет(черный или белый) который лучше воспринимается человеком на фоне основного цвета.

    #7B1FA2
    #CE93D8
    #757575
    #EEEEEE

    Bright#

    Метод Bright(format,bright,alpha) позволяет регулировать яркость.

    Параметр bright принимает положительное или отрицательное число.

    Color('orange').Bright('hex',20) // увеличить яркость
    Color('orange').Bright('hex',-20) // уменьшить яркость
    0
    5
    10
    15
    20
    25
    30
    35
    40
    45
    50
    55
    60
    0
    -5
    -10
    -15
    -20
    -25
    -30
    -35
    -40
    -45
    -50
    -55
    -60

    Props color#

    Более того, в каждый компонент EVG-UI встроен объект Color. Так что вы уже используете все его преимущества.

    Например в компоненте <Button> текст, icon и loader принимает контрастный цвет относительно основного, переданного в свойстве color.

    <Button color='primary'>Text</Button>