Papirus-icon-theme: Need clear CSS attributes on actions, devices, panel icons

Created on 30 Nov 2016  ·  285Comments  ·  Source: PapirusDevelopmentTeam/papirus-icon-theme

some icons contained class="ColorScheme-Text" it's spoil style with Breeze engine on KDE.

bug completed

All 285 comments

@SmartFinn

@varlesh ну не совсем class="ColorScheme-Text" ссылается на то чего нет.

да, там полно хлама

@varlesh вообщем я могу в одиночку провернуть все изменения, только это займет море времени.

В этом случае коммит с удалением полупрозрачности можно откатить, чтобы не шокировать пользователей.

Дак там надо откатывать и мой коммит, так как я scour там проходил

Собственно, если откинуть идею про sed. То нужно:

  • удалить все CSS
  • поменять цвет с #000000 на #5c616c
  • убрать прозрачность 0.5

надо найти утилиту для удаления css, вот нашел что-то но не знаю как её пользоваться:
https://www.npmjs.com/package/remove-svg-properties

В атрибутах style точно ничего полезного нет? Как удалить я способ найду, не проблема.

https://www.npmjs.com/package/remove-svg-properties это кстати может и подойти, к Gulp я его прикрутить смогу.

Жесть, вот это костыли...
Может есть способ для конвертирования d атрибута?

да ну, результат такого будет точно не предсказуем

стой

я нашел вариант ))

после opacity="1" добавить style="fill:#5c616c"

и всё! :)

да это я знал, но вот это точно костыли

почему же... в inkscape делается тоже самое по сути

так это проще, мы уже половину пути прошли... опять всё перелопатить это же жесть

ну вообще если каждый path который нужно изменить содержит opacity="1", то почему бы и не попробовать.

команду для sed скинуть?

давай, а то я в этих \042 уже запутался :)

ерунда получается

<path id="path5262" opacity="1" style="fill:#5c616c" style="color-rendering:auto;text-de...
<path id="path4992" opacity="1" style="fill:#5c616c" style="color:#000000;text-indent:0;...
<path id="rect4168" opacity="1" style="fill:#5c616c" fill="url(#linearGradient4177)" d="m...

так оно красится или нет?

не знаю, но SVG невалидный получается, два аттр style, fill там где уже он есть и т.д.

дак важен же результат а не чистота кода... а если параметр d будет в исходнике, то как тогда поступать?

стой тут еще есть. В общем если есть опция style="color:#5c616c - то цвет не отображается (отображается черный), но если поменять на style="fill:#5c616c, то все норм

Вот так поменялись некоторые иконки:

sed -i 's|#000000|#5c616c|g' *.svg
sed -i 's|color:#5c616c|fill:#5c616c|g' *.svg

но не все

это не важно, тупой заменой некоторые иконки ломаются

не ломаются, тут же цвет только меняем

я про добавление тега style, слишком много кейсов нужно проверять

а вот что делать с такими, я хз:

d="m448-38c-1.108 0-2 0.892-2 2v10c0 1.108 0.892 2 2 2h10c1.108 0 2-0.892 2-2v-10c0-1.108-0.892-2-2-2h-10zm5 2.9902c2.2091 0 4 1.7909 4 4v0.5c0 0.82843-0.67157 1.5-1.5 1.5-0.44291 0.00022-0.86327-0.19627-1.1484-0.53515-0.35639 0.32873-0.82848 0.53515-1.3516 0.53515-1.1046 0-2-0.89543-2-2s0.89543-2 2-2 2 0.89543 2 2v0.5c0 0.27614 0.22386 0.5 0.5 0.5s0.5-0.22386 0.5-0.5v-0.5c0-1.6569-1.3431-3-3-3s-3 1.3431-3 3c0 1.6568 1.3431 3 3 3h2.5s0.5 0 0.5 0.5c-0.0312 0.5-0.5 0.5-0.5 0.5h-2.5c-2.2091 0-4-1.7909-4-4s1.7909-4 4-4zm0 3c-0.55229 0-1 0.44772-1 1s0.44771 1 1 1 1-0.44772 1-1-0.44771-1-1-1z"
       opacity="1"
       id="rect6564-8" />

Тут вообще нет ни color ни fill

я про добавление тега style, слишком много кейсов нужно проверять

да, это не вариант. Может какую-то проверку доавить типа если не имеется атрибут color или fill то добавить style="fill:#5c616c после opacity

говорю ж слишком сложно получается, да и чтобы поменялся цвет от style="fill:#5c616c я тоже не вижу

всё меняется

<path
       d="m448-38c-1.108 0-2 0.892-2 2v10c0 1.108 0.892 2 2 2h10c1.108 0 2-0.892 2-2v-10c0-1.108-0.892-2-2-2h-10zm5 2.9902c2.2091 0 4 1.7909 4 4v0.5c0 0.82843-0.67157 1.5-1.5 1.5-0.44291 0.00022-0.86327-0.19627-1.1484-0.53515-0.35639 0.32873-0.82848 0.53515-1.3516 0.53515-1.1046 0-2-0.89543-2-2s0.89543-2 2-2 2 0.89543 2 2v0.5c0 0.27614 0.22386 0.5 0.5 0.5s0.5-0.22386 0.5-0.5v-0.5c0-1.6569-1.3431-3-3-3s-3 1.3431-3 3c0 1.6568 1.3431 3 3 3h2.5s0.5 0 0.5 0.5c-0.0312 0.5-0.5 0.5-0.5 0.5h-2.5c-2.2091 0-4-1.7909-4-4s1.7909-4 4-4zm0 3c-0.55229 0-1 0.44772-1 1s0.44771 1 1 1 1-0.44772 1-1-0.44771-1-1-1z"
       opacity="1" style="fill:#5c616c"
       id="rect6564-8" />

Последовательность такова вот:
заменяется три нуля, если есть:
sed -i 's|"#000"|"#000000"|g' *.svg
потом меняется цвет в color и fill:
sed -i 's|#000000|#5c616c|g' *.svg
меняется color на fill:
sed -i 's|color|fill|g' *.svg
этот цвет из symbolic прилетел:
sed -i 's|#bebebe|#5c616c|g' *.svg
вот еще один:
sed -i 's|#4d4d4d|#5c616c|g' *.svg

Ну вот а потом надо написать скрипт, которой проверяет если в файле встречается слово fill, то он его пропускает, если нет, то вставляет fill:#5c616c после opacity

и половина значков пофиксена:
image

Вот смотри, добавил после опасити style="fill:#5c616c"
image

меняется color на fill:
sed -i 's|color|fill|g' *.svg

уже на этом этапе у некоторых файлов будет

style="fill:#5c616c" fill="currentColor"

я бы посчитал решением привести все к такому виду:

style="color: #5c616c" fill="currentColor"

это в первую очередь валидно, во вторых универсально

я на часик отлучусь, заодно может придумаю как это провернуть

Ок, я тоже отойду... возможно даже на пару часов

кажется нашел правильный путь:

  • конвертируем style в xml атрибуты
  • переименовываем атрибут color в fill
  • меняет цвета для fill="#XXXXXX"
  • добавляем атрибут fill="#5c616c" там где его нет

последовательность может неправильная, я только начал работу над референсной группой

конвертируем style в xml атрибуты

это типа расшифровка d?

нет, это fill="" color="" opacity="" и т.д.

Понятно. Было бы интересно узнать как этот d расшифровать или сконвертировать...

