Цвет

В SIMAI Framework используется гибкая система работы с цветом. Вы можете использовать базовые цвета и палитру цветов Material Design. Дополнительно имеется черно белая палитра с прозрачностью. Для работы в рамках светлой или темной цветовой темы предусмотрены специальные цвета, которые меняют свое значение от темы.

Свойства применения цвета

Для того чтобы применять цвет к разным свойствам элемента предусмотрены специальные префиксы, которые указывают к какому именно свойству будет применен цвет:

  • .c-{цвет} - цвет текста
  • .bg-{цвет} - цвет фона
  • .b-{цвет} - цвет границы
  • .l-{цвет} - цвет ссылки
  • .f-{цвет} - цвет заливки (SVG)
  • .s-{цвет} - цвет обводки (SVG)

Цветовая палитра

Цветовая палитра определяет базовые цвета, используемые во фреймворке. Эти цвета подобраны так, чтобы гармонично дополнять друг друга.

Для примения цветов палитры используйте следующую конструкцию: .{префикс}-{базовый цвет}-{насыщенность}

  • Префикс - обязательный параметр. Указывает к чему применяется цвет.
  • Базовый цвет - обязательный параметр. Указывает наименование базового цвета палитры. Может принимать следующие значения:
    • gray – серый
    • red – красный
    • orange – оранжевый
    • yellow – желтый
    • teal – синевато-зеленый
    • blue – синий
    • indigo – индиго
    • purple – фиолетовый
    • pink – розовый
    • black – черный
    • white – белый
  • Насыщенность - необязательный параметр. Указывает степень насыщенности цвета по отношению к базовому цвету. Может принимать значения от 1 до 9. При этом сам базовый цвет имеет насыщенность 6.
Для черного black и белого white цвета вмето насыщенности используется прозрачность.

gray

gray-1
#F7FAFC
gray-2
#EDF2F7
gray-3
#E2E8F0
gray-4
#CBD5E0
gray-5
#A0AEC0
gray-6
#718096
gray-7
#4A5568
gray-8
#2D3748
gray-9
#1A202C

red

red-1
#FFF5F5
red-2
#FED7D7
red-3
#FEB2B2
red-4
#FC8181
red-5
#F56565
red-6
#E53E3E
red-7
#C53030
red-8
#9B2C2C
red-9
#742A2A

orange

orange-1
#FFFAF0
orange-2
#FEEBC8
orange-3
#FBD38D
orange-4
#F6AD55
orange-5
#ED8936
orange-6
#DD6B20
orange-7
#C05621
orange-8
#9C4221
orange-9
#7B341E

yellow

yellow-1
#FFFFF0
yellow-2
#FEFCBF
yellow-3
#FAF089
yellow-4
#F6E05E
yellow-5
#ECC94B
yellow-6
#D69E2E
yellow-7
#B7791F
yellow-8
#975A16
yellow-9
#744210

green

green-1
#F0FFF4
green-2
#C6F6D5
green-3
#9AE6B4
green-4
#68D391
green-5
#48BB78
green-6
#38A169
green-7
#2F855A
green-8
#276749
green-9
#22543D

teal

teal-1
#E6FFFA
teal-2
#B2F5EA
teal-3
#81E6D9
teal-4
#4FD1C5
teal-5
#38B2AC
teal-6
#319795
teal-7
#2C7A7B
teal-8
#285E61
teal-9
#234E52

blue

blue-1
#EBF8FF
blue-2
#BEE3F8
blue-3
#90CDF4
blue-4
#63B3ED
blue-5
#4299E1
blue-6
#3182CE
blue-7
#2B6CB0
blue-8
#2C5282
blue-9
#2A4365

indigo

indigo-1
#EBF4FF
indigo-2
#C3DAFE
indigo-3
#A3BFFA
indigo-4
#7F9CF5
indigo-5
#667EEA
indigo-6
#5A67D8
indigo-7
#4C51BF
indigo-8
#434190
indigo-9
#3C366B

purple

purple-1
#FAF5FF
purple-2
#E9D8FD
purple-3
#D6BCFA
purple-4
#B794F4
purple-5
#9F7AEA
purple-6
#805AD5
purple-7
#6B46C1
purple-8
#553C9A
purple-9
#44337A

pink

pink-1
#FFF5F7
pink-2
#FED7E2
pink-3
#FBB6CE
pink-4
#F687B3
pink-5
#ED64A6
pink-6
#D53F8C
pink-7
#B83280
pink-8
#97266D
pink-9
#702459

Именные цвета

Используйте следующие именные цвета для указания свойств элементов:

  • {префикс}-default - цвет по умолччанию
  • {префикс}-primary - основной цвет
  • {префикс}-secondary - вспомогательный цвет
  • {префикс}-success - цвет успеха
  • {префикс}-info - цвет информирования
  • {префикс}-warning - цвет предупреждения
  • {префикс}-danger - цвет опасности
