angel/FlatLaf
1
0
Fork 0
mirror of https://github.com/JFormDesigner/FlatLaf.git synced 2026-02-10 22:17:13 -06:00
Code Issues Packages Projects Releases Wiki Activity

FlatSVGIcon: support color filtering

Browse Source
This commit is contained in:
Karl Tauber
2020-05-03 18:21:00 +02:00
parent 464787dc1e
commit 4bd3b889dc
15 changed files with 154 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files

89
flatlaf-core/src/main/java/com/formdev/flatlaf/FlatIconColors.java Normal file
View File

@@ -0,0 +1,89 @@
/*
* Copyright 2020 FormDev Software GmbH
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* https://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
package com.formdev.flatlaf;
/**
* Default color palette for action icons and object icons.
* <p>
* The idea is to use only this well defined set of colors in SVG icons and
* then they are replaced at runtime to dark variants or to other theme colors.
* Then a single SVG icon (light variant) can be used for dark themes too.
* IntelliJ Platform uses this mechanism to allow themes to change IntelliJ Platform icons.
* <p>
* Use the {@code *_DARK} colors only in {@code *_dark.svg} files.
* <p>
* The colors are based on IntelliJ Platform
* <a href="https://jetbrains.design/intellij/principles/icons/#action-icons">Action icons</a>
* and
* <a href="https://jetbrains.design/intellij/principles/icons/#noun-icons">Noun icons</a>
* <p>
* These colors may be changed by IntelliJ Platform themes.
* <p>
* You may use these colors also in your application (outside of SVG icons), but do
* not use the RGB values defined in this enum.<br>
* Instead use {@code UIManager.getColor( FlatIconColors.ACTIONS_GREY.key )}.
*
* @author Karl Tauber
*/
public enum FlatIconColors
{
// colors for action icons
// see https://jetbrains.design/intellij/principles/icons/#action-icons
ACTIONS_RED ( 0xDB5860, "Actions.Red", true, false ),
ACTIONS_RED_DARK ( 0xC75450, "Actions.Red", false, true ),
ACTIONS_YELLOW ( 0xEDA200, "Actions.Yellow", true, false ),
ACTIONS_YELLOW_DARK ( 0xF0A732, "Actions.Yellow", false, true ),
ACTIONS_GREEN ( 0x59A869, "Actions.Green", true, false ),
ACTIONS_GREEN_DARK ( 0x499C54, "Actions.Green", false, true ),
ACTIONS_BLUE ( 0x389FD6, "Actions.Blue", true, false ),
ACTIONS_BLUE_DARK ( 0x3592C4, "Actions.Blue", false, true ),
ACTIONS_GREY ( 0x6E6E6E, "Actions.Grey", true, false ),
ACTIONS_GREY_DARK ( 0xAFB1B3, "Actions.Grey", false, true ),
ACTIONS_GREYINLINE ( 0x7F8B91, "Actions.GreyInline", true, false ),
ACTIONS_GREYINLINE_DARK ( 0x7F8B91, "Actions.GreyInline", false, true ),
// colors for object icons
// see https://jetbrains.design/intellij/principles/icons/#noun-icons
OBJECTS_GREY ( 0x9AA7B0, "Objects.Grey" ),
OBJECTS_BLUE ( 0x40B6E0, "Objects.Blue" ),
OBJECTS_GREEN ( 0x62B543, "Objects.Green" ),
OBJECTS_YELLOW ( 0xF4AF3D, "Objects.Yellow" ),
OBJECTS_YELLOW_DARK ( 0xD9A343, "Objects.YellowDark" ),
OBJECTS_PURPLE ( 0xB99BF8, "Objects.Purple" ),
OBJECTS_PINK ( 0xF98B9E, "Objects.Pink" ),
OBJECTS_RED ( 0xF26522, "Objects.Red" ),
OBJECTS_RED_STATUS ( 0xE05555, "Objects.RedStatus" ),
OBJECTS_GREEN_ANDROID ( 0xA4C639, "Objects.GreenAndroid" ),
OBJECTS_BLACK_TEXT ( 0x231F20, "Objects.BlackText" );
public final int rgb;
public final String key;
public final boolean light;
public final boolean dark;
FlatIconColors( int rgb, String key ) {
this( rgb, key, true, true );
}
FlatIconColors( int rgb, String key, boolean light, boolean dark ) {
this.rgb = rgb;
this.key = key;
this.light = light;
this.dark = dark;
}
}

