В системе доступна возможность кастомизировать стандартную цветовую тему — задать цвета активным элементам, ссылкам, иконкам и кнопкам. Для этого в пользовательском ключе "ui-custom-tokens" в формате JSON необходимо задать стилевые переменные для темизации. Цвета указываются в секции "OnSurfaceExtra".
Пример секции "OnSurfaceExtra" внутри JSON
"onsurfaceextra":{"primary":{"description":"","value":"yellow-300"},"link":{"description":"","value":"yellow-300"},"info":{"description":"","value":"blue-300"},"success":{"description":"","value":"green-300"},"warning":{"description":"","value":"orange-300"},"danger":{"description":"","value":"red-300"},"default":{"description":"","value":"coolgrey-300"}} |
{"colors":{"light":{"base":{"primary":{"description":"","value":"yellow-200"},"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":"yellow-1000"},"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":"yellow-100"},"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":"yellow-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}},"onsurfaceextra":{"primary":{"description":"","value":"yellow-850"},"link":{"description":"","value":"coolgrey-800"},"info":{"description":"","value":"blue-700"},"success":{"description":"","value":"green-700"},"warning":{"description":"","value":"orange-700"},"danger":{"description":"","value":"red-700"},"default":{"description":"","value":"coolgrey-700"}},"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":"coolgrey-850","transparency":8},"click":{"description":"","value":"coolgrey-850","transparency":12},"selected":{"description":"","value":"coolgrey-850","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":"yellow-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":"yellow-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}},"onsurfaceextra":{"primary":{"description":"","value":"yellow-300"},"link":{"description":"","value":"yellow-300"},"info":{"description":"","value":"blue-300"},"success":{"description":"","value":"green-300"},"warning":{"description":"","value":"orange-300"},"danger":{"description":"","value":"red-300"},"default":{"description":"","value":"coolgrey-300"}},"container":{"primary":{"description":"","value":"yellow-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":"yellow-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":"yellow-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":"yellow-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":"white","transparency":8},"click":{"description":"","value":"white","transparency":12},"selected":{"description":"","value":"white","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"}}}}} |
Интерфейс с кастомизированной темизацией
