chore(colors): revert neutral color assignments (#4759)

* chore(colors): revert neutral color assignments

* chore(colors): update test snapshots

Author: kflournoy-sf

RELEASENOTES.general.md

@@ -16,8 +16,7 @@
   - Timepicker
 
 - Added SLDS scope customizer tool: `npm run slds:customizer`
-- Added new standard color palette for neutral colors (black/white/grays) 
-and updated multiple neutral colors to match new Salesforce color system
+- Added new standard color palette for neutral colors (black/white/grays)
 
 ## 2.15.8 - May 27, 2021
 

__tests__/__snapshots__/tokens.spec.js.snap

@@ -78,6 +78,17 @@ Array [
   "PALETTE_INDIGO_10",
   "PALETTE_INDIGO_65",
   "PALETTE_INDIGO_15",
+  "PALETTE_NEUTRAL_90",
+  "PALETTE_NEUTRAL_80",
+  "PALETTE_NEUTRAL_70",
+  "PALETTE_NEUTRAL_100",
+  "PALETTE_NEUTRAL_60",
+  "PALETTE_NEUTRAL_50",
+  "PALETTE_NEUTRAL_40",
+  "PALETTE_NEUTRAL_95",
+  "PALETTE_NEUTRAL_30",
+  "PALETTE_NEUTRAL_20",
+  "PALETTE_NEUTRAL_10",
   "PALETTE_ORANGE_90",
   "PALETTE_ORANGE_80",
   "PALETTE_ORANGE_70",

design-tokens/extensions/ui-analytics/base.yml

@@ -286,7 +286,7 @@ props:
     - animation-duration
     comment: ''
   COLOR_WHITE:
-    value: '{!PALETTE_NEUTRAL_100}'
+    value: '{!WHITE}'
     type: color
     category: background-color
     cssProperties:

design-tokens/extensions/ui-force/background-color.yml

@@ -13,72 +13,72 @@ imports:
 - ../../aliases/color-palettes.yml
 props:
   COLOR_BACKGROUND_SPINNER_DOT:
-    value: '{!PALETTE_NEUTRAL_60}'
+    value: '{!PALETTE_COOL_GRAY_7}'
     comment: Color of the spinner dot.
 
   COLOR_BACKGROUND_NOTIFICATION_BADGE:
     value: '{!PALETTE_RED_50}'
     comment: Notifications badge background color.
     access: global
   COLOR_BACKGROUND_NOTIFICATION_NEW:
-    value: '{!PALETTE_NEUTRAL_95}'
+    value: '{!PALETTE_COOL_GRAY_2}'
     comment: Background color for a new notification list item.
     access: global
   COLOR_BACKGROUND_REMINDER:
-    value: '{!PALETTE_NEUTRAL_95}'
+    value: '{!PALETTE_GRAY_2}'
     comment: Background color for reminder notification
     release: 2.5.0
   COLOR_BACKGROUND_REMINDER_HOVER:
-    value: '{!PALETTE_NEUTRAL_100}'
+    value: '{!WHITE}'
     comment: Background color for reminder notification on hover
   COLOR_BACKGROUND_POST:
-    value: '{!PALETTE_NEUTRAL_95}'
+    value: '{!PALETTE_COOL_GRAY_2}'
     comment: Background color of comment posts in the feed.
 
   COLOR_BACKGROUND_BACKDROP_TINT:
-    value: '{!PALETTE_NEUTRAL_95}'
+    value: '{!PALETTE_COOL_GRAY_2}'
     comment: The color of the mask overlay that provides user feedback on interaction.
 
   COLOR_BACKGROUND_SCROLLBAR:
-    value: '{!PALETTE_NEUTRAL_80}'
+    value: '{!PALETTE_COOL_GRAY_4}'
     comment: The background color of an internal scrollbar.
     access: global
   COLOR_BACKGROUND_SCROLLBAR_TRACK:
-    value: '{!PALETTE_NEUTRAL_60}'
+    value: '{!PALETTE_COOL_GRAY_6}'
     comment: The background color of an internal scrollbar track.
     access: global
   COLOR_BACKGROUND_TOGGLE:
-    value: '{!PALETTE_NEUTRAL_60}'
+    value: '{!PALETTE_COOL_GRAY_7}'
     comment: Toggle background color.
   COLOR_BACKGROUND_TOGGLE_DISABLED:
-    value: '{!PALETTE_NEUTRAL_60}'
+    value: '{!PALETTE_COOL_GRAY_7}'
     comment: Disabled toggle background color.
   COLOR_BACKGROUND_TOGGLE_HOVER:
-    value: '{!PALETTE_NEUTRAL_60}'
+    value: '{!PALETTE_COOL_GRAY_8}'
     comment: Hovered toggle background color.
 
   COLOR_BACKGROUND_INPUT:
-    value: '{!PALETTE_NEUTRAL_100}'
+    value: '{!WHITE}'
     comment: Default input field
     access: global
   COLOR_BACKGROUND_INPUT_ACTIVE:
-    value: '{!PALETTE_NEUTRAL_100}'
+    value: '{!WHITE}'
     comment: Selected input field (when user has clicked or tabbed into field)
     access: global
   COLOR_BACKGROUND_INPUT_CHECKBOX_DISABLED:
-    value: '{!PALETTE_NEUTRAL_70}'
+    value: '{!PALETTE_COOL_GRAY_5}'
     comment: Disabled checkboxes
     access: global
   COLOR_BACKGROUND_INPUT_DISABLED:
-    value: '{!PALETTE_NEUTRAL_80}'
+    value: '{!PALETTE_COOL_GRAY_4}'
     comment: Disabled input
     access: global
   COLOR_BACKGROUND_INPUT_ERROR:
     value: '{!PALETTE_PINK_90}'
     comment: Background color for input field that has encountered an error.
     access: global
   COLOR_BACKGROUND_PILL:
-    value: '{!PALETTE_NEUTRAL_100}'
+    value: '{!WHITE}'
     comment: Background color for pills.
     access: global
   COLOR_BACKGROUND_IMAGE_OVERLAY:
@@ -95,7 +95,7 @@ props:
     value: '{!PALETTE_GREEN_50}'
     comment: Active background color for success buttons
   COLOR_BACKGROUND_TOAST:
-    value: '{!PALETTE_NEUTRAL_50}'
+    value: '{!PALETTE_COOL_GRAY_9}'
     comment: Background color for toast messaging.
     access: global
   COLOR_BACKGROUND_TOAST_SUCCESS:
@@ -107,7 +107,7 @@ props:
     comment: Background color for error toast messaging.
     access: global
   FILL_HEADER_BUTTON:
-    value: '{!PALETTE_NEUTRAL_60}'
+    value: '{!PALETTE_GRAY_7}'
     comment: 'Header button icon color'
     cssProperties:
     - fill

design-tokens/extensions/ui-force/border-color.yml

@@ -16,7 +16,7 @@ props:
     comment: Border color for a selected tab in a tab group.
     access: global
   COLOR_BORDER_TAB_ACTIVE:
-    value: '{!PALETTE_NEUTRAL_100}'
+    value: '{!WHITE}'
     comment: Border color for an active tab.
 
   COLOR_BORDER_ICON_INVERSE_HINT:
@@ -31,29 +31,29 @@ props:
     comment: Border color for brandable primary button - disabled state
     access: global
   COLOR_BORDER_BUTTON_DEFAULT:
-    value: '{!PALETTE_NEUTRAL_70}'
+    value: '{!PALETTE_COOL_GRAY_5}'
     comment: Border color for default secondary button
     access: global
   COLOR_BORDER_BUTTON_INVERSE_DISABLED:
     value: '{!WHITE_TRANSPARENT_15}'
     comment: Border color for disabled inverse button.
     access: global
   COLOR_BORDER_INPUT:
-    value: '{!PALETTE_NEUTRAL_70}'
+    value: '{!PALETTE_COOL_GRAY_5}'
     comment: Border color on form elements.
     access: global
   COLOR_BORDER_INPUT_ACTIVE:
     value: '{!PALETTE_BLUE_60}'
     comment: Border color on active form elements.
     access: global
   COLOR_BORDER_INPUT_DISABLED:
-    value: '{!PALETTE_NEUTRAL_60}'
+    value: '{!PALETTE_COOL_GRAY_6}'
     comment: Border color on disabled form elements.
     access: global
   COLOR_BORDER_TOGGLE_CHECKED:
-    value: '{!PALETTE_NEUTRAL_100}'
+    value: '{!WHITE}'
     comment: These borders create the faux checkmark when the checkbox toggle is in the checked state.
 
   COLOR_BORDER_REMINDER:
-    value: '{!PALETTE_NEUTRAL_80}'
+    value: '{!PALETTE_GRAY_4}'
     comment: Border color on notification reminders.

design-tokens/extensions/ui-force/box-shadow.yml

@@ -19,7 +19,7 @@ props:
     comment: Custom glow for focus states on UI elements with explicit containers.
     access: global
   SHADOW_BUTTON_FOCUS_INVERSE:
-    value: '{!OFFSET_NONE} {!OFFSET_NONE} {!OFFSET_SMALL}px {!PALETTE_NEUTRAL_80}'
+    value: '{!OFFSET_NONE} {!OFFSET_NONE} {!OFFSET_SMALL}px {!PALETTE_COOL_GRAY_4}'
     comment: Custom glow for focus states on UI button elements with explicit containers on dark or vibrantly colored backgrounds.
     access: global
   SHADOW_INLINE_EDIT:

design-tokens/extensions/ui-force/deprecated/background-color.yml

@@ -14,15 +14,15 @@ imports:
 - ../../../aliases/color-palettes.yml
 props:
   COLOR_BACKGROUND_PRIMARY:
-    value: '{!PALETTE_NEUTRAL_100}'
+    value: '{!PALETTE_COOL_GRAY_1}'
   COLOR_BACKGROUND_SECONDARY:
-    value: '{!PALETTE_NEUTRAL_95}'
+    value: '{!PALETTE_COOL_GRAY_2}'
   COLOR_FOREGROUND_PRIMARY:
-    value: '{!PALETTE_NEUTRAL_100}'
+    value: '{!PALETTE_COOL_GRAY_1}'
   COLOR_CONTRAST_PRIMARY:
-    value: '{!PALETTE_NEUTRAL_95}'
+    value: '{!PALETTE_COOL_GRAY_2}'
   COLOR_CONTRAST_SECONDARY:
-    value: '{!PALETTE_NEUTRAL_100}'
+    value: '{!PALETTE_COOL_GRAY_1}'
   COLOR_BACKGROUND_BRAND_PRIMARY:
     value: '{!PALETTE_BLUE_50}'
   COLOR_BACKGROUND_BRAND_PRIMARY_HOVER:
@@ -32,13 +32,13 @@ props:
   COLOR_BACKGROUND_BRAND_PRIMARY_ACTIVE:
     value: '{!PALETTE_BLUE_20}'
   PAGE_COLOR_BACKGROUND_PRIMARY:
-    value: '{!PALETTE_NEUTRAL_100}'
+    value: '{!PALETTE_COOL_GRAY_1}'
     comment: 'Winter 18 token, this has been deprecated. Please use BRAND_BACKGROUND_PRIMARY instead.'
   COLOR_BACKGROUND_ALT_2:
-    value: '{!PALETTE_NEUTRAL_90}'
+    value: '{!PALETTE_COOL_GRAY_3}'
     comment: Used when further differentiation is needed because colorBackground and colorBackgroundAlt are both being used in close proximity.
   COLOR_BACKGROUND_BROWSER:
-    value: '{!PALETTE_NEUTRAL_50}'
+    value: '{!PALETTE_COOL_GRAY_9}'
     comment: 'Secondary top bar background color (child browser, file preview, etc.)'
     access: global
   COLOR_BACKGROUND_CHROME_MOBILE:
@@ -65,17 +65,17 @@ props:
     value: '{!PALETTE_BLUE_10}'
     comment: Stage left org switcher dropdown arrow background color.
   COLOR_BACKGROUND_PAYLOAD:
-    value: '{!PALETTE_NEUTRAL_95}'
+    value: '{!PALETTE_COOL_GRAY_2}'
     comment: Background color for payloads in the feed.
     access: global
   COLOR_BACKGROUND_UTILITY_BAR_HOVER:
-    value: '{!PALETTE_NEUTRAL_80}'
+    value: '{!PALETTE_COOL_GRAY_4}'
     comment: Hover color for utility bar item.
   COLOR_BACKGROUND_UTILITY_BAR_ACTIVE:
     value: '{!PALETTE_BLUE_60}'
     comment: Active color for utility bar item.
   COLOR_BACKGROUND_SHADE_DARK:
-    value: '{!PALETTE_NEUTRAL_70}'
+    value: '{!PALETTE_COOL_GRAY_5}'
     specificity: builders
     comment: Used as gray background in conjunction with Shade when more contrast is desired.
   COLOR_BACKGROUND_TEMP_MODAL:
@@ -108,7 +108,7 @@ props:
     value: '{!PALETTE_RED_70}'
     comment: Alternative color for UI elements related to errors.
   COLOR_BACKGROUND_ACTIONBAR_ICON_UTILITY:
-    value: '{!PALETTE_NEUTRAL_50}'
+    value: '{!PALETTE_COOL_GRAY_9}'
     comment: Background for utility icons that live in the action bar on mobile.
   COLOR_BACKGROUND_INDICATOR_DOT:
     value: '{!PALETTE_BLUE_20}'
@@ -125,7 +125,7 @@ props:
     value: '{!WHITE}'
     comment: Background color for notification list item.
   COLOR_BACKGROUND_SHADE:
-    value: '{!PALETTE_NEUTRAL_80}'
+    value: '{!PALETTE_COOL_GRAY_4}'
     specificity: builders
     comment: Used as gray background when more contrast is desired.
     access: global

design-tokens/extensions/ui-force/deprecated/border-color.yml

@@ -13,7 +13,7 @@ imports:
 - ../../../aliases/color-palettes.yml
 props:
   COLOR_BORDER_PRIMARY:
-    value: '{!PALETTE_NEUTRAL_70}'
+    value: '{!PALETTE_COOL_GRAY_5}'
   COLOR_BORDER_BRAND_PRIMARY:
     value: '{!PALETTE_BLUE_60}'
   COLOR_BORDER_BRAND_PRIMARY_HOVER:
@@ -27,12 +27,12 @@ props:
     specificity: builders
     comment: Used to delineate the boundary of a specific region. Specific to builders.
   COLOR_STROKE_DISABLED:
-    value: '{!PALETTE_NEUTRAL_80}'
+    value: '{!PALETTE_COOL_GRAY_4}'
     cssProperties:
     - stroke
     comment: Disabled stroke color.
   COLOR_STROKE_HEADER_BUTTON:
-    value: '{!PALETTE_NEUTRAL_60}'
+    value: '{!PALETTE_COOL_GRAY_7}'
     cssProperties:
     - stroke
     comment: Stroke color for our global header buttons.
@@ -64,9 +64,9 @@ props:
     comment: Border color for brandable primary button
     access: global
   COLOR_BORDER_BUTTON_FOCUS_INVERSE:
-    value: '{!PALETTE_NEUTRAL_80}'
+    value: '{!PALETTE_COOL_GRAY_4}'
   COLOR_BORDER_LINK_FOCUS_INVERSE:
-    value: '{!PALETTE_NEUTRAL_80}'
+    value: '{!PALETTE_COOL_GRAY_4}'
   COLOR_BORDER_INPUT_CHECKBOX_SELECTED_CHECKMARK:
     value: '{!WHITE}'
     comment: The borders to create the checkmark

design-tokens/extensions/ui-force/deprecated/box-shadow.yml

@@ -105,8 +105,8 @@ props:
     value: '{!OFFSET_NONE} -{!OFFSET_XX_LARGE}px {!OFFSET_XX_LARGE}px {!OFFSET_NONE} {!BLACK_TRANSPARENT_16}'
     comment: Deprecated
   SHADOW_ACTION_OVERFLOW_FOOTER:
-    value: '{!OFFSET_NONE} -{!OFFSET_X_SMALL}px {!OFFSET_MEDIUM}px {!PALETTE_NEUTRAL_95}'
+    value: '{!OFFSET_NONE} -{!OFFSET_X_SMALL}px {!OFFSET_MEDIUM}px {!PALETTE_COOL_GRAY_2}'
     comment: Shadow above overflow menu close bar.
   SHADOW_LINK_FOCUS_INVERSE:
-    value: '{!OFFSET_NONE} {!OFFSET_NONE} {!OFFSET_SMALL}px {!PALETTE_NEUTRAL_80}'
+    value: '{!OFFSET_NONE} {!OFFSET_NONE} {!OFFSET_SMALL}px {!PALETTE_COOL_GRAY_4}'
     comment: Custom glow for focus states on UI link elements with explicit containers on dark or vibrantly colored backgrounds.

design-tokens/extensions/ui-force/deprecated/text-color.yml

@@ -16,25 +16,25 @@ props:
     value: '{!PALETTE_BLUE_20}'
     comment: Primary body text color
   COLOR_TEXT_SECONDARY:
-    value: '{!PALETTE_NEUTRAL_50}'
+    value: '{!PALETTE_COOL_GRAY_9}'
     comment: Secondary body text color
   COLOR_TEXT_TERTIARY:
-    value: '{!PALETTE_NEUTRAL_50}'
+    value: '{!PALETTE_COOL_GRAY_9}'
     comment: Tertiary body text color
   COLOR_TEXT_MODAL:
     value: '{!WHITE}'
     comment: Modal header title
     access: global
   COLOR_TEXT_MODAL_BUTTON:
-    value: '{!PALETTE_NEUTRAL_50}'
+    value: '{!PALETTE_COOL_GRAY_9}'
     comment: Modal header button text color
     access: global
   COLOR_TEXT_STAGE_LEFT:
-    value: '{!PALETTE_NEUTRAL_80}'
+    value: '{!PALETTE_COOL_GRAY_4}'
     comment: Text in stage left navigation.
     access: global
   COLOR_TEXT_TOAST:
-    value: '{!PALETTE_NEUTRAL_80}'
+    value: '{!PALETTE_COOL_GRAY_4}'
     comment: Color for text on toast messages.
     access: global
   COLOR_TEXT_PILL:
@@ -62,7 +62,7 @@ props:
     comment: Active state on a standalone link on a dark background.
     access: global
   COLOR_TEXT_INVERSE_HOVER:
-    value: '{!PALETTE_NEUTRAL_60}'
+    value: '{!PALETTE_COOL_GRAY_7}'
     comment: Hover state on a standalone link on a dark background.
     access: global
   COLOR_TEXT_TAB_LABEL_SELECTED:
@@ -82,18 +82,18 @@ props:
     comment: Color for text in active state in a tab group.
     access: global
   COLOR_TEXT_TAB_LABEL_DISABLED:
-    value: '{!PALETTE_NEUTRAL_80}'
+    value: '{!PALETTE_COOL_GRAY_4}'
     comment: Color for disabled text in a tab group.
     access: global
   COLOR_TEXT_ICON_BRAND:
     value: '{!PALETTE_BLUE_50}'
     comment: Color for non-interactive icons that represent a selected item in a list
     access: global
   COLOR_TEXT_ICON_UTILITY:
-    value: '{!PALETTE_NEUTRAL_60}'
+    value: '{!PALETTE_COOL_GRAY_7}'
     comment: Color for interactive utility icons
   COLOR_TEXT_TOGGLE_DISABLED:
-    value: '{!PALETTE_NEUTRAL_70}'
+    value: '{!PALETTE_COOL_GRAY_5}'
     comment: Color for disabled toggles
   COLOR_TEXT_ICON_INVERSE_HINT:
     value: '{!WHITE_TRANSPARENT_50}'
@@ -102,5 +102,5 @@ props:
     value: '{!WHITE_TRANSPARENT_75}'
     comment: Hovered icon color for a button that has a parent element that has a hover state
   COLOR_TEXT_ICON_DEFAULT_HINT_BORDERLESS:
-    value: '{!PALETTE_NEUTRAL_80}'
+    value: '{!PALETTE_COOL_GRAY_4}'
     comment: Icon color for a button that has a parent element that has a hover state. This is the default text/icon color for that button before its parent has been hovered over.