28
flatlaf-core/src/main/java/com/formdev/flatlaf/FlatLaf.java
View File

@@ -409,30 +409,14 @@ public abstract class FlatLaf
* <a href="https://jetbrains.design/intellij/principles/icons/#action-icons">Action icons</a>
* and
* <a href="https://jetbrains.design/intellij/principles/icons/#noun-icons">Noun icons</a>
* <p>
* These colors may be changed by IntelliJ Platform themes.
*/
public static void initIconColors( UIDefaults defaults, boolean dark ) {
// colors for action icons
// see https://jetbrains.design/intellij/principles/icons/#action-icons
defaults.put( "Actions.Red", new ColorUIResource( !dark ? 0xDB5860 : 0xC75450 ) );
defaults.put( "Actions.Yellow", new ColorUIResource( !dark ? 0xEDA200 : 0xF0A732 ) );
defaults.put( "Actions.Green", new ColorUIResource( !dark ? 0x59A869 : 0x499C54 ) );
defaults.put( "Actions.Blue", new ColorUIResource( !dark ? 0x389FD6 : 0x3592C4 ) );
defaults.put( "Actions.Grey", new ColorUIResource( !dark ? 0x6E6E6E : 0xAFB1B3 ) );
defaults.put( "Actions.GreyInline", new ColorUIResource( !dark ? 0x7F8B91 : 0x7F8B91 ) );
// colors for object icons
// see https://jetbrains.design/intellij/principles/icons/#noun-icons
defaults.put( "Objects.Grey", new ColorUIResource( 0x9AA7B0 ) );
defaults.put( "Objects.Blue", new ColorUIResource( 0x40B6E0 ) );
defaults.put( "Objects.Green", new ColorUIResource( 0x62B543 ) );
defaults.put( "Objects.Yellow", new ColorUIResource( 0xF4AF3D ) );
defaults.put( "Objects.YellowDark", new ColorUIResource( 0xD9A343 ) );
defaults.put( "Objects.Purple", new ColorUIResource( 0xB99BF8 ) );
defaults.put( "Objects.Pink", new ColorUIResource( 0xF98B9E ) );
defaults.put( "Objects.Red", new ColorUIResource( 0xF26522 ) );
defaults.put( "Objects.RedStatus", new ColorUIResource( 0xE05555 ) );
defaults.put( "Objects.GreenAndroid", new ColorUIResource( 0xA4C639 ) );
defaults.put( "Objects.BlackText", new ColorUIResource( 0x231F20 ) );
for( FlatIconColors c : FlatIconColors.values() ) {
if( c.light == !dark || c.dark == dark )
defaults.put( c.key, new ColorUIResource( c.rgb ) );
}
}
private void putAATextInfo( UIDefaults defaults ) {

2
flatlaf-core/src/main/java/com/formdev/flatlaf/IntelliJTheme.java
View File

@@ -240,7 +240,7 @@ public class IntelliJTheme
if( color != null ) {
String key = e.getKey();
namedColors.put( key, color );
defaults.put( "ColorPalette." + e.getKey(), color );
defaults.put( "ColorPalette." + key, color );
}
}
}

9
flatlaf-demo/src/main/resources/com/formdev/flatlaf/demo/icons/back_dark.svg
View File

@@ -1,9 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<g fill="#AFB1B3" fill-rule="evenodd" transform="translate(1 3)">
<rect width="11" height="2" x="2" y="4"/>
<g transform="translate(0 .02)">
<rect width="7" height="1.8" x="-.389" y="2.24" transform="rotate(-45 3.111 3.14)"/>
<rect width="1.8" height="7" x="2.211" y="3.317" transform="rotate(-45 3.111 6.817)"/>
</g>
</g>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 442 B

6
flatlaf-demo/src/main/resources/com/formdev/flatlaf/demo/icons/copy_dark.svg
View File

@@ -1,6 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<g fill="none" fill-rule="evenodd">
<path fill="#AFB1B3" d="M11,3 L4,3 L4,11 L2,11 L2,1 L11,1 L11,3 Z"/>
<path fill="#AFB1B3" d="M5,4 L14,4 L14,14 L5,14 L5,4 Z M7,6 L7,7 L12,7 L12,6 L7,6 Z M7,10 L7,11 L12,11 L12,10 L7,10 Z M7,8 L7,9 L12,9 L12,8 L7,8 Z"/>
</g>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 363 B

