updated color palette

main/ui/src/main/resources/css/dark_theme.css

@@ -27,39 +27,37 @@
  ******************************************************************************/
 
 .root {
-	GREEN_0: #373B30;
-	GREEN_1: #384D14;
-	GREEN_2: #476611;
-	GREEN_3: #598016;
-	GREEN_4: #699917;
-	GREEN_5: #79B01A;
-	GREEN_6: #91C734;
-	GREEN_7: #B9E070;
-	GREEN_8: #D7E7BA;
-	GREEN_9: #F3F5F0;
-
-	GRAY_0: #222222;
-	GRAY_1: #3B3B3B;
-	GRAY_2: #515151;
-	GRAY_3: #626262;
-	GRAY_4: #7E7E7E;
-	GRAY_5: #9E9E9E;
-	GRAY_6: #B1B1B1;
-	GRAY_7: #CFCFCF;
-	GRAY_8: #E1E1E1;
-	GRAY_9: #F7F7F7;
+	PRIMARY_D2: #2E4D2E;
+	PRIMARY_D1: #407F41;
+	PRIMARY: #49B04A;
+	PRIMARY_L1: #66CC68;
+	PRIMARY_L2: #EBF5EB;
+
+	SECONDARY: #008A7B;
+
+	GRAY_0: #1F2122;
+	GRAY_1: #35393B;
+	GRAY_2: #494E51;
+	GRAY_3: #585E62;
+	GRAY_4: #71797E;
+	GRAY_5: #8E989E;
+	GRAY_6: #9FAAB1;
+	GRAY_7: #BEC9CF;
+	GRAY_8: #D3DCE1;
+	GRAY_9: #EDF3F7;
 
 	RED_5: #E74C3C;
 	ORANGE_5: #E67E22;
 	YELLOW_5: #F1C40F;
 
-	PRIMARY_BG: GREEN_3;
-	SECONDARY_BG: GRAY_3;
 	MAIN_BG: GRAY_1;
 	TEXT_FILL: GRAY_9;
-	TEXT_FILL_PRIMARY: GREEN_5;
-	TEXT_FILL_SECONDARY: GRAY_5;
-	TEXT_FILL_WHITE: white;
+	TEXT_FILL_HIGHLIGHTED: PRIMARY;
+	TEXT_FILL_MUTED: GRAY_5;
+
+	TITLE_BG: linear-gradient(to bottom, GRAY_2, GRAY_1);
+	TITLE_TEXT_FILL: PRIMARY;
+
 	CONTROL_BORDER_NORMAL: GRAY_3;
 	CONTROL_BORDER_FOCUSED: GRAY_5;
 	CONTROL_BORDER_DISABLED: GRAY_2;
@@ -67,27 +65,20 @@
 	CONTROL_BG_HOVER: GRAY_1;
 	CONTROL_BG_ARMED: GRAY_2;
 	CONTROL_BG_DISABLED: GRAY_1;
-	CONTROL_PRIMARY_BORDER_NORMAL: GREEN_5;
-	CONTROL_PRIMARY_BORDER_FOCUSED: GREEN_7;
-	CONTROL_PRIMARY_BORDER_DISABLED: GREEN_3;
-	CONTROL_PRIMARY_BG_NORMAL: GREEN_3;
-	CONTROL_PRIMARY_BG_ARMED: GREEN_4;
-	CONTROL_PRIMARY_BG_DISABLED: GREEN_2;
-	CONTROL_PRIMARY_LIGHT_BG_NORMAL: GREEN_0;
-	CONTROL_WHITE_BG_ARMED: GRAY_8;
+	CONTROL_BG_SELECTED: GRAY_1;
+
+	CONTROL_PRIMARY_BORDER_NORMAL: PRIMARY;
+	CONTROL_PRIMARY_BORDER_ARMED: PRIMARY_L1;
+	CONTROL_PRIMARY_BORDER_FOCUSED: SECONDARY;
+	CONTROL_PRIMARY_BG_NORMAL: PRIMARY;
+	CONTROL_PRIMARY_BG_ARMED: PRIMARY_L1;
+
 	SCROLL_BAR_THUMB_NORMAL: GRAY_3;
 	SCROLL_BAR_THUMB_HOVER: GRAY_4;
-	INDICATOR_BG: RED_5;
-	DRAG_N_DROP_INDICATOR_BG: GRAY_3;
+
 	PROGRESS_INDICATOR_BEGIN: GRAY_7;
 	PROGRESS_INDICATOR_END: GRAY_5;
 	PROGRESS_BAR_BG: GRAY_2;
-	PASSWORD_STRENGTH_INDICATOR_BG: GRAY_3;
-	PASSWORD_STRENGTH_INDICATOR_BG_STRENGTH_0: RED_5;
-	PASSWORD_STRENGTH_INDICATOR_BG_STRENGTH_1: ORANGE_5;
-	PASSWORD_STRENGTH_INDICATOR_BG_STRENGTH_2: YELLOW_5;
-	PASSWORD_STRENGTH_INDICATOR_BG_STRENGTH_3: GREEN_6;
-	PASSWORD_STRENGTH_INDICATOR_BG_STRENGTH_4: GREEN_5;
 
 	-fx-background-color: MAIN_BG;
     -fx-text-fill: TEXT_FILL;
@@ -105,7 +96,7 @@
 }
 
 .label-secondary {
-	-fx-text-fill: TEXT_FILL_SECONDARY;
+	-fx-text-fill: TEXT_FILL_MUTED;
 }
 
 .label-large {
@@ -136,11 +127,11 @@
 }
 
 .glyph-icon-primary {
-	-fx-fill: PRIMARY_BG;
+	-fx-fill: PRIMARY;
 }
 
