Merge pull request #4770 from toggl-open-source/update/colors-refactor

Remove hardcoded colors (mac)
toggl-open-source · Dec 22, 2020 · dbf2491 · dbf2491
2 parents 0d4f5ae + 7c328f0
commit dbf2491
Show file tree

Hide file tree

Showing 15 changed files with 120 additions and 138 deletions.
diff --git a/src/ui/osx/TogglDesktop/Common/Views/TextFields/ProjectTextField.m b/src/ui/osx/TogglDesktop/Common/Views/TextFields/ProjectTextField.m
@@ -139,15 +139,7 @@ - (NSColor *)clientTextColor
 	{
 		return self.customClientTextColor;
 	}
-
-	if (@available(macOS 10.13, *))
-	{
-		return [NSColor colorNamed:@"grey-text-color"];
-	}
-	else
-	{
-		return [ConvertHexColor hexCodeToNSColor:@"#555555"];
-	}
+    return [NSColor greyText];
 }
 
 - (void)setTextColor:(NSColor *)textColor

diff --git a/src/ui/osx/TogglDesktop/Features/About/AboutWindowController.m b/src/ui/osx/TogglDesktop/Features/About/AboutWindowController.m
@@ -255,16 +255,8 @@ - (void)renderRestartButton {
 			self.restartButton.enabled = NO;
 			self.restartButton.hidden = NO;
 			self.restartButton.title = @"Downloading...";
-			if (@available(macOS 10.13, *))
-			{
-				self.restartButton.textColor = [NSColor colorNamed:@"grey-text-color"];
-				self.restartButton.bgColor = [NSColor colorWithRed:177.0 / 255.0 green:177.0 / 255.0 blue:177.0 / 255.0 alpha:0.1];
-			}
-			else
-			{
-				self.restartButton.textColor = [ConvertHexColor hexCodeToNSColor:@"#d9d9d9"];
-				self.restartButton.bgColor = [NSColor colorWithRed:177.0 / 255.0 green:177.0 / 255.0 blue:177.0 / 255.0 alpha:0.1];
-			}
+			self.restartButton.textColor = [NSColor greyText];
+			self.restartButton.bgColor = [NSColor disabledRestartButtonBackground];
 			break;
 		case DownloadStateRestart :
 			self.restartButton.enabled = YES;

diff --git a/src/ui/osx/TogglDesktop/Features/AutoComplete/LegacyAutoComplete/AutoCompleteInput.m b/src/ui/osx/TogglDesktop/Features/AutoComplete/LegacyAutoComplete/AutoCompleteInput.m
@@ -67,12 +67,7 @@ - (void)initBackgroundView
 	self.backgroundView.translatesAutoresizingMaskIntoConstraints = NO;
 	self.backgroundView.wantsLayer = YES;
 	self.backgroundView.layer.backgroundColor = [NSColor colorWithWhite:0 alpha:0.5f].CGColor;
-
-    if (@available(macOS 10.13, *)) {
-        self.autocompleteTableView.backgroundColor = [NSColor colorNamed:@"auto-complete-background"];
-    } else {
-        self.autocompleteTableContainer.backgroundColor = [NSColor whiteColor];
-    }
+	self.autocompleteTableView.backgroundColor = [NSColor autoCompleteBackground];
 }
 
 - (void)layout

diff --git a/src/ui/osx/TogglDesktop/Features/AutoComplete/LegacyAutoComplete/AutoCompleteTableCell.m b/src/ui/osx/TogglDesktop/Features/AutoComplete/LegacyAutoComplete/AutoCompleteTableCell.m
@@ -193,14 +193,7 @@ - (void)renderTitleForTimeEntryCellWithViewItem:(AutocompleteItem *)viewItem
 
 - (NSColor *)categoryLabelColor
 {
-	if (@available(macOS 10.13, *))
-	{
-		return [NSColor colorNamed:@"grey-text-color"];
-	}
-	else
-	{
-		return [ConvertHexColor hexCodeToNSColor:@"#555555"];
-	}
+    return [NSColor greyText];
 }
 
 @end
diff --git a/src/ui/osx/TogglDesktop/Features/Feedback/FeedbackWindowController.m b/src/ui/osx/TogglDesktop/Features/Feedback/FeedbackWindowController.m
@@ -56,18 +56,9 @@ - (void)awakeFromNib
 
 	self.uploadImageButton.wantsLayer = YES;
 	self.uploadImageButton.layer.borderWidth = 1;