6
flatlaf-demo/src/main/resources/com/formdev/flatlaf/demo/icons/download_dark.svg
View File

@@ -1,6 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<g fill="none" fill-rule="evenodd">
<polygon fill="#AFB1B3" points="9 7 12 7 8 11 4 7 7 7 7 2 9 2" transform="matrix(-1 0 0 1 16 0)"/>
<rect width="12" height="2" x="2" y="12" fill="#AFB1B3"/>
</g>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 301 B

9
flatlaf-demo/src/main/resources/com/formdev/flatlaf/demo/icons/forward_dark.svg
View File

@@ -1,9 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<g fill="#AFB1B3" fill-rule="evenodd" transform="matrix(-1 0 0 1 15 3)">
<rect width="12" height="2" x="1" y="4"/>
<g transform="translate(0 .02)">
<rect width="7" height="1.8" x="-.389" y="2.24" transform="rotate(-45 3.111 3.14)"/>
<rect width="1.8" height="7" x="2.211" y="3.317" transform="rotate(-45 3.111 6.817)"/>
</g>
</g>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 449 B

3
flatlaf-demo/src/main/resources/com/formdev/flatlaf/demo/icons/menu-cut_dark.svg
View File

@@ -1,3 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<path fill="#AFB1B3" d="M6.53206047,5.10906 C6.68535547,4.77581 6.77200047,4.40923501 6.77200047,4.01600001 C6.77200047,2.54303502 5.57896548,1.35000002 4.10600049,1.35000002 C2.63303549,1.35000002 1.4400005,2.54303502 1.4400005,4.01600001 C1.4400005,5.488965 2.63303549,6.68199999 4.10600049,6.68199999 C4.49923548,6.68199999 4.86581048,6.59535499 5.19906048,6.44205999 L6.77200047,8.01499999 L5.19906048,9.58793998 C4.86581048,9.43464498 4.49923548,9.34799998 4.10600049,9.34799998 C2.63303549,9.34799998 1.4400005,10.541035 1.4400005,12.014 C1.4400005,13.486965 2.63303549,14.6799999 4.10600049,14.6799999 C5.57896548,14.6799999 6.77200047,13.486965 6.77200047,12.014 C6.77200047,11.620765 6.68535547,11.25419 6.53206047,10.92094 L8.10500046,9.34799998 L12.7705004,14 L14.7700004,14 L14.7700004,13.347 L6.53206047,5.10906 Z M4.1053342,5.33702364 C3.37236745,5.33702364 2.77266738,4.74383861 2.77266738,4.00402356 C2.77266738,3.26420851 3.37236745,2.67102348 4.1053342,2.67102348 C4.83830096,2.67102348 5.43800103,3.26420851 5.43800103,4.00402356 C5.43800103,4.74383861 4.83830096,5.33702364 4.1053342,5.33702364 Z M4.1053342,13.3350241 C3.37236745,13.3350241 2.77266738,12.7418391 2.77266738,12.0020241 C2.77266738,11.262209 3.37236745,10.669024 4.1053342,10.669024 C4.83830096,10.669024 5.43800103,11.262209 5.43800103,12.0020241 C5.43800103,12.7418391 4.83830096,13.3350241 4.1053342,13.3350241 Z M8.10333468,8.33627383 C7.91676132,8.33627383 7.77016797,8.18964382 7.77016797,8.00302381 C7.77016797,7.8164038 7.91676132,7.66977379 8.10333468,7.66977379 C8.28990803,7.66977379 8.43650138,7.8164038 8.43650138,8.00302381 C8.43650138,8.18964382 8.28990803,8.33627383 8.10333468,8.33627383 Z M12.7710002,2.00452344 L8.77299971,6.00352368 L10.1056665,7.33652377 L14.7700004,2.67102348 L14.7700004,2.00452344 L12.7710002,2.00452344 Z"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.9 KiB

2
flatlaf-demo/src/main/resources/com/formdev/flatlaf/demo/icons/menu-paste.svg
View File

@@ -1,3 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<path fill="#737373" fill-rule="evenodd" d="M3,1 L3,0 L7,0 L7,1 L10,1 L10,13 L0,13 L0,1 L3,1 Z M4,1 L4,2 L6,2 L6,1 L4,1 Z M2,4 L2,11 L8,11 L8,4 L2,4 Z" transform="translate(3 1)"/>
<path fill="#6E6E6E" fill-rule="evenodd" d="M3,1 L3,0 L7,0 L7,1 L10,1 L10,13 L0,13 L0,1 L3,1 Z M4,1 L4,2 L6,2 L6,1 L4,1 Z M2,4 L2,11 L8,11 L8,4 L2,4 Z" transform="translate(3 1)"/>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 274 B