Сейчас скачал старую версию https://github.com/PapirusDevelopmentTeam/papirus-icon-theme/commit/708f35e6b56c59171988966f69e288bc14826ddc, вобщем новости печальные... походу я уже проходился scour ранее или может svgo почистила.
Так что назад дороги нет :(

я уже пробовал откатываться, там те же проблемы

нам по сути надо только цвет поменять. может есть какая-нибудь утилита типа колоризации или тонирования?

Вот так большинство иконок поменяло цвет:

sed -i 's|"#000"|"#000000"|g' *.svg
sed -i 's|#000000|#5c616c|g' *.svg
sed -i 's|color|fill|g' *.svg
sed -i 's|#bebebe|#5c616c|g' *.svg
sed -i 's|#4d4d4d|#5c616c|g' *.svg
sed -i 's|#7b7c7e|#5c616c|g' *.svg
sed -i '/"ColorScheme-Text"/d' *.svg
sed -i 's|opacity="1"|opacity="1" fill="#5c616c"|g' *.svg
sed -i 's|opacity=".3"|opacity="0.3" fill="#5c616c"|g' *.svg
sed -i 's|fill="currentColor"||g' *.svg

Но некоторые придется походу фиксить вручную

Ладно, я пойду... завтра еще может что придумаю

ок, у меня пока тоже ничего не получается, в основном с иконками которые имеют отдельный цвет, например color-picker-white.svg и подобные

Первые хорошие новости на сегодня. Добился автоматизации на отдельно взятой группе, осталось масштабировать, отработать новые кейсы и выкатить. Раньше завтрашнего дня ждать точно не стоит.

Цвета менять не буду, оставлю это тебе, я лишь добьюсь чтобы у каждого элемента был свой fill="" который можно sed'ом безболезненно менять.

Отлично, буду ждать!

В общем я заменил :) 1781e7f667025a5d6a6b488f9e3995b9033a0711

@varlesh зря, мое решение красивей, хотя делает со сути тоже самое. Я уже собирался в бранч experimental выкатить, а теперь не понятно зачем столько времени убил.

Прости меня, я что-то разогнался. Прошелся sedом, смотрю большинство поменялось... ну и что-то в мозг мне стукнуло ... Там кстати все равно бы пришлось перерисовывать некоторые вручную, так как они криво рендерились...

Больше так не буду :)

@SmartFinn Привет Сереж, вижу почистил :) Ух жесть, сколько там хлама... Этот товарищ все никак не успокоится... мне кажется он вручную их пилит.
А я ему сказал, что типа всё почистили, а он и попёр :) что делать теперь с ним хз

Еще вопрос один есть, на счет symbolic. Они сейчас цвета #f7f7f7, что вообще не сочетается ни с темной, ни со светлой темами... Вот думаю надо поменять цвет. Там вот кстати в Unity, когда нажимаешь на батарею в панели, видно эти symbolic.

@varlesh Привет!

Могу попробовать смержить, времени он в любом случае больше потратит на создание новых, чем я на решение конфликтов.

Цвета меняй конечно. Их можно сделать разными для темной и светлой темы? А то золотой середины тут нет.

О, а это возможно как вариант... для Dark юзать цвет из Dark, для обычной из обычной.

Могу попробовать смержить, времени он в любом случае больше потратит на создание новых, чем я на решение конфликтов.

Он что-то не хочет делиться своим скриптом :) В любом случае есть вариант куда проще как мне кажется...

Всё, перекрасил

@SmartFinn Сереж, там ColorScheme-Text еще в apps залетел, возможно еще куда-то... надо его ото всюду делетнуть.

alex@dell:~/Git/papirus-icon-theme/Papirus/16x16/apps$ grep -rl ColorScheme-Text
checkbox.svg
preferences-management-service.svg
ubuntu-tweak.svg
classicmenu-indicator.svg

@SmartFinn Ты Dark тоже чистил?

надо рекурсивно делетнуть этот ColorScheme-Text везде игнорируя симлинки.

@varlesh я удалял только сирот, значит в тех файлах есть

 <style type="text/css" id="current-color-scheme">
.ColorScheme-Text {
...
 }
</style>

Dark я тоже затронул.

Там впринципе не много их, можно и вручную пройтись

Я в общем пойду чистить...

@varlesh если удалишь <style> я пройдусь вчерашним скриптом и удалю все class="ColorScheme-Text"

Вот там жесть:

<style id="current-color-scheme" type="text/css">
            .ColorScheme-Text { color:#31363b; } .ColorScheme-Background{ color:#eff0f1; } .ColorScheme-ViewText { color:#31363b; } .ColorScheme-ViewBackground{ color:#fcfcfc; } .ColorScheme-ViewHover { color:#3daee9; } .ColorScheme-ViewFocus{ color:#3daee9; } .ColorScheme-ButtonText { color:#31363b; } .ColorScheme-ButtonBackground{ color:#eff0f1; } .ColorScheme-ButtonHover { color:#3daee9; } .ColorScheme-ButtonFocus{ color:#3daee9; }
        </style>

И не лень было такое писать?

@varlesh поэтому и не трогал, выглядело угрожающим :smile:

Это от Breeze походу залетело

Странно почему scour не выровнил их.. я вроде же все apps проходил им

вроде почистил

@varlesh в symbolic 2 файла осталось

Papirus-Dark/symbolic/apps/fusion-icon-symbolic.svg
19:       type="text/css">.ColorScheme-Text {

Papirus/symbolic/apps/fusion-icon-symbolic.svg
19:       type="text/css">.ColorScheme-Text {

ок, я sуmbolic не смотрел. Ща поправлю

О... там еще и Верочка:

<text
     style="font-size:12.66600037px;font-family:'Bitstream Vera Sans';opacity:0.8;fill:#000000"
     x="877.22626"
     y="-21.187399"
     xml:space="preserve"
     font-size="12.666px"
     id="text4087-2-6-5"><tspan
       x="877.22626"
       y="-21.187399"
       id="tspan4089-7-2-9" /></text>
  <text
     style="font-size:12.66600037px;font-family:'Bitstream Vera Sans';opacity:0.8;fill:#000000"
     x="901.18719"
     y="-61.929108"
     xml:space="preserve"
     font-size="12.666px"
     id="text4087-2-6-5-5"><tspan
       x="901.18719"
       y="-61.929108"
       id="tspan4089-7-2-9-6" /></text>

@varlesh не заморачивайся, их там много. Я подготовил дефолтную конфигурацию .svgo.yml он это все вычистит.

Сам конфиг положу в корень проекта, он будет дефолтным требованием для PR и для новых иконок. Для старых жду удобного случая чтобы запусть.

@varlesh не заморачивайся, их там много. Я подготовил дефолтную конфигурацию .svgo.yml он это все вычистит.

Ты про ColorScheme-Text?

@varlesh нет, для всего ненужного в svg файлах, для text и metadata например.

да инкскейп не хреново так добавляет хлама... В нём кстати есть опция чистки SVG, но толку от нее 0. Более-менее чистый если сохранить как обычный SVG

@varlesh он безопасный, я отключил все что потенциально может отразится на отображении, чистит только мусор.

@varlesh а мне наоборот нравится Optimized SVG в Inkscape, классно чистит, я бы руками так же сделал

@SmartFinn Как пройтись рекурсивно по всем директориям, по типу grep -rl Vera?

Oн чистит если только сохранить как простой SVG, если как Inkscape SVG, то толку мало от него

@SmartFinn Как пройтись рекурсивно по всем директориям, по типу grep -rl Vera?

Чтоб оно мне список выдало, где еще Вера наша поселилась ))

@varlesh зачем, если можно пройтись рекурсивно svgo для всего проекта. Элементы text имеют tspan, да и сами они в g могут быть обернуты..

Да эт понятно, что надо чистить по-человечески... я просто хочу глянуть.
Тут главное еще не заиграться с SVGO, а то мы рендеринг сломаем случайно... Держу LiveCD на готове

@varlesh о, кстати, добавлю комментарии в конфиг и выложу. Рендер не ломает, я даже потенциально проблемные штуки отключил, вроде наследования атрибутов и перегруппировку.

Отлично! Что мы все-таки будем делать с нашим товарищем?
Может тоже sedом все это дело провернуть? Типа добавить определенный текст из файла (файл с CSS) после определенной строчки...

Вообще я считаю этот код надо в одну строку кидать, чтобы потом можно было удалить безболезнено:

<style type="text/css" id="current-color-scheme">
      .ColorScheme-Text {
        color:#5c616c;
      }
      </style>

Эх там еще же:

style="fill:currentColor;opacity:1"
     class="ColorScheme-Text"

Как вариант, если задать этот параметр на все слои, а потом те значки, которые с синим переделать.

Меня больше беспокоит что у него элементы svg без атрибутов width, height и version. В браузерах это ломает отображения (можешь на View нажать и увидеть что там не 16x16), не знаю безопасно ли это для иконок. Не сталкивался?

У нас сейчас чуть меньше 200 иконок без width и height, только с viewBox.

Я не знаю как он их делает, мне кажется вручную

2600штук :)

