Содержание статьи
Основные цвета
Эти цвета наиболее часто отображаются в вашем приложении. Они могут представлять активные состояния, элементы акцента или цвет текста.
Вторичные цвета являются необязательными, но они предоставляют больше возможностей отличить ваш продукт. Эти цвета используются реже для выделения или выделения элементов. Вторичные и третичные цветовые палитры часто используются в сложных продуктах.
Оттенки
Используйте первичную или вторичную палитру для создания оттенков. В разделе тем я покажу, как мы справились с этим.
Сохраняйте свою цветовую палитру настолько простой, насколько это возможно потому что ее легко Поддерживайте и масштабируйте свою систему проектирования с помощью библиотеки компонентов, а также старайтесь разумно использовать оттенки и цвета для согласованности и масштабируемости.
«Простое может быть сложнее, чем сложное: вам нужно усердно работать, чтобы очистить свое мышление, чтобы сделать его простым. Но в конце концов это того стоит, потому что, добравшись туда, вы сможете сдвинуть горы ». — Стив Джобс.
Когда дело доходит до именования цветовых переменных, существует два основных подхода: семантический и декларативный. Ни один из них не ошибается.
Семантический подход лучше работает для массивных и масштабируемых систем проектирования, тогда как декларативный подход используется для небольших независимых модулей.
Семантическое именование — «Что оно представляет? ”
Каждый компонент в вашей системе имеет различные состояния, такие как начальный, активный, ошибка, успех, зависание и т. Д. Каждое состояние может быть представлено разными цветами, и здесь соглашение о наименовании может пригодиться. Чтобы это произошло, мы применили тематический подход. Для каждого состояния элемента мы использовали разные темы, представленные разными цветами.
const colorPalette = {
primary: '# 4040FF',
вторичный: '# A640FF',
третичный: '# FF40DC',
primaryForeground: '# 333333',
primaryForeground: '# 333333',
tertiaryForeground: '# 444444',
primaryBackground: '#FFFFFF',
primaryBackground: '#FFFFFF',
tertiaryBackground: '# F3F3F3',
active: '#FFFFFF',
предупреждение: '# FF4040'
}
Декларативное именование — «Что это?»
Вы можете использовать декларативное именование для компонентов, которые используются независимо от основной системы. Он действительно прост в использовании и будет инкапсулирован из вашей основной цветовой палитры.
const colorPalette = {
white: '#FFFFFF',
красный: '# FF4040',
black: '# 000000'
}
После того, как вы создали необходимую цветовую палитру, вы можете использовать ее в системе дизайна и устанавливать значения палитры в свойствах CSS в зависимости от ваших тем. В Rene мы используем стилевые компоненты для тематики. Я могу заверить вас, что эти принципы будут работать для других соглашений, таких как переменные CSS, модули CSS и т. Д.
Давайте рассмотрим компонент Tree-Element :
Начальная тема
цвет: primaryForeground, // # 333333 [19459028ground] фон: основной , // #FFFFFF
borderWidth: '1px',
borderStyle: 'solid',
borderColor: primary // # 4040FF
};
Основная тема
color: active, // #FFFFFF
background: primary, // # 4040FF
borderWidth: '1px',
borderStyle: 'solid',
borderColor: primary / / # 4040FF
};
Как вы можете видеть, мы создали две разные темы для описания двух разных состояний компонентов, разница между ними только в значениях палитры.
Мы Также обнаружено, что использование объектов для описания темы очень удобно, и этот подход можно использовать для описания ошибки, успеха или других состояний элемента.
Окончательный стиль объекта, который будет скомпилирован в чистый CSS, будет выглядеть this:
const style = {
color: theme.color,
background: theme.background,
borderWidth: theme.borderWidth,
borderStyle: theme.borderStyle ,
borderColor: theme.borderColor
};
Если вы хотите изменить основной тема элемента в вторичную, вам нужно только передать определенное свойство:
React component ->
цвет: активный, // #FFFFFF
фон: дополнительный, // # A640FF
borderWidth: '1px',
borderStyle: 'solid',
borderColor: Secondary // # A640FF
};
[Простыекакэто:стилизоватькомпонентыНокакяужеупоминалвышевыдолжныбытьосторожнысназваниямицветовНапримересливыиспользуетедекларативныйспособописанияактивногоцветатакогокакбелый(#FFFFFF)иприменяетеегоповсеместновсвоихтемахдлясвойствразличныхкомпонентов(напримерграницзначковицветовтекста)вампотребуетсяизменитьеговручнуювездекактольковырешитеизменитьзначениецветовойпалитрысбелого(#FFFFFF)надругойцвет
const secondTheme = {
цвет: белый, // #FFFFFF ... другие объявления CSS
};
Тематические оттенки
Для создания оттенков мы используем первичные или вторичные цвета и меняем только параметр альфа. Вы также можете использовать третичные цвета, но помните правило простоты. Чтобы создать редактируемое состояние для компонента Tree-Element, мы использовали простую библиотеку цветов, и вы можете сделать то же самое с чистым CSS, используя альфа-параметр или функцию транспарентизации SCSS.
Editable Theme
primaryOpacity: 0,50, [1945primaryOpacity:025
} const backgroundColor = color (primary)
.alpha (primaryOpacity)
.rgb ()
.string (); const editableTheme = {
color: styles.active,
background: backgroundColor
}; // SCSS
$ primaryOpacity: 0.5; .selector {
фон: транспарентизация ($ primaryForeground, $ primaryOpaci ти);
}
Вот как мы используем цвета в нашей системе проектирования. Мы многое рассмотрели по этой теме, такие как соглашения об именах, цветовая палитра, темы и оттенки. Помнить! Чтобы создать масштабируемую систему проектирования, постарайтесь сделать ее простой
Надеюсь, вы нашли эту статью полезной! Если у вас есть отзывы, вопросы, дайте нам знать в комментариях, мы будем рады ответить! Не стесняйтесь связаться со мной в Твиттере.
Посмотрите наши следующие статьи в серии, мы расскажем о типографии, макете, интервале, значках и многом другом.
(Пока оценок нет)
Загрузка...