After

Width:  |  Height:  |  Size: 274 B

3
flatlaf-demo/src/main/resources/com/formdev/flatlaf/demo/icons/menu-paste_dark.svg
View File

@@ -1,3 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<path fill="#AFB1B3" fill-rule="evenodd" d="M3,1 L3,0 L7,0 L7,1 L10,1 L10,13 L0,13 L0,1 L3,1 Z M4,1 L4,2 L6,2 L6,1 L4,1 Z M2,4 L2,11 L8,11 L8,4 L2,4 Z" transform="translate(3 1)"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 274 B

3
flatlaf-demo/src/main/resources/com/formdev/flatlaf/demo/icons/redo_dark.svg
View File

@@ -1,3 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<path fill="#AFB1B3" d="M8.35170965,4.66666667 C6.5846115,4.66666667 4.98422073,5.32666667 3.75058618,6.4 L1.35000002,4 L1.35000002,10 L7.35146542,10 L4.93754267,7.58666667 C5.86443566,6.81333333 7.04472385,6.33333333 8.35170965,6.33333333 C10.712286,6.33333333 12.7194428,7.87333333 13.4196138,10 L14.9999996,9.48 C14.0731067,6.68666667 11.4524668,4.66666667 8.35170965,4.66666667 Z" transform="matrix(-1 0 0 1 16.35 0)"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 517 B

3
flatlaf-demo/src/main/resources/com/formdev/flatlaf/demo/icons/refresh_dark.svg
View File

@@ -1,3 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<path fill="#AFB1B3" fill-rule="evenodd" d="M12.5747152,11.8852806 C11.4741474,13.1817355 9.83247882,14.0044386 7.99865879,14.0044386 C5.03907292,14.0044386 2.57997332,11.8615894 2.08820756,9.0427473 L3.94774327,9.10768372 C4.43372186,10.8898575 6.06393114,12.2000519 8.00015362,12.2000519 C9.30149237,12.2000519 10.4645985,11.6082097 11.2349873,10.6790094 L9.05000019,8.71167959 L14.0431479,8.44999981 L14.3048222,13.4430431 L12.5747152,11.8852806 Z M3.42785637,4.11741586 C4.52839138,2.82452748 6.16775464,2.00443857 7.99865879,2.00443857 C10.918604,2.00443857 13.3513802,4.09026967 13.8882946,6.8532307 L12.0226389,6.78808057 C11.5024872,5.05935553 9.89838095,3.8000774 8.00015362,3.8000774 C6.69867367,3.8000774 5.53545628,4.39204806 4.76506921,5.32142241 L6.95482203,7.29304326 L1.96167436,7.55472304 L1.70000005,2.56167973 L3.42785637,4.11741586 Z" transform="rotate(3 8.002 8.004)"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 984 B

3
flatlaf-demo/src/main/resources/com/formdev/flatlaf/demo/icons/show_dark.svg
View File

@@ -1,3 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<path fill="#AFB1B3" d="M8,3 C4.81818182,3 2.10090909,5.07333333 1,8 C2.10090909,10.9266667 4.81818182,13 8,13 C11.1818182,13 13.8990909,10.9266667 15,8 C13.8990909,5.07333333 11.1818182,3 8,3 Z M8,11.5 C6.068,11.5 4.5,9.932 4.5,8 C4.5,6.068 6.068,4.5 8,4.5 C9.932,4.5 11.5,6.068 11.5,8 C11.5,9.932 9.932,11.5 8,11.5 Z M8,6 C6.89333333,6 6,6.89333333 6,8 C6,9.10666667 6.89333333,10 8,10 C9.10666667,10 10,9.10666667 10,8 C10,6.89333333 9.10666667,6 8,6 Z"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 552 B

3
flatlaf-demo/src/main/resources/com/formdev/flatlaf/demo/icons/undo_dark.svg
View File

@@ -1,3 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<path fill="#AFB1B3" d="M8.00170962,4.66666667 C6.23461148,4.66666667 4.63422071,5.32666667 3.40058616,6.4 L1,4 L1,10 L7.00146539,10 L4.58754265,7.58666667 C5.51443563,6.81333333 6.69472383,6.33333333 8.00170962,6.33333333 C10.362286,6.33333333 12.3694428,7.87333333 13.0696137,10 L14.6499996,9.48 C13.7231066,6.68666667 11.1024667,4.66666667 8.00170962,4.66666667 Z"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 463 B