Я вообще не нагуглил как можно эти CSS добавлять пакетным образом. Зашел в IRC inkscape, мне там сказали типа открывай XML Editor и айдапашол... я грю, вы там с дубу рухнулись, мне несколько тысяч надо переделать

Даже если и руками делает, то он сжимает после этого, для этого и нужен .svgo.yml, не хочу чтобы каждый по своему чистил.

Так там ща различия уже есть. Как его мержить-то? Получается надо опять что-то переделывать

Надо договорится с ним, а то он ругаться будет )

Слить не проблема. Могу в отдельный бранч чтобы протестировать. Время конечно займет, но код у него намного лучше того что сейчас имеем.

У него все чистые SVG? Т.е. переделаны с нуля чтоль?

Зачем тогда чистили actions?

Я запутался уже

Сомневаюсь, просто сжаты до неузнаваемости и с добавленными стилями.

В d-атрибуте теперь каша походу

мне интересно как он их делает...

скорее всего типа группирует все слои и пихает в d, потом сверху накладывает стиль... Вот как это пакетно все сделать - для меня загадка.

судя по скорости обрабатыват не пакетно, вручную + какой-то макрос

С его стороны кстати проще конфликты решить, взять все иконки который он менял, обновить репозиторий до актуального состояния и просто скопировать поверх с заменой, ну и прислать новый PR.

Ох и жесть несколько тысяч вручную... да уж. Ну ждём его, узнаем

С его стороны кстати проще конфликты решить, взять все иконки который он менял, обновить репозиторий до актуального состояния и просто скопировать поверх с заменой, ну и прислать новый PR.

Ну во-первых не известно осилит ли он такой масштаб. Во-вторых, там уже атрибут вписан. Тут либо ждать, либо выводить в новый бранч.

@SmartFinn После сжатия в d не будет ли бага с рендерингом в убунте 14.04? Так как там в d уже цвет прописан и бог знает что еще, так еще и поверх стиль теперь

Или в d только координаты точек чтоль

@varlesh да, в d цветов нет, цвета стилями накладываются. Баги в 14.04 были по другой причине.

Да, d это координаты точек. Хм, а как тогда рисовался цвет... помнишь были файлы вообще без fill и color

Ну так они были просто черными, или нет?

да и все равно странно что они вообще отображались без fill и color

Черный цвет по-умолчанию. Если в Inkscape создать элемент без fill то он добавит стиль style="fill:none;", если его удалим то получим черный.

понятно, спс за разъяснения

Молчит, как партизан :)

@varlesh добавил .svgo.yml, в комментариях описал все что он делает. Можешь запустить посмотреть результат, но коммитить пока не надо.

@SmartFinn Ок, гляну. Сереж зайди в PR, там появился наш дружище из KDE

@varlesh я уже видел

Так что лучше, открывать новую ветку или пусть мержит в мастер?

Все изменения в новую ветку и новый PR

@SmartFinn скрипт ломает многие файлы:
image

Пример различия:
До:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!--Created with Inkscape (http://www.inkscape.org/)-->
<svg id="svg7384" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" style="enable-background:new" xmlns="http://www.w3.org/2000/svg" height="16" width="16" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/">
 <metadata id="metadata90">
  <rdf:RDF>
   <cc:Work rdf:about="">
    <dc:format>image/svg+xml</dc:format>
    <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
   </cc:Work>
  </rdf:RDF>
 </metadata>
 <g id="layer12" transform="translate(-505 39.003)">
  <g id="g4139" transform="matrix(-1 0 0 1 1027 0)">
   <path id="rect4218" opacity="1" fill="#5c616c" d="m509-37.003v14h2v-1h10v-4h-10v-4h10v-4h-10v-1z"/>
   <path id="rect4138" opacity="1" fill="#5c616c" d="m507-39.003h2v2h-2z"/>
  </g>
 </g>
</svg>

После:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg style="enable-background:new" xmlns="http://www.w3.org/2000/svg" height="16" width="16" version="1.1">
 <g transform="translate(-505 39.003) matrix(-1 0 0 1 1027 0)">
  <path opacity="1" fill="#5c616c" d="m509-37.003v14h2v-1h10v-4h-10v-4h10v-4h-10v-1z"/>
  <path opacity="1" fill="#5c616c" d="m507-39.003h2v2h-2z"/>
 </g>
</svg>

@varlesh да, я знаю, причина в transform/translate

<g id="layer1" transform="translate(-465,-187)">

Я пока думаю не трогать их, или перенести атрибут с родителя на дочерний элемент.

g может лучше вообще не трогать?

Ладно, группы трогать не буду, все равно пустые должны удалится, сделаю полностью безопасный конфиг.

Удали просто - collapseGroups без него вроде всё норм

Вес до 1.1мб, после 707kb эт actions 16 я только проверял

Проверил на apps 16px, вроде все ровненько :) . До 1.6мб после 1,1мб

После того как разберемся с .ColorScheme-Text и почистим, планирую завести отдельный бранч и попробовать перенести стили в атрибуты и полностью избавится от style там где он не нужен, а то местами там такое творится:

style="color-rendering:auto;t
ext-decoration-color:#000000;color:#000000;isolation:auto;mix-blend-mode:normal;shape-rendering:
auto;solid-color:#000000;block-progression:tb;text-decoration-line:none;image-rendering:auto;whi
te-space:normal;text-indent:0;text-transform:none;text-decoration-style:solid" fill-rule="evenod
d"

Твоя тулза SVGO и мозг творят чудеса :) Symbolic прям нехреново так почистилось

потестил все 48px + symbolic - вроде везде все отлично

Как мы будем мержить test-kde с master я хз

Я вообще имел ввиду чтоб он у себя сделал отдельный бранч, а мы вольем куда надо. Для тестов можно и локально поместить в отдельную ветку.

нет же, он в мастер хочет потом добавить этот стиль...
Может мы сами все пофиксим, сначала пройдемся твоим скриптом, потом применим его скрипт (он выложил). Ну а дальше как обычно sedом меняем цвет и обновляем Dark

Он просто сейчас делает лишнюю работу. Мы же все равно test-kde не будем поддерживать... появятся новые значки, я не хочу сидеть и мучиться с этими стилями

@SmartFinn Ты понимаешь как оно работает?

<?php
// Load template
$template = new \DomDocument();
$template->load("template.svg");
$paths = $template->getElementsByTagName("path");
if ($paths->length != 1) {
    die("Expecting exactly 1 path element in template.svg.");
}
$path = $paths->item(0);

// Iterate current directory
$i = new DirectoryIterator(".");
foreach ($i as $f) {
    if ($f->isFile() && $f->getExtension() == "svg" && $f->getFilename() != "template.svg") {
        $svg = new \DomDocument();
        $svg->load($f->getFilename());

        $xpath = new \DOMXPath($svg);
        $query = "//*[@d]";
        $entries = $xpath->query($query);
        if ($entries->length == 1) {
            // Only replace if exactly one d attribute is found
            $d = $entries->item(0)->getAttribute("d");
            $path->setAttribute("d", $d);
            $template->save($f->getFilename());
            echo "Replaced " .$f->getFilename() . "\n";
        }
        else {
            // skip
            echo "Skipping " .$f->getFilename() . "\n";
        }
    }
}

