I invite you to contribute for improving

gusbemacbe commented 5 years ago

Hello @SmartFinn!

I am inviting you to contribute and to improve this little repository.

I am not sure if these codes are bad and inelegant for you. If so, you can improve (only when you have time) if you want.

Little problem is that, these files do not preserve the symlinks. I found the solutions, they preserved the symlinks, but they makde them unsuable.

Based on:

Is it bad to use the conditions for finding the directories and to cd multiple specific folders of a found directory to call the function?
To prevent from destroying the symlinks, I found the solutions, but they did not work. Should it be applied to Perl or Bash/Shell?

I also would like to replace Perl files for Bash files, because Bash offers --in-place --follow-symlinks, but I am not sure I can something similar in Bash to that in Perl.

I am not sure it works for any terminal and if it is bash-agnostic.

Please do not forget of putting your credit on AUTHORS and CREDIT.

gusbemacbe commented 5 years ago

Once they set the gradient colours, will they export as an icons theme like we do with Oomox?

actionless commented 5 years ago

yeah, nothing will change much in the current workflow, just change_color.sh will inherit those lines

https://github.com/gusbemacbe/suru-plus-colourise/blob/master/arrogrin.pl#L5-L10 https://github.com/gusbemacbe/suru-plus-colourise/blob/master/arrogrin.pl#L34

in case if PAPIRUS_GRADIENT1 and PAPIRUS_GRADIENT2 colors are set in oomox theme

if not -- theme will be generated exactly as now

actionless commented 5 years ago

and also change_color.sh script could be moved to he suru main repo, the same as it's done in most of other themes

in that case your users can use the script without installing oomox (and in oomox plugin just path to change_color.sh need to be updated, no other change need to be done)

gusbemacbe commented 5 years ago

Great, @actionless, and the Perl files?

A still very complicated question. All 16px icons do not linearGradient, they have only tags fill, must I readapt all 16px icons?

actionless commented 5 years ago

what with perl files? i thought what linearGradient replacement is just plain regex so sed as in change_color.sh should be fine

for the second (complicated) question i think let's wait for @SmartFinn i don't think i understand this topic much

gusbemacbe commented 5 years ago

what with perl files?

I used them to add linearGradient to all the SVG files that do not have them. One problem is that, some files have defs and others do not. Another is that, some icons must not work when I replace the colour for another, for example, 0ad.svg.

Yes, and we have discussed about reverting to the original above, @SmartFinn also thought it was impossible.

SmartFinn commented 5 years ago

@gusbemacbe

must I readapt all 16px icons?

It will simplifies the changing color gradient. You could add the following snippet inside <defs> to each monochrome icon:

<linearGradient id="grad1" x1="0%" x2="0%" y1="0%" y2="100%">
 <stop offset="0%" style="stop-color:#f99f5e; stop-opacity:1"/>
 <stop offset="100%" style="stop-color:#f95e6b; stop-opacity:1"/>
</linearGradient>

This allows to change the gradient with a simple command that be added to change_color.sh:

sed -i'' -e 's/5c616c/url(#grad1)/g' \
         -e "s/f99f5e/$SURUPLUS_GRADIENT1/g" \
         -e "s/f95e6b/$SURUPLUS_GRADIENT2/g"

gusbemacbe commented 5 years ago

snippet

Do I add to file by file?

SmartFinn commented 5 years ago

@gusbemacbe wait, I forget that gradients do not work with KDE color scheme. I don't knonw how to swap colors to gradients without breaking KDE color scheme.

actionless commented 5 years ago

@SmartFinn but what about doing the same logic as in perl script but do it inside change_color.sh?

and do it only conditionalyy when both gradient1 and gradient2 are set

SmartFinn commented 5 years ago

@actionless the perl scripts have the same issues. To change colors to gradients we can use this command:

sed -i'' -e 's/currentColor/url(#grad1)/g' \
         -e "s/f99f5e/$SURUPLUS_GRADIENT1/g" \
         -e "s/f95e6b/$SURUPLUS_GRADIENT2/g"