-	if (@available(macOS 10.13, *))
-	{
-		self.uploadImageButton.layer.borderColor = [NSColor colorNamed:@"upload-border-color"].CGColor;
-		self.uploadImageButton.bgColor = [NSColor colorNamed:@"upload-background-color"];
-		self.contentTextView.backgroundColor = [NSColor colorNamed:@"upload-background-color"];
-	}
-	else
-	{
-		self.uploadImageButton.layer.borderColor = [ConvertHexColor hexCodeToNSColor:@"#acacac"].CGColor;
-		self.uploadImageButton.bgColor = NSColor.whiteColor;
-		self.contentTextView.backgroundColor = NSColor.whiteColor;
-	}
+    self.uploadImageButton.layer.borderColor = [NSColor uploadBorder].CGColor;
+    self.uploadImageButton.bgColor = [NSColor uploadBackground];
+    self.contentTextView.backgroundColor = [NSColor uploadBackground];
 }
 
 - (IBAction)uploadImageClick:(id)sender

diff --git a/src/ui/osx/TogglDesktop/Features/IdleNotification/IdleNotificationWindowController.m b/src/ui/osx/TogglDesktop/Features/IdleNotification/IdleNotificationWindowController.m
@@ -86,37 +86,20 @@ - (void)styleTransparentButton:(FlatButton *)button
 {
 	button.wantsLayer = YES;
 	button.layer.borderWidth = 1;
-	if (@available(macOS 10.13, *))
-	{
-		button.layer.borderColor = [NSColor colorNamed:@"upload-border-color"].CGColor;
-		button.bgColor = [NSColor colorNamed:@"upload-background-color"];
-	}
-	else
-	{
-		button.layer.borderColor = [ConvertHexColor hexCodeToNSColor:@"#acacac"].CGColor;
-		button.bgColor = NSColor.whiteColor;
-	}
+    button.layer.borderColor = [NSColor uploadBorder].CGColor;
+    button.bgColor = [NSColor uploadBackground];
 }
 
 - (void)styleCancelButton
 {
-	// Font
 	NSFont *font = self.cancelButton.font;
-
 	if (font == nil)
 	{
 		font = [NSFont systemFontOfSize:12 weight:NSFontWeightMedium];
 	}
 
-	// Color
-	NSColor *color = [ConvertHexColor hexCodeToNSColor:@"#555555"];
-	if (@available(macOS 10.13, *))
-	{
-		color = [NSColor colorNamed:@"grey-text-color"];
-	}
-
 	NSDictionary<NSAttributedStringKey, id> *attributes = @{ NSFontAttributeName: font,
-															 NSForegroundColorAttributeName: color,
+															 NSForegroundColorAttributeName: [NSColor greyText],
 															 NSUnderlineStyleAttributeName: @(NSUnderlineStyleSingle), };
 	NSAttributedString *underlineString = [[NSAttributedString alloc] initWithString:@"Cancel" attributes:attributes];
 	self.cancelButton.attributedTitle = underlineString;

diff --git a/src/ui/osx/TogglDesktop/Features/TimeEntryList/TimeEntryCell.m b/src/ui/osx/TogglDesktop/Features/TimeEntryList/TimeEntryCell.m
@@ -81,16 +81,8 @@ - (void)awakeFromNib {
 														  userInfo:nil];
 	[self.view addTrackingArea:tracking];
 
-	if (@available(macOS 10.13, *))
-	{
-		self.backgroundColor = [NSColor colorNamed:@"white-background-hover-color"];
-		self.selectedSubItemBackgroundColor = [NSColor colorNamed:@"subitem-background-selected-color"];
-	}
-	else
-	{
-		self.backgroundColor = [ConvertHexColor hexCodeToNSColor:@"#F4F5F6"];
-		self.selectedSubItemBackgroundColor = [ConvertHexColor hexCodeToNSColor:@"#e8e8e8"];
-	}
+	self.backgroundColor = [NSColor whiteBackgroundHover];
+	self.selectedSubItemBackgroundColor = [NSColor subItemBackgroundSelected];
 }
 
 - (void)prepareForReuse {
@@ -288,30 +280,14 @@ - (void)setupGroupMode {
 	if (self.Group && self.GroupOpen)
 	{
 		[self.groupButton setTextColor:[NSColor togglGreen]];
-		if (@available(macOS 10.13, *))
-		{
-			self.groupBox.fillColor = [NSColor colorNamed:@"group-box-background-color"];
-		}
-		else
-		{
-			self.groupBox.fillColor = [NSColor colorWithRed:223.0 / 255.0 green:104.0 / 255.0 blue:208.0 / 255.0 alpha:0.12];
-		}
+		self.groupBox.fillColor = [NSColor groupBoxBackground];
 		self.groupBox.borderColor = [NSColor clearColor];
 	}
 	else
 	{
-		if (@available(macOS 10.13, *))
-		{
-			[self.groupButton setTextColor:[NSColor colorNamed:@"grey-text-color"]];
-			self.groupBox.fillColor = [NSColor colorNamed:@"upload-background-color"];
-			self.groupBox.borderColor = [NSColor colorNamed:@"upload-border-color"];
-		}
-		else
-		{
-			[self.groupButton setTextColor:[ConvertHexColor hexCodeToNSColor:@"#564360"]];
-			self.groupBox.fillColor = [NSColor whiteColor];
-			self.groupBox.borderColor = [ConvertHexColor hexCodeToNSColor:@"ACACAC"];
-		}
+		[self.groupButton setTextColor:[NSColor greyText]];
+		self.groupBox.fillColor = [NSColor uploadBackground];
+		self.groupBox.borderColor = [NSColor uploadBorder];
 	}
 
 	if (self.cellType == CellTypeSubItemInGroup)

diff --git a/src/ui/osx/TogglDesktop/Features/TimeEntryList/TimeEntryListViewController.m b/src/ui/osx/TogglDesktop/Features/TimeEntryList/TimeEntryListViewController.m
@@ -534,17 +534,8 @@ - (void)collectionView:(NSCollectionView *_Nonnull)collectionView draggingSessio
 			 NSRect contentFrame = NSMakeRect(0, imageOffset, contentSize.width, contentSize.height);
 			 [theContext restoreGraphicsState];
 
-			 NSColor *backgroundColor;
-			 if (@available(macOS 10.13, *))
-			 {
-				 backgroundColor = [NSColor colorNamed:@"white-background-hover-color"];
-			 }
-			 else
-			 {
-				 backgroundColor = [ConvertHexColor hexCodeToNSColor:@"#F4F5F6"];
-			 }
-
-		     // fill content
+			 // fill content
+			 NSColor *backgroundColor = [NSColor whiteBackgroundHover];
 			 [backgroundColor set];
 			 NSBezierPath *contentPath = [NSBezierPath bezierPathWithRect:NSInsetRect(contentFrame, 1, 1)];
 			 [contentPath fill];

diff --git a/src/ui/osx/TogglDesktop/Features/Timeline/Models/TimelineActivity.swift b/src/ui/osx/TogglDesktop/Features/Timeline/Models/TimelineActivity.swift
@@ -36,7 +36,7 @@ struct TimelineEvent {
 /// It might consist of many sub-events (TimelineEvent)
 struct TimelineActivity {
 
-    private static let LightestBlueColor: NSColor = NSColor(calibratedRed: 223 / 255.0, green: 104 / 255.0, blue: 208 / 255.0, alpha: 0.2)
+    private static let LightestBlueColor: NSColor = Color.green.color.withAlphaComponent(0.2)
     private static let DarkestBlueColor: NSColor = Color.green.color
 
     // MARK: Variables

diff --git a/src/ui/osx/TogglDesktop/Features/Timeline/Views/TimelineDashedCornerView.swift b/src/ui/osx/TogglDesktop/Features/Timeline/Views/TimelineDashedCornerView.swift
@@ -15,7 +15,7 @@ final class TimelineDashedCornerView: NSView {
     // MARK: Variables
 
     var cornerRadius: CGFloat = 10.0
-    private lazy var color: NSColor = ConvertHexColor.hexCode(toNSColor: "#d9d9d9")
+    private lazy var color: NSColor = Color.timelineDashedBoxBorder.color
 
     // MARK: Overriden
 

diff --git a/src/ui/osx/TogglDesktop/Resources/Colors.swift b/src/ui/osx/TogglDesktop/Resources/Colors.swift
@@ -20,6 +20,7 @@ enum Color: String, CaseIterable {
     case timelineDatePickerBackground = "timeline-date-picker-background-color"
     case timelineBackgroundHighlight = "timeline-background-highlight-color"
     case timelineDivider = "timeline-divider-color"
+    case timelineDashedBoxBorder = "timeline-dashed-box-border"
     case collectionViewBackgroundColor = "collectionview-background-color"
     case blackText = "black-text-color"
     case borderDefault = "border-default"
@@ -31,7 +32,13 @@ enum Color: String, CaseIterable {
     case autoCompleteCellHover = "auto-complete-cell-hover"
     case tagSelectionBackground = "tag-selection-background-color"
     case uploadBorder = "upload-border-color"
+    case uploadBackground = "upload-background-color"
     case tabViewText = "tab-view-text-color"
+    case disabledRestartButtonBackground = "disabled-restart-button-background"
+    case whiteBackgroundHover = "white-background-hover-color"
+    case subItemBackgroundSelected = "subitem-background-selected-color"
+    case groupBoxBackground = "group-box-background-color"
+    case autoCompleteBackground = "auto-complete-background"
 
     var color: NSColor {
         if #available(OSX 10.13, *) {
@@ -67,6 +74,8 @@ enum Color: String, CaseIterable {
             return ConvertHexColor.hexCode(toNSColor: "#f7f7f7")
         case .timelineDivider:
             return ConvertHexColor.hexCode(toNSColor: "#e8e8e8")
+        case .timelineDashedBoxBorder:
+            return ConvertHexColor.hexCode(toNSColor: "#d9d9d9")
         case .collectionViewBackgroundColor:
             return ConvertHexColor.hexCode(toNSColor: "#FEF9F8")
         case .blackText:
@@ -87,8 +96,20 @@ enum Color: String, CaseIterable {
             return ConvertHexColor.hexCode(toNSColor: "#e5f9e8")
         case .uploadBorder:
             return ConvertHexColor.hexCode(toNSColor: "#ACACAC")
+        case .uploadBackground:
+            return NSColor.white
         case .tabViewText:
             return ConvertHexColor.hexCode(toNSColor: "#ACACAC")
+        case .disabledRestartButtonBackground:
+            return NSColor(red: 177 / 255.0, green: 177 / 255.0, blue: 177 / 255.0, alpha: 0.1)
+        case .whiteBackgroundHover:
+            return ConvertHexColor.hexCode(toNSColor: "#F4F5F6")
+        case .subItemBackgroundSelected:
+            return ConvertHexColor.hexCode(toNSColor: "#e8e8e8")
+        case .groupBoxBackground:
+            return Self.green.color.withAlphaComponent(0.12)
+        case .autoCompleteBackground:
+            return NSColor.white
         }
     }
 }
@@ -98,6 +119,14 @@ extension NSColor {
     static var togglGreen: NSColor { Color.green.color }
     static var collectionViewBackgroundColor: NSColor { Color.collectionViewBackgroundColor.color }
     static var shadow: NSColor { Color.shadow.color }
+    static var greyText: NSColor { Color.greyText.color }
+    static var disabledRestartButtonBackground: NSColor { Color.disabledRestartButtonBackground.color }
+    static var uploadBorder: NSColor { Color.uploadBorder.color }
+    static var uploadBackground: NSColor { Color.uploadBackground.color }
+    static var whiteBackgroundHover: NSColor { Color.whiteBackgroundHover.color }
+    static var subItemBackgroundSelected: NSColor { Color.subItemBackgroundSelected.color }
+    static var groupBoxBackground: NSColor { Color.groupBoxBackground.color }
+    static var autoCompleteBackground: NSColor { Color.autoCompleteBackground.color }
 }
 
 @objc enum ColorObjc: Int {

diff --git a/...esources/Media.xcassets/Colors/Timeline/timeline-dashed-box-border.colorset/Contents.json b/...esources/Media.xcassets/Colors/Timeline/timeline-dashed-box-border.colorset/Contents.json
@@ -0,0 +1,20 @@
+{
+  "colors" : [
+    {
+      "color" : {
+        "color-space" : "srgb",
+        "components" : {
+          "alpha" : "1.000",
+          "blue" : "0xD9",
+          "green" : "0xD9",
+          "red" : "0xD9"
+        }
+      },
+      "idiom" : "universal"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}
diff --git a/...Resources/Media.xcassets/Colors/disabled-restart-button-background.colorset/Contents.json b/...Resources/Media.xcassets/Colors/disabled-restart-button-background.colorset/Contents.json
@@ -0,0 +1,20 @@
+{
+  "colors" : [
+    {
+      "color" : {
+        "color-space" : "srgb",
+        "components" : {
+          "alpha" : "0.100",
+          "blue" : "177",
+          "green" : "177",
+          "red" : "177"
+        }
+      },
+      "idiom" : "universal"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}
diff --git a/...esktop/Resources/Media.xcassets/Colors/preference-background-color.colorset/Contents.json b/...esktop/Resources/Media.xcassets/Colors/preference-background-color.colorset/Contents.json
@@ -1,23 +1,18 @@
 {
-  "info" : {
-    "version" : 1,
-    "author" : "xcode"
-  },
   "colors" : [
     {
-      "idiom" : "mac",
       "color" : {
         "color-space" : "srgb",
         "components" : {
-          "red" : "0.980",
           "alpha" : "1.000",
-          "blue" : "0.988",
-          "green" : "0.984"
+          "blue" : "0xFB",
+          "green" : "0xFA",
+          "red" : "0xF9"
         }
-      }
+      },
+      "idiom" : "mac"
     },
     {
-      "idiom" : "mac",
       "appearances" : [
         {
           "appearance" : "luminosity",
@@ -27,12 +22,17 @@
       "color" : {
         "color-space" : "srgb",
         "components" : {
-          "red" : "0.118",
           "alpha" : "1.000",
           "blue" : "0.118",
-          "green" : "0.118"
+          "green" : "0.118",
+          "red" : "0.118"
         }
-      }
+      },
+      "idiom" : "mac"
     }
-  ]
-}
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}