что-то я тебя не пойму, пусть сделает иконки и вольем их после теста в мастер, что в этом плохого?

Понимаю, и еще понимаю что кроме скрипта нужен template.svg

Е-мое, я думал ты имеешь ввиду две ветки вести... аж испугался ))

я поторопился просто... надо было тщательно все вычистить, протетстить а потом давать ему добро. Теперь вот опять все получается как попало

svgo мы будем проходить после слияния test-kde и master?

да, чтобы опять конфликты не порождать.

Ок, ждем нашего товарища тогда...

@varlesh что-то не пойму, в gnome иконки тоже меняются, но почему-то только две и только тут (возле Move to Trash и Delete), от других они ни чем не отличаются, например от filenew.svg и folder-new.svg которые в обоих случаях одного цвета :confused:

screenshot from 2016-12-03 15-07-00
screenshot from 2016-12-03 15-07-29

Это symbolic скорее всего

У тебя кстати иконка Compress... кстати не от Papirus

@varlesh видимо в Papirus нет такой, это стандартная

надо найти имя, эт сервис меню, там наверн проще искать

ладно, я пошёл фиксить 196-й

@varlesh с Compress.. можно не заморачиваться, пойду в Mate тестить, там иконки в меню и на кнопках по умолчанию включены

@varlesh в KDE кстати теперь круто выглядит

ага, если бы он еще в исходники не лез

@SmartFinn Все значки в Papirus прошел svgo с твоим конфигом...

@varlesh хорошо, займусь атрибутами

пока погоди... я тут пару багов нашел

@varlesh Papirus/22x22/panel/clementine-panel-grey.svg и Papirus/24x24/panel/clementine-panel-grey.svg пустые, эти баги?

нет, так должно быть. Заметил особенность, если открыть файл и изменить файл в инкскейп, то он сука присваивает color значку... т.е. удаляет опцию style="fill:currentColor

Получается новый созданный значок надо фиксить вручную.... это печально

Вот возьми даже любой открой в инкскейп подвигай точки и сохрани как plain svg - он удалит style="fill:currentColor и добавит fil=#цвет

Так сохраняй в Inkscape SVG, а потом пройдись SVGO. Я думаю это даже можно автоматизировать.