Фон Граница Текст SVG заливка SVG обводка
.bg-default
.b-default
.c-default
.f-default
.s-default
.bg-primary
.b-primary
.c-primary
.f-primary
.s-primary
.bg-secondary
.b-secondary
.c-secondary
.f-secondary
.s-secondary
.bg-success
.b-success
.c-success
.f-success
.s-success
.bg-info
.b-info
.c-info
.f-info
.s-info
.bg-warning
.b-warning
.c-warning
.f-warning
.s-warning
.bg-danger
.b-danger
.c-danger
.f-danger
.s-danger

Цвета социальных сетей

Используйте следующие цвета социальных сетей для указания цвета свойств элементов:

  • {префикс}-fb - цвет «Фейсбук»
  • {префикс}-vk - цвет «Вконтакте»
  • {префикс}-tw - цвет «Твиттер»
  • {префикс}-gp - цвет «Гугл плюс»
  • {префикс}-pr - цвет «Пинтерес»
  • {префикс}-ok - цвет «Одноклассники»
  • {префикс}-mr - цвет «Мой мир»
Фон Граница Текст SVG заливка SVG обводка
.bg-fb
.b-fb
.c-fb
.f-fb
.s-fb
.bg-vk
.b-vk
.c-vk
.f-vk
.s-vk
.bg-tw
.b-tw
.c-tw
.f-tw
.s-tw
.bg-gp
.b-gp
.c-gp
.f-gp
.s-gp
.bg-pr
.b-pr
.c-pr
.f-pr
.s-pr
.bg-ok
.b-ok
.c-ok
.f-ok
.s-ok
.bg-mr
.b-mr
.c-mr
.f-mr
.s-mr

Базовые цвета

Фон Граница Текст SVG заливка SVG обводка
.bg-gray
.b-gray
.c-gray
.f-gray
.s-gray
.bg-red
.b-red
.c-red
.f-red
.s-red
.bg-orange
.b-orange
.c-orange
.f-orange
.s-orange
.bg-yellow
.b-yellow
.c-yellow
.f-yellow
.s-yellow
.bg-green
.b-green
.c-green
.f-green
.s-green
.bg-teal
.b-teal
.c-teal
.f-teal
.s-teal
.bg-blue
.b-blue
.c-blue
.f-blue
.s-blue
.bg-indigo
.b-indigo
.c-indigo
.f-indigo
.s-indigo
.bg-purple
.b-purple
.c-purple
.f-purple
.s-purple
.bg-pink
.b-pink
.c-pink
.f-pink
.s-pink
.bg-black
.b-black
.c-black
.f-black
.s-black
.bg-white
.b-white
.c-white
.f-white
.s-white

Полная палитра

gray

Фон Граница Текст SVG заливка SVG обводка
.bg-gray-1
.b-gray-1
.c-gray-1
.f-gray-1
.s-gray-1
.bg-gray-2
.b-gray-2
.c-gray-2
.f-gray-2
.s-gray-2
.bg-gray-3
.b-gray-3
.c-gray-3
.f-gray-3
.s-gray-3
.bg-gray-4
.b-gray-4
.c-gray-4
.f-gray-4
.s-gray-4
.bg-gray-5
.b-gray-5
.c-gray-5
.f-gray-5
.s-gray-5
.bg-gray-6
.b-gray-6
.c-gray-6
.f-gray-6
.s-gray-6
.bg-gray-7
.b-gray-7
.c-gray-7
.f-gray-7
.s-gray-7
.bg-gray-8
.b-gray-8
.c-gray-8
.f-gray-8
.s-gray-8
.bg-gray-9
.b-gray-9
.c-gray-9
.f-gray-9
.s-gray-9

red

Фон Граница Текст SVG заливка SVG обводка
.bg-red-1
.b-red-1
.c-red-1
.f-red-1
.s-red-1
.bg-red-2
.b-red-2
.c-red-2
.f-red-2
.s-red-2
.bg-red-3
.b-red-3
.c-red-3
.f-red-3
.s-red-3
.bg-red-4
.b-red-4
.c-red-4
.f-red-4
.s-red-4
.bg-red-5
.b-red-5
.c-red-5
.f-red-5
.s-red-5
.bg-red-6
.b-red-6
.c-red-6
.f-red-6
.s-red-6
.bg-red-7
.b-red-7
.c-red-7
.f-red-7
.s-red-7
.bg-red-8
.b-red-8
.c-red-8
.f-red-8
.s-red-8
.bg-red-9
.b-red-9
.c-red-9
.f-red-9
.s-red-9

orange

