diff --git a/flatlaf-core/src/main/java/com/formdev/flatlaf/FlatLaf.java b/flatlaf-core/src/main/java/com/formdev/flatlaf/FlatLaf.java index 95ece8d4..84419fff 100644 --- a/flatlaf-core/src/main/java/com/formdev/flatlaf/FlatLaf.java +++ b/flatlaf-core/src/main/java/com/formdev/flatlaf/FlatLaf.java @@ -207,6 +207,10 @@ public abstract class FlatLaf if( key.endsWith( ".border" ) ) return parseBorder( value ); + // icons + if( key.endsWith( ".icon" ) ) + return parseInstance( value ); + // colors ColorUIResource color = parseColor( value ); if( color != null ) @@ -222,6 +226,10 @@ public abstract class FlatLaf } private Object parseBorder( String value ) { + return parseInstance( value ); + } + + private Object parseInstance( String value ) { return (LazyValue) t -> { try { return Class.forName( value ).newInstance(); diff --git a/flatlaf-core/src/main/java/com/formdev/flatlaf/ui/FlatCheckBoxIcon.java b/flatlaf-core/src/main/java/com/formdev/flatlaf/ui/FlatCheckBoxIcon.java new file mode 100644 index 00000000..75eb6abf --- /dev/null +++ b/flatlaf-core/src/main/java/com/formdev/flatlaf/ui/FlatCheckBoxIcon.java @@ -0,0 +1,116 @@ +/* + * Copyright 2019 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 + * + * http://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.ui; + +import static com.formdev.flatlaf.util.UIScale.*; +import java.awt.BasicStroke; +import java.awt.Component; +import java.awt.Graphics; +import java.awt.Graphics2D; +import java.awt.geom.Path2D; +import javax.swing.AbstractButton; +import javax.swing.Icon; +import javax.swing.UIManager; +import javax.swing.plaf.UIResource; +import com.formdev.flatlaf.util.UIScale; + +/** + * Icon for {@link javax.swing.JCheckBox}. + * + * @author Karl Tauber + */ +public class FlatCheckBoxIcon + implements Icon, UIResource +{ + @Override + public void paintIcon( Component c, Graphics g, int x, int y ) { + Graphics2D g2 = (Graphics2D) g.create(); + try { + FlatUIUtils.setRenderingHints( g2 ); + + g2.translate( x, y ); + UIScale.scaleGraphics( g2 ); + + boolean enabled = c.isEnabled(); + boolean focused = c.hasFocus(); + boolean selected = (c instanceof AbstractButton) && ((AbstractButton)c).isSelected(); + + // paint focused border + if( focused ) { + g2.setColor( UIManager.getColor( "Component.focusColor" ) ); + paintFocusBorder( g2 ); + } + + // paint border + g2.setColor( UIManager.getColor( enabled + ? (selected + ? (focused ? "CheckBox.icon.selectedFocusedBorderColor" : "CheckBox.icon.selectedBorderColor") + : (focused ? "CheckBox.icon.focusedBorderColor" : "CheckBox.icon.borderColor")) + : "CheckBox.icon.disabledBorderColor" ) ); + paintBorder( g2 ); + + // paint background + g2.setColor( UIManager.getColor( enabled + ? (selected + ? "CheckBox.icon.selectedBackground" + : "CheckBox.icon.background") + : "CheckBox.icon.disabledBackground" ) ); + paintBackground( g2 ); + + // paint checkmark + if( selected ) { + g2.setColor( UIManager.getColor( enabled ? "CheckBox.icon.checkmarkColor" : "CheckBox.icon.disabledCheckmarkColor" ) ); + paintCheckmark( g2 ); + } + } finally { + g2.dispose(); + } + } + + protected void paintFocusBorder( Graphics2D g2 ) { + g2.fillRoundRect( 1, 0, 18, 18, 8, 8 ); + } + + protected void paintBorder( Graphics2D g2 ) { + g2.fillRoundRect( 3, 2, 14, 14, 4, 4 ); + } + + protected void paintBackground( Graphics2D g2 ) { + g2.fillRoundRect( 4, 3, 12, 12, 4, 4 ); + } + + protected void paintCheckmark( Graphics2D g2 ) { + g2.setStroke( new BasicStroke( 1.9f, BasicStroke.CAP_ROUND, BasicStroke.JOIN_ROUND ) ); + Path2D.Float path = new Path2D.Float(); + path.moveTo( 6.5f, 9.5f ); + path.lineTo( 8.6f, 12f ); + path.lineTo( 13.25f, 5.5f ); + g2.draw( path ); + } + + @Override + public int getIconWidth() { + // use Math.round(), instead of UIScale.round(), because this gives same + // icon size as scaled graphics used in paintIcon() + return Math.round( scale( 19f ) ); + } + + @Override + public int getIconHeight() { + return Math.round( scale( 19f ) ); + } +} diff --git a/flatlaf-core/src/main/java/com/formdev/flatlaf/ui/FlatCheckBoxUI.java b/flatlaf-core/src/main/java/com/formdev/flatlaf/ui/FlatCheckBoxUI.java new file mode 100644 index 00000000..951a3127 --- /dev/null +++ b/flatlaf-core/src/main/java/com/formdev/flatlaf/ui/FlatCheckBoxUI.java @@ -0,0 +1,46 @@ +/* + * Copyright 2019 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 + * + * http://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.ui; + +import java.awt.Dimension; +import java.awt.Graphics; +import java.awt.Rectangle; +import javax.swing.JComponent; +import javax.swing.plaf.ComponentUI; +import javax.swing.plaf.metal.MetalCheckBoxUI; + +/** + * Provides the Flat LaF UI delegate for {@link javax.swing.JCheckBox}. + * + * @author Karl Tauber + */ +public class FlatCheckBoxUI + extends MetalCheckBoxUI +{ + private static ComponentUI instance; + + public static ComponentUI createUI( JComponent c ) { + if( instance == null ) + instance = new FlatCheckBoxUI(); + return instance; + } + + @Override + protected void paintFocus( Graphics g, Rectangle t, Dimension d ) { + // focus border painted in icon + } +} diff --git a/flatlaf-core/src/main/java/com/formdev/flatlaf/ui/FlatRadioButtonIcon.java b/flatlaf-core/src/main/java/com/formdev/flatlaf/ui/FlatRadioButtonIcon.java new file mode 100644 index 00000000..5fe3a929 --- /dev/null +++ b/flatlaf-core/src/main/java/com/formdev/flatlaf/ui/FlatRadioButtonIcon.java @@ -0,0 +1,48 @@ +/* + * Copyright 2019 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 + * + * http://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.ui; + +import java.awt.Graphics2D; + +/** + * Icon for {@link javax.swing.JRadioButton}. + * + * @author Karl Tauber + */ +public class FlatRadioButtonIcon + extends FlatCheckBoxIcon +{ + @Override + protected void paintFocusBorder( Graphics2D g2 ) { + g2.fillOval( 0, 0, 19, 19 ); + } + + @Override + protected void paintBorder( Graphics2D g2 ) { + g2.fillOval( 2, 2, 15, 15 ); + } + + @Override + protected void paintBackground( Graphics2D g2 ) { + g2.fillOval( 3, 3, 13, 13 ); + } + + @Override + protected void paintCheckmark( Graphics2D g2 ) { + g2.fillOval( 7, 7, 5, 5 ); + } +} diff --git a/flatlaf-core/src/main/java/com/formdev/flatlaf/ui/FlatRadioButtonUI.java b/flatlaf-core/src/main/java/com/formdev/flatlaf/ui/FlatRadioButtonUI.java new file mode 100644 index 00000000..a3eebc57 --- /dev/null +++ b/flatlaf-core/src/main/java/com/formdev/flatlaf/ui/FlatRadioButtonUI.java @@ -0,0 +1,46 @@ +/* + * Copyright 2019 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 + * + * http://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.ui; + +import java.awt.Dimension; +import java.awt.Graphics; +import java.awt.Rectangle; +import javax.swing.JComponent; +import javax.swing.plaf.ComponentUI; +import javax.swing.plaf.metal.MetalRadioButtonUI; + +/** + * Provides the Flat LaF UI delegate for {@link javax.swing.JRadioButton}. + * + * @author Karl Tauber + */ +public class FlatRadioButtonUI + extends MetalRadioButtonUI +{ + private static ComponentUI instance; + + public static ComponentUI createUI( JComponent c ) { + if( instance == null ) + instance = new FlatRadioButtonUI(); + return instance; + } + + @Override + protected void paintFocus( Graphics g, Rectangle t, Dimension d ) { + // focus border painted in icon + } +} diff --git a/flatlaf-core/src/main/java/com/formdev/flatlaf/util/UIScale.java b/flatlaf-core/src/main/java/com/formdev/flatlaf/util/UIScale.java index 1cfda364..08fd34fd 100644 --- a/flatlaf-core/src/main/java/com/formdev/flatlaf/util/UIScale.java +++ b/flatlaf-core/src/main/java/com/formdev/flatlaf/util/UIScale.java @@ -17,6 +17,7 @@ package com.formdev.flatlaf.util; import java.awt.Font; +import java.awt.Graphics2D; import java.awt.GraphicsEnvironment; import java.beans.PropertyChangeEvent; import java.beans.PropertyChangeListener; @@ -185,4 +186,9 @@ public class UIScale // or 1px * 150% = 1px instead of 2px return Math.round( value - 0.01f ); } + + public static void scaleGraphics( Graphics2D g ) { + if( scaleFactor != 1f ) + g.scale( scaleFactor, scaleFactor ); + } } diff --git a/flatlaf-core/src/main/resources/com/formdev/flatlaf/FlatDarkLaf.properties b/flatlaf-core/src/main/resources/com/formdev/flatlaf/FlatDarkLaf.properties index 29e49514..0d182cd2 100644 --- a/flatlaf-core/src/main/resources/com/formdev/flatlaf/FlatDarkLaf.properties +++ b/flatlaf-core/src/main/resources/com/formdev/flatlaf/FlatDarkLaf.properties @@ -18,6 +18,8 @@ @background=3c3f41 @foreground=bbbbbb +@disabledText=777777 + #---- globals ---- @@ -30,6 +32,7 @@ *.inactiveForeground=@foreground *.selectionBackground=4B6EAF *.selectionForeground=@foreground +*.disabledText=@disabledText #---- system ---- @@ -45,7 +48,6 @@ window=@background #---- Button ---- Button.background=4c5052 -Button.disabledText=777777 Button.startBorderColor=5e6060 Button.endBorderColor=5e6060 @@ -60,6 +62,20 @@ Button.default.focusedBorderColor=537699 Button.default.focusColor=43688c +#---- CheckBox ---- + +CheckBox.icon.borderColor=6B6B6B +CheckBox.icon.disabledBorderColor=545556 +CheckBox.icon.selectedBorderColor=6B6B6B +CheckBox.icon.focusedBorderColor=466D94 +CheckBox.icon.selectedFocusedBorderColor=466D94 +CheckBox.icon.background=43494A +CheckBox.icon.disabledBackground=3C3F41 +CheckBox.icon.selectedBackground=43494A +CheckBox.icon.checkmarkColor=A7A7A7 +CheckBox.icon.disabledCheckmarkColor=606060 + + #---- Component ---- Component.focusColor=3d6185 @@ -67,4 +83,4 @@ Component.focusColor=3d6185 #---- Label ---- -Label.disabledForeground=808080 +Label.disabledForeground=@disabledText diff --git a/flatlaf-core/src/main/resources/com/formdev/flatlaf/FlatLaf.properties b/flatlaf-core/src/main/resources/com/formdev/flatlaf/FlatLaf.properties index cf6abf3c..2aba775d 100644 --- a/flatlaf-core/src/main/resources/com/formdev/flatlaf/FlatLaf.properties +++ b/flatlaf-core/src/main/resources/com/formdev/flatlaf/FlatLaf.properties @@ -17,7 +17,9 @@ #---- UI delegates ---- ButtonUI=com.formdev.flatlaf.ui.FlatButtonUI +CheckBoxUI=com.formdev.flatlaf.ui.FlatCheckBoxUI LabelUI=com.formdev.flatlaf.ui.FlatLabelUI +RadioButtonUI=com.formdev.flatlaf.ui.FlatRadioButtonUI #---- Button ---- @@ -26,7 +28,17 @@ Button.border=com.formdev.flatlaf.ui.FlatButtonBorder Button.arc=6 +#---- CheckBox ---- + +CheckBox.icon=com.formdev.flatlaf.ui.FlatCheckBoxIcon + + #---- Component ---- Component.focusWidth=2 Component.arc=5 + + +#---- RadioButton ---- + +RadioButton.icon=com.formdev.flatlaf.ui.FlatRadioButtonIcon diff --git a/flatlaf-core/src/main/resources/com/formdev/flatlaf/FlatLightLaf.properties b/flatlaf-core/src/main/resources/com/formdev/flatlaf/FlatLightLaf.properties index 4966b5dc..e3211bcc 100644 --- a/flatlaf-core/src/main/resources/com/formdev/flatlaf/FlatLightLaf.properties +++ b/flatlaf-core/src/main/resources/com/formdev/flatlaf/FlatLightLaf.properties @@ -18,6 +18,8 @@ @background=f2f2f2 @foreground=000000 +@disabledText=999999 + #---- globals ---- @@ -30,6 +32,7 @@ *.inactiveForeground=777777 *.selectionBackground=4A6EB7 *.selectionForeground=ffffff +*.disabledText=@disabledText #---- system ---- @@ -45,7 +48,6 @@ window=@background #---- Button ---- Button.background=ffffff -Button.disabledText=999999 Button.startBorderColor=bfbfbf Button.endBorderColor=b3b3b3 @@ -60,6 +62,20 @@ Button.default.focusedBorderColor=a8cef6 Button.default.focusColor=97c3f3 +#---- CheckBox ---- + +CheckBox.icon.borderColor=878787 +CheckBox.icon.disabledBorderColor=BDBDBD +CheckBox.icon.selectedBorderColor=4982CC +CheckBox.icon.focusedBorderColor=7B9FC7 +CheckBox.icon.selectedFocusedBorderColor=ACCFF7 +CheckBox.icon.background=FFFFFF +CheckBox.icon.disabledBackground=F2F2F2 +CheckBox.icon.selectedBackground=4D89C9 +CheckBox.icon.checkmarkColor=FFFFFF +CheckBox.icon.disabledCheckmarkColor=ABABAB + + #---- Component ---- Component.focusColor=97c3f3 @@ -67,4 +83,4 @@ Component.focusColor=97c3f3 #---- Label ---- -Label.disabledForeground=777777 +Label.disabledForeground=@disabledText diff --git a/flatlaf-core/src/test/java/com/formdev/flatlaf/FlatComponentsTest.java b/flatlaf-core/src/test/java/com/formdev/flatlaf/FlatComponentsTest.java index dbcca2b2..f77cbb29 100644 --- a/flatlaf-core/src/test/java/com/formdev/flatlaf/FlatComponentsTest.java +++ b/flatlaf-core/src/test/java/com/formdev/flatlaf/FlatComponentsTest.java @@ -56,6 +56,16 @@ public class FlatComponentsTest JButton button3 = new JButton(); JButton button4 = new JButton(); FlatComponentsTest.TestDefaultButton button5 = new FlatComponentsTest.TestDefaultButton(); + JLabel checkBoxLabel = new JLabel(); + JCheckBox checkBox1 = new JCheckBox(); + JCheckBox checkBox2 = new JCheckBox(); + JCheckBox checkBox3 = new JCheckBox(); + JCheckBox checkBox4 = new JCheckBox(); + JLabel radioButtonLabel = new JLabel(); + JRadioButton radioButton1 = new JRadioButton(); + JRadioButton radioButton2 = new JRadioButton(); + JRadioButton radioButton3 = new JRadioButton(); + JRadioButton radioButton4 = new JRadioButton(); //======== this ======== setLayout(new MigLayout( @@ -69,6 +79,9 @@ public class FlatComponentsTest "[]", // rows "[]" + + "[]" + + "[]" + + "[]" + "[]")); //---- labelLabel ---- @@ -116,6 +129,54 @@ public class FlatComponentsTest button5.setText("default"); button5.setDisplayedMnemonicIndex(0); add(button5, "cell 5 1"); + + //---- checkBoxLabel ---- + checkBoxLabel.setText("JCheckBox"); + add(checkBoxLabel, "cell 0 2"); + + //---- checkBox1 ---- + checkBox1.setText("enabled"); + add(checkBox1, "cell 1 2"); + + //---- checkBox2 ---- + checkBox2.setText("disabled"); + checkBox2.setEnabled(false); + add(checkBox2, "cell 2 2"); + + //---- checkBox3 ---- + checkBox3.setText("selected"); + checkBox3.setSelected(true); + add(checkBox3, "cell 3 2"); + + //---- checkBox4 ---- + checkBox4.setText("selected disabled"); + checkBox4.setSelected(true); + checkBox4.setEnabled(false); + add(checkBox4, "cell 4 2"); + + //---- radioButtonLabel ---- + radioButtonLabel.setText("JRadioButton:"); + add(radioButtonLabel, "cell 0 3"); + + //---- radioButton1 ---- + radioButton1.setText("enabled"); + add(radioButton1, "cell 1 3"); + + //---- radioButton2 ---- + radioButton2.setText("disabled"); + radioButton2.setEnabled(false); + add(radioButton2, "cell 2 3"); + + //---- radioButton3 ---- + radioButton3.setText("selected"); + radioButton3.setSelected(true); + add(radioButton3, "cell 3 3"); + + //---- radioButton4 ---- + radioButton4.setText("selected disabled"); + radioButton4.setSelected(true); + radioButton4.setEnabled(false); + add(radioButton4, "cell 4 3"); // JFormDesigner - End of component initialization //GEN-END:initComponents } diff --git a/flatlaf-core/src/test/java/com/formdev/flatlaf/FlatComponentsTest.jfd b/flatlaf-core/src/test/java/com/formdev/flatlaf/FlatComponentsTest.jfd index 514dc368..9fc090f8 100644 --- a/flatlaf-core/src/test/java/com/formdev/flatlaf/FlatComponentsTest.jfd +++ b/flatlaf-core/src/test/java/com/formdev/flatlaf/FlatComponentsTest.jfd @@ -9,7 +9,7 @@ new FormModel { add( new FormContainer( "javax.swing.JPanel", new FormLayoutManager( class net.miginfocom.swing.MigLayout ) { "$layoutConstraints": "insets 0,hidemode 3,gap 5 5" "$columnConstraints": "[][][][][][]" - "$rowConstraints": "[][]" + "$rowConstraints": "[][][][][]" } ) { name: "this" add( new FormComponent( "javax.swing.JLabel" ) { @@ -76,6 +76,74 @@ new FormModel { }, new FormLayoutConstraints( class net.miginfocom.layout.CC ) { "value": "cell 5 1" } ) + add( new FormComponent( "javax.swing.JLabel" ) { + name: "checkBoxLabel" + "text": "JCheckBox" + }, new FormLayoutConstraints( class net.miginfocom.layout.CC ) { + "value": "cell 0 2" + } ) + add( new FormComponent( "javax.swing.JCheckBox" ) { + name: "checkBox1" + "text": "enabled" + }, new FormLayoutConstraints( class net.miginfocom.layout.CC ) { + "value": "cell 1 2" + } ) + add( new FormComponent( "javax.swing.JCheckBox" ) { + name: "checkBox2" + "text": "disabled" + "enabled": false + }, new FormLayoutConstraints( class net.miginfocom.layout.CC ) { + "value": "cell 2 2" + } ) + add( new FormComponent( "javax.swing.JCheckBox" ) { + name: "checkBox3" + "text": "selected" + "selected": true + }, new FormLayoutConstraints( class net.miginfocom.layout.CC ) { + "value": "cell 3 2" + } ) + add( new FormComponent( "javax.swing.JCheckBox" ) { + name: "checkBox4" + "text": "selected disabled" + "selected": true + "enabled": false + }, new FormLayoutConstraints( class net.miginfocom.layout.CC ) { + "value": "cell 4 2" + } ) + add( new FormComponent( "javax.swing.JLabel" ) { + name: "radioButtonLabel" + "text": "JRadioButton:" + }, new FormLayoutConstraints( class net.miginfocom.layout.CC ) { + "value": "cell 0 3" + } ) + add( new FormComponent( "javax.swing.JRadioButton" ) { + name: "radioButton1" + "text": "enabled" + }, new FormLayoutConstraints( class net.miginfocom.layout.CC ) { + "value": "cell 1 3" + } ) + add( new FormComponent( "javax.swing.JRadioButton" ) { + name: "radioButton2" + "text": "disabled" + "enabled": false + }, new FormLayoutConstraints( class net.miginfocom.layout.CC ) { + "value": "cell 2 3" + } ) + add( new FormComponent( "javax.swing.JRadioButton" ) { + name: "radioButton3" + "text": "selected" + "selected": true + }, new FormLayoutConstraints( class net.miginfocom.layout.CC ) { + "value": "cell 3 3" + } ) + add( new FormComponent( "javax.swing.JRadioButton" ) { + name: "radioButton4" + "text": "selected disabled" + "selected": true + "enabled": false + }, new FormLayoutConstraints( class net.miginfocom.layout.CC ) { + "value": "cell 4 3" + } ) }, new FormLayoutConstraints( null ) { "location": new java.awt.Point( 0, 0 ) "size": new java.awt.Dimension( 580, 300 ) diff --git a/flatlaf-core/src/test/resources/com/formdev/flatlaf/FlatTestLaf.properties b/flatlaf-core/src/test/resources/com/formdev/flatlaf/FlatTestLaf.properties index a52f4f21..0d23b8d5 100644 --- a/flatlaf-core/src/test/resources/com/formdev/flatlaf/FlatTestLaf.properties +++ b/flatlaf-core/src/test/resources/com/formdev/flatlaf/FlatTestLaf.properties @@ -18,12 +18,12 @@ *.background=ccffcc *.foreground=ff0000 +*.disabledText=000088 #---- Button ---- Button.background=ffffff -Button.disabledText=000088 Button.startBorderColor=ff0000 Button.endBorderColor=0000ff @@ -39,6 +39,20 @@ Button.default.focusedBorderColor=537699 Button.default.focusColor=ff0000 +#---- CheckBox ---- + +CheckBox.icon.borderColor=878787 +CheckBox.icon.disabledBorderColor=BDBDBD +CheckBox.icon.selectedBorderColor=4982CC +CheckBox.icon.focusedBorderColor=7B9FC7 +CheckBox.icon.selectedFocusedBorderColor=ACCFF7 +CheckBox.icon.background=FFFFFF +CheckBox.icon.disabledBackground=F2F2F2 +CheckBox.icon.selectedBackground=4D89C9 +CheckBox.icon.checkmarkColor=FFFFFF +CheckBox.icon.disabledCheckmarkColor=ABABAB + + #---- Component ---- Component.focusColor=97c3f3