Для сравнения, открыл просто добавил точки и подвигал их и сохранил, ниче даже не делал с цветом.
исходник:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
 <defs>
  <style type="text/css" id="current-color-scheme">
   .ColorScheme-Text { color:#5c616c; }
  </style>
 </defs>
 <g id="layer1" transform="translate(-465,-187)">
  <path id="path16259-2-3" style="fill:currentColor;opacity:1" class="ColorScheme-Text" d="m466.5 195h1.5v6h4v-4h3v4h4v-6h1.5l-7-7z"/>
 </g>
</svg>

plain-svg:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   version="1.1"
   id="svg2"
   viewBox="0 0 16 16">
  <metadata
     id="metadata11">
    <rdf:RDF>
      <cc:Work
         rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
        <dc:title></dc:title>
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <defs
     id="defs4">
    <style
       id="current-color-scheme"
       type="text/css">
   .ColorScheme-Text { color:#5c616c; }
  </style>
  </defs>
  <g
     transform="translate(-465,-187)"
     id="layer1">
    <path
       d="m 466.5,195 1.5,0 0,6 4,0 1.28814,-1.35593 L 475,197 l 0,4 4,0 0,-6 1.5,0 -1.7839,-5.91949 L 473.5,188 l -7.17373,4.32627 z"
       class="ColorScheme-Text"
       style="color:#5c616c;opacity:1;fill:currentColor"
       id="path16259-2-3" />
  </g>
</svg>

inkscape-svg:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   viewBox="0 0 16 16"
   id="svg2"
   version="1.1"
   inkscape:version="0.91 r13725"
   sodipodi:docname="user-home-inkscape.svg">
  <metadata
     id="metadata11">
    <rdf:RDF>
      <cc:Work
         rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
        <dc:title></dc:title>
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <sodipodi:namedview
     pagecolor="#ffffff"
     bordercolor="#666666"
     borderopacity="1"
     objecttolerance="10"
     gridtolerance="10"
     guidetolerance="10"
     inkscape:pageopacity="0"
     inkscape:pageshadow="2"
     inkscape:window-width="1600"
     inkscape:window-height="849"
     id="namedview9"
     showgrid="false"
     inkscape:zoom="14.75"
     inkscape:cx="-2.779661"
     inkscape:cy="8"
     inkscape:window-x="0"
     inkscape:window-y="0"
     inkscape:window-maximized="1"
     inkscape:current-layer="svg2" />
  <defs
     id="defs4">
    <style
       type="text/css"
       id="current-color-scheme">
   .ColorScheme-Text { color:#5c616c; }
  </style>
  </defs>
  <g
     id="layer1"
     transform="translate(-465,-187)">
    <path
       id="path16259-2-3"
       style="color:#5c616c;opacity:1;fill:currentColor"
       class="ColorScheme-Text"
       d="m 466.5,195 1.5,0 0,6 4,0 1.28814,-1.35593 L 475,197 l 0,4 4,0 0,-6 1.5,0 -1.7839,-5.91949 L 473.5,188 l -7.17373,4.32627 z"
       inkscape:connector-curvature="0"
       sodipodi:nodetypes="cccccccccccccc" />
  </g>
</svg>

если вкратце, то
исходник:
style="fill:currentColor;opacity:1"
class="ColorScheme-Text"

обычный:
class="ColorScheme-Text"
style="color:#5c616c;opacity:1;fill:currentColor"

инкскейп:
style="color:#5c616c;opacity:1;fill:currentColor"
class="ColorScheme-Text"

Да, я увидел, косяк. Легкого решения в голову пока не приходит.

@SmartFinn Ты понимаешь мы то с тобой в этом шарим, а придет какой-то новый дизайнер-интузиаст и как он поймет...
может у нас установлен как style=fill а надо просто заменить на style=color?

Надо экспериментировать, может оказаться что магия связанная с

<style type="text/css" id="current-color-scheme">
                       ^^^^^^^^^^^^^^^^^^^^^^^^^

хм, а если меняешь style=color, то значок черный становится

нефига не понимаю почему style=fill подхватывает цвет, а style=color нет

вот это засада... я в печали

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

нефига не понимаю почему style=fill подхватывает цвет, а style=color нет

не понял проблему, не меняет цвет, или цвет под текст не подстраивает? Можешь в виде сниппета показать

@DarkknightAK You know easy way how add CSS paprmeter to SVG? Because if you open icon on inkscape and change any bot position then save changes - inkscape delete parameter style="fill:currentColor" and added new style="color:#COLOR"
And i must change sources again on text editor.
You know easy way or another method?

не понял проблему, не меняет цвет, или цвет под текст не подстраивает? Можешь в виде сниппета показать

если стоит style fill то цвет берется из current-color-scheme, но если заменить style color, то цвет из current-color-scheme не подхватывается - значок черный

значок подхватывает цвет:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
 <defs>
  <style type="text/css" id="current-color-scheme">
   .ColorScheme-Text { color:#5c616c; }
  </style>
 </defs>
 <g id="layer1" transform="translate(-465,-187)">
  <path id="path16259-2-3" style="fill:currentColor;opacity:1" class="ColorScheme-Text" d="m466.5 195h1.5v6h4v-4h3v4h4v-6h1.5l-7-7z"/>
 </g>
</svg>

значок не подхватывает цвет:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
 <defs>
  <style type="text/css" id="current-color-scheme">
   .ColorScheme-Text { color:#5c616c; }
  </style>
 </defs>
 <g id="layer1" transform="translate(-465,-187)">
  <path id="path16259-2-3" style="color:currentColor;opacity:1" class="ColorScheme-Text" d="m466.5 195h1.5v6h4v-4h3v4h4v-6h1.5l-7-7z"/>
 </g>
</svg>

@varlesh у color не может быть свойства currentColor потому что это рекурсия, ты ему предлагаешь взять цвет у самого себя, а цвета нет потому что не задан fill

уже понял, вот так работает:



color:currentColor

ща попробую в инкскеп открыть и поменять точки

ничего не изменится, выходом может быть дублирование свойства color в инлайновый style.

вот он тварюга, один хрен меняет:
style="color:currentColor;opacity:1;fill:#5c616c"

теперь стал добавлять fill

чеж делать-то? может какой другой svg-редактор пробануть?

Надо попробовать подстраивается ли измененная иконка в Inkscape под текст, если да то и проблем нет. Можно время от времени удалять свойство color у элемента с классом ColorScheme-Text.

а цвета у иконок мы и так меняем через sed

она будет черная тогда, если удалять color или в каком-нить ДЕ баг вылезет

не вылезет так как color прописан в классе ColorScheme-Text

дак тогда проще не удалять а заменять style="color:#5c616c на style="color:currentColor

тем же sedом

я выше написал почему style="color:currentColor работать не может

значит нам надо где-то поменить color на fill что бы конфликта не было

я туплю, просто исходник поменял уже ))
ниче ненужно менять, если стоит style fill, он и меняет fill.
Значит просто - style="fill:#5c616c на style="fill:currentColor

@SmartFinn ты прав да, но есть объединенные атрибуты, а есть раздельные.
К примеру есть так:
style="fill:currentColor;opacity:1"
class="ColorScheme-Text"

А есть и вот так
style="fill:currentColor"
opacity="1"
class="ColorScheme-Text"

Надо проверять унификацию, что бы различий не было

удалять свойство color у элемента с классом ColorScheme-Text

вобщем это выход, удалять после каждого сохранения, других вариантов нет

но есть объединенные атрибуты, а есть раздельные.

после прохода svgo они унифицируются

Можно кстати на первое и второе сделать хуки в git, чтобы перед коммитом автоматически запускались.

значит в скрипт svg надо добавить типа такого:
sed -i 's|style="color:#5c616c;|style="|g'

и для дарка, потом еще цвет прописать. Чтоб просто запустил svgo и оно всё пофиксило

типа такого но сложнее, надо проверять есть ли class="ColorScheme-Text" и удалять не конкретный color:#5c616c а по более широкой маске.

@SmartFinn Предлагаю создать папку scripts и туда всё запихнуть... и установочные и остальные

папка utils, у меня уже есть такая. Установочные переносить не стоит, пусть будут на виду. А с хуками для git это хорошая идея, позже займусь.

ненужно хуков, достаточно папки utils со скриптами... не будем усложнять. Добавим ридми просто и всё

про инсталл и ремове да, пусть в корне лежат, а то юзеры опять серчать будут :)

ок, сделаю. Кстати Makefile бы здорово жизнь бы упростил, по каком-нибудь make fix запускать по недавно измененным файлам svgo + удаление color где надо, и make fix-all по всему проекту.

я теперь всё думаю про panel и symbolic. Как думаешь стоит ли с ними такое делать?

Просто хочется унификации чтоле какой-то

а то получается эти одни, те другие...

про symbolic не знаю, до сих пор не пойму что за иконки и почему в отдельной папке, а вот с panel у меня сомнения, цвет текста прописан глобально, а значит в случае когда текст темный и панель темная, как например в Arc-Darker, будут проблемы.

про symbolic не знаю, до сих пор не пойму что за иконки и почему в отдельной папке

Это значки для гнома, которые красит само жтк... но мне интересно будет ли работать css в гноме-приложениях в кедах

а вот с panel у меня сомнения, цвет текста прописан глобально, а значит в случае когда текст темный и панель темная, как например в Arc-Darker, будут проблемы.

я вообще не в курсе работает ли это в жтк-окружениях. Но если работает, то да с подобными комбинированным оформлением будут проблемы...
наверн тогда лучше их не трогать

Это значки для гнома, которые красит само жтк... но мне интересно будет ли работать css в гноме-приложениях в кедах

ага, тогда думаю что нет, значение для ColorScheme-Text не с потолка берется, а KDE предоставляет с помощью какой-то библиотеки, а так как GTK не использует эти библиотеки то и работать не будет

Не вариант, так как у меня тоже есть arc - где светлое окно и темная панель

значки для панели в кедах есть в самой теме плазмы... а вот со сторонними приложениями будет жопа...

Вот эти значки в теме плазмы... тоже с CSS:
image

@SmartFinn Тут есть еще одна идея - это юзать другой класс, который будет браться с темы плазмы или цветовой схемы... надо подумать. Т.е. если панель черная, то иконки в панели белые и наоборот.
Надо допросить нашего товарища из кед

@varlesh вполне может быть класс для текста на панели, он бы и подошел.

ColorScheme-Text
ColorScheme-Background
ColorScheme-Highlight
ColorScheme-ViewText
ColorScheme-ViewBackground
ColorScheme-ViewHover
ColorScheme-ViewFocus
ColorScheme-ButtonText
ColorScheme-ButtonBackground
ColorScheme-ButtonHover
ColorScheme-ButtonFocus

Выбирай любой))

При таком раскладе, для кед достаточно одной темы значков

пока не вижу среди них хотя бы цвет панели

Теперь надо всё это дело обмозговать и решить как и что делать... надо раздобыть у нашего товарища template.svg, а то он что-то пропадает всё время куда-то.

пока не вижу среди них хотя бы цвет панели

Дак есть поддержка других классов - это уже хорошо. А там придумаем че-нить

Противоположный класс ColorScheme-Background

надо раздобыть у нашего товарища template.svg

да вот он, только значения ширины-высоты меняются

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
 <defs>
  <style type="text/css" id="current-color-scheme">
   .ColorScheme-Text { color:#5c616c; }
  </style>
 </defs>
 <path style="fill:currentColor;opacity:1" class="ColorScheme-Text"/>
</svg>

ColorScheme-Background

все равно не поможет, нужен именно цвет текста на панели, или цвет панели чтобы инвертировать.

Серега, у меня мозг взрывается ))
В общем допустим у нас есть
Papirus (для Arc Darker):
actions - ColorScheme-Text
panel - ColorScheme-Background

PapirusDark (подходит для полностью светлых или темных тем):
actions - ColorScheme-Text
panel - ColorScheme-Text

А вот с плазмой теперь надо разобраться еще.

цвет панели чтобы инвертировать

Там есть 2 противоположных параметра, они берутся из цветовой схемы. Цвет панели как раз и юзается скорее всего из ColorScheme-Background

Hey guys, sorry, forgot my Russian dictionary. Can somebody brief me on what's going on.
I am really sorry, had some things to take care of but will give all I can now on...
So what are we working at...
I see everything has changed. Repos have been merged, Licence changed, restructuring going on. Tell me how I can help. :)

Да, так и есть:
image

Юзается цвет Фон окна

т.е. для значков будет юзаться цвет окна получается

т.е. для значков будет юзаться цвет окна получается

если ColorScheme-Background укажешь, но если ColorScheme-Text то получится как раз то что ты хочешь.

@azadaquib
Hi.
Ok what we already doing

  • merge repos kde and gtk
  • update install and remove scripts
  • reduce size all icons
  • clear and refactoring code on all SVG's

we now want added support for kde color scheme for all monochrome icons

@SmartFinn ColorScheme-Text not worked if you use dark panel and light windows