but it break KDE color scheme and leave class="ColorScheme-Text" class="ColorScheme-Highlight" applied to paths (it's not a problem).

<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
 <defs>
  <style id="current-color-scheme" type="text/css">
   .ColorScheme-Text { color:#5c616c; } .ColorScheme-Highlight { color:#5294e2; }
  </style>
  <linearGradient id="grad1" x1="0%" x2="0%" y1="0%" y2="100%">
   <stop offset="0%" style="stop-color:#f99f5e; stop-opacity:1"/>
   <stop offset="100%" style="stop-color:#f95e6b; stop-opacity:1"/>
  </linearGradient>
 </defs>
 <path style="fill:currentColor" class="ColorScheme-Text" d="..."/>
</svg>

SmartFinn commented 5 years ago

@gusbemacbe anyway you have to decide what to do with the gradients. If it's okay - add the snippet to the icons.

gusbemacbe commented 5 years ago

@SmartFinn

I will make a backup of a folder and will test, using Sublime Text.

Is this command wrong?

mv $(find *.svg exec grep -L "<defs") ./without-defs

gusbemacbe commented 5 years ago

@actionless and @SmartFinn !

I have just tested and it worked, no breaks in KDE:

But I used Sublime Text to use Regex.

I created a folder called without-defs and run mv $(grep -L '<defs' *.svg) without-defs/ to move all SVG files which do not have defs tag.
In the main folder, ignoring the folder without-defs, I apply the regex to put defs: a. find: <defs> b. replace:

  <defs>
  <style id="current-color-scheme" type="text/css">
   .ColorScheme-Text { color:#5c616c; } .ColorScheme-Highlight { color:#5294e2; }
  </style>
  <linearGradient id="grad1" x1="0%" x2="0%" y1="0%" y2="100%">
   <stop offset="0%" style="stop-color:#f99f5e; stop-opacity:1"/>
   <stop offset="100%" style="stop-color:#f95e6b; stop-opacity:1"/>
  </linearGradient>

Following, I apply to find fill="#fff"|style="fill:#fff" and to replace for style="fill:currentColor" class="ColorScheme-Text"
In the folder without-defs, find (<svg)([^<]*|[^>]*) and replace for:

  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
  <defs>
  <style id="current-color-scheme" type="text/css">
   .ColorScheme-Text { color:#5c616c; } .ColorScheme-Highlight { color:#5294e2; }
  </style>
  <linearGradient id="grad1" x1="0%" x2="0%" y1="0%" y2="100%">
   <stop offset="0%" style="stop-color:#f99f5e; stop-opacity:1"/>
   <stop offset="100%" style="stop-color:#f95e6b; stop-opacity:1"/>
  </linearGradient>
 </defs>

Reepeat the item 3.
Finally:


sed --in-place --follow-symlinks *.svg -e 's/currentColor/url(#grad1)/g' \
         -e "s/f99f5e/$SURUPLUS_GRADIENT1/g" \
         -e "s/f95e6b/$SURUPLUS_GRADIENT2/g"

gusbemacbe commented 5 years ago

In the folder without-defs, I had to avoid (<svg)([^<]*|[^>]*). I used viewBox="0 0 16 16"> for no breaks.

gusbemacbe commented 5 years ago

No breaks in KDE. Updated the repository. Check the folder 16. Then I can replace currentColor/url(#grad1) or url(#grad1)/currentColor, using sed.

What do you think, @SmartFinn and @actionless ?

gusbemacbe commented 5 years ago

Hello @SmartFinn and @actionless !

Should the solid and the gradient be applied only to the folders 16 of apps, devices, mimetypes and places? And actions?

actionless commented 5 years ago

sorry, i don't know those icon-theme-specific details, @SmartFinn is a man

i only now started to think again about how those options will be looking in GUI: not sure what will be better just to have GRADIENT1 and GRADIENT2 colors

or to have switch to enable/disable gradient and based on that show BG or GRADIENT{1,2} color options

gusbemacbe commented 5 years ago

@actionless and @SmartFinn

Not every SVG file has always the same path fill, because some have path style="stroke...", others have different tags, but I knew how to fix it. I fixed all SVG files. I was surpsied to find several files with Gravit base64-coded. I cleaned and purified all them. No breaks in KDE. I added class="ColorScheme-Text" to all SVG files.

I added apps, devices, mimetypes and places in this repository for you to check.

gusbemacbe commented 5 years ago

Ah, I replaced grad1 for oomox, and oomox for currentColor, some got broken due to lack of ColorScheme-Text. I am fixing now.

gusbemacbe commented 5 years ago

Hi @actionless !

Finally I have fixed everything. I tested to replace and vice-versa, everything worked without breaks in KDE. All SVG files have ColorScheme-Text and currentColor. I also have reserved oomox for you to test.

I have duplicated the folder 16 to test-for-oomox, I replaced grad1 for oomox. Then I replaced url(#oomox) for currentColor for you to test with your Oomox:

If the user wants to replace the gardients colours with any colours, then replace currentColor for url(#oomox), the replace like:

  <linearGradient id="oomox" x1="0%" x2="0%" y1="0%" y2="100%">
   <stop offset="0%" style="stop-color:$GRADIENT1; stop-opacity:1"/>
   <stop offset="100%" style="stop-color:$GRADIENT2; stop-opacity:1"/>
  </linearGradient>

It will be exported like you do with folders and small icons customisation.

gusbemacbe commented 5 years ago

Hi @actionless and @SmartFinn !

My work is concluded after several tests. No breaks in KDE. :-)

in the folder 16, it is for you to see how all icons in all folders are.
in the folder test-for-oomox, it is for you, @actionless , to test with Oomox, and I also expanded the list of gradients:

  <linearGradient id="oomox" x1="0%" x2="0%" y1="0%" y2="100%">
   <stop offset="0%" style="stop-color:#efefe7; stop-opacity:1"/>
   <stop offset="100%" style="stop-color:#8f8f8b; stop-opacity:1"/>
  </linearGradient>

Tips:

a. Enter in the directory and try to run sed --in-place --follow-symlinks */*.svg -e 's/currentColor/url(#fitdance)/g', enjoy yourself with new colour, see if there are no breaks in KDE. :-) b. If you want to revert to solid or default colour, run sed --in-place --follow-symlinks */*.svg -e 's/url(#fitdance)/currentColor/g' c. Also try to run sed --in-place --follow-symlinks */*.svg -e 's/url(#fitdance)/url(#90ssummer)/g'

In the folder test-for-oomox-2, it is the same, but oomox is different of the former, for you to test with Oomox:

  <linearGradient id="oomox" x1="0%" x2="0%" y1="0%" y2="100%">
   <stop offset="0%" style="stop-color:$GRADIENT1; stop-opacity:1"/>
   <stop offset="100%" style="stop-color:$GRADIENT2; stop-opacity:1"/>
  </linearGradient>

Voilà!

actionless commented 5 years ago

thanks!

i have 2 small questions:

in oomox GUI which of color options should be removed when Gradients switch will be active? Light Base or Medium?
mb in the end of the change_color.sh to run some svg optimizer to trim unused styles from each icon?

gusbemacbe commented 5 years ago

in oomox GUI which of color options should be removed when Gradients switch will be active? Light Base or Medium?

Yes, if exported. If the user wants to change again, he has to use the original icons theme to export again. Restrict the folders apps, devices, mimetypes and places. The actions and panel should be remain solid colour. Keep symbolic icons out of colours because symbolic icons do not support the colourfulness as @SmartFinn has alerted me.

mb in the end of the change_color.sh to run some svg optimizer to trim unused styles from each icon?

I have already cleaned all unused styles of almost all icons, during 9 hours. If you are referring to the list of gradients, then yes, you can clean the gradients and leave only oomox if the user wants to use Oomox. Juts do not temove ColorScheme-Textand that style tag, because they need to work in KDE, as @SmartFinn recommends.

gusbemacbe commented 5 years ago

I forgot of adding important observations:

If the user prefers the solid colour, here is like:

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

Let him replace #5c616c with any colour he wants.

Forbid the user of adding #5c616c to the gradients of oomox because it can overwrite ColorScheme-Text.

actionless commented 5 years ago

but which of them,

Light Base or Medium?

i thought svg optimization tools automatically detect what style is not used by any elements

actionless commented 5 years ago

 because it can overwrite `ColorScheme-Text`.

it can be avoided by double-sedding:

1)sed -e s/111111/%COLOR1%/g -e s/222222/%COLOR2%/g 2) sed -e s/%COLOR1%/654321/g -e s/%COLOR2%/654321/g

gusbemacbe commented 5 years ago

Light Base or Medium?

Medium

But the small icons are not folders. Can you explain the difference?

i thought svg optimization tools automatically detect what style is not used by any elements

SVGO, SVG Cleaner and @SmartFinn's ffsvg still fail to clean and to optimise the SVG which contained dirty Inkscape codes and dirty Gravit Designer codes. Therefore, I cleaned by myself.

I reduced the folders apps from 10 MB to 6.8 MB because of dirty Gravit codes.

actionless commented 5 years ago

But the small icons are not folders. Can you explain the difference?

you mean "Light base / Folders"? it was created for gnome-colors, there they have Light Base and Light Base Folders

you could check with @SmartFinn why he chosen one over another since he was authoring the plugin. i think because it was copied from Papirus and there that colorname is used for folders.

SmartFinn commented 5 years ago

@gusbemacbe I don't understand what you want to do. Why did you add the gradients? Do you know how to switch them with Oomox?

  <linearGradient id="arrongin" x1="0%" x2="0%" y1="0%" y2="100%">
   <stop offset="0%" style="stop-color:#dd9b44; stop-opacity:1"/>
   <stop offset="100%" style="stop-color:#ad6c16; stop-opacity:1"/>
  </linearGradient>
  <linearGradient id="aurora" x1="0%" x2="0%" y1="0%" y2="100%">
   <stop offset="0%" style="stop-color:#09D4DF; stop-opacity:1"/>
   <stop offset="100%" style="stop-color:#9269F4; stop-opacity:1"/>
  </linearGradient>
  <linearGradient id="fitdance" x1="0%" x2="0%" y1="0%" y2="100%">
   <stop offset="0%" style="stop-color:#1AD6AB; stop-opacity:1"/>
   <stop offset="100%" style="stop-color:#329DB6; stop-opacity:1"/>
  </linearGradient>
  <linearGradient id="oomox" x1="0%" x2="0%" y1="0%" y2="100%">
   <stop offset="0%" style="stop-color:$GRADIENT1; stop-opacity:1"/>
   <stop offset="100%" style="stop-color:$GRADIENT2; stop-opacity:1"/>
  </linearGradient>
  <linearGradient id="rainblue" x1="0%" x2="0%" y1="0%" y2="100%">
   <stop offset="0%" style="stop-color:#00F260; stop-opacity:1"/>
   <stop offset="100%" style="stop-color:#0575E6; stop-opacity:1"/>
  </linearGradient>
  <linearGradient id="sunrise" x1="0%" x2="0%" y1="0%" y2="100%">
   <stop offset="0%" style="stop-color: #FF8501; stop-opacity:1"/>
   <stop offset="100%" style="stop-color: #FFCB01; stop-opacity:1"/>
  </linearGradient>
  <linearGradient id="telinkrin" x1="0%" x2="0%" y1="0%" y2="100%">
   <stop offset="0%" style="stop-color: #b2ced6; stop-opacity:1"/>
   <stop offset="100%" style="stop-color: #6da5b7; stop-opacity:1"/>
  </linearGradient>
  <linearGradient id="60spsycho" x1="0%" x2="0%" y1="0%" y2="100%">
   <stop offset="0%" style="stop-color: #df5940; stop-opacity:1"/>
   <stop offset="25%" style="stop-color: #d8d15f; stop-opacity:1"/>
   <stop offset="50%" style="stop-color: #e9882a; stop-opacity:1"/>
   <stop offset="100%" style="stop-color: #279362; stop-opacity:1"/>
  </linearGradient>
  <linearGradient id="90ssummer" x1="0%" x2="0%" y1="0%" y2="100%">
   <stop offset="0%" style="stop-color: #f618c7; stop-opacity:1"/>
   <stop offset="20%" style="stop-color: #94ffab; stop-opacity:1"/>
   <stop offset="50%" style="stop-color: #fbfd54; stop-opacity:1"/>
   <stop offset="100%" style="stop-color: #0f83ae; stop-opacity:1"/>
  </linearGradient>

Why did you replace colors to the keywords $GRADIENT1 $GRADIENT2? That makes no sense.

Should the solid and the gradient be applied only to the folders 16 of apps, devices, mimetypes and places? And actions?

That you should decide.

2. in the folder test-for-oomox, it is for you, @actionless , to test with Oomox

It's can't be tested in Oomox for now. We'll update the plugin when the changes will be pushed to suru-plus master.

gusbemacbe commented 5 years ago

Why did you add the gradients?

Because of this repository.

Do you know how to switch them with Oomox?

Oomox will not switch, will replace currentColor for oomox and change the oomox gradient colours.

Who will switch will be this repository.

Why did you replace colors to the keywords $GRADIENT1 $GRADIENT2? That makes no sense.

@actionless suggested me. Maybe I understood something wrong.

SmartFinn commented 5 years ago

@actionless

or to have switch to enable/disable gradient and based on that show BG or GRADIENT{1,2} color options

It should be a switch that passed SURUPLUS_GRADIENT_ENABLED variable to the export script or enable/disable passing SURUPLUS_GRADIENT{1,2} variable.

in oomox GUI which of color options should be removed when Gradients switch will be active? Light Base or Medium?

Nothing bad happens when the script changed colors and gradients at the same time.

mb in the end of the change_color.sh to run some svg optimizer to trim unused styles from each icon?

I think it's too much.

SmartFinn commented 5 years ago

@gusbemacbe

Oomox will not switch, will replace currentColor for oomox and change the oomox gradient colours.

Ok. No need to add a separate gradient for oomox, we can change colors in any of them.

gusbemacbe commented 5 years ago

Ok, today in the afternoon, I'll push the changes to suru-plus for you to test.

gusbemacbe commented 5 years ago

Hi @actionless and @SmartFinn !

Sorry for my absence, yesterday I had to go to bank for solving the problems with my credit card, then I went to the mall for buying a new suit. Today, I had to go twice again to bank for paying my friend's son college invoice.

gusbemacbe commented 5 years ago

But I have just merged the changes to Suru++'s master, then you can test now.

gusbemacbe commented 5 years ago

@actionless and @SmartFinn, I know you are busy, but can I update the icons themes if you did not test yet?

SmartFinn commented 5 years ago

@gusbemacbe sure.

actionless commented 5 years ago

yup you can do it anytime, as i mentioned in oomox ticket which you created:

Suru-Plus dependency of dev version of oomox is made via submodule so i need to update it manually via git when i know what both python plugin and repo with theme/icons are compatible with each other

in stable versions of oomox that dependency is managed manually by packager, who decided which tag/revision of each theme/icon/whatever to use while building the package

as about updating oomox plugin and change_color.sh script for the new options -- i can do it and test it on Wednesday if SmartFinn won't volunteer earlier (if so: here's example of conditional option: https://github.com/themix-project/oomox/blob/master/plugins/import_pil/oomox_plugin.py#L227-L236 ie it displayed only if value_filter is satisfied)

also it would be good to push oomox version to 1.12 afterwards, beacuse last 1.11 wasn't including Suru-Plus yet

actionless commented 5 years ago

@gusbemacbe btw which colors should be replaced for new gradients support? ie like this sed expression: https://github.com/themix-project/oomox/blob/master/plugins/icons_suruplus/change_color.sh#L136-L138

gusbemacbe commented 5 years ago

@actionless

Are you speaking about folder gradient or small icons gradient?

<linearGradient id="oomox" x1="0%" x2="0%" y1="0%" y2="100%">
   <stop offset="0%" style="stop-color:#efefe7; stop-opacity:1"/>
   <stop offset="100%" style="stop-color:#8f8f8b; stop-opacity:1"/>
  </linearGradient>

#efefe7
#8f8f8b

SmartFinn commented 5 years ago

@actionless

It's a part of change_colors.sh for the gradient changing:

if [ -n "${SURUPLUS_GRADIENT1:-}" ] && [ -n "${SURUPLUS_GRADIENT2:-}" ]; then
    echo ":: Replacing gradient colors..."
    find "$tmp_dir"/Suru++/apps/16 \
        "$tmp_dir"/Suru++/devices/16 \
        "$tmp_dir"/Suru++/places/16 \
        -type f -name '*.svg' \
        -exec sed -i'' \
            -e 's/currentColor/url(#arrongin)/g' \
            -e "s/dd9b44/$SURUPLUS_GRADIENT1/g" \
            -e "s/ad6c16/$SURUPLUS_GRADIENT2/g" '{}' \;
fi

gusbemacbe commented 5 years ago

@actionless

Any news? Did you try to apply @SmartFinn's snippet?

actionless commented 5 years ago

sorry for the delay, please try with oomox-git from AUR

actionless commented 5 years ago

i also did 2 small fixes afterwards, in case if you're already installed -- please upgrade again

actionless commented 5 years ago

also, after you'll confirm what new option works as expected i will push a new release (and also i'll need to pick a new 'seasonal' theme for this month, ie for March, previous monthly theme was dedicated to february and st valentines day, https://github.com/themix-project/oomox/issues/214)

also don't hesitate to upload your own signature Suru-Plus oomox themes to main oomox repo (ie with a whole theme to accompany your favorite suru presets)

gusbemacbe commented 5 years ago

@actionless !

It worked perfectly. But you forgot of adding mimetypes/16 at https://github.com/themix-project/oomox/blob/master/plugins/icons_suruplus/change_color.sh#L165.

gusbemacbe commented 5 years ago

Replace

-e 's/currentColor/url(#arrongin)/g' \
-e "s/dd9b44/$SURUPLUS_GRADIENT1/g" \
-e "s/ad6c16/$SURUPLUS_GRADIENT2/g" '{}' \;

for

-e 's/currentColor/url(#oomox)/g' \
-e "s/efefe7/$SURUPLUS_GRADIENT1/g" \
-e "s/8f8f8b/$SURUPLUS_GRADIENT2/g" '{}' \;

i will push a new release (and also i'll need to pick a new 'seasonal' theme for this month, ie for March, previous monthly theme was dedicated to february and st valentines day, themix-project/oomox#214)

Do I need to create the icons colours (folders and small icons) for 'seasonal' theme?

also don't hesitate to upload your own signature Suru-Plus oomox themes to main oomox repo (ie with a whole theme to accompany your favorite suru presets)

I do not understand. Are you suggesting to add my signature to every icon or to icons theme? My favourite Suru++ preset is FitDance in case of gradient colours of small icons, teal in case of solid colour of small icons and cyan in case of folders colour.

actionless commented 5 years ago

added mimetypes

better let's wait for @SmartFinn then to finalize the script regarding colors, because current script seems to replace it correctly

Do I need to create the icons colours (folders and small icons) for 'seasonal' theme?

no, it can be done purely in oomox gui app

My favourite Suru++ preset is FitDance

my proposal for you was to make in oomox a matching gtk/terminal to that icontheme, and save as oomox preset, so your ideas will be better represented in the theme list

gusbemacbe commented 5 years ago

better let's wait for @SmartFinn then to finalize the script regarding colors, because current script seems to replace it correctly

Ok. I am translating your Oomox into other foreign languages.

gusbemacbe / suru-plus-colourise

I invite you to contribute for improving #1