Брендирование и темизация системы являются важными аспектами в создании уникального пользовательского опыта. Стандартный интерфейс "Первой Формы" можно перенастроить под требования и бренд каждой системы с учетом предпочтения пользователей относительно светлой или темной темы, цвета элементов, использования прозрачных оттенков, выбора цвета шрифта, иконок, настройки прозрачности кнопок и т.д.
Для хранения настроек и данных, связанных с дизайном и визуальным представлением пользовательского интерфейса, используется файл ui.json. Он доступен в публичной папке приложения при старте приложения, получить его можно по адресу: https://адрес_1Формы/ui.json.
Обновить настройки файла ui.json возможно с помощью пользовательских настроек ui-custom-palette (Палитра темизации) и ui-custom-tokens (Стилевые переменные).
Пример темизации, светлая тема |
Пример темизации, темная тема |
|---|---|
Пример темизации, светлая тема |
Пример темизации, темная тема |
ui-custom-palette
Хранение палитры для темизации в JSON-формате.
Цветовая палитра
{"white":{"white":{"description":"System color","value":"#ffffff"}},"black":{"black":{"description":"System color","value":"#ffffff"}},"red":{"red-50":{"description":"","value":"#ffffff"},"red-100":{"description":"","value":"#ffffff"},"red-150":{"description":"","value":"#ffffff"},"red-200":{"description":"","value":"#ffffff"},"red-250":{"description":"","value":"#ffffff"},"red-300":{"description":"","value":"#ffffff"},"red-400":{"description":"","value":"#ffffff"},"red-500":{"description":"","value":"#ffffff"},"red-600":{"description":"","value":"#ffffff"},"red-700":{"description":"","value":"#ffffff"},"red-800":{"description":"","value":"#ffffff"},"red-850":{"description":"","value":"#ffffff"},"red-900":{"description":"","value":"#ffffff"},"red-950":{"description":"","value":"#ffffff"},"red-1000":{"description":"","value":"#ffffff"}},"orange":{"orange-50":{"description":"","value":"#ffffff"},"orange-100":{"description":"","value":"#ffffff"},"orange-150":{"description":"","value":"#ffffff"},"orange-200":{"description":"","value":"#ffffff"},"orange-250":{"description":"","value":"#ffffff"},"orange-300":{"description":"","value":"#ffffff"},"orange-400":{"description":"","value":"#ffffff"},"orange-500":{"description":"","value":"#ffffff"},"orange-600":{"description":"","value":"#ffffff"},"orange-700":{"description":"","value":"#ffffff"},"orange-800":{"description":"","value":"#ffffff"},"orange-850":{"description":"","value":"#ffffff"},"orange-900":{"description":"","value":"#ffffff"},"orange-950":{"description":"","value":"#ffffff"},"orange-1000":{"description":"","value":"#ffffff"}},"yellow":{"yellow-50":{"description":"","value":"#ffffff"},"yellow-100":{"description":"","value":"#ffffff"},"yellow-150":{"description":"","value":"#ffffff"},"yellow-200":{"description":"","value":"#ffffff"},"yellow-250":{"description":"","value":"#ffffff"},"yellow-300":{"description":"","value":"#ffffff"},"yellow-400":{"description":"","value":"#ffffff"},"yellow-500":{"description":"","value":"#ffffff"},"yellow-600":{"description":"","value":"#ffffff"},"yellow-700":{"description":"","value":"#ffffff"},"yellow-800":{"description":"","value":"#ffffff"},"yellow-850":{"description":"","value":"#ffffff"},"yellow-900":{"description":"","value":"#ffffff"},"yellow-950":{"description":"","value":"#ffffff"},"yellow-1000":{"description":"","value":"#ffffff"}},"lime":{"lime-50":{"description":"","value":"#ffffff"},"lime-100":{"description":"","value":"#ffffff"},"lime-150":{"description":"","value":"#ffffff"},"lime-200":{"description":"","value":"#ffffff"},"lime-250":{"description":"","value":"#ffffff"},"lime-300":{"description":"","value":"#ffffff"},"lime-400":{"description":"","value":"#ffffff"},"lime-500":{"description":"","value":"#ffffff"},"lime-600":{"description":"","value":"#ffffff"},"lime-700":{"description":"","value":"#ffffff"},"lime-800":{"description":"","value":"#ffffff"},"lime-850":{"description":"","value":"#ffffff"},"lime-900":{"description":"","value":"#ffffff"},"lime-950":{"description":"","value":"#ffffff"},"lime-1000":{"description":"","value":"#ffffff"}},"green":{"green-50":{"description":"","value":"#ffffff"},"green-100":{"description":"","value":"#ffffff"},"green-150":{"description":"","value":"#ffffff"},"green-200":{"description":"","value":"#ffffff"},"green-250":{"description":"","value":"#ffffff"},"green-300":{"description":"","value":"#ffffff"},"green-400":{"description":"","value":"#ffffff"},"green-500":{"description":"","value":"#ffffff"},"green-600":{"description":"","value":"#ffffff"},"green-700":{"description":"","value":"#ffffff"},"green-800":{"description":"","value":"#ffffff"},"green-850":{"description":"","value":"#ffffff"},"green-900":{"description":"","value":"#ffffff"},"green-950":{"description":"","value":"#ffffff"},"green-1000":{"description":"","value":"#ffffff"}},"mint":{"mint-50":{"description":"","value":"#ffffff"},"mint-100":{"description":"","value":"#ffffff"},"mint-150":{"description":"","value":"#ffffff"},"mint-200":{"description":"","value":"#ffffff"},"mint-250":{"description":"","value":"#ffffff"},"mint-300":{"description":"1F Brand color","value":"#ffffff"},"mint-400":{"description":"","value":"#ffffff"},"mint-500":{"description":"","value":"#ffffff"},"mint-600":{"description":"","value":"#ffffff"},"mint-700":{"description":"","value":"#ffffff"},"mint-800":{"description":"","value":"#ffffff"},"mint-850":{"description":"","value":"#ffffff"},"mint-900":{"description":"","value":"#ffffff"},"mint-950":{"description":"","value":"#ffffff"},"mint-1000":{"description":"","value":"#ffffff"}},"cyan":{"cyan-50":{"description":"","value":"#ffffff"},"cyan-100":{"description":"","value":"#ffffff"},"cyan-150":{"description":"","value":"#ffffff"},"cyan-200":{"description":"","value":"#ffffff"},"cyan-250":{"description":"","value":"#ffffff"},"cyan-300":{"description":"","value":"#ffffff"},"cyan-400":{"description":"","value":"#ffffff"},"cyan-500":{"description":"","value":"#ffffff"},"cyan-600":{"description":"","value":"#ffffff"},"cyan-700":{"description":"","value":"#ffffff"},"cyan-800":{"description":"","value":"#ffffff"},"cyan-850":{"description":"","value":"#ffffff"},"cyan-900":{"description":"","value":"#ffffff"},"cyan-950":{"description":"","value":"#ffffff"},"cyan-1000":{"description":"","value":"#ffffff"}},"steelblue":{"steelblue-50":{"description":"","value":"#ffffff"},"steelblue-100":{"description":"","value":"#ffffff"},"steelblue-150":{"description":"","value":"#ffffff"},"steelblue-200":{"description":"","value":"#ffffff"},"steelblue-250":{"description":"","value":"#ffffff"},"steelblue-300":{"description":"","value":"#ffffff"},"steelblue-400":{"description":"","value":"#ffffff"},"steelblue-500":{"description":"","value":"#ffffff"},"steelblue-600":{"description":"","value":"#ffffff"},"steelblue-700":{"description":"","value":"#ffffff"},"steelblue-800":{"description":"","value":"#ffffff"},"steelblue-850":{"description":"","value":"#ffffff"},"steelblue-900":{"description":"","value":"#ffffff"},"steelblue-950":{"description":"","value":"#ffffff"},"steelblue-1000":{"description":"","value":"#ffffff"}},"blue":{"blue-50":{"description":"","value":"#ffffff"},"blue-100":{"description":"","value":"#ffffff"},"blue-150":{"description":"","value":"#ffffff"},"blue-200":{"description":"","value":"#ffffff"},"blue-250":{"description":"","value":"#ffffff"},"blue-300":{"description":"","value":"#ffffff"},"blue-400":{"description":"","value":"#ffffff"},"blue-500":{"description":"","value":"#ffffff"},"blue-600":{"description":"","value":"#ffffff"},"blue-700":{"description":"1F Brand color","value":"#ffffff"},"blue-800":{"description":"","value":"#ffffff"},"blue-850":{"description":"","value":"#ffffff"},"blue-900":{"description":"","value":"#ffffff"},"blue-950":{"description":"1F Brand color","value":"#ffffff"},"blue-1000":{"description":"","value":"#ffffff"}},"purple":{"purple-50":{"description":"","value":"#ffffff"},"purple-100":{"description":"","value":"#ffffff"},"purple-150":{"description":"","value":"#ffffff"},"purple-200":{"description":"","value":"#ffffff"},"purple-250":{"description":"","value":"#ffffff"},"purple-300":{"description":"","value":"#ffffff"},"purple-400":{"description":"","value":"#ffffff"},"purple-500":{"description":"","value":"#ffffff"},"purple-600":{"description":"","value":"#ffffff"},"purple-700":{"description":"","value":"#ffffff"},"purple-800":{"description":"","value":"#ffffff"},"purple-850":{"description":"","value":"#ffffff"},"purple-900":{"description":"","value":"#ffffff"},"purple-950":{"description":"","value":"#ffffff"},"purple-1000":{"description":"","value":"#ffffff"}},"magenta":{"magenta-50":{"description":"","value":"#ffffff"},"magenta-100":{"description":"","value":"#ffffff"},"magenta-150":{"description":"","value":"#ffffff"},"magenta-200":{"description":"","value":"#ffffff"},"magenta-250":{"description":"","value":"#ffffff"},"magenta-300":{"description":"","value":"#ffffff"},"magenta-400":{"description":"","value":"#ffffff"},"magenta-500":{"description":"","value":"#ffffff"},"magenta-600":{"description":"","value":"#ffffff"},"magenta-700":{"description":"","value":"#ffffff"},"magenta-800":{"description":"","value":"#ffffff"},"magenta-850":{"description":"","value":"#ffffff"},"magenta-900":{"description":"","value":"#ffffff"},"magenta-950":{"description":"","value":"#ffffff"},"magenta-1000":{"description":"","value":"#ffffff"}},"pink":{"pink-50":{"description":"","value":"#ffffff"},"pink-100":{"description":"","value":"#ffffff"},"pink-150":{"description":"","value":"#ffffff"},"pink-200":{"description":"","value":"#ffffff"},"pink-250":{"description":"","value":"#ffffff"},"pink-300":{"description":"","value":"#ffffff"},"pink-400":{"description":"","value":"#ffffff"},"pink-500":{"description":"","value":"#ffffff"},"pink-600":{"description":"","value":"#ffffff"},"pink-700":{"description":"","value":"#ffffff"},"pink-800":{"description":"","value":"#ffffff"},"pink-850":{"description":"","value":"#ffffff"},"pink-900":{"description":"","value":"#ffffff"},"pink-950":{"description":"","value":"#ffffff"},"pink-1000":{"description":"","value":"#ffffff"}},"grey":{"grey-50":{"description":"","value":"#ffffff"},"grey-100":{"description":"","value":"#ffffff"},"grey-150":{"description":"","value":"#ffffff"},"grey-200":{"description":"","value":"#ffffff"},"grey-250":{"description":"","value":"#ffffff"},"grey-300":{"description":"","value":"#ffffff"},"grey-400":{"description":"","value":"#ffffff"},"grey-500":{"description":"","value":"#ffffff"},"grey-600":{"description":"","value":"#ffffff"},"grey-700":{"description":"","value":"#ffffff"},"grey-800":{"description":"","value":"#ffffff"},"grey-850":{"description":"","value":"#ffffff"},"grey-900":{"description":"","value":"#ffffff"},"grey-915":{"description":"","value":"#ffffff"},"grey-925":{"description":"","value":"#ffffff"},"grey-950":{"description":"","value":"#ffffff"},"grey-975":{"description":"","value":"#ffffff"},"grey-1000":{"description":"","value":"#ffffff"}},"coolgrey":{"coolgrey-50":{"description":"","value":"#ffffff"},"coolgrey-100":{"description":"","value":"#ffffff"},"coolgrey-150":{"description":"","value":"#ffffff"},"coolgrey-200":{"description":"","value":"#ffffff"},"coolgrey-250":{"description":"","value":"#ffffff"},"coolgrey-300":{"description":"","value":"#ffffff"},"coolgrey-400":{"description":"","value":"#ffffff"},"coolgrey-500":{"description":"","value":"#ffffff"},"coolgrey-600":{"description":"","value":"#ffffff"},"coolgrey-700":{"description":"","value":"#ffffff"},"coolgrey-800":{"description":"","value":"#ffffff"},"coolgrey-850":{"description":"","value":"#ffffff"},"coolgrey-900":{"description":"","value":"#ffffff"},"coolgrey-950":{"description":"","value":"#ffffff"},"coolgrey-1000":{"description":"","value":"#ffffff"}},"brown":{"brown-50":{"description":"","value":"#ffffff"},"brown-100":{"description":"","value":"#ffffff"},"brown-150":{"description":"","value":"#ffffff"},"brown-200":{"description":"","value":"#ffffff"},"brown-250":{"description":"","value":"#ffffff"},"brown-300":{"description":"","value":"#ffffff"},"brown-400":{"description":"","value":"#ffffff"},"brown-500":{"description":"","value":"#ffffff"},"brown-600":{"description":"","value":"#ffffff"},"brown-700":{"description":"","value":"#ffffff"},"brown-800":{"description":"","value":"#ffffff"},"brown-850":{"description":"","value":"#ffffff"},"brown-900":{"description":"","value":"#ffffff"},"brown-950":{"description":"","value":"#ffffff"},"brown-1000":{"description":"","value":"#ffffff"}},"hazel":{"hazel-50":{"description":"","value":"#ffffff"},"hazel-100":{"description":"","value":"#ffffff"},"hazel-150":{"description":"","value":"#ffffff"},"hazel-200":{"description":"","value":"#ffffff"}}} |
ui-custom-tokens
Стилевые переменные для темизации в JSON-формате.
|
|
|---|---|
Стилевые переменные, светлая тема |
Стилевые переменные, темная тема |
{"colors":{"light":{"base":{"primary":{"description":"","value":"blue-700"},"info":{"description":"","value":"blue-700"},"success":{"description":"","value":"green-600"},"warning":{"description":"","value":"orange-700"},"danger":{"description":"","value":"red-700"},"default":{"description":"","value":"coolgrey-700"}},"onbase":{"primary":{"description":"","value":"blue-100"},"info":{"description":"","value":"blue-100"},"success":{"description":"","value":"green-100"},"warning":{"description":"","value":"orange-100"},"danger":{"description":"","value":"red-100"},"default":{"description":"","value":"coolgrey-100"}},"container":{"primary":{"description":"","value":"blue-150"},"info":{"description":"","value":"blue-150"},"success":{"description":"","value":"green-150"},"warning":{"description":"","value":"orange-150"},"danger":{"description":"","value":"red-150"},"default":{"description":"","value":"coolgrey-150"}},"oncontainer":{"primary":{"description":"","value":"blue-850"},"info":{"description":"","value":"blue-850"},"success":{"description":"","value":"green-850"},"warning":{"description":"","value":"orange-850"},"danger":{"description":"","value":"red-900"},"default":{"description":"","value":"coolgrey-850"}},"onsurface":{"primary":{"description":"","value":"black","transparency":87},"secondary":{"description":"","value":"black","transparency":60},"tertiary":{"description":"","value":"black","transparency":38}},"onsurfaceglobal":{"primary":{"description":"","value":"black","transparency":87},"secondary":{"description":"","value":"black","transparency":60},"tertiary":{"description":"","value":"black","transparency":38}},"onsurfaceinverse":{"primary":{"description":"","value":"white","transparency":98},"secondary":{"description":"","value":"white","transparency":60},"tertiary":{"description":"","value":"white","transparency":38}},"onsurfaceinverseglobal":{"primary":{"description":"","value":"white","transparency":98},"secondary":{"description":"","value":"white","transparency":60},"tertiary":{"description":"","value":"white","transparency":38}},"states":{"hover":{"description":"","value":"purple-250","transparency":8},"click":{"description":"","value":"purple-250","transparency":12},"selected":{"description":"","value":"purple-250","transparency":4}},"outline":{"base":{"description":"","value":"coolgrey-850","transparency":32},"deep":{"description":"","value":"coolgrey-850","transparency":70},"shallow":{"description":"","value":"coolgrey-850","transparency":12}},"surface":{"zero":{"description":"","value":"white"},"one":{"description":"","value":"white","shadowMode":1},"two":{"description":"","value":"white","shadowMode":2},"three":{"description":"","value":"white","shadowMode":3}},"surfaceinverse":{"zero":{"description":"","value":"grey-1000"},"one":{"description":"","value":"grey-950"},"two":{"description":"","value":"grey-915"},"three":{"description":"","value":"grey-900"}},"surfaceinverseglobal":{"zero":{"description":"","value":"grey-1000"},"one":{"description":"","value":"grey-950"},"two":{"description":"","value":"grey-915"},"three":{"description":"","value":"grey-900"}},"surfaceflattwo":{"zero":{"description":"","value":"white"},"one":{"description":"","value":"white","shadowMode":1},"two":{"description":"","value":"white","shadowMode":2},"three":{"description":"","value":"white","shadowMode":3}},"surfaceflatzerotone":{"zero":{"description":"","value":"coolgrey-50"},"one":{"description":"","value":"coolgrey-100","shadowMode":1},"two":{"description":"","value":"coolgrey-100","shadowMode":2},"three":{"description":"","value":"coolgrey-150","shadowMode":3}},"extrasurface":{"red":{"description":"","value":"red-250"},"pink":{"description":"","value":"magenta-250"},"purple":{"description":"","value":"purple-200"},"blue":{"description":"","value":"blue-200"},"cyan":{"description":"","value":"cyan-200"},"green":{"description":"","value":"green-200"},"yellow":{"description":"","value":"yellow-150"},"orange":{"description":"","value":"orange-200"},"brown":{"description":"","value":"brown-150"},"grey":{"description":"","value":"coolgrey-200"},"rating":{"description":"","value":"yellow-250"},"backdrop":{"description":"Backdrop mask for modals","value":"black","transparency":40}},"extraonsurface":{"red":{"description":"","value":"red-850"},"pink":{"description":"","value":"magenta-850"},"purple":{"description":"","value":"purple-850"},"blue":{"description":"","value":"blue-850"},"cyan":{"description":"","value":"cyan-850"},"green":{"description":"","value":"green-850"},"yellow":{"description":"","value":"yellow-850"},"orange":{"description":"","value":"orange-850"},"brown":{"description":"","value":"brown-850"},"grey":{"description":"","value":"coolgrey-850"}},"extramarkers":{"red":{"description":"","value":"red-600"},"pink":{"description":"","value":"magenta-700"},"purple":{"description":"","value":"purple-700"},"blue":{"description":"","value":"blue-600"},"cyan":{"description":"","value":"cyan-700"},"green":{"description":"","value":"green-500"},"yellow":{"description":"","value":"yellow-600"},"orange":{"description":"","value":"orange-700"},"brown":{"description":"","value":"brown-700"},"grey":{"description":"","value":"coolgrey-700"}},"surfacedata":{"primary":{"description":"","value":"blue-700"},"secondary":{"description":"","value":"mint-300"},"compareprimary":{"description":"","value":"steelblue-200"},"comparesecondary":{"description":"","value":"lime-200"},"dataset":{"one":{"description":"","type":"color","value":"blue-700"},"two":{"description":"","type":"color","value":"mint-300"},"three":{"description":"","type":"color","value":"pink-400"},"four":{"description":"","type":"color","value":"purple-400"},"five":{"description":"","type":"color","value":"brown-400"}}}},"dark":{"onbase":{"danger":{"description":"","value":"red-950"},"info":{"description":"","value":"blue-950"},"primary":{"description":"","value":"blue-950"},"success":{"description":"","value":"green-950"},"warning":{"description":"","value":"orange-950"},"default":{"description":"","value":"grey-900"}},"onsurfaceinverse":{"primary":{"description":"","value":"black","transparency":87},"secondary":{"description":"","value":"black","transparency":60},"tertiary":{"description":"","value":"black","transparency":38}},"extraonsurface":{"blue":{"description":"","value":"blue-200"},"brown":{"description":"","value":"brown-150"},"cyan":{"description":"","value":"cyan-150"},"green":{"description":"","value":"green-200"},"grey":{"description":"","value":"grey-200"},"orange":{"description":"","value":"orange-200"},"pink":{"description":"","value":"magenta-200"},"purple":{"description":"","value":"purple-150"},"red":{"description":"","value":"red-200"},"yellow":{"description":"","value":"yellow-150"}},"extrasurface":{"red":{"description":"","value":"red-850"},"pink":{"description":"","value":"magenta-850"},"purple":{"description":"","value":"purple-850"},"blue":{"description":"","value":"blue-850"},"cyan":{"description":"","value":"cyan-850"},"green":{"description":"","value":"green-850"},"yellow":{"description":"","value":"yellow-850"},"orange":{"description":"","value":"orange-850"},"brown":{"description":"","value":"brown-850"},"grey":{"description":"","value":"grey-850"},"rating":{"description":"","value":"yellow-200"},"backdrop":{"description":"","value":"black","transparency":40}},"surfaceflattwo":{"zero":{"description":"","value":"grey-850"},"one":{"description":"","value":"grey-850","shadowMode":null},"two":{"description":"","value":"grey-850","shadowMode":null},"three":{"description":"","value":"grey-850","shadowMode":null}},"surfaceflatzerotone":{"zero":{"description":"","value":"grey-1000"},"one":{"description":"","value":"grey-1000","shadowMode":null},"two":{"description":"","value":"grey-1000","shadowMode":null},"three":{"description":"","value":"grey-1000","shadowMode":null}},"surface":{"zero":{"description":"","value":"grey-1000"},"one":{"description":"","value":"grey-915","shadowMode":null},"two":{"description":"","value":"grey-850","shadowMode":null},"three":{"description":"","value":"grey-800","shadowMode":null}},"outline":{"base":{"description":"","value":"white","transparency":32},"deep":{"description":"","value":"white","transparency":70},"shallow":{"description":"","value":"white","transparency":12}},"onsurface":{"primary":{"description":"","value":"white","transparency":98},"secondary":{"description":"","value":"white","transparency":60},"tertiary":{"description":"","value":"white","transparency":38}},"container":{"primary":{"description":"","value":"blue-850"},"info":{"description":"","value":"blue-850"},"success":{"description":"","value":"green-850"},"warning":{"description":"","value":"orange-850"},"danger":{"description":"","value":"red-850"},"default":{"description":"","value":"grey-850"}},"oncontainer":{"primary":{"description":"","value":"blue-200"},"info":{"description":"","value":"blue-200"},"success":{"description":"","value":"green-200"},"warning":{"description":"","value":"orange-200"},"danger":{"description":"","value":"red-200"},"default":{"description":"","value":"grey-200"}},"base":{"primary":{"description":"","value":"blue-300"},"info":{"description":"","value":"blue-300"},"success":{"description":"","value":"green-300"},"warning":{"description":"","value":"orange-300"},"danger":{"description":"","value":"red-300"},"default":{"description":"","value":"grey-300"}},"onsurfaceinverseglobal":{"primary":{"description":"","value":"white","transparency":98},"secondary":{"description":"","value":"white","transparency":60},"tertiary":{"description":"","value":"white","transparency":38}},"onsurfaceglobal":{"primary":{"description":"","value":"black","transparency":87},"secondary":{"description":"","value":"black","transparency":60},"tertiary":{"description":"","value":"black","transparency":38}},"surfacedata":{"primary":{"description":"","value":"blue-300"},"secondary":{"description":"","value":"mint-200"},"compareprimary":{"description":"","value":"steelblue-800"},"comparesecondary":{"description":"","value":"lime-800"},"dataset":{"one":{"description":"","type":"color","value":"blue-300"},"two":{"description":"","type":"color","value":"mint-200"},"three":{"description":"","type":"color","value":"pink-300"},"four":{"description":"","type":"color","value":"purple-250"},"five":{"description":"","type":"color","value":"brown-200"}}},"states":{"hover":{"description":"","value":"purple-250","transparency":8},"click":{"description":"","value":"purple-250","transparency":12},"selected":{"description":"","value":"purple-250","transparency":4}},"surfaceinverse":{"zero":{"description":"","value":"white"},"one":{"description":"","value":"grey-100"},"two":{"description":"","value":"grey-150"},"three":{"description":"","value":"grey-200"}},"surfaceinverseglobal":{"zero":{"description":"","value":"grey-1000"},"one":{"description":"","value":"grey-915"},"two":{"description":"","value":"grey-850"},"three":{"description":"","value":"grey-800"}},"extramarkers":{"red":{"description":"","value":"red-300"},"pink":{"description":"","value":"magenta-300"},"purple":{"description":"","value":"purple-300"},"blue":{"description":"","value":"blue-300"},"cyan":{"description":"","value":"cyan-300"},"green":{"description":"","value":"green-300"},"yellow":{"description":"","value":"yellow-300"},"orange":{"description":"","value":"orange-300"},"brown":{"description":"","value":"brown-400"},"grey":{"description":"","value":"coolgrey-300"}}}},"spacing":{"space-0":{"value":0,"multiplier":0},"space-025":{"value":2,"multiplier":0.25},"space-05":{"value":4,"multiplier":0.5},"space-075":{"value":6,"multiplier":0.75},"space-100":{"value":8,"multiplier":1},"space-150":{"value":12,"multiplier":1.5},"space-200":{"value":16,"multiplier":2},"space-250":{"value":20,"multiplier":2.5},"space-300":{"value":24,"multiplier":3},"space-400":{"value":32,"multiplier":4},"space-500":{"value":40,"multiplier":5},"space-600":{"value":48,"multiplier":6},"space-800":{"value":64,"multiplier":8},"space-1000":{"value":80,"multiplier":10}},"radius":{"radius-0":{"value":0,"multiplier":0},"radius-025":{"value":2,"multiplier":0.25},"radius-05":{"value":4,"multiplier":0.5},"radius-075":{"value":6,"multiplier":0.75},"radius-100":{"value":8,"multiplier":1},"radius-150":{"value":12,"multiplier":1.5},"radius-200":{"value":16,"multiplier":2},"radius-250":{"value":20,"multiplier":2.5},"radius-300":{"value":24,"multiplier":3}},"shadowModes":{"1":{"x":0,"y":1,"blur":7,"spread":0,"transparency":4},"2":{"x":0,"y":2,"blur":9,"spread":2,"transparency":8},"3":{"x":0,"y":2,"blur":15,"spread":3,"transparency":12}},"fonts":{"families":[],"styles":{"display":{"lg":{"size":"58","lineHeight":"64","fontFamily":"system","weight":"600","style":"normal"},"md":{"size":"44","lineHeight":"52","fontFamily":"system","weight":"600","style":"normal"},"sm":{"size":"36","lineHeight":"44","fontFamily":"system","weight":"600","style":"normal"}},"headline":{"lg":{"size":"32","lineHeight":"40","fontFamily":"system","weight":"600","style":"normal"},"md":{"size":"28","lineHeight":"36","fontFamily":"system","weight":"600","style":"normal"},"sm":{"size":"24","lineHeight":"32","fontFamily":"system","weight":"600","style":"normal"}},"title":{"lg":{"size":"20","lineHeight":"28","fontFamily":"system","weight":"600","style":"normal"},"md":{"size":"16","lineHeight":"24","fontFamily":"system","weight":"600","style":"normal"},"sm":{"size":"14","lineHeight":"20","fontFamily":"system","weight":"600","style":"normal"}},"label":{"lg":{"size":"14","lineHeight":"16","fontFamily":"system","weight":"600","style":"normal"},"md":{"size":"12","lineHeight":"16","fontFamily":"system","weight":"600","style":"normal"},"sm":{"size":"10","lineHeight":"12","fontFamily":"system","weight":"600","style":"normal"}},"body":{"xl":{"size":"20","lineHeight":"28","fontFamily":"system","weight":"400","style":"normal"},"lg":{"size":"16","lineHeight":"24","fontFamily":"system","weight":"400","style":"normal"},"md":{"size":"14","lineHeight":"20","fontFamily":"system","weight":"400","style":"normal"},"sm":{"size":"12","lineHeight":"16","fontFamily":"system","weight":"400","style":"normal"},"xs":{"size":"10","lineHeight":"12","fontFamily":"system","weight":"400","style":"normal"}}}}} |
Параметры
Параметр |
Описание |
|---|---|
colors |
Общая секция цветов |
light |
Секция светлой темы |
dark |
Секция темной темы |
primary |
Название цвета |
description |
Комментарий |
type |
Тип. Не требуется заполнять. |
value |
Значение переменной |
blendMode |
Режим смешивания цветов. Должен быть в значении normal. |
extensions |
Уникальный GUID |
Описание классов
Base / onBase
Класс Base используется для фона и для заливки цветов: например, фон главных кнопок, цвет ссылок или иконок. Может применяться как фон и как текст ссылок.
OnBase — класс цветов над Base: например, цвет текста и иконок над кнопкой.
Base / onBase
Container / onContainer
Container — класс фонов для объектов, таких как: кнопка, бейдж, плитка.
OnContainer — класс цвета иконки и текста на контейнере.
Container / onContainer
Surface / onSurface
Surface — основной фон подложки под объектами, не применяется к самим объектам. На Surface кладутся все остальные объекты: кнопки, таблицы, плитки и прочее.
Surface
OnSurface — цвет текста и иконок над фоном. Возможно только ч/б или тонированный фон. Не накладывается на цветные подложки Container.
OnSurface
Outline
Outline — цвет разделителей, границ таблиц, обводок.
Outline
ExtraSurface / ExtraOnSurface
Набор цветов, которые используются для выбора в системе: цвет Блока ДП, маркер в редакторе, фон навигационной панели и т.д.
ExtraSurface — цвет фона, ExtraOnSurface — цвет на фоне. Для текста черный или белый цвет не используются .
ExtraSurface / ExtraOnSurface
Markers
Используется для акцентного выделения цвета: например, маркированный список. В отдельных случаях может использоваться вместе с цветом onSurfaceInverse для отображения белого текста на цветном блоке.
ExtraMarkers
OnSurfaceExtra
Цвета активных элементов (ссылок, текстов, иконок, вкладок) на белом фоне. Подходит для светлых брендов, когда используются светлые тона для кнопок, а текст ссылок остается темным.
OnSurfaceExtra
SurfaceData
Цвета для графиков и диаграмм. Data перекрашивается под бренд, поэтому есть главный цвет и дополнительный.
Отличие от Markers в том, что Markers всегда соответствуют своему названию: red = красный и т.п.
SurfaceData
Особенности
•Rating — используется для звездочек, флагов, закладок и т.п. В зависимости от бренда может менять цвет, при этом возможен только яркий цвет.
Rating
•backdrop — цвет подложки модальных окон.
States
States — прозрачные цвета накладывающиеся на все что угодно, чтобы показать отклик. Вне зависимости от платформы (и iOS тоже).
Параметр |
Описание |
|---|---|
Hover |
Цвет при наведении на элемент в веб-версии |
Click |
Цвет нажатия на элемент в мобилной версии. Клик и удержание в веб-версии. |
Selected |
Удержание фокуса или выделение белых объектов. Обводка фокуса — цвет primary из Base. |
Disabled |
Прозрачность объекта (38%) |
"states": { "hover": { "description": "", "value": "coolgrey-850", "transparency": 8 }, "click": { "description": "", "value": "coolgrey-850", "transparency": 12 }, "selected": { "description": "", "value": "coolgrey-850", "transparency": 4 } } |
Модификаторы
Параметр |
Описание |
|---|---|
Inverse |
Цвета, которые конвертируются в зависимости от переключения темы |
Global |
Цвета, которые не меняются при переключении между темной и светлой темой. Может меняться оттенок серого. |
Flat |
Цвета, которые превращаются в темной теме в один цвет |
Tone |
Тонирование |
Extra |
Дополнительные цвета |
Data |
Дополнительные цвета |
Полезные ссылки