@varlesh OK thanks... I am studying the changes... I will branch out when I am sure what to do...

because ColorScheme-Text use from color scheme, but not from Plasma

@varlesh так цвет панели берется из цвета окна, вроде ж к этому пришли

@SmartFinn Юзается цвет из цветовой схемы - цвета из плазмы игнорируются

@varlesh так цвет панели берется из цвета окна, вроде ж к этому пришли

так если окно темное будет и панель, то и значки естественно темные

Для даркер нужно прописывать другой параметр

Вот это по идее и нужно реализовать:
Papirus (белые окна, черная панель):
actions - ColorScheme-Text
panel - ColorScheme-Background

PapirusDark (один цвет и окна и панель):
actions - ColorScheme-Text
panel - ColorScheme-Text

@varlesh ага, теперь понял чего хочешь добится, но не факт что цвет окна будет сочетаться с цветом панели, и цвет текста впрочем тоже.

Дак это легко меняется в цветовой схеме. За то все унифицировано будет.

Тем более в desktop-файле можно отключить всю эту приблуду

В общем я создаю новое issue для panel

@SmartFinn хех, вот не зря говорят про маны. Написано же:
In the Plasma-framework source repository, two useful tools are present:

currentColorFix.sh: fixes an error in the file format that inkscape often does that would break the coorect application of the stylesheet
apply-stylesheet.sh: looks in the svg file for certain colors (by default from the Breeze palette) and replaces them with the corresponfing stylesheet class, automating a potential long and tedious job

currentColorFix.sh:

#!/bin/sh

if [ $# -ne 1 ]; 
    then echo Usage: $0 file.svgz
    exit 1
fi

if [ ! -f $1 ]; then
    echo "you must specify a valid svg"
    exit 1
fi


file=`echo $1 | cut -d'.' --complement -f2-`
mv $1 $file.svg.gz
gunzip $file.svg.gz

echo Processing $file

/usr/bin/perl -p -i -e "s/color:#[^;]*;(.*)fill:currentColor/\1fill:currentColor/g" $file.svg

gzip $file.svg
mv $file.svg.gz $file.svgz

apply-stylesheet.sh:

#!/bin/bash

PARSED_OPTIONS=$(getopt -n "$0"  -o hf: --long "file:,TextFrom:,TextTo:,BackgroundFrom:,BackgroundTo:,HighlightFrom:,HighlightTo:,ViewTextFrom:,ViewTextTo:,ViewBackgroundFrom:,ViewBackgroundTo:,ViewHoverFrom:,ViewHoverTo:,ViewFocusFrom:,ViewFocusTo:,ButtonTextFrom:,ButtonTextTo:,ButtonBackgroundFrom:,ButtonBackgroundTo:,ButtonHoverFrom:,ButtonHoverTo:,ButtonFocusFrom:,ButtonFocusTo:"  -- "$@")

if [ $? -ne 0 ];
then
  exit 1
fi

eval set -- "$PARSED_OPTIONS"

textFrom=\#31363b
backgroundFrom=\#eff0f1
highlightFrom=\#3daee9
viewTextFrom=\#31363b
viewBackgroundFrom=\#fcfcfc
viewHoverFrom=\#93cee9
viewFocusFrom=\#3daee9
buttonTextFrom=\#31363b
buttonBackgroundFrom=\#eff0f1
buttonHoverFrom=\#93cee9
buttonFocusFrom=\#3daee9

textTo=\#31363b
backgroundTo=\#eff0f1
highlightTo=\#3daee9
viewTextTo=\#31363b
viewBackgroundTo=\#fcfcfc
viewHoverTo=\#93cee9
viewFocusTo=\#3daee9
buttonTextTo=\#31363b
buttonBackgroundTo=\#eff0f1
buttonHoverTo=\#93cee9
buttonFocusTo=\#3daee9

file=''

while true;
do
  case "$1" in

    -h|--help)
      echo "usage $0 [-h|options] -f file.svgz"
      echo "Where options can be:"
      echo " --TextFrom=color html encoded color to replace with the ColorScheme-Text from the stylesheet"
      echo " --TextTo=color html encoded that the ColorScheme-Text class will have"
      echo
      echo " --BackgroundFrom=color html encoded color to replace with the ColorScheme-Background from the stylesheet"
      echo " --BackgroundTo=color html encoded that the ColorScheme-Background class will have"
      echo
      echo " --HighlightFrom=color html encoded color to replace with the ColorScheme-Highlight from the stylesheet"
      echo " --HighlightTo=color html encoded that the ColorScheme-Highlight class will have"
      echo
      echo " --ViewTextFrom=color html encoded color to replace with the ColorScheme-ViewText from the stylesheet"
      echo " --ViewTextTo=color html encoded that the ColorScheme-ViewText class will have"
      echo
      echo " --ViewBackgroundFrom=color html encoded color to replace with the ColorScheme-ViewBackground from the stylesheet"
      echo " --ViewBackgroundTo=color html encoded that the ColorScheme-ViewBackground class will have"
      echo
      echo " --ViewHoverFrom=color html encoded color to replace with the ColorScheme-ViewHover from the stylesheet"
      echo " --ViewHoverTo=color html encoded that the ColorScheme-ViewHover class will have"
      echo
      echo " --ViewFocusFrom=color html encoded color to replace with the ColorScheme-ViewFocus from the stylesheet"
      echo " --ViewFocusTo=color html encoded that the ColorScheme-ViewFocus class will have"
      echo
      echo " --ButtonTextFrom=color html encoded color to replace with the ColorScheme-ButtonText from the stylesheet"
      echo " --ButtonTextTo=color html encoded that the ColorScheme-ButtonText class will have"
      echo
      echo " --ButtonBackgroundFrom=color html encoded color to replace with the ColorScheme-ButtonBackground from the stylesheet"
      echo " --ButtonBackgroundTo=color html encoded that the ColorScheme-ButtonBackground class will have"
      echo
      echo " --ButtonHoverFrom=color html encoded color to replace with the ColorScheme-ButtonHover from the stylesheet"
      echo " --ButtonHoverTo=color html encoded that the ColorScheme-ButtonHover class will have"
      echo
      echo " --ButtonFocusFrom=color html encoded color to replace with the ColorScheme-ButtonFocus from the stylesheet"
      echo " --ButtonFocusTo=color html encoded that the ColorScheme-ButtonFocus class will have"
      echo
      echo "All the colors have default values conformant to the Breeze color palette"
      echo
      exit
     shift;;

    --TextFrom)
      textFrom=$2
      shift 2;;
    --TextTo)
      textTo=$2
      shift 2;;

    --BackgroundFrom)
      backgroundFrom=$2
      shift 2;;
    --BackgroundTo)
      backgroundTo=$2
      shift 2;;

    --HighlightFrom)
      highlightFrom=$2
      shift 2;;
    --HighlightTo)
      highlightTo=$2
      shift 2;;

    --ViewTextFrom)
      viewTextFrom=$2
      shift 2;;
    --ViewTextTo)
      viewTextTo=$2
      shift 2;;

    --ViewBackgroundFrom)
      viewBackgroundFrom=$2
      shift 2;;
    --ViewBackgroundTo)
      viewBackgroundTo=$2
      shift 2;;

    --ViewHoverFrom)
      viewHoverFrom=$2
      shift 2;;
    --ViewHoverTo)
      viewHoverTo=$2
      shift 2;;

    --ViewFocusFrom)
      viewFocusFrom=$2
      shift 2;;
    --ViewFocusTo)
      viewFocusTo=$2
      shift 2;;

    --ButtonTextFrom)
      buttonTextFrom=$2
      shift 2;;
    --ButtonTextTo)
      buttonTextTo=$2
      shift 2;;

    --ButtonBackgroundFrom)
      buttonBackgroundFrom=$2
      shift 2;;
    --ButtonBackgroundTo)
      buttonBackgroundTo=$2
      shift 2;;

    --ButtonHoverFrom)
      buttonBackgroundFrom=$2
      shift 2;;
    --ButtonHoverTo)
      buttonHoverTo=$2
      shift 2;;

    --ButtonFocusFrom)
      buttonFocusFrom=$2
      shift 2;;
    --ButtonFocusTo)
      buttonFocusTo=$2
      shift 2;;

    -f|--file)
      file=`echo $2 | cut -d'.' --complement -f2-`
      shift 2;;

    --)
      shift
      break;;
  esac