Фон Граница Текст SVG заливка SVG обводка
.bg-orange-1
.b-orange-1
.c-orange-1
.f-orange-1
.s-orange-1
.bg-orange-2
.b-orange-2
.c-orange-2
.f-orange-2
.s-orange-2
.bg-orange-3
.b-orange-3
.c-orange-3
.f-orange-3
.s-orange-3
.bg-orange-4
.b-orange-4
.c-orange-4
.f-orange-4
.s-orange-4
.bg-orange-5
.b-orange-5
.c-orange-5
.f-orange-5
.s-orange-5
.bg-orange-6
.b-orange-6
.c-orange-6
.f-orange-6
.s-orange-6
.bg-orange-7
.b-orange-7
.c-orange-7
.f-orange-7
.s-orange-7
.bg-orange-8
.b-orange-8
.c-orange-8
.f-orange-8
.s-orange-8
.bg-orange-9
.b-orange-9
.c-orange-9
.f-orange-9
.s-orange-9

yellow

Фон Граница Текст SVG заливка SVG обводка
.bg-yellow-1
.b-yellow-1
.c-yellow-1
.f-yellow-1
.s-yellow-1
.bg-yellow-2
.b-yellow-2
.c-yellow-2
.f-yellow-2
.s-yellow-2
.bg-yellow-3
.b-yellow-3
.c-yellow-3
.f-yellow-3
.s-yellow-3
.bg-yellow-4
.b-yellow-4
.c-yellow-4
.f-yellow-4
.s-yellow-4
.bg-yellow-5
.b-yellow-5
.c-yellow-5
.f-yellow-5
.s-yellow-5
.bg-yellow-6
.b-yellow-6
.c-yellow-6
.f-yellow-6
.s-yellow-6
.bg-yellow-7
.b-yellow-7
.c-yellow-7
.f-yellow-7
.s-yellow-7
.bg-yellow-8
.b-yellow-8
.c-yellow-8
.f-yellow-8
.s-yellow-8
.bg-yellow-9
.b-yellow-9
.c-yellow-9
.f-yellow-9
.s-yellow-9

green

Фон Граница Текст SVG заливка SVG обводка
.bg-green-1
.b-green-1
.c-green-1
.f-green-1
.s-green-1
.bg-green-2
.b-green-2
.c-green-2
.f-green-2
.s-green-2
.bg-green-3
.b-green-3
.c-green-3
.f-green-3
.s-green-3
.bg-green-4
.b-green-4
.c-green-4
.f-green-4
.s-green-4
.bg-green-5
.b-green-5
.c-green-5
.f-green-5
.s-green-5
.bg-green-6
.b-green-6
.c-green-6
.f-green-6
.s-green-6
.bg-green-7
.b-green-7
.c-green-7
.f-green-7
.s-green-7
.bg-green-8
.b-green-8
.c-green-8
.f-green-8
.s-green-8
.bg-green-9
.b-green-9
.c-green-9
.f-green-9
.s-green-9

teal

Фон Граница Текст SVG заливка SVG обводка
.bg-teal-1
.b-teal-1
.c-teal-1
.f-teal-1
.s-teal-1
.bg-teal-2
.b-teal-2
.c-teal-2
.f-teal-2
.s-teal-2
.bg-teal-3
.b-teal-3
.c-teal-3
.f-teal-3
.s-teal-3
.bg-teal-4
.b-teal-4
.c-teal-4
.f-teal-4
.s-teal-4
.bg-teal-5
.b-teal-5
.c-teal-5
.f-teal-5
.s-teal-5
.bg-teal-6
.b-teal-6
.c-teal-6
.f-teal-6
.s-teal-6
.bg-teal-7
.b-teal-7
.c-teal-7
.f-teal-7
.s-teal-7
.bg-teal-8
.b-teal-8
.c-teal-8
.f-teal-8
.s-teal-8
.bg-teal-9
.b-teal-9
.c-teal-9
.f-teal-9
.s-teal-9

blue

Фон Граница Текст SVG заливка SVG обводка
.bg-blue-1
.b-blue-1
.c-blue-1
.f-blue-1
.s-blue-1
.bg-blue-2
.b-blue-2
.c-blue-2
.f-blue-2
.s-blue-2
.bg-blue-3
.b-blue-3
.c-blue-3
.f-blue-3
.s-blue-3
.bg-blue-4
.b-blue-4
.c-blue-4
.f-blue-4
.s-blue-4
.bg-blue-5
.b-blue-5
.c-blue-5
.f-blue-5
.s-blue-5
.bg-blue-6
.b-blue-6
.c-blue-6
.f-blue-6
.s-blue-6
.bg-blue-7
.b-blue-7
.c-blue-7
.f-blue-7
.s-blue-7
.bg-blue-8
.b-blue-8
.c-blue-8
.f-blue-8
.s-blue-8
.bg-blue-9
.b-blue-9
.c-blue-9
.f-blue-9
.s-blue-9

indigo

