diff --git a/package.json b/package.json index 6e0a5bc..ea5d375 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "whitepaper-bem", - "version": "2.2.0", + "version": "2.3.0", "description": "", "main": "index.js", "scripts": { diff --git a/theme/_control/theme_control-whitepaper_default.css b/theme/_control/theme_control-whitepaper_default.css new file mode 100755 index 0000000..23df71f --- /dev/null +++ b/theme/_control/theme_control-whitepaper_default.css @@ -0,0 +1,221 @@ +/* Base - базовые цвета от которых выстраивается вся политра */ +$color-base-base: hsl(0, 0%, 0%); /* Базовый цвет содержимого, от которого выстраиваются цвета текста, иконок, ... */ +$color-base-essential: hsl(0, 0%, 100%); /* Базовый цвет поверхностей */ +$color-base-project: hsl(211, 100%, 35%); /* Проектный цвет, от которого выстраивают акцентные состояния */ +$color-base-phantom: hsl(0, 0%, 0%); /* Тонирующий цвет, от которого выстраиватся бордеры, паранджа, ... */ +$color-base-path: hsl(212, 100%, 47%); /* Ссылочный цвет, от которого выстраиваются все их состояния */ +$color-base-success: hsl(158, 100%, 30%); /* Цвет успеха */ +$color-base-alert: hsl(0, 100%, 60%); /* Цвет ошибки */ +$color-base-warning: hsl(36, 100%, 50%); /* Цвет предупреждения */ +$color-base-normal: hsl(195, 13%, 88%); /* Цвет нейтральный */ +$color-base-system: hsl(208, 15%, 54%); /* Цвет системнный */ + + + +/* Смысловая политра цветов, наследуемая от основных цветов из блока Theme (изменяется при детальной настройки цветовой схемы) */ +/* Control Default */ +$color-control-bg-default: color($color-base-essential l(90%)); /* #E6E6E6 hsl(0, 0%, 90%) */ /* Цвет фона контрола */ +$color-control-bg-default-hover: color($color-base-essential l(86%)); /* #DBDBDB hsl(0, 0%, 86%) */ /* Цвет фона контрола по ховеру */ +$color-control-bg-default-press: color($color-base-essential l(86%)); /* #DBDBDB hsl(0, 0%, 86%) */ /* Цвет фона контрола по нажатию */ +$color-control-bg-default-disable: color($color-base-essential l(95%)); /* #F2F2F2 hsl(0, 0%, 95%) */ /* Цвет фона неактивного контрола */ + +$color-control-bg-border-default: color($color-base-phantom l(70%)); /* #D9D9D9 hsl(0, 0%, 70%); */ /* Цвет фона бордеров котрола */ +$color-control-bg-border-default-hover: color($color-base-phantom l(85%)); /* #CECECE hsl(0, 0%, 85%) */ /* Цвет фона бордеров контрола по ховеру */ +$color-control-bg-border-default-press: color($color-base-phantom l(70%)); /* #B3B3B3 hsl(0, 0%, 70%) */ /* Цвет фона бордеров контрола по нажатию */ +$color-control-bg-border-default-disable: color($color-base-phantom l(85%)); /* #D9D9D9 hsl(0, 0%, 85%) */ /* Цвет фона бордеров неактивного контрола */ + + +/* Control Blank */ +$color-control-bg-blank: color($color-base-essential l(100%)); /* #E6E6E6 hsl(0, 0%, 90%) */ /* Цвет фона пустого контрола */ +$color-control-bg-blank-hover: color($color-base-essential l(100%)); /* #DBDBDB hsl(0, 0%, 86%) */ /* Цвет фона пустого контрола по ховеру */ +$color-control-bg-blank-disable: color($color-base-essential l(85%)); /* #F2F2F2 hsl(0, 0%, 95%) */ /* Цвет фона пустого неактивного контрола */ + +$color-control-bg-border-blank: color($color-base-phantom l(85%)); /* #D9D9D9 hsl(0, 0%, 70%); */ /* Цвет фона бордеров пустого котрола */ +$color-control-bg-border-blank-hover: color($color-base-phantom l(85%)); /* #CECECE hsl(0, 0%, 85%) */ /* Цвет фона бордеров пустого контрола по ховеру */ +$color-control-bg-border-blank-disable: color($color-base-phantom l(85%)); /* #D9D9D9 hsl(0, 0%, 85%) */ /* Цвет фона бордеров пустого неактивного контрола */ + + +/* Control Heavy */ +$color-control-bg-heavy: color($color-base-essential l(33%)); /* #555555 hsl(0, 0%, 33%) */ /* Цвет уплотнённого фона котрола */ +$color-control-bg-heavy-hover: color($color-base-essential l(33%)); /* #555555 hsl(0, 0%, 33%) */ /* Цвет уплотнённого фона контрола по ховеру */ +$color-control-bg-heavy-press: color($color-base-essential l(33%)); /* #555555 hsl(0, 0%, 33%) */ /* Цвет уплотнённого фона контрола по нажатию */ + +$color-control-bg-border-heavy: color($color-base-phantom l(33%)); /* #555555 hsl(0, 0%, 33%) */ /* Цвет уплотнённого фона бордеров котрола */ +$color-control-bg-border-heavy-hover: color($color-base-phantom l(33%)); /* #555555 hsl(0, 0%, 33%) */ /* Цвет уплотнённого фона бордеров контрола по ховеру */ +$color-control-bg-border-heavy-press: color($color-base-phantom l(33%)); /* #555555 hsl(0, 0%, 33%) */ /* Цвет уплотнённого фона бордеров контрола по нажатию */ + + +/* Control Pseudo */ +$color-control-bg-pseudo: color($color-base-essential l(100%)); /* #FFFFFF hsl(0, 0%, 100%) */ /* Цвет фона псевдо контрола */ +$color-control-bg-pseudo-hover: color($color-base-essential l(97%)); /* #F7F7F7 hsl(0, 0%, 97%) */ /* Цвет фона псевдо контрола по ховеру */ + +$color-control-bg-border-pseudo: color($color-base-phantom l(80%)); /* #CCCCCC hsl(0, 0%, 80%) */ /* Цвет фона псевдо котрола */ +$color-control-bg-border-pseudo-hover: color($color-base-phantom l(80%)); /* #CCCCCC hsl(0, 0%, 80%) */ /* Цвет фона псевдо котрола по ховеру */ + + +/* Control Action */ +$color-control-bg-action: $color-base-project; /* #FFCB00 hsl(48, 100%, 50% */ /* Цвет фона активного контрола */ +$color-control-bg-action-hover: color($color-base-project h(-2%)l(-1%)); /* #FAC100 hsl(46, 100%, 49%) */ /* Цвет фона активного контрола по ховеру */ +$color-control-bg-action-press: color($color-base-project h(-2%)l(-1%)); /* #FAC100 hsl(46, 100%, 49%) */ /* Цвет фон активного контрола по нажатию */ + + +/* Control Passive */ +$color-control-bg-passive: $color-base-essential; /* #FFFFFF hsl(0, 0%, 100%) */ /* Цвет фона пассивной части контрола */ + +/* Control Progress */ +$color-control-bg-progress: $color-base-project; /* #FFCC00 hsl(48, 100%, 50%) */ /* Цвет фон активного контрола в прогрессе */ +$color-control-bg-progress-process: color($color-base-project h(+2%)); /* #FFD300 hsl(50, 100%, 50%) */ /* Цвет фон активного контрола в прогрессе выполнения */ + + +/* Control Check */ +$color-control-bg-check: color($color-base-phantom l(33%)); /* #555555 hsl(0, 0%, 33%) */ /* Цвет фона чекнутого контрола */ +$color-control-bg-check-press: color($color-base-phantom l(33%)); /* #555555 hsl(0, 0%, 33%) */ /* Цвет фона чекнутого контрола по нажатию */ +$color-control-bg-check-hover: color($color-base-phantom l(33%)); /* #555555 hsl(0, 0%, 33%) */ /* Цвет фона чекнутого контрола по ховеру */ +$color-control-bg-check-disable: color($color-base-phantom l(95%)); /* #F2F2F2 hsl(0, 0%, 95%) */ /* Цвет фона чекнутого неактивного контрола */ + +$color-control-bg-border-check: color($color-base-project l(33%)); /* #555555 hsl(0, 0%, 33%) */ /* Цвет фона бордеров чекнутого контрола */ +$color-control-bg-border-check-press: color($color-base-phantom l(33%)); /* #555555 hsl(0, 0%, 33%) */ /* Цвет фона бордеров чекнутого контрола при фокусе по нажатию */ +$color-control-bg-border-check-hover: color($color-base-phantom l(33%)); /* #555555 hsl(0, 0%, 33%) */ /* Цвет фона бордеров чекнутого контрола по ховеру */ + + +/* Control Faint */ +$color-control-bg-faint: $color-base-essential; /* #FFFFFF hsl(0, 0%, 100%) */ /* Цвет фона ослабленной части контрола */ +$color-control-bg-faint-disable: color($color-base-essential l(78%)); /* #C8C8C8 hsl(0, 0%, 78%) */ /* Цвет фона ослабленной части контрола */ + + +/* Control Focus */ +$color-control-bg-focus: color($color-base-phantom l(33%)); /* #555555 hsl(0, 0%, 33%) */ /* Цвет фона контрола при фокусе */ +$color-control-bg-border-focus: color($color-base-phantom l(70%)); /* #B4B4B4 hsl(0, 0%, 70%) */ /* Цвет фона бордеров контрола при фокусе */ + + +/* Control Prism */ +$color-control-bg-border-prism: $color-base-project; /* #FFCB00 hsl(48, 100%, 50%) */ /* Цвет фона бордера офсетных выделений контрола */ + + +/* Control Shade */ +$color-control-bg-shade: color($color-base-phantom l(40%));/* Цвет фона тени контрола */ + + +/* Control Link */ +$color-control-bg-link-default: $color-base-path; /* #0042C2 hsl(220, 100%, 38%) */ /* Цвет фона ссылки */ +$color-control-bg-link-default-hover: color($color-base-path h(-2%) l(98%)); /* #0042C2 hsl(220, 100%, 38%) */ /* Цвет фона ссылки по ховеру */ + +$color-control-bg-border-link-default: color($color-base-path h(-1%) s(-36%) l(+27%)); /* #5689DA hsl(217, 64%, 60%) */ /* Цвет фона бордера ссылки */ +$color-control-bg-border-link-default-hover: color($color-base-path h(+2%) s(-40%) l(+61%)); /* hsl(218, 100%, 37%) F7F9FD hsl(220, 60%, 98%) */ /* Цвет фона бордера ссылки по ховеру */ + + + +/* Control Typo */ +$color-control-typo-primary: $color-base-base; /* #000000 hsl(0, 0%, 0%) */ /* Цвет основного текста контрола */ +$color-control-typo-secondary: color($color-base-base a(60%)); /* #707070 hsl(0, 0%, 44%) */ /* Цвет второстепеного текста контрола */ +$color-control-typo-ghost: color($color-base-base a(30%)); /* #E4E4E4 hsl(0, 0%, 89%) */ /* Цвет дополнительного текста контрола */ +$color-control-typo-passive: color($color-base-essential); /* #000 hsl(0, 0%, 0%) */ /* Цвет текста внутри акцентного блока */ +$color-control-typo-faint: color($color-base-base l(100%)); /* #000 hsl(0, 0%, 0%) */ /* Цвет текста внутри чекнутого блока */ +$color-control-typo-disable: color($color-base-phantom l(+60%)); /* #767676 hsl(0, 0%, 46%) */ /* Цвет основного текста неактивного контрола */ +$color-control-typo-link: $color-base-path; /* #0042C2 hsl(220, 100%, 38%)*/ /* Цвет ссылки */ + + + + +.theme_color_whitepapers-default { + + /* Control Default */ + --color-control-bg-default: $color-control-bg-default; /* Цвет фона контрола */ + --color-control-bg-default-hover: $color-control-bg-default-hover; /* Цвет фона контрола по ховеру */ + --color-control-bg-default-press: $color-control-bg-default-press; /* Цвет фона контрола по нажатию */ + --color-control-bg-default-disable: $color-control-bg-default-disable; /* Цвет фона неактивного контрола */ + + --color-control-bg-border-default: $color-control-bg-border-default; /* Цвет фона бордеров контрола */ + --color-control-bg-border-default-hover: $color-control-bg-border-default-hover; /* Цвет фона бордеров контрола по ховеру */ + --color-control-bg-border-default-press: $color-control-bg-border-default-press; /* Цвет фона бордеров контрола по нажатию */ + --color-control-bg-border-default-disable: $color-control-bg-border-default-disable; /* Цвет фона бордеров неактивного контрола */ + + + /* Control Blank */ + --color-control-bg-blank: $color-control-bg-blank; /* Цвет фона контрола */ + --color-control-bg-blank-hover: $color-control-bg-blank-hover; /* Цвет фона пустого контрола по ховеру */ + --color-control-bg-blank-disable: $color-control-bg-blank-disable; /* Цвет фона пустого неактивного контрола */ + + --color-control-bg-border-blank: $color-control-bg-border-blank; /* Цвет фона бордеров пустого котрола */ + --color-control-bg-border-blank-hover: $color-control-bg-border-blank-hover; /* Цвет фона бордеров пустого контрола по ховеру */ + --color-control-bg-border-blank-disable: $color-control-bg-border-blank-disable; /* Цвет фона бордеров пустого неактивного контрола */ + + + /* Control Heavy */ + --color-control-bg-heavy: $color-control-bg-border-heavy; /* Цвет уплотнённого фона контрола */ + --color-control-bg-heavy-hover: $color-control-bg-heavy-hover; /* Цвет уплотнённого фона контрола по ховеру */ + --color-control-bg-heavy-press: $color-control-bg-heavy-press; /* Цвет уплотнённого фона контрола по нажатию */ + + --color-control-bg-border-heavy: $color-control-bg-border-heavy; /* Цвет уплотнённого фона бордеров контрола */ + --color-control-bg-border-heavy-hover: $color-control-bg-border-heavy-hover; /* Цвет уплотнённого фона бордеров контрола по ховеру */ + --color-control-bg-border-heavy-press: $color-control-bg-border-heavy-press; /* Цвет уплотнённого фона бордеров контрола по нажатию */ + + + /* Control Pseudo */ + --color-control-bg-pseudo: $color-control-bg-pseudo; /* Цвет фона псевдо контрола */ + --color-control-bg-pseudo-hover: $color-control-bg-pseudo-hover; /* Цвет фона псевдо контрола по ховеру */ + --color-control-bg-border-pseudo: $color-control-bg-border-pseudo; /* Цвет фона псевдо котрола */ + + + /* Control Action */ + --color-control-bg-action: $color-control-bg-action; /* Цвет фона активного контрола */ + --color-control-bg-action-hover: $color-control-bg-action-hover; /* Цвет фона активного контрола по ховеру */ + --color-control-bg-action-press: $color-control-bg-action-press; /* Цвет фон активного контрола по нажатию */ + + + /* Control Passive */ + --color-control-bg-passive: $color-control-bg-passive; /* Цвет фона пассивной части контрола */ + + + /* Control Progress */ + --color-control-bg-progress: $color-control-bg-progress; /* Цвет фон активного контрола в прогрессе */ + --color-control-bg-progress-process: $color-control-bg-progress-process; /* Цвет фон активного контрола в прогрессе выполнения */ + + + /* Control Check */ + --color-control-bg-check: $color-control-bg-check; /* Цвет фона чекнутого контрола */ + --color-control-bg-check-press: $color-control-bg-check-press; /* Цвет фона чекнутого контрола по нажатию */ + --color-control-bg-check-hover: $color-control-bg-check-hover; /* Цвет фона чекнутого контрола по ховеру */ + --color-control-bg-check-disable: $color-control-bg-check-disable; /* Цвет фона чекнутого неактивного контрола */ + + --color-control-bg-border-check: $color-control-bg-border-check; /* Цвет фона бордеров чекнутого контрола */ + --color-control-bg-border-check-press: $color-control-bg-border-check-press; /* Цвет фона бордеров чекнутого контрола при фокусе по нажатию */ + --color-control-bg-border-check-hover: $color-control-bg-border-check-hover; /* Цвет фона бордеров чекнутого контрола по ховеру */ + + + /* Control Faint */ + --color-control-bg-faint: $color-control-bg-faint; /* Цвет фона ослабленной части контрола */ + --color-control-bg-faint-disable: $color-control-bg-faint-disable; /* Цвет фона ослабленной части контрола */ + + + /* Control Focus */ + --color-control-bg-focus: $color-control-bg-focus; /* Цвет фона контрола при фокусе */ + --color-control-bg-border-focus: $color-control-bg-border-focus; /* Цвет фона бордеров контрола при фокусе */ + + + /* Control Prism */ + --color-control-bg-border-prism: $color-control-bg-border-prism; /* Цвет фона бордера офсетных выделений контрола */ + + + /* Control Shade */ + --color-control-bg-shade: $color-control-bg-shade; /* Цвет фона тени контрола */ + + + /* Control Link */ + --color-control-bg-link-default: $color-control-bg-link-default; /* Цвет фона ссылки */ + --color-control-bg-link-default-hover: $color-control-bg-link-default-hover; /* Цвет фона ссылки по ховеру */ + --color-control-bg-border-link-default: $color-control-bg-border-link-default; /* Цвет фона бордера ссылки */ + --color-control-bg-border-link-default-hover: $color-control-bg-border-link-default-hover; /* Цвет фона бордера ссылки по ховеру */ + + + + /* Control Typo */ + --color-control-typo-primary: $color-control-typo-primary; /* Цвет основного текста контрола */ + --color-control-typo-secondary: $color-control-typo-secondary; /* Цвет второстепеного текста контрола */ + --color-control-typo-ghost: $color-control-typo-ghost; /* Цвет дополнительного текста контрола */ + --color-control-typo-passive: $color-control-typo-passive; /* Цвет текста внутри акцентного блока */ + --color-control-typo-faint: $color-control-typo-faint; /* Цвет текста внутри чекнутого блока */ + --color-control-typo-disable: $color-control-typo-disable; /* Цвет основного текста неактивного контрола */ + --color-control-typo-link: $color-control-typo-link; /* Цвет ссылки */ + +} diff --git a/theme/_control/theme_control_whitepaper-brand.css b/theme/_control/theme_control_whitepaper-brand.css new file mode 100755 index 0000000..a03b644 --- /dev/null +++ b/theme/_control/theme_control_whitepaper-brand.css @@ -0,0 +1,221 @@ +/* Base - базовые цвета от которых выстраивается вся политра */ +$color-base-base: hsl(0, 0%, 100%); /* Базовый цвет содержимого, от которого выстраиваются цвета текста, иконок, ... */ +$color-base-essential: hsl(212, 100%, 47%); /* Базовый цвет поверхностей */ +$color-base-project: hsl(0, 0%, 100%); /* Проектный цвет, от которого выстраивают акцентные состояния */ +$color-base-phantom: hsl(211, 100%, 35%); /* Тонирующий цвет, от которого выстраиватся бордеры, паранджа, ... */ +$color-base-path: hsl(0, 0%, 100%); /* Ссылочный цвет, от которого выстраиваются все их состояния */ +$color-base-success: hsl(158, 100%, 30%); /* Цвет успеха */ +$color-base-alert: hsl(0, 100%, 60%); /* Цвет ошибки */ +$color-base-warning: hsl(36, 100%, 50%); /* Цвет предупреждения */ +$color-base-normal: hsl(195, 13%, 88%); /* Цвет нейтральный */ +$color-base-system: hsl(208, 15%, 54%); /* Цвет системнный */ + + + +/* Смысловая политра цветов, наследуемая от основных цветов из блока Theme (изменяется при детальной настройки цветовой схемы) */ +/* Control Default */ +$color-control-bg-default: color($color-base-essential l(37%)); /* Цвет фона контрола */ +$color-control-bg-default-hover: color($color-base-essential l(35%)); /* Цвет фона контрола по ховеру */ +$color-control-bg-default-press: color($color-base-essential l(39%)); /* Цвет фона контрола по нажатию */ +$color-control-bg-default-disable: color($color-base-essential l(42%)); /* Цвет фона неактивного контрола */ + +$color-control-bg-border-default: color($color-base-essential l(37%)); /* Цвет фона бордеров котрола */ +$color-control-bg-border-default-hover: color($color-base-phantom a(65%)); /* Цвет фона бордеров контрола по ховеру */ +$color-control-bg-border-default-press: color($color-base-phantom a(70%)); /* Цвет фона бордеров контрола по нажатию */ +$color-control-bg-border-default-disable: color($color-base-phantom l(50%)); /* Цвет фона бордеров неактивного контрола */ + + +/* Control Blank */ +$color-control-bg-blank: color($color-base-essential l(37%)); /* Цвет фона пустого контрола */ +$color-control-bg-blank-hover: color($color-base-essential l(35%)); /* Цвет фона пустого контрола по ховеру */ +$color-control-bg-blank-disable: color($color-base-essential l(42%)); /* Цвет фона пустого неактивного контрола */ + +$color-control-bg-border-blank: color($color-base-essential l(35%)); /* Цвет фона бордеров пустого котрола */ +$color-control-bg-border-blank-hover: color($color-base-essential l(35%)); /* Цвет фона бордеров пустого контрола по ховеру */ +$color-control-bg-border-blank-disable: color($color-base-essential s(58) l(35%)); /* Цвет фона бордеров пустого неактивного контрола */ + + +/* Control Heavy */ +$color-control-bg-heavy: color($color-base-phantom l(90%)); /* Цвет уплотнённого фона котрола */ +$color-control-bg-heavy-hover: color($color-base-phantom l(85%)); /* Цвет уплотнённого фона контрола по ховеру */ +$color-control-bg-heavy-press: color($color-base-phantom l(80%)); /* Цвет уплотнённого фона контрола по нажатию */ + +$color-control-bg-border-heavy: color($color-base-phantom l(100%)); /* Цвет уплотнённого фона бордеров котрола */ +$color-control-bg-border-heavy-hover: color($color-base-phantom l(90%)); /* Цвет уплотнённого фона бордеров контрола по ховеру */ +$color-control-bg-border-heavy-press: color($color-base-phantom l(90%)); /* Цвет уплотнённого фона бордеров контрола по нажатию */ + + +/* Control Pseudo */ +$color-control-bg-pseudo: $color-base-essential; /* Цвет фона псевдо контрола */ +$color-control-bg-pseudo-hover: color($color-base-essential l(39%)); /* Цвет фона псевдо контрола по ховеру */ + +$color-control-bg-border-pseudo: color($color-base-essential l(35%)); /* Цвет фона псевдо котрола */ +$color-control-bg-border-pseudo-hover: color($color-base-essential l(35%)); /* Цвет фона псевдо котрола по ховеру */ + + +/* Control Action */ +$color-control-bg-action: $color-base-project; /* Цвет фона активного контрола */ +$color-control-bg-action-hover: color($color-base-project); /* Цвет фона активного контрола по ховеру */ +$color-control-bg-action-press: color($color-base-project); /* Цвет фон активного контрола по нажатию */ + + +/* Control Passive */ +$color-control-bg-passive: $color-base-essential; /* Цвет фона пассивной части контрола */ + +/* Control Progress */ +$color-control-bg-progress: $color-base-project; /* Цвет фон активного контрола в прогрессе */ +$color-control-bg-progress-process: color($color-base-project h(+2%)); /* Цвет фон активного контрола в прогрессе выполнения */ + + +/* Control Check */ +$color-control-bg-check: $color-base-project; /* Цвет фона чекнутого контрола */ +$color-control-bg-check-press: $color-base-project; /* Цвет фона чекнутого контрола по нажатию */ +$color-control-bg-check-hover: $color-base-project; /* Цвет фона чекнутого контрола по ховеру */ +$color-control-bg-check-disable: $color-base-project; /* Цвет фона чекнутого неактивного контрола */ + +$color-control-bg-border-check: color($color-base-project l(33%)); /* Цвет фона бордеров чекнутого контрола */ +$color-control-bg-border-check-press: color($color-base-project l(33%)); /* Цвет фона бордеров чекнутого контрола при фокусе по нажатию */ +$color-control-bg-border-check-hover: color($color-base-project l(33%)); /* Цвет фона бордеров чекнутого контрола по ховеру */ + + +/* Control Faint */ +$color-control-bg-faint: $color-base-essential; /* Цвет фона ослабленной части контрола */ +$color-control-bg-faint-disable: color($color-base-essential l(78%)); /* Цвет фона ослабленной части контрола */ + + +/* Control Focus */ +$color-control-bg-focus: $color-base-phantom; /* Цвет фона контрола при фокусе */ +$color-control-bg-border-focus: color($color-base-essential h(-9) s(100%) l(-3)); /* Цвет фона бордеров контрола при фокусе */ + + +/* Control Prism */ +$color-control-bg-border-prism: $color-base-project; /* Цвет фона бордера офсетных выделений контрола */ + + +/* Control Shade */ +$color-control-bg-shade: color($color-base-phantom l(40%));/* Цвет фона тени контрола */ + + +/* Control Link */ +$color-control-bg-link-default: $color-base-path; /* Цвет фона ссылки */ +$color-control-bg-link-default-hover: color($color-base-path a(20%)); /* Цвет фона ссылки по ховеру */ + +$color-control-bg-border-link-default: $color-base-path; /* Цвет фона бордера ссылки */ +$color-control-bg-border-link-default-hover: $color-base-path; /* Цвет фона бордера ссылки по ховеру */ + + + +/* Control Typo */ +$color-control-typo-primary: $color-base-base; /* Цвет основного текста контрола */ +$color-control-typo-secondary: color($color-base-base a(60%)); /* Цвет второстепеного текста контрола */ +$color-control-typo-ghost: color($color-base-base a(30%)); /* Цвет дополнительного текста контрола */ +$color-control-typo-passive: $color-base-essential; /* Цвет текста внутри акцентного блока */ +$color-control-typo-faint: $color-base-essential; /* Цвет текста внутри чекнутого блока */ +$color-control-typo-disable: color($color-base-phantom l(+60%)); /* Цвет основного текста неактивного контрола */ +$color-control-typo-link: $color-base-path; /* Цвет ссылки */ + + + + +.theme_color_whitepaper-brand { + + /* Control Default */ + --color-control-bg-default: $color-control-bg-default; /* Цвет фона контрола */ + --color-control-bg-default-hover: $color-control-bg-default-hover; /* Цвет фона контрола по ховеру */ + --color-control-bg-default-press: $color-control-bg-default-press; /* Цвет фона контрола по нажатию */ + --color-control-bg-default-disable: $color-control-bg-default-disable; /* Цвет фона неактивного контрола */ + + --color-control-bg-border-default: $color-control-bg-border-default; /* Цвет фона бордеров контрола */ + --color-control-bg-border-default-hover: $color-control-bg-border-default-hover; /* Цвет фона бордеров контрола по ховеру */ + --color-control-bg-border-default-press: $color-control-bg-border-default-press; /* Цвет фона бордеров контрола по нажатию */ + --color-control-bg-border-default-disable: $color-control-bg-border-default-disable; /* Цвет фона бордеров неактивного контрола */ + + + /* Control Blank */ + --color-control-bg-blank: $color-control-bg-blank; /* Цвет фона контрола */ + --color-control-bg-blank-hover: $color-control-bg-blank-hover; /* Цвет фона пустого контрола по ховеру */ + --color-control-bg-blank-disable: $color-control-bg-blank-disable; /* Цвет фона пустого неактивного контрола */ + + --color-control-bg-border-blank: $color-control-bg-border-blank; /* Цвет фона бордеров пустого котрола */ + --color-control-bg-border-blank-hover: $color-control-bg-border-blank-hover; /* Цвет фона бордеров пустого контрола по ховеру */ + --color-control-bg-border-blank-disable: $color-control-bg-border-blank-disable; /* Цвет фона бордеров пустого неактивного контрола */ + + + /* Control Heavy */ + --color-control-bg-heavy: $color-control-bg-border-heavy; /* Цвет уплотнённого фона контрола */ + --color-control-bg-heavy-hover: $color-control-bg-heavy-hover; /* Цвет уплотнённого фона контрола по ховеру */ + --color-control-bg-heavy-press: $color-control-bg-heavy-press; /* Цвет уплотнённого фона контрола по нажатию */ + + --color-control-bg-border-heavy: $color-control-bg-border-heavy; /* Цвет уплотнённого фона бордеров контрола */ + --color-control-bg-border-heavy-hover: $color-control-bg-border-heavy-hover; /* Цвет уплотнённого фона бордеров контрола по ховеру */ + --color-control-bg-border-heavy-press: $color-control-bg-border-heavy-press; /* Цвет уплотнённого фона бордеров контрола по нажатию */ + + + /* Control Pseudo */ + --color-control-bg-pseudo: $color-control-bg-pseudo; /* Цвет фона псевдо контрола */ + --color-control-bg-pseudo-hover: $color-control-bg-pseudo-hover; /* Цвет фона псевдо контрола по ховеру */ + --color-control-bg-border-pseudo: $color-control-bg-border-pseudo; /* Цвет фона псевдо котрола */ + + + /* Control Action */ + --color-control-bg-action: $color-control-bg-action; /* Цвет фона активного контрола */ + --color-control-bg-action-hover: $color-control-bg-action-hover; /* Цвет фона активного контрола по ховеру */ + --color-control-bg-action-press: $color-control-bg-action-press; /* Цвет фон активного контрола по нажатию */ + + + /* Control Passive */ + --color-control-bg-passive: $color-control-bg-passive; /* Цвет фона пассивной части контрола */ + + + /* Control Progress */ + --color-control-bg-progress: $color-control-bg-progress; /* Цвет фон активного контрола в прогрессе */ + --color-control-bg-progress-process: $color-control-bg-progress-process; /* Цвет фон активного контрола в прогрессе выполнения */ + + + /* Control Check */ + --color-control-bg-check: $color-control-bg-check; /* Цвет фона чекнутого контрола */ + --color-control-bg-check-press: $color-control-bg-check-press; /* Цвет фона чекнутого контрола по нажатию */ + --color-control-bg-check-hover: $color-control-bg-check-hover; /* Цвет фона чекнутого контрола по ховеру */ + --color-control-bg-check-disable: $color-control-bg-check-disable; /* Цвет фона чекнутого неактивного контрола */ + + --color-control-bg-border-check: $color-control-bg-border-check; /* Цвет фона бордеров чекнутого контрола */ + --color-control-bg-border-check-press: $color-control-bg-border-check-press; /* Цвет фона бордеров чекнутого контрола при фокусе по нажатию */ + --color-control-bg-border-check-hover: $color-control-bg-border-check-hover; /* Цвет фона бордеров чекнутого контрола по ховеру */ + + + /* Control Faint */ + --color-control-bg-faint: $color-control-bg-faint; /* Цвет фона ослабленной части контрола */ + --color-control-bg-faint-disable: $color-control-bg-faint-disable; /* Цвет фона ослабленной части контрола */ + + + /* Control Focus */ + --color-control-bg-focus: $color-control-bg-focus; /* Цвет фона контрола при фокусе */ + --color-control-bg-border-focus: $color-control-bg-border-focus; /* Цвет фона бордеров контрола при фокусе */ + + + /* Control Prism */ + --color-control-bg-border-prism: $color-control-bg-border-prism; /* Цвет фона бордера офсетных выделений контрола */ + + + /* Control Shade */ + --color-control-bg-shade: $color-control-bg-shade; /* Цвет фона тени контрола */ + + + /* Control Link */ + --color-control-bg-link-default: $color-control-bg-link-default; /* Цвет фона ссылки */ + --color-control-bg-link-default-hover: $color-control-bg-link-default-hover; /* Цвет фона ссылки по ховеру */ + --color-control-bg-border-link-default: $color-control-bg-border-link-default; /* Цвет фона бордера ссылки */ + --color-control-bg-border-link-default-hover: $color-control-bg-border-link-default-hover; /* Цвет фона бордера ссылки по ховеру */ + + + + /* Control Typo */ + --color-control-typo-primary: $color-control-typo-primary; /* Цвет основного текста контрола */ + --color-control-typo-secondary: $color-control-typo-secondary; /* Цвет второстепеного текста контрола */ + --color-control-typo-ghost: $color-control-typo-ghost; /* Цвет дополнительного текста контрола */ + --color-control-typo-passive: $color-control-typo-passive; /* Цвет текста внутри акцентного блока */ + --color-control-typo-faint: $color-control-typo-faint; /* Цвет текста внутри чекнутого блока */ + --color-control-typo-disable: $color-control-typo-disable; /* Цвет основного текста неактивного контрола */ + --color-control-typo-link: $color-control-typo-link; /* Цвет ссылки */ + +} diff --git a/theme/_control/theme_control_whitepaper_inverse.css b/theme/_control/theme_control_whitepaper_inverse.css new file mode 100755 index 0000000..0d1aa59 --- /dev/null +++ b/theme/_control/theme_control_whitepaper_inverse.css @@ -0,0 +1,221 @@ +/* Base - базовые цвета от которых выстраивается вся политра */ +$color-base-base: hsl(0, 0%, 100%); /* Базовый цвет содержимого, от которого выстраиваются цвета текста, иконок, ... */ +$color-base-essential: hsl(0, 0%, 0%); /* Базовый цвет поверхностей */ +$color-base-project: hsl(0, 0%, 100%); /* Проектный цвет, от которого выстраивают акцентные состояния */ +$color-base-phantom: hsl(0, 0%, 100%); /* Тонирующий цвет, от которого выстраиватся бордеры, паранджа, ... */ +$color-base-path: hsl(0, 0%, 100%); /* Ссылочный цвет, от которого выстраиваются все их состояния */ +$color-base-success: hsl(158, 100%, 30%); /* Цвет успеха */ +$color-base-alert: hsl(0, 100%, 60%); /* Цвет ошибки */ +$color-base-warning: hsl(36, 100%, 50%); /* Цвет предупреждения */ +$color-base-normal: hsl(195, 13%, 88%); /* Цвет нейтральный */ +$color-base-system: hsl(208, 15%, 54%); /* Цвет системнный */ + + + +/* Смысловая политра цветов, наследуемая от основных цветов из блока Theme (изменяется при детальной настройки цветовой схемы) */ +/* Control Default */ +$color-control-bg-default: color($color-base-essential l(26%)); /* Цвет фона контрола */ +$color-control-bg-default-hover: color($color-base-essential l(39%)); /* Цвет фона контрола по ховеру */ +$color-control-bg-default-press: color($color-base-essential l(39%)); /* Цвет фона контрола по нажатию */ +$color-control-bg-default-disable: color($color-base-essential l(18%)); /* Цвет фона неактивного контрола */ + +$color-control-bg-border-default: color($color-base-phantom a(50%)); /* Цвет фона бордеров котрола */ +$color-control-bg-border-default-hover: color($color-base-phantom a(65%)); /* Цвет фона бордеров контрола по ховеру */ +$color-control-bg-border-default-press: color($color-base-phantom a(70%)); /* Цвет фона бордеров контрола по нажатию */ +$color-control-bg-border-default-disable: color($color-base-phantom l(10%)); /* Цвет фона бордеров неактивного контрола */ + + +/* Control Blank */ +$color-control-bg-blank: color($color-base-essential l(26%)); /* Цвет фона пустого контрола */ +$color-control-bg-blank-hover: color($color-base-essential l(27%)); /* Цвет фона пустого контрола по ховеру */ +$color-control-bg-blank-disable: color($color-base-essential l(41%)); /* Цвет фона пустого неактивного контрола */ + +$color-control-bg-border-blank: color($color-base-phantom a(10%)); /* Цвет фона бордеров пустого котрола */ +$color-control-bg-border-blank-hover: color($color-base-phantom a(15%)); /* Цвет фона бордеров пустого контрола по ховеру */ +$color-control-bg-border-blank-disable: color($color-base-phantom a(25%)); /* Цвет фона бордеров пустого неактивного контрола */ + + +/* Control Heavy */ +$color-control-bg-heavy: $color-base-phantom; /* Цвет уплотнённого фона котрола */ +$color-control-bg-heavy-hover: $color-base-phantom; /* Цвет уплотнённого фона контрола по ховеру */ +$color-control-bg-heavy-press: $color-base-phantom; /* Цвет уплотнённого фона контрола по нажатию */ + +$color-control-bg-border-heavy: $color-base-phantom; /* Цвет уплотнённого фона бордеров котрола */ +$color-control-bg-border-heavy-hover: $color-base-phantom; /* Цвет уплотнённого фона бордеров контрола по ховеру */ +$color-control-bg-border-heavy-press: $color-base-phantom; /* Цвет уплотнённого фона бордеров контрола по нажатию */ + + +/* Control Pseudo */ +$color-control-bg-pseudo: $color-base-essential; /* Цвет фона псевдо контрола */ +$color-control-bg-pseudo-hover: color($color-base-essential l(39%)); /* Цвет фона псевдо контрола по ховеру */ + +$color-control-bg-border-pseudo: color($color-base-essential l(35%)); /* Цвет фона псевдо котрола */ +$color-control-bg-border-pseudo-hover: color($color-base-essential l(35%)); /* Цвет фона псевдо котрола по ховеру */ + + +/* Control Action */ +$color-control-bg-action: $color-base-project; /* Цвет фона активного контрола */ +$color-control-bg-action-hover: color($color-base-project); /* Цвет фона активного контрола по ховеру */ +$color-control-bg-action-press: color($color-base-project); /* Цвет фон активного контрола по нажатию */ + + +/* Control Passive */ +$color-control-bg-passive: $color-base-essential; /* Цвет фона пассивной части контрола */ + +/* Control Progress */ +$color-control-bg-progress: $color-base-project; /* Цвет фон активного контрола в прогрессе */ +$color-control-bg-progress-process: color($color-base-project h(+2%)); /* Цвет фон активного контрола в прогрессе выполнения */ + + +/* Control Check */ +$color-control-bg-check: $color-base-project; /* Цвет фона чекнутого контрола */ +$color-control-bg-check-press: $color-base-project; /* Цвет фона чекнутого контрола по нажатию */ +$color-control-bg-check-hover: $color-base-project; /* Цвет фона чекнутого контрола по ховеру */ +$color-control-bg-check-disable: $color-base-project; /* Цвет фона чекнутого неактивного контрола */ + +$color-control-bg-border-check: color($color-base-project l(33%)); /* Цвет фона бордеров чекнутого контрола */ +$color-control-bg-border-check-press: color($color-base-project l(33%)); /* Цвет фона бордеров чекнутого контрола при фокусе по нажатию */ +$color-control-bg-border-check-hover: color($color-base-project l(33%)); /* Цвет фона бордеров чекнутого контрола по ховеру */ + + +/* Control Faint */ +$color-control-bg-faint: $color-base-essential; /* Цвет фона ослабленной части контрола */ +$color-control-bg-faint-disable: color($color-base-essential l(78%)); /* Цвет фона ослабленной части контрола */ + + +/* Control Focus */ +$color-control-bg-focus: $color-base-project; /* Цвет фона контрола при фокусе */ +$color-control-bg-border-focus: color($color-base-essential l(45%)); /* Цвет фона бордеров контрола при фокусе */ + + +/* Control Prism */ +$color-control-bg-border-prism: $color-base-project; /* Цвет фона бордера офсетных выделений контрола */ + + +/* Control Shade */ +$color-control-bg-shade: color($color-base-phantom l(40%));/* Цвет фона тени контрола */ + + +/* Control Link */ +$color-control-bg-link-default: $color-base-path; /* Цвет фона ссылки */ +$color-control-bg-link-default-hover: color($color-base-path a(20%)); /* Цвет фона ссылки по ховеру */ + +$color-control-bg-border-link-default: $color-base-path; /* Цвет фона бордера ссылки */ +$color-control-bg-border-link-default-hover: $color-base-path; /* Цвет фона бордера ссылки по ховеру */ + + + +/* Control Typo */ +$color-control-typo-primary: $color-base-base; /* Цвет основного текста контрола */ +$color-control-typo-secondary: color($color-base-base a(60%)); /* Цвет второстепеного текста контрола */ +$color-control-typo-ghost: color($color-base-base a(30%)); /* Цвет дополнительного текста контрола */ +$color-control-typo-passive: $color-base-essential; /* Цвет текста внутри акцентного блока */ +$color-control-typo-faint: $color-base-essential; /* Цвет текста внутри чекнутого блока */ +$color-control-typo-disable: color($color-base-phantom a(60%)); /* Цвет основного текста неактивного контрола */ +$color-control-typo-link: $color-base-path; /* Цвет ссылки */ + + + + +.theme_color_whitepaper-inverse { + + /* Control Default */ + --color-control-bg-default: $color-control-bg-default; /* Цвет фона контрола */ + --color-control-bg-default-hover: $color-control-bg-default-hover; /* Цвет фона контрола по ховеру */ + --color-control-bg-default-press: $color-control-bg-default-press; /* Цвет фона контрола по нажатию */ + --color-control-bg-default-disable: $color-control-bg-default-disable; /* Цвет фона неактивного контрола */ + + --color-control-bg-border-default: $color-control-bg-border-default; /* Цвет фона бордеров контрола */ + --color-control-bg-border-default-hover: $color-control-bg-border-default-hover; /* Цвет фона бордеров контрола по ховеру */ + --color-control-bg-border-default-press: $color-control-bg-border-default-press; /* Цвет фона бордеров контрола по нажатию */ + --color-control-bg-border-default-disable: $color-control-bg-border-default-disable; /* Цвет фона бордеров неактивного контрола */ + + + /* Control Blank */ + --color-control-bg-blank: $color-control-bg-blank; /* Цвет фона контрола */ + --color-control-bg-blank-hover: $color-control-bg-blank-hover; /* Цвет фона пустого контрола по ховеру */ + --color-control-bg-blank-disable: $color-control-bg-blank-disable; /* Цвет фона пустого неактивного контрола */ + + --color-control-bg-border-blank: $color-control-bg-border-blank; /* Цвет фона бордеров пустого котрола */ + --color-control-bg-border-blank-hover: $color-control-bg-border-blank-hover; /* Цвет фона бордеров пустого контрола по ховеру */ + --color-control-bg-border-blank-disable: $color-control-bg-border-blank-disable; /* Цвет фона бордеров пустого неактивного контрола */ + + + /* Control Heavy */ + --color-control-bg-heavy: $color-control-bg-border-heavy; /* Цвет уплотнённого фона контрола */ + --color-control-bg-heavy-hover: $color-control-bg-heavy-hover; /* Цвет уплотнённого фона контрола по ховеру */ + --color-control-bg-heavy-press: $color-control-bg-heavy-press; /* Цвет уплотнённого фона контрола по нажатию */ + + --color-control-bg-border-heavy: $color-control-bg-border-heavy; /* Цвет уплотнённого фона бордеров контрола */ + --color-control-bg-border-heavy-hover: $color-control-bg-border-heavy-hover; /* Цвет уплотнённого фона бордеров контрола по ховеру */ + --color-control-bg-border-heavy-press: $color-control-bg-border-heavy-press; /* Цвет уплотнённого фона бордеров контрола по нажатию */ + + + /* Control Pseudo */ + --color-control-bg-pseudo: $color-control-bg-pseudo; /* Цвет фона псевдо контрола */ + --color-control-bg-pseudo-hover: $color-control-bg-pseudo-hover; /* Цвет фона псевдо контрола по ховеру */ + --color-control-bg-border-pseudo: $color-control-bg-border-pseudo; /* Цвет фона псевдо котрола */ + + + /* Control Action */ + --color-control-bg-action: $color-control-bg-action; /* Цвет фона активного контрола */ + --color-control-bg-action-hover: $color-control-bg-action-hover; /* Цвет фона активного контрола по ховеру */ + --color-control-bg-action-press: $color-control-bg-action-press; /* Цвет фон активного контрола по нажатию */ + + + /* Control Passive */ + --color-control-bg-passive: $color-control-bg-passive; /* Цвет фона пассивной части контрола */ + + + /* Control Progress */ + --color-control-bg-progress: $color-control-bg-progress; /* Цвет фон активного контрола в прогрессе */ + --color-control-bg-progress-process: $color-control-bg-progress-process; /* Цвет фон активного контрола в прогрессе выполнения */ + + + /* Control Check */ + --color-control-bg-check: $color-control-bg-check; /* Цвет фона чекнутого контрола */ + --color-control-bg-check-press: $color-control-bg-check-press; /* Цвет фона чекнутого контрола по нажатию */ + --color-control-bg-check-hover: $color-control-bg-check-hover; /* Цвет фона чекнутого контрола по ховеру */ + --color-control-bg-check-disable: $color-control-bg-check-disable; /* Цвет фона чекнутого неактивного контрола */ + + --color-control-bg-border-check: $color-control-bg-border-check; /* Цвет фона бордеров чекнутого контрола */ + --color-control-bg-border-check-press: $color-control-bg-border-check-press; /* Цвет фона бордеров чекнутого контрола при фокусе по нажатию */ + --color-control-bg-border-check-hover: $color-control-bg-border-check-hover; /* Цвет фона бордеров чекнутого контрола по ховеру */ + + + /* Control Faint */ + --color-control-bg-faint: $color-control-bg-faint; /* Цвет фона ослабленной части контрола */ + --color-control-bg-faint-disable: $color-control-bg-faint-disable; /* Цвет фона ослабленной части контрола */ + + + /* Control Focus */ + --color-control-bg-focus: $color-control-bg-focus; /* Цвет фона контрола при фокусе */ + --color-control-bg-border-focus: $color-control-bg-border-focus; /* Цвет фона бордеров контрола при фокусе */ + + + /* Control Prism */ + --color-control-bg-border-prism: $color-control-bg-border-prism; /* Цвет фона бордера офсетных выделений контрола */ + + + /* Control Shade */ + --color-control-bg-shade: $color-control-bg-shade; /* Цвет фона тени контрола */ + + + /* Control Link */ + --color-control-bg-link-default: $color-control-bg-link-default; /* Цвет фона ссылки */ + --color-control-bg-link-default-hover: $color-control-bg-link-default-hover; /* Цвет фона ссылки по ховеру */ + --color-control-bg-border-link-default: $color-control-bg-border-link-default; /* Цвет фона бордера ссылки */ + --color-control-bg-border-link-default-hover: $color-control-bg-border-link-default-hover; /* Цвет фона бордера ссылки по ховеру */ + + + + /* Control Typo */ + --color-control-typo-primary: $color-control-typo-primary; /* Цвет основного текста контрола */ + --color-control-typo-secondary: $color-control-typo-secondary; /* Цвет второстепеного текста контрола */ + --color-control-typo-ghost: $color-control-typo-ghost; /* Цвет дополнительного текста контрола */ + --color-control-typo-passive: $color-control-typo-passive; /* Цвет текста внутри акцентного блока */ + --color-control-typo-faint: $color-control-typo-faint; /* Цвет текста внутри чекнутого блока */ + --color-control-typo-disable: $color-control-typo-disable; /* Цвет основного текста неактивного контрола */ + --color-control-typo-link: $color-control-typo-link; /* Цвет ссылки */ + +}