done


if [ -z "$file" ]; 
    then echo missing svg file
    exit 1
fi

isSvgz=0

if [ ! -f $file.svgz ] && [ ! -f $file.svg ]; then
    echo "you must specify a valid svg"
    exit 1
fi

if [ -f $file.svgz ]; then
    isSvgz=1
fi


if [ $isSvgz = 1 ]; then
    mv $file.svgz $file.svg.gz
    gunzip $file.svg.gz
fi

echo Processing $file

stylesheet="
      .ColorScheme-Text {
        color:$textTo;
      }
      .ColorScheme-Background {
        color:$backgroundTo;
      }
      .ColorScheme-Highlight {
        color:$highlightTo;
      }
      .ColorScheme-ViewText {
        color:$viewTextTo;
      }
      .ColorScheme-ViewBackground {
        color:$viewBackgroundTo;
      }
      .ColorScheme-ViewHover {
        color:$viewHoverTo;
      }
      .ColorScheme-ViewFocus{
        color:$viewFocusTo;
      }
      .ColorScheme-ButtonText {
        color:$buttonTextTo;
      }
      .ColorScheme-ButtonBackground {
        color:$buttonBackgroundTo;
      }
      .ColorScheme-ButtonHover {
        color:$buttonHoverTo;
      }
      .ColorScheme-ButtonFocus{
        color:$buttonFocusTo;
      }
      "
colors=($textFrom $backgroundFrom $highlightFrom $viewTextFrom $viewBackgroundFrom $viewHoverFrom $viewFocusFrom $buttonTextFrom $buttonBackgroundFrom $buttonHoverFrom $buttonFocusFrom)
colorNames=(ColorScheme-Text ColorScheme-Background ColorScheme-Highlight ColorScheme-ViewText ColorScheme-ViewBackground ColorScheme-ViewHover ColorScheme-ViewFocus ColorScheme-ButtonText ColorScheme-ButtonBackground ColorScheme-ButtonHover ColorScheme-ButtonFocus)

reorderXslt='
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
  xmlns:svg="http://www.w3.org/2000/svg">
 <xsl:output omit-xml-declaration="yes" indent="yes"/>
 <xsl:strip-space elements="*"/>

  <xsl:template match="@* | node()">
    <xsl:copy>
      <xsl:apply-templates select="@* | node()"/>
    </xsl:copy>
  </xsl:template>

  <xsl:template match="svg:defs">
    <xsl:copy>
      <xsl:apply-templates select="@*" />
      <xsl:apply-templates select="*">
        <xsl:sort select="name()" data-type="text" order="descending"/>
      </xsl:apply-templates>
    </xsl:copy>
  </xsl:template>

</xsl:stylesheet>
'
echo $reorderXslt > transform.xsl

if grep -q '"current-color-scheme"' $file.svg; then
    echo replacing the stylesheet
    xmlstarlet ed --update "/svg:svg/svg:defs/_:style" -v "$stylesheet" $file.svg > temp.svg
else
    echo adding the stylesheet
xmlstarlet ed --subnode "/svg:svg/svg:defs" -t elem -n "style" -v "$stylesheet"\
       --subnode "/svg:svg/svg:defs/style" -t attr -n "type" -v "text/css"\
       --subnode "/svg:svg/svg:defs/style" -t attr -n "id" -v "current-color-scheme" $file.svg > temp.svg
fi

xmlstarlet tr transform.xsl temp.svg > temp2.svg
mv temp2.svg temp.svg

for i in {0..4}
do
  xmlstarlet ed --subnode "//*/*[contains(@style, '${colors[i]}') and not (@class)]" -t attr -n "class" -v "${colorNames[i]}" temp.svg > temp2.svg

  mv temp2.svg temp.svg

  sed -i 's/\(style=".*\)fill:'${colors[i]}'/\1fill:currentColor/g' temp.svg
  sed -i 's/\(style=".*\)stop-color:'${colors[i]}'/\1stop-color:currentColor/g' temp.svg
done

rm transform.xsl

mv temp.svg $file.svg
if [ $isSvgz = 1 ]; then
    gzip $file.svg
    mv $file.svg.gz $file.svgz
fi

@varlesh уже нашел currentColorFillFix.sh, apply-stylesheet.sh, но они нам особо и не нужны

Это из плазмы, ща гляну в значках может у них есть tools какие еще

нашел optimize-svg.sh через svgo тот же ))

хех, с symbolic они интересно сделали. Прокинули просто симлинки и всё... кстати получается там тоже юзается css

@SmartFinn Сереж, второй скрипт apply-stylesheet.sh как раз и добавляет CSS ведь в svg да?
Ток там юзается svgz (но эт не проблема думаю)

@varlesh да, gzip можно убрать. Правда скрипт цветные ломает.

хм, странно а как же они для Breeze делали? там ведь тоже цветные есть

Ща исходник гляну их

Ага, вон оно чё:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 22">
  <defs id="defs3051">
    <style type="text/css" id="current-color-scheme">
      .ColorScheme-Text {
        color:#4d4d4d;
      }
      .ColorScheme-NegativeText {
        color:#da4453;
      }
      </style>
  </defs>
  <path 
     style="fill:currentColor;fill-opacity:1;stroke:none" 
     d="M 10.988281 3 L 6 7.9902344 L 6 8 L 6 9 L 6 13 L 6 14 L 6 14.009766 L 10.988281 19 L 12 19 L 12 18.597656 L 12 3.4023438 L 12 3 L 10.988281 3 z M 3 8 L 3 9 L 3 13 L 3 14 L 5 14 L 5 13 L 5 9 L 5 8 L 3 8 z "
     class="ColorScheme-Text"/>
  <path
     style="fill:currentColor;fill-opacity:1;stroke:none" 
     d="M 13 10 L 13 12 L 19 12 L 19 10 L 13 10 z "
     class="ColorScheme-NegativeText"
     />
</svg>

@varlesh интересное решение