Фон Граница Текст SVG заливка SVG обводка
.bg-indigo-1
.b-indigo-1
.c-indigo-1
.f-indigo-1
.s-indigo-1
.bg-indigo-2
.b-indigo-2
.c-indigo-2
.f-indigo-2
.s-indigo-2
.bg-indigo-3
.b-indigo-3
.c-indigo-3
.f-indigo-3
.s-indigo-3
.bg-indigo-4
.b-indigo-4
.c-indigo-4
.f-indigo-4
.s-indigo-4
.bg-indigo-5
.b-indigo-5
.c-indigo-5
.f-indigo-5
.s-indigo-5
.bg-indigo-6
.b-indigo-6
.c-indigo-6
.f-indigo-6
.s-indigo-6
.bg-indigo-7
.b-indigo-7
.c-indigo-7
.f-indigo-7
.s-indigo-7
.bg-indigo-8
.b-indigo-8
.c-indigo-8
.f-indigo-8
.s-indigo-8
.bg-indigo-9
.b-indigo-9
.c-indigo-9
.f-indigo-9
.s-indigo-9

purple

Фон Граница Текст SVG заливка SVG обводка
.bg-purple-1
.b-purple-1
.c-purple-1
.f-purple-1
.s-purple-1
.bg-purple-2
.b-purple-2
.c-purple-2
.f-purple-2
.s-purple-2
.bg-purple-3
.b-purple-3
.c-purple-3
.f-purple-3
.s-purple-3
.bg-purple-4
.b-purple-4
.c-purple-4
.f-purple-4
.s-purple-4
.bg-purple-5
.b-purple-5
.c-purple-5
.f-purple-5
.s-purple-5
.bg-purple-6
.b-purple-6
.c-purple-6
.f-purple-6
.s-purple-6
.bg-purple-7
.b-purple-7
.c-purple-7
.f-purple-7
.s-purple-7
.bg-purple-8
.b-purple-8
.c-purple-8
.f-purple-8
.s-purple-8
.bg-purple-9
.b-purple-9
.c-purple-9
.f-purple-9
.s-purple-9

pink

Фон Граница Текст SVG заливка SVG обводка
.bg-pink-1
.b-pink-1
.c-pink-1
.f-pink-1
.s-pink-1
.bg-pink-2
.b-pink-2
.c-pink-2
.f-pink-2
.s-pink-2
.bg-pink-3
.b-pink-3
.c-pink-3
.f-pink-3
.s-pink-3
.bg-pink-4
.b-pink-4
.c-pink-4
.f-pink-4
.s-pink-4
.bg-pink-5
.b-pink-5
.c-pink-5
.f-pink-5
.s-pink-5
.bg-pink-6
.b-pink-6
.c-pink-6
.f-pink-6
.s-pink-6
.bg-pink-7
.b-pink-7
.c-pink-7
.f-pink-7
.s-pink-7
.bg-pink-8
.b-pink-8
.c-pink-8
.f-pink-8
.s-pink-8
.bg-pink-9
.b-pink-9
.c-pink-9
.f-pink-9
.s-pink-9

black

Фон Граница Текст SVG заливка SVG обводка
.bg-black-1
.b-black-1
.c-black-1
.f-black-1
.s-black-1
.bg-black-2
.b-black-2
.c-black-2
.f-black-2
.s-black-2
.bg-black-3
.b-black-3
.c-black-3
.f-black-3
.s-black-3
.bg-black-4
.b-black-4
.c-black-4
.f-black-4
.s-black-4
.bg-black-5
.b-black-5
.c-black-5
.f-black-5
.s-black-5
.bg-black-6
.b-black-6
.c-black-6
.f-black-6
.s-black-6
.bg-black-7
.b-black-7
.c-black-7
.f-black-7
.s-black-7
.bg-black-8
.b-black-8
.c-black-8
.f-black-8
.s-black-8
.bg-black-9
.b-black-9
.c-black-9
.f-black-9
.s-black-9

white

Фон Граница Текст SVG заливка SVG обводка
.bg-white-1
.b-white-1
.c-white-1
.f-white-1
.s-white-1
.bg-white-2
.b-white-2
.c-white-2
.f-white-2
.s-white-2
.bg-white-3
.b-white-3
.c-white-3
.f-white-3
.s-white-3
.bg-white-4
.b-white-4
.c-white-4
.f-white-4
.s-white-4
.bg-white-5
.b-white-5
.c-white-5
.f-white-5
.s-white-5
.bg-white-6
.b-white-6
.c-white-6
.f-white-6
.s-white-6
.bg-white-7
.b-white-7
.c-white-7
.f-white-7
.s-white-7
.bg-white-8
.b-white-8
.c-white-8
.f-white-8
.s-white-8
.bg-white-9
.b-white-9
.c-white-9
.f-white-9
.s-white-9