Merge pull request #8463 from RocketChat/migration-colors

Color variables migration
RocketChat · Oct 17, 2017 · 98c3ed5 · 98c3ed5
2 parents 88c8ae0 + 61d687f
commit 98c3ed5
Show file tree

Hide file tree

Showing 16 changed files with 451 additions and 316 deletions.
diff --git a/packages/rocketchat-google-vision/.npm/package/npm-shrinkwrap.json b/packages/rocketchat-google-vision/.npm/package/npm-shrinkwrap.json
diff --git a/packages/rocketchat-i18n/i18n/en.i18n.json b/packages/rocketchat-i18n/i18n/en.i18n.json
@@ -1770,6 +1770,21 @@
   "theme-color-transparent-lighter": "Transparent Lighter",
   "theme-color-transparent-lightest": "Transparent Lightest",
   "theme-color-unread-notification-color": "Unread Notifications Color",
+  "theme-color-rc-color-error": "Error",
+  "theme-color-rc-color-error-light": "Error Light",
+  "theme-color-rc-color-alert": "Alert",
+  "theme-color-rc-color-alert-light": "Alert Light",
+  "theme-color-rc-color-success": "Success",
+  "theme-color-rc-color-success-light": "Success Light",
+  "theme-color-rc-color-button-primary": "Button Primary",
+  "theme-color-rc-color-button-primary-light": "Button Primary Light",
+  "theme-color-rc-color-primary": "Primary",
+  "theme-color-rc-color-primary-darkest": "Primary Darkest",
+  "theme-color-rc-color-primary-dark": "Primary Dark",
+  "theme-color-rc-color-primary-light": "Primary Light",
+  "theme-color-rc-color-primary-light-medium": "Primary Light Medium",
+  "theme-color-rc-color-primary-lightest": "Primary Lightest",
+  "theme-color-rc-color-content": "Content",
   "theme-custom-css": "Custom CSS",
   "theme-font-body-font-family": "Body Font Family",
   "There_are_no_agents_added_to_this_department_yet": "There are no agents added to this department yet.",

diff --git a/packages/rocketchat-theme/client/imports/components/messages.css b/packages/rocketchat-theme/client/imports/components/messages.css
@@ -17,7 +17,7 @@
 		margin: 0 0.2rem;
 
 		&:hover {
-			color: var(--color-button-primary);
+			color: var(--rc-color-button-primary);
 		}
 	}
 
@@ -27,7 +27,7 @@
 		cursor: pointer;
 
 		&:hover &-icon {
-			fill: var(--color-button-primary);
+			fill: var(--rc-color-button-primary);
 		}
 
 		&-icon {
@@ -48,7 +48,7 @@
 
 	&.active {
 		& .message-actions__label {
-			color: var(--color-button-primary);
+			color: var(--rc-color-button-primary);
 		}
 	}
 

diff --git a/packages/rocketchat-theme/client/imports/components/popover.css b/packages/rocketchat-theme/client/imports/components/popover.css
@@ -94,10 +94,10 @@
 		align-items: center;
 
 		&--alert {
-			color: var(--color-error);
+			color: var(--rc-color-error);
 
 			& .rc-icon {
-				fill: var(--color-error);
+				fill: var(--rc-color-error);
 			}
 		}
 	}

diff --git a/packages/rocketchat-theme/client/imports/components/sidebar/sidebar.css b/packages/rocketchat-theme/client/imports/components/sidebar/sidebar.css
@@ -59,7 +59,7 @@
 		}
 
 		& a:any-link {
-			color: var(--color-gray);
+			color: var(--rc-color-primary-light);
 		}
 	}
 

diff --git a/packages/rocketchat-theme/client/imports/components/sidebar/toolbar.css b/packages/rocketchat-theme/client/imports/components/sidebar/toolbar.css
@@ -50,16 +50,16 @@
 		&__wrapper {
 			padding: 0;
 
-			color: var(--color-gray);
+			color: var(--rc-color-primary-light);
 		}
 
 		&__element {
 			color: var(--color-white);
-			border-color: #414852;
-			background-color: var(--color-darkest);
+			border-color: var(--rc-color-primary-dark);
+			background-color: var(--rc-color-primary-darkest);
 
 			&::placeholder {
-				color: var(--color-gray);
+				color: var(--rc-color-primary-light);
 			}
 
 			&:focus + .rc-input__icon--right {
@@ -93,9 +93,9 @@
 		margin-left: 0.25rem;
 		margin-right: 0.25rem;
 
-		color: var(--color-gray);
-		border-color: #414852;
-		background-color: var(--color-darkest);
+		color: var(--rc-color-primary-light);
+		border-color: var(--rc-color-primary-dark);
+		background-color: var(--rc-color-primary-darkest);
 	}
 
 	& .rc-input__icon-svg--magnifier {

diff --git a/packages/rocketchat-theme/client/imports/forms/switch.css b/packages/rocketchat-theme/client/imports/forms/switch.css
@@ -14,7 +14,7 @@
 				cursor: default;
 
 				border-color: var(--button-disabled-background);
-				background-color: var(--color-gray-lightest);
+				background-color: var(--rc-color-primary-lightest);
 			}
 
 			& ~ .rc-switch__text {
@@ -25,7 +25,7 @@
 		&:checked {
 			& + .rc-switch__button {
 				border-color: #26d198;
-				background-color: var(--color-success);
+				background-color: var(--rc-color-success);
 
 				& .rc-switch__button-inside {
 					transform: translate3d(1px, 1px, 0);
@@ -45,9 +45,9 @@
 		transition: all 0.2s cubic-bezier(0.65, 0.05, 0.36, 1);
 
 		border-width: 1px;
-		border-color: var(--color-error-light);
+		border-color: var(--rc-color-error-light);
 		border-radius: 13px;
-		background-color: var(--color-error);
+		background-color: var(--rc-color-error);
 	}
 
 	&__button-inside {

diff --git a/packages/rocketchat-theme/client/imports/forms/tags.css b/packages/rocketchat-theme/client/imports/forms/tags.css
@@ -48,7 +48,7 @@
 		font-size: 0.875rem;
 
 		&::placeholder {
-			color: var(--color-gray-medium);
+			color: var(--rc-color-primary-light-medium);
 		}
 	}
 }
diff --git a/packages/rocketchat-theme/client/imports/general/base.css b/packages/rocketchat-theme/client/imports/general/base.css
@@ -88,11 +88,11 @@ button {
 	}
 
 	& .tab-button-icon {
-		color: var(--color-dark-medium);
+		color: var(--rc-color-primary-dark);
 
 		font-size: 1.125rem;
 
-		fill: var(--color-dark-medium);
+		fill: var(--rc-color-primary-dark);
 
 		&--star {
 			fill: none;

diff --git a/packages/rocketchat-theme/client/imports/general/base_old.css b/packages/rocketchat-theme/client/imports/general/base_old.css
@@ -4604,7 +4604,7 @@ body:not(.is-cordova) {
 
 .full-page,
 .page-loading {
-	background-color: var(--color-primary);
+	background-color: var(--rc-color-primary);
 }
 
 .rc-old.full-page {