Вот другой пример с Breeze Dark:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 22">
  <defs id="defs3051">
    <style type="text/css" id="current-color-scheme">
      .ColorScheme-Text {
        color:#f2f2f2;
      }
      .ColorScheme-PositiveText {
        color:#27ae60;
      }
      </style>
  </defs>
  <path style="fill:currentColor;fill-opacity:1;stroke:none" 
     d="M 11 4 A 6 6 0 0 0 6.546875 6 L 4 6 C 3.446 6 3 6.446 3 7 L 3 13 C 3 13.554 3.446 14 4 14 L 6.5371094 14 A 6 6 0 0 0 11 16 A 6 6 0 0 0 15.453125 14 L 18 14 C 18.554 14 19 13.554 19 13 L 19 7 C 19 6.446 18.554 6 18 6 L 15.462891 6 A 6 6 0 0 0 11 4 z M 11 16 C 10.446 16 10 16.446 10 17 C 10 17.028 10.013325 17.052078 10.015625 17.080078 C 8.3941076 17.311278 7 18 7 18 L 7 19 L 15 19 L 15 18 C 15 18 13.605887 17.311178 11.984375 17.080078 C 11.986675 17.052078 12 17.028 12 17 C 12 16.446 11.554 16 11 16 z M 11 5 A 5 5 0 0 1 14.091797 6.0839844 A 5 5 0 0 1 14.291016 6.2480469 A 5 5 0 0 1 14.474609 6.4199219 A 5 5 0 0 1 14.658203 6.6074219 A 5 5 0 0 1 14.835938 6.8085938 A 5 5 0 0 1 14.992188 7 L 16.189453 7 L 18 7 L 18 8 L 17 8 L 17 12 L 18 12 L 18 13 L 16.1875 13 L 14.992188 13 A 5 5 0 0 1 13.990234 14 A 5 5 0 0 1 11 15 A 5 5 0 0 1 7.9082031 13.916016 A 5 5 0 0 1 7.7089844 13.751953 A 5 5 0 0 1 7.5253906 13.580078 A 5 5 0 0 1 7.3417969 13.392578 A 5 5 0 0 1 7.1640625 13.191406 A 5 5 0 0 1 7.0078125 13 L 5.8105469 13 L 4 13 L 4 12 L 5 12 L 5 8 L 4 8 L 4 7 L 5.8125 7 L 7.0078125 7 A 5 5 0 0 1 7.328125 6.6152344 A 5 5 0 0 1 8.0097656 6 A 5 5 0 0 1 11 5 z "
     class="ColorScheme-Text"
     />
  <path
      style="fill:currentColor;fill-opacity:1;stroke:none" 
     class="ColorScheme-PositiveText"
    d="M 11 7 A 2.9999826 2.9999826 0 0 0 8 10 A 2.9999826 2.9999826 0 0 0 11 13 A 2.9999826 2.9999826 0 0 0 14 10 A 2.9999826 2.9999826 0 0 0 11 7 z "
      />
</svg>

т.е. для монохромных там юзаются все цвета из цветовой схемы

Они разумно сделали кстати, так как это универсально

У нас сейчас синий цвет (нотификации) прибит гвоздями получается, а у них меняется в соответствии с цветовой схемой

@varlesh посмотри заодно что они с иконками для панели делают

Вот мы опять на грабли наступили, уже не второй раз... Всё уже готово и доступно, утилиты и способ

@varlesh посмотри заодно что они с иконками для панели делают

У них нет даркер, а потому они один класс прописывают

Вот к примеру ktorrent 22px (монохромная):

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 22">
  <defs id="defs3051">
    <style type="text/css" id="current-color-scheme">
      .ColorScheme-Text {
        color:#4d4d4d;
      }
      </style>
  </defs>
    <path
       style="fill:currentColor;fill-opacity:1;stroke:none" 
       d="M 8 3 L 8 9 L 9 9 L 9 4 L 13 4 L 13 9 L 14 9 L 14 3 L 13 3 L 9 3 L 8 3 z M 5.7929688 10 L 5 10.816406 L 11 17 L 17 10.816406 L 16.207031 10 L 11 15.367188 L 5.7929688 10 z M 4 17 L 4 19 L 5 19 L 17 19 L 18 19 L 18 17 L 17 17 L 17 18 L 5 18 L 5 17 L 4 17 z "
     class="ColorScheme-Text"
     />
</svg>

Забили они кароче на даркер или потом может добавят версию...

@SmartFinn Так что нам делать-то опять?

@SmartFinn Так что нам делать-то опять?

с чем? :)

я предлагаю воспользоваться средствами из Breeze и воплотить задуманное.
Т.е. поправить их скрипты под нас, там по сути тоже самое только унифицировано.
Ну и пройти ими Papirus а потом седом меняем класс для панели для Dark

Мы вот столько времени потратили на то, что уже готово. Мне обидно прям :(

Сколько колупались с этим седом, svgo, скриптами.... а все уже давно написано и лежит в свободном доступе

В общем я сейчас создам папку tools, кину туда скрипты из kde... а там видно будет

@varlesh

Сколько колупались с этим седом, svgo, скриптами.... а все уже давно написано и лежит в свободном доступе

не знаю что ты там увидел, но полезного там мало

твой скрипт туда же кинул

@varlesh

currentColorFillFix.sh — полезен максимум regex, и то я бы свой сделал
apply-stylesheet.sh — ломает цветные иконки
svg-optimize.sh — ломает иконки

у нас пол-пути пройдено... надо для синих значков задать параметр CSS

apply-stylesheet.sh — ломает цветные. Как они тогда цветные делают?

ты ж сам сниппеты приводил, у них не используются style="color:#xxxxxx"

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

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 22">
  <defs id="defs3051">
    <style type="text/css" id="current-color-scheme">
      .ColorScheme-Text {
        color:#f2f2f2;
      }
      .ColorScheme-PositiveText {
        color:#27ae60;
      }
      </style>
  </defs>
  <path style="fill:currentColor;fill-opacity:1;stroke:none" 
     d="M 11 4 A 6 6 0 0 0 6.546875 6 L 4 6 C 3.446 6 3 6.446 3 7 L 3 13 C 3 13.554 3.446 14 4 14 L 6.5371094 14 A 6 6 0 0 0 11 16 A 6 6 0 0 0 15.453125 14 L 18 14 C 18.554 14 19 13.554 19 13 L 19 7 C 19 6.446 18.554 6 18 6 L 15.462891 6 A 6 6 0 0 0 11 4 z M 11 16 C 10.446 16 10 16.446 10 17 C 10 17.028 10.013325 17.052078 10.015625 17.080078 C 8.3941076 17.311278 7 18 7 18 L 7 19 L 15 19 L 15 18 C 15 18 13.605887 17.311178 11.984375 17.080078 C 11.986675 17.052078 12 17.028 12 17 C 12 16.446 11.554 16 11 16 z M 11 5 A 5 5 0 0 1 14.091797 6.0839844 A 5 5 0 0 1 14.291016 6.2480469 A 5 5 0 0 1 14.474609 6.4199219 A 5 5 0 0 1 14.658203 6.6074219 A 5 5 0 0 1 14.835938 6.8085938 A 5 5 0 0 1 14.992188 7 L 16.189453 7 L 18 7 L 18 8 L 17 8 L 17 12 L 18 12 L 18 13 L 16.1875 13 L 14.992188 13 A 5 5 0 0 1 13.990234 14 A 5 5 0 0 1 11 15 A 5 5 0 0 1 7.9082031 13.916016 A 5 5 0 0 1 7.7089844 13.751953 A 5 5 0 0 1 7.5253906 13.580078 A 5 5 0 0 1 7.3417969 13.392578 A 5 5 0 0 1 7.1640625 13.191406 A 5 5 0 0 1 7.0078125 13 L 5.8105469 13 L 4 13 L 4 12 L 5 12 L 5 8 L 4 8 L 4 7 L 5.8125 7 L 7.0078125 7 A 5 5 0 0 1 7.328125 6.6152344 A 5 5 0 0 1 8.0097656 6 A 5 5 0 0 1 11 5 z "
     class="ColorScheme-Text"
     />
  <path
      style="fill:currentColor;fill-opacity:1;stroke:none" 
     class="ColorScheme-PositiveText"
    d="M 11 7 A 2.9999826 2.9999826 0 0 0 8 10 A 2.9999826 2.9999826 0 0 0 11 13 A 2.9999826 2.9999826 0 0 0 14 10 A 2.9999826 2.9999826 0 0 0 11 7 z "
      />
</svg>

Прописаны 2 класса class="ColorScheme-PositiveText" и class="ColorScheme-Text"

Вот два значка для трея к примеру.
image
В правом прописано 1 класс, в левом 2 класса

а у нас нет класса для монохромных значков с синим цветом

вот эти
image

и флаги там еще в actions...

Was this page helpful?
0 / 5 - 0 ratings

Related issues

Ste74 picture Ste74  ·  22Comments

heldderarbeit picture heldderarbeit  ·  29Comments

NusryNizam picture NusryNizam  ·  25Comments

lokesh-krishna picture lokesh-krishna  ·  22Comments

bepvte picture bepvte  ·  36Comments