-.glyph-icon-secondary {
-	-fx-fill: SECONDARY_BG;
+.glyph-icon-muted {
+	-fx-fill: TEXT_FILL_MUTED;
 }
 
 .glyph-icon-white {
@@ -158,7 +149,8 @@
  ******************************************************************************/
 
 .main-window .title {
-	-fx-background-color: PRIMARY_BG;
+	-fx-background-color: CONTROL_BORDER_NORMAL, TITLE_BG;
+	-fx-background-insets: 0, 0 0 1px 0;
 }
 
 .main-window .title .label {
@@ -166,7 +158,7 @@
 	-fx-font-size: 21px;
 	-fx-font-style: normal;
 	-fx-font-weight: 700;
-	-fx-text-fill: white;
+	-fx-text-fill: TITLE_TEXT_FILL;
 }
 
 .main-window .title .button {
@@ -181,24 +173,23 @@
 }
 
 .main-window .title .button:armed .glyph-icon {
-	-fx-fill: CONTROL_WHITE_BG_ARMED;
+	-fx-fill: GRAY_8;
 }
 
 .main-window .update-indicator {
-	-fx-background-color: PRIMARY_BG, white, INDICATOR_BG;
-	-fx-background-insets: 0, 1px, 2px;
-	-fx-background-radius: 6px, 5px, 4px;
-	-fx-translate-x: -1px;
-	-fx-translate-y: 1px;
+	-fx-background-color: white, RED_5;
+	-fx-background-insets: 1px, 2px;
+	-fx-background-radius: 6px, 5px;
+	-fx-effect: dropshadow(three-pass-box, rgba(0,0,0,0.8), 2, 0, 0, 0);
 }
 
 .main-window .drag-n-drop-indicator {
-	-fx-border-color: DRAG_N_DROP_INDICATOR_BG;
+	-fx-border-color: SECONDARY;
 	-fx-border-width: 3px;
 }
 
 .main-window .drag-n-drop-indicator .drag-n-drop-header {
-	-fx-background-color: DRAG_N_DROP_INDICATOR_BG;
+	-fx-background-color: SECONDARY;
 	-fx-padding: 3px;
 }
 
@@ -225,24 +216,24 @@
 }
 
 .tab-pane .tab:selected {
-	-fx-background-color: PRIMARY_BG, CONTROL_PRIMARY_LIGHT_BG_NORMAL;
+	-fx-background-color: PRIMARY, CONTROL_BG_SELECTED;
 }
 
 .tab-pane .tab .tab-label {
-	-fx-text-fill: SECONDARY_BG;
+	-fx-text-fill: TEXT_FILL_MUTED;
 	-fx-alignment: CENTER;
 }
 
 .tab-pane .tab .glyph-icon {
-	-fx-fill: SECONDARY_BG;
+	-fx-fill: TEXT_FILL_MUTED;
 }
 
 .tab-pane .tab:selected .glyph-icon {
-	-fx-fill: PRIMARY_BG;
+	-fx-fill: PRIMARY;
 }
 
 .tab-pane .tab:selected .tab-label {
-	-fx-text-fill: TEXT_FILL_PRIMARY;
+	-fx-text-fill: TEXT_FILL_HIGHLIGHTED;
 }
 
 /*******************************************************************************
@@ -271,16 +262,16 @@
 }
 
 .list-view:focused .list-cell:selected {
-	-fx-background-color: PRIMARY_BG, CONTROL_PRIMARY_LIGHT_BG_NORMAL;
+	-fx-background-color: PRIMARY, CONTROL_BG_SELECTED;
 	-fx-background-insets: 0, 0 0 0 3px;
 }
 
 .list-cell:selected {
-	-fx-background-color: CONTROL_PRIMARY_LIGHT_BG_NORMAL;
+	-fx-background-color: CONTROL_BG_SELECTED;
 }
 
 .list-cell .glyph-icon {
-	-fx-fill: SECONDARY_BG;
+	-fx-fill: TEXT_FILL_MUTED;
 }
 
 .list-cell .header-label {
@@ -289,16 +280,16 @@
 }
 
 .list-cell .detail-label {
-	-fx-text-fill: TEXT_FILL_SECONDARY;
+	-fx-text-fill: TEXT_FILL_MUTED;
 	-fx-font-size: 0.8em;
 }
 
 .list-cell:selected .glyph-icon {
-	-fx-fill: PRIMARY_BG;
+	-fx-fill: PRIMARY;
 }
 
 .list-cell:selected .header-label {
-	-fx-text-fill: TEXT_FILL_PRIMARY;
+	-fx-text-fill: TEXT_FILL_HIGHLIGHTED;
 }
 
 .list-cell.drop-above {
@@ -379,13 +370,13 @@
 }
 
 .badge-primary {
-	-fx-text-fill: TEXT_FILL_WHITE;
-	-fx-background-color: PRIMARY_BG;
+	-fx-text-fill: white;
+	-fx-background-color: PRIMARY;
 }
 
 .badge-secondary {
-	-fx-text-fill: TEXT_FILL_WHITE;
-	-fx-background-color: SECONDARY_BG;
+	-fx-text-fill: white;
+	-fx-background-color: SECONDARY;
 }
 
 /*******************************************************************************
@@ -395,27 +386,27 @@
  ******************************************************************************/
 
 .password-strength-indicator .segment {
-	-fx-background-color: PASSWORD_STRENGTH_INDICATOR_BG;
+	-fx-background-color: CONTROL_BORDER_NORMAL;
 }
 
 .password-strength-indicator.strength-0 .segment.active {
-	-fx-background-color: PASSWORD_STRENGTH_INDICATOR_BG_STRENGTH_0;
+	-fx-background-color: RED_5;
 }
 
 .password-strength-indicator.strength-1 .segment.active {
-	-fx-background-color: PASSWORD_STRENGTH_INDICATOR_BG_STRENGTH_1;
+	-fx-background-color: ORANGE_5;
 }
 
 .password-strength-indicator.strength-2 .segment.active {
-	-fx-background-color: PASSWORD_STRENGTH_INDICATOR_BG_STRENGTH_2;
+	-fx-background-color: YELLOW_5;
 }
 
 .password-strength-indicator.strength-3 .segment.active {
-	-fx-background-color: PASSWORD_STRENGTH_INDICATOR_BG_STRENGTH_3;
+	-fx-background-color: PRIMARY;
 }
 
 .password-strength-indicator.strength-4 .segment.active {
-	-fx-background-color: PASSWORD_STRENGTH_INDICATOR_BG_STRENGTH_4;
+	-fx-background-color: PRIMARY_D1;
 }
 
 /*******************************************************************************
@@ -442,8 +433,8 @@
 .text-input {
 	-fx-cursor: text;
 	-fx-text-fill: TEXT_FILL;
-	-fx-highlight-fill: PRIMARY_BG;
-	-fx-prompt-text-fill: TEXT_FILL_SECONDARY;
+	-fx-highlight-fill: PRIMARY;
+	-fx-prompt-text-fill: TEXT_FILL_MUTED;
 	-fx-background-color: CONTROL_BORDER_NORMAL, CONTROL_BG_NORMAL;
 	-fx-background-insets: 0, 1px;
 	-fx-background-radius: 4px;
@@ -455,7 +446,7 @@
 }
 
 .text-input:disabled {
-	-fx-text-fill: TEXT_FILL_SECONDARY;
+	-fx-text-fill: TEXT_FILL_MUTED;
 	-fx-background-color: CONTROL_BORDER_DISABLED, CONTROL_BG_DISABLED;
 }
 
@@ -487,7 +478,7 @@
 }
 
 .text-input:disabled {
-	-fx-text-fill: TEXT_FILL_SECONDARY;
+	-fx-text-fill: TEXT_FILL_MUTED;
 	-fx-background-color: CONTROL_BORDER_DISABLED, CONTROL_BG_DISABLED;
 }
 
@@ -499,8 +490,8 @@
 	-fx-padding: 0.2em 0.5em 0.2em 0.5em;
 	-fx-cursor: text;
 	-fx-text-fill: TEXT_FILL;
-	-fx-highlight-fill: PRIMARY_BG;
-	-fx-prompt-text-fill: TEXT_FILL_SECONDARY;
+	-fx-highlight-fill: PRIMARY;
+	-fx-prompt-text-fill: TEXT_FILL_MUTED;
     -fx-background-color: null;
 }
 
@@ -529,7 +520,7 @@
 }
 
 .button:default {
-	-fx-text-fill: TEXT_FILL_WHITE;
+	-fx-text-fill: white;
 	-fx-background-color: CONTROL_PRIMARY_BORDER_NORMAL, CONTROL_PRIMARY_BG_NORMAL;
 }
 
@@ -538,25 +529,25 @@
 }
 
 .button:default:armed {
-	-fx-background-color: CONTROL_PRIMARY_BORDER_NORMAL, CONTROL_PRIMARY_BG_ARMED;
+	-fx-background-color: CONTROL_PRIMARY_BORDER_ARMED, CONTROL_PRIMARY_BG_ARMED;
 }
 
 .button:disabled,
 .button:default:disabled {
-	-fx-text-fill: TEXT_FILL_SECONDARY;
+	-fx-text-fill: TEXT_FILL_MUTED;
 	-fx-background-color: CONTROL_BORDER_DISABLED, CONTROL_BG_DISABLED;
 }
 
 .button:disabled .glyph-icon {
-	-fx-fill: TEXT_FILL_SECONDARY;
+	-fx-fill: TEXT_FILL_MUTED;
 }
 
 .button:default .glyph-icon {
-	-fx-fill: TEXT_FILL_WHITE;
+	-fx-fill: white;
 }
 
 .button:default .label {
-	-fx-text-fill: TEXT_FILL_WHITE;
+	-fx-text-fill: white;
 }
 
 .button-large {
@@ -577,7 +568,7 @@
 }
 
 .hyperlink.hyperlink-secondary {
-	-fx-text-fill: TEXT_FILL_SECONDARY;
+	-fx-text-fill: TEXT_FILL_MUTED;
 }
 
 .hyperlink-hover-icon {
@@ -601,7 +592,7 @@
 }
 
 .check-box:disabled {
-	-fx-text-fill: TEXT_FILL_SECONDARY;
+	-fx-text-fill: TEXT_FILL_MUTED;
 }
 
 .check-box > .box {
@@ -694,7 +685,7 @@
 }
 
 .choice-box:disabled > .label {
-	-fx-text-fill: TEXT_FILL_SECONDARY;
+	-fx-text-fill: TEXT_FILL_MUTED;
 }
 
 .choice-box > .open-button {
@@ -709,7 +700,7 @@
 }
 
 .choice-box:disabled > .open-button > .arrow {
-	-fx-background-color: transparent, TEXT_FILL_SECONDARY;
+	-fx-background-color: transparent, TEXT_FILL_MUTED;
 }
 
 .choice-box .context-menu {
@@ -758,7 +749,7 @@
 }
 
 .menu-item:disabled > .label {
-	-fx-text-fill: TEXT_FILL_SECONDARY;
+	-fx-text-fill: TEXT_FILL_MUTED;
 }
 
 .radio-menu-item:checked > .left-container > .radio {

main/ui/src/main/resources/css/light_theme.css

@@ -27,16 +27,13 @@
  ******************************************************************************/
 
 .root {
-	GREEN_0: #373B30;
-	GREEN_1: #384D14;
-	GREEN_2: #476611;
-	GREEN_3: #598016;
-	GREEN_4: #699917;
-	GREEN_5: #79B01A;
-	GREEN_6: #91C734;
-	GREEN_7: #B9E070;
-	GREEN_8: #D7E7BA;
-	GREEN_9: #F3F5F0;
+	PRIMARY_D2: #2E4D2E;
+	PRIMARY_D1: #407F41;
+	PRIMARY: #49B04A;
+	PRIMARY_L1: #66CC68;
+	PRIMARY_L2: #EBF5EB;
+
+	SECONDARY: #008A7B;
 
 	GRAY_0: #222222;
 	GRAY_1: #3B3B3B;
@@ -53,13 +50,14 @@
 	ORANGE_5: #E67E22;
 	YELLOW_5: #F1C40F;
 
-	PRIMARY_BG: GREEN_5;
-	SECONDARY_BG: GRAY_5;
 	MAIN_BG: GRAY_9;
 	TEXT_FILL: GRAY_0;
-	TEXT_FILL_PRIMARY: GREEN_4;
-	TEXT_FILL_SECONDARY: GRAY_4;
-	TEXT_FILL_WHITE: white;
+	TEXT_FILL_HIGHLIGHTED: PRIMARY;
+	TEXT_FILL_MUTED: GRAY_5;
+
+	TITLE_BG: PRIMARY;
+	TITLE_TEXT_FILL: white;
+
 	CONTROL_BORDER_NORMAL: GRAY_7;
 	CONTROL_BORDER_FOCUSED: GRAY_5;
 	CONTROL_BORDER_DISABLED: GRAY_8;
@@ -67,27 +65,20 @@
 	CONTROL_BG_HOVER: GRAY_9;
 	CONTROL_BG_ARMED: GRAY_8;
 	CONTROL_BG_DISABLED: GRAY_9;
-	CONTROL_PRIMARY_BORDER_NORMAL: GREEN_3;
-	CONTROL_PRIMARY_BORDER_FOCUSED: GREEN_1;
-	CONTROL_PRIMARY_BORDER_DISABLED: GREEN_5;
-	CONTROL_PRIMARY_BG_NORMAL: GREEN_5;
-	CONTROL_PRIMARY_BG_ARMED: GREEN_4;
-	CONTROL_PRIMARY_BG_DISABLED: GREEN_6;
-	CONTROL_PRIMARY_LIGHT_BG_NORMAL: GREEN_9;
-	CONTROL_WHITE_BG_ARMED: GRAY_8;
+	CONTROL_BG_SELECTED: PRIMARY_L2;
+
+	CONTROL_PRIMARY_BORDER_NORMAL: PRIMARY_D1;
+	CONTROL_PRIMARY_BORDER_ARMED: PRIMARY_D2;
+	CONTROL_PRIMARY_BORDER_FOCUSED: SECONDARY;
+	CONTROL_PRIMARY_BG_NORMAL: PRIMARY;
+	CONTROL_PRIMARY_BG_ARMED: PRIMARY_D1;
+
 	SCROLL_BAR_THUMB_NORMAL: GRAY_7;
 	SCROLL_BAR_THUMB_HOVER: GRAY_6;
-	INDICATOR_BG: RED_5;
-	DRAG_N_DROP_INDICATOR_BG: GRAY_5;
+
 	PROGRESS_INDICATOR_BEGIN: GRAY_2;
 	PROGRESS_INDICATOR_END: GRAY_4;
 	PROGRESS_BAR_BG: GRAY_8;
-	PASSWORD_STRENGTH_INDICATOR_BG: GRAY_5;
-	PASSWORD_STRENGTH_INDICATOR_BG_STRENGTH_0: RED_5;
-	PASSWORD_STRENGTH_INDICATOR_BG_STRENGTH_1: ORANGE_5;
-	PASSWORD_STRENGTH_INDICATOR_BG_STRENGTH_2: YELLOW_5;
-	PASSWORD_STRENGTH_INDICATOR_BG_STRENGTH_3: GREEN_6;
-	PASSWORD_STRENGTH_INDICATOR_BG_STRENGTH_4: GREEN_5;
 
 	-fx-background-color: MAIN_BG;
 	-fx-text-fill: TEXT_FILL;
@@ -105,7 +96,7 @@
 }
 
 .label-secondary {
-	-fx-text-fill: TEXT_FILL_SECONDARY;
+	-fx-text-fill: TEXT_FILL_MUTED;
 }
 
 .label-large {
@@ -136,11 +127,11 @@
 }
 
 .glyph-icon-primary {
-	-fx-fill: PRIMARY_BG;
+	-fx-fill: PRIMARY;
 }
 
-.glyph-icon-secondary {
-	-fx-fill: SECONDARY_BG;
+.glyph-icon-muted {
+	-fx-fill: TEXT_FILL_MUTED;
 }
 
 .glyph-icon-white {
@@ -158,7 +149,7 @@
  ******************************************************************************/
 
 .main-window .title {
-	-fx-background-color: PRIMARY_BG;
+	-fx-background-color: TITLE_BG;
 }
 
 .main-window .title .label {
@@ -166,7 +157,7 @@
 	-fx-font-size: 21px;
 	-fx-font-style: normal;
 	-fx-font-weight: 700;
-	-fx-text-fill: white;
+	-fx-text-fill: TITLE_TEXT_FILL;
 }
 
 .main-window .title .button {
@@ -181,24 +172,23 @@
 }
 
 .main-window .title .button:armed .glyph-icon {
-	-fx-fill: CONTROL_WHITE_BG_ARMED;
+	-fx-fill: GRAY_8;
 }
 
 .main-window .update-indicator {
-	-fx-background-color: PRIMARY_BG, white, INDICATOR_BG;
-	-fx-background-insets: 0, 1px, 2px;
-	-fx-background-radius: 6px, 5px, 4px;
-	-fx-translate-x: -1px;
-	-fx-translate-y: 1px;
+	-fx-background-color: white, RED_5;
+	-fx-background-insets: 1px, 2px;
+	-fx-background-radius: 6px, 5px;
+	-fx-effect: dropshadow(three-pass-box, rgba(0,0,0,0.8), 2, 0, 0, 0);
 }
 
 .main-window .drag-n-drop-indicator {
-	-fx-border-color: DRAG_N_DROP_INDICATOR_BG;
+	-fx-border-color: SECONDARY;
 	-fx-border-width: 3px;
 }
 
 .main-window .drag-n-drop-indicator .drag-n-drop-header {
-	-fx-background-color: DRAG_N_DROP_INDICATOR_BG;
+	-fx-background-color: SECONDARY;
 	-fx-padding: 3px;
 }
 
@@ -225,24 +215,24 @@
 }
 
 .tab-pane .tab:selected {
-	-fx-background-color: PRIMARY_BG, CONTROL_PRIMARY_LIGHT_BG_NORMAL;
+	-fx-background-color: PRIMARY, CONTROL_BG_SELECTED;
 }
 
 .tab-pane .tab .tab-label {
-	-fx-text-fill: SECONDARY_BG;
+	-fx-text-fill: TEXT_FILL_MUTED;
 	-fx-alignment: CENTER;
 }
 
 .tab-pane .tab .glyph-icon {
-	-fx-fill: SECONDARY_BG;
+	-fx-fill: TEXT_FILL_MUTED;
 }
 
 .tab-pane .tab:selected .glyph-icon {
-	-fx-fill: PRIMARY_BG;
+	-fx-fill: PRIMARY;
 }
 
 .tab-pane .tab:selected .tab-label {
-	-fx-text-fill: TEXT_FILL_PRIMARY;
+	-fx-text-fill: TEXT_FILL_HIGHLIGHTED;
 }
 
 /*******************************************************************************
@@ -271,16 +261,16 @@
 }
 
 .list-view:focused .list-cell:selected {
-	-fx-background-color: PRIMARY_BG, CONTROL_PRIMARY_LIGHT_BG_NORMAL;
+	-fx-background-color: PRIMARY, CONTROL_BG_SELECTED;
 	-fx-background-insets: 0, 0 0 0 3px;
 }
 
 .list-cell:selected {
-	-fx-background-color: CONTROL_PRIMARY_LIGHT_BG_NORMAL;
+	-fx-background-color: CONTROL_BG_SELECTED;
 }
 
 .list-cell .glyph-icon {
-	-fx-fill: SECONDARY_BG;
+	-fx-fill: TEXT_FILL_MUTED;
 }
 
 .list-cell .header-label {
@@ -289,16 +279,16 @@
 }
 
 .list-cell .detail-label {
-	-fx-text-fill: TEXT_FILL_SECONDARY;
+	-fx-text-fill: TEXT_FILL_MUTED;
 	-fx-font-size: 0.8em;
 }
 
 .list-cell:selected .glyph-icon {
-	-fx-fill: PRIMARY_BG;
+	-fx-fill: PRIMARY;
 }
 
 .list-cell:selected .header-label {
-	-fx-text-fill: TEXT_FILL_PRIMARY;
+	-fx-text-fill: TEXT_FILL_HIGHLIGHTED;
 }
 
 .list-cell.drop-above {
@@ -379,13 +369,13 @@
 }
 
 .badge-primary {
-	-fx-text-fill: TEXT_FILL_WHITE;
-	-fx-background-color: PRIMARY_BG;
+	-fx-text-fill: white;
+	-fx-background-color: PRIMARY;
 }
 
 .badge-secondary {
-	-fx-text-fill: TEXT_FILL_WHITE;
-	-fx-background-color: SECONDARY_BG;
+	-fx-text-fill: white;
+	-fx-background-color: SECONDARY;
 }
 
 /*******************************************************************************
@@ -395,27 +385,27 @@
  ******************************************************************************/
 
 .password-strength-indicator .segment {
-	-fx-background-color: PASSWORD_STRENGTH_INDICATOR_BG;
+	-fx-background-color: CONTROL_BORDER_NORMAL;
 }
 
 .password-strength-indicator.strength-0 .segment.active {
-	-fx-background-color: PASSWORD_STRENGTH_INDICATOR_BG_STRENGTH_0;
+	-fx-background-color: RED_5;
 }
 
 .password-strength-indicator.strength-1 .segment.active {
-	-fx-background-color: PASSWORD_STRENGTH_INDICATOR_BG_STRENGTH_1;
+	-fx-background-color: ORANGE_5;
 }
 
 .password-strength-indicator.strength-2 .segment.active {
-	-fx-background-color: PASSWORD_STRENGTH_INDICATOR_BG_STRENGTH_2;
+	-fx-background-color: YELLOW_5;
 }
 
 .password-strength-indicator.strength-3 .segment.active {
-	-fx-background-color: PASSWORD_STRENGTH_INDICATOR_BG_STRENGTH_3;
+	-fx-background-color: PRIMARY;
 }
 
 .password-strength-indicator.strength-4 .segment.active {
-	-fx-background-color: PASSWORD_STRENGTH_INDICATOR_BG_STRENGTH_4;
+	-fx-background-color: PRIMARY_D1;
 }
 
 /*******************************************************************************
@@ -442,8 +432,8 @@
 .text-input {
 	-fx-cursor: text;
 	-fx-text-fill: TEXT_FILL;
-	-fx-highlight-fill: PRIMARY_BG;
-	-fx-prompt-text-fill: TEXT_FILL_SECONDARY;
+	-fx-highlight-fill: PRIMARY;
+	-fx-prompt-text-fill: TEXT_FILL_MUTED;
 	-fx-background-color: CONTROL_BORDER_NORMAL, CONTROL_BG_NORMAL;
 	-fx-background-insets: 0, 1px;
 	-fx-background-radius: 4px;
@@ -455,7 +445,7 @@
 }
 
 .text-input:disabled {
-	-fx-text-fill: TEXT_FILL_SECONDARY;
+	-fx-text-fill: TEXT_FILL_MUTED;
 	-fx-background-color: CONTROL_BORDER_DISABLED, CONTROL_BG_DISABLED;
 }
 
@@ -487,7 +477,7 @@
 }
 
 .text-input:disabled {
-	-fx-text-fill: TEXT_FILL_SECONDARY;
+	-fx-text-fill: TEXT_FILL_MUTED;
 	-fx-background-color: CONTROL_BORDER_DISABLED, CONTROL_BG_DISABLED;
 }
 
@@ -499,8 +489,8 @@
 	-fx-padding: 0.2em 0.5em 0.2em 0.5em;
 	-fx-cursor: text;
 	-fx-text-fill: TEXT_FILL;
-	-fx-highlight-fill: PRIMARY_BG;
-	-fx-prompt-text-fill: TEXT_FILL_SECONDARY;
+	-fx-highlight-fill: PRIMARY;
+	-fx-prompt-text-fill: TEXT_FILL_MUTED;
     -fx-background-color: null;
 }
 
@@ -529,7 +519,7 @@
 }
 
 .button:default {
-	-fx-text-fill: TEXT_FILL_WHITE;
+	-fx-text-fill: white;
 	-fx-background-color: CONTROL_PRIMARY_BORDER_NORMAL, CONTROL_PRIMARY_BG_NORMAL;
 }
 
@@ -538,25 +528,25 @@
 }
 
 .button:default:armed {
-	-fx-background-color: CONTROL_PRIMARY_BORDER_NORMAL, CONTROL_PRIMARY_BG_ARMED;
+	-fx-background-color: CONTROL_PRIMARY_BORDER_ARMED, CONTROL_PRIMARY_BG_ARMED;
 }
 
 .button:disabled,
 .button:default:disabled {
-	-fx-text-fill: TEXT_FILL_SECONDARY;
+	-fx-text-fill: TEXT_FILL_MUTED;
 	-fx-background-color: CONTROL_BORDER_DISABLED, CONTROL_BG_DISABLED;
 }
 
 .button:disabled .glyph-icon {
-	-fx-fill: TEXT_FILL_SECONDARY;
+	-fx-fill: TEXT_FILL_MUTED;
 }
 
 .button:default .glyph-icon {
-	-fx-fill: TEXT_FILL_WHITE;
+	-fx-fill: white;
 }
 
 .button:default .label {
-	-fx-text-fill: TEXT_FILL_WHITE;
+	-fx-text-fill: white;
 }
 
 .button-large {
@@ -577,7 +567,7 @@
 }
 
 .hyperlink.hyperlink-secondary {
-	-fx-text-fill: TEXT_FILL_SECONDARY;
+	-fx-text-fill: TEXT_FILL_MUTED;
 }
 
 .hyperlink-hover-icon {
@@ -601,7 +591,7 @@
 }
 
 .check-box:disabled {
-	-fx-text-fill: TEXT_FILL_SECONDARY;
+	-fx-text-fill: TEXT_FILL_MUTED;
 }
 
 .check-box > .box {
@@ -694,7 +684,7 @@
 }
 
 .choice-box:disabled > .label {
-	-fx-text-fill: TEXT_FILL_SECONDARY;
+	-fx-text-fill: TEXT_FILL_MUTED;
 }
 
 .choice-box > .open-button {
@@ -709,7 +699,7 @@
 }
 
 .choice-box:disabled > .open-button > .arrow {
-	-fx-background-color: transparent, TEXT_FILL_SECONDARY;
+	-fx-background-color: transparent, TEXT_FILL_MUTED;
 }
 
 .choice-box .context-menu {
@@ -758,7 +748,7 @@
 }
 
 .menu-item:disabled > .label {
-	-fx-text-fill: TEXT_FILL_SECONDARY;
+	-fx-text-fill: TEXT_FILL_MUTED;
 }
 
 .radio-menu-item:checked > .left-container > .radio {

main/ui/src/main/resources/fxml/main_window_title.fxml

@@ -1,11 +1,11 @@
-<?import javafx.scene.layout.StackPane?>
-<?import org.cryptomator.ui.controls.FontAwesome5IconView?>
-<?import javafx.scene.layout.Region?>
-<?import javafx.scene.control.Tooltip?>
-<?import javafx.scene.layout.HBox?>
 <?import javafx.geometry.Insets?>
-<?import javafx.scene.control.Label?>
 <?import javafx.scene.control.Button?>
+<?import javafx.scene.control.Label?>
+<?import javafx.scene.control.Tooltip?>
+<?import javafx.scene.layout.HBox?>
+<?import javafx.scene.layout.Region?>
+<?import javafx.scene.layout.StackPane?>
+<?import org.cryptomator.ui.controls.FontAwesome5IconView?>
 <HBox xmlns="http://javafx.com/javafx"
 	  xmlns:fx="http://javafx.com/fxml"
 	  fx:id="titleBar"
@@ -25,7 +25,7 @@
 			<graphic>
 				<StackPane>
 					<FontAwesome5IconView glyph="EXCLAMATION_CIRCLE" glyphSize="16"/>
-					<Region styleClass="update-indicator" StackPane.alignment="TOP_RIGHT" prefWidth="10" prefHeight="10" maxWidth="-Infinity" maxHeight="-Infinity"/>
+					<Region styleClass="update-indicator" StackPane.alignment="TOP_RIGHT" prefWidth="12" prefHeight="12" maxWidth="-Infinity" maxHeight="-Infinity"/>
 				</StackPane>
 			</graphic>
 			<tooltip>
@@ -36,7 +36,7 @@
 			<graphic>
 				<StackPane>
 					<FontAwesome5IconView glyph="COGS" glyphSize="16"/>
-					<Region styleClass="update-indicator" visible="${controller.updateAvailable}" StackPane.alignment="TOP_RIGHT" prefWidth="10" prefHeight="10" maxWidth="-Infinity" maxHeight="-Infinity"/>
+					<Region styleClass="update-indicator" visible="${controller.updateAvailable}" StackPane.alignment="TOP_RIGHT" prefWidth="12" prefHeight="12" maxWidth="-Infinity" maxHeight="-Infinity"/>
 				</StackPane>
 			</graphic>
 			<tooltip>

main/ui/src/main/resources/fxml/vault_detail.fxml

@@ -39,7 +39,7 @@
 				</HBox>
 				<Hyperlink styleClass="hyperlink-secondary,hyperlink-hover-icon" text="${controller.vault.displayablePath}" textOverrun="CENTER_ELLIPSIS" onAction="#revealStorageLocation">
 					<graphic>
-						<FontAwesome5IconView styleClass="glyph-icon-secondary" glyph="EYE"/>
+						<FontAwesome5IconView styleClass="glyph-icon-muted" glyph="EYE"/>
 					</graphic>
 					<tooltip>
 						<Tooltip text="${controller.vault.displayablePath}"/>