70
flatlaf-extras/src/main/java/com/formdev/flatlaf/extras/FlatSVGIcon.java
View File

@@ -26,9 +26,12 @@ import java.awt.RenderingHints;
import java.awt.image.RGBImageFilter;
import java.net.URISyntaxException;
import java.net.URL;
import java.util.HashMap;
import java.util.Map;
import javax.swing.Icon;
import javax.swing.LookAndFeel;
import javax.swing.UIManager;
import com.formdev.flatlaf.FlatIconColors;
import com.formdev.flatlaf.FlatLaf;
import com.formdev.flatlaf.ui.FlatUIUtils;
import com.formdev.flatlaf.util.Graphics2DProxy;
@@ -100,17 +103,17 @@ public class FlatSVGIcon
if( clipBounds != null && !clipBounds.intersects( new Rectangle( x, y, getIconWidth(), getIconHeight() ) ) )
return;
Graphics2D g2 = (Graphics2D) g.create();
// get gray filter
RGBImageFilter grayFilter = null;
if( c != null && !c.isEnabled() ) {
Object grayFilter = UIManager.get( "Component.grayFilter" );
RGBImageFilter filter = (grayFilter instanceof RGBImageFilter)
? (RGBImageFilter) grayFilter
Object grayFilterObj = UIManager.get( "Component.grayFilter" );
grayFilter = (grayFilterObj instanceof RGBImageFilter)
? (RGBImageFilter) grayFilterObj
: GrayFilter.createDisabledIconFilter( dark );
g2 = new GraphicsFilter( g2, filter );
}
Graphics2D g2 = new GraphicsFilter( (Graphics2D) g.create(), ColorFilter.getInstance(), grayFilter );
try {
FlatUIUtils.setRenderingHints( g2 );
g2.setRenderingHint( RenderingHints.KEY_INTERPOLATION, RenderingHints.VALUE_INTERPOLATION_BILINEAR );
@@ -165,16 +168,52 @@ public class FlatSVGIcon
darkLaf = (lookAndFeel instanceof FlatLaf && ((FlatLaf)lookAndFeel).isDark());
}
//---- class ColorFilter --------------------------------------------------
public static class ColorFilter
{
private static ColorFilter instance;
private final Map<Integer, String> rgb2keyMap = new HashMap<>();
public static ColorFilter getInstance() {
if( instance == null )
instance = new ColorFilter();
return instance;
}
public ColorFilter() {
for( FlatIconColors c : FlatIconColors.values() )
rgb2keyMap.put( c.rgb, c.key );
}
public Color filter( Color color ) {
String colorKey = rgb2keyMap.get( color.getRGB() & 0xffffff );
if( colorKey == null )
return color;
Color newColor = UIManager.getColor( colorKey );
if( newColor == null )
return color;
return (newColor.getAlpha() != color.getAlpha())
? new Color( (newColor.getRGB() & 0x00ffffff) | (color.getRGB() & 0xff000000) )
: newColor;
};
}
//---- class GraphicsFilter -----------------------------------------------
private static class GraphicsFilter
extends Graphics2DProxy
{
private final RGBImageFilter filter;
private final ColorFilter colorFilter;
private final RGBImageFilter grayFilter;
public GraphicsFilter( Graphics2D delegate, RGBImageFilter filter ) {
public GraphicsFilter( Graphics2D delegate, ColorFilter colorFilter, RGBImageFilter grayFilter ) {
super( delegate );
this.filter = filter;
this.colorFilter = colorFilter;
this.grayFilter = grayFilter;
}
@Override
@@ -190,9 +229,14 @@ public class FlatSVGIcon
}
private Color filterColor( Color color ) {
int oldRGB = color.getRGB();
int newRGB = filter.filterRGB( 0, 0, oldRGB );
return (newRGB != oldRGB) ? new Color( newRGB, true ) : color;
if( colorFilter != null )
color = colorFilter.filter( color );
if( grayFilter != null ) {
int oldRGB = color.getRGB();
int newRGB = grayFilter.filterRGB( 0, 0, oldRGB );
color = (newRGB != oldRGB) ? new Color( newRGB, true ) : color;
}
return color;
}
}
}