From c6839f776a447568040c58a83c220406c34efc3f Mon Sep 17 00:00:00 2001
From: Mo <mo@standardnotes.com>
Date: Mon, 23 May 2022 18:09:30 -0500
Subject: [PATCH] feat: handle removed grey-x colors from stylekit (#1046)

---
 .../Components/AccountMenu/AdvancedOptions.tsx       |  2 +-
 .../Components/AccountMenu/ConfirmPassword.tsx       |  6 +++---
 .../Components/AccountMenu/GeneralAccountMenu.tsx    |  4 ++--
 .../javascripts/Components/AccountMenu/SignIn.tsx    |  6 +++---
 .../AttachedFilesPopover/AttachedFilesPopover.tsx    |  2 +-
 .../AttachedFilesPopover/PopoverFileItem.tsx         |  2 +-
 app/assets/javascripts/Components/Button/Button.tsx  |  2 +-
 .../Components/ChallengeModal/ChallengePrompt.tsx    |  4 ++--
 .../Components/ContentListView/ListItemTags.tsx      |  4 ++--
 .../javascripts/Components/Dropdown/Dropdown.tsx     |  2 +-
 .../Components/Files/FilePreviewModal.tsx            |  4 ++--
 .../javascripts/Components/Input/DecoratedInput.tsx  |  2 +-
 .../Components/Input/DecoratedPasswordInput.tsx      |  2 +-
 .../Components/Input/FloatingLabelInput.tsx          |  4 ++--
 .../javascripts/Components/NoteTags/NoteTag.tsx      |  2 +-
 .../Components/NotesOptions/ListedActionsOption.tsx  |  6 +++---
 .../PremiumFeaturesModal/PremiumFeaturesModal.tsx    |  2 +-
 .../Components/PurchaseFlow/Panes/CreateAccount.tsx  |  4 ++--
 .../Components/PurchaseFlow/Panes/SignIn.tsx         |  6 +++---
 .../Components/PurchaseFlow/PurchaseFlowView.tsx     |  6 +++---
 .../RevisionHistoryModal/LegacyHistoryList.tsx       |  2 +-
 .../RevisionHistoryModal/RemoteHistoryList.tsx       |  4 ++--
 .../RevisionHistoryModal/RevisionContentLocked.tsx   |  2 +-
 .../RevisionHistoryModalWrapper.tsx                  |  2 +-
 .../RevisionHistoryModal/SelectedRevisionContent.tsx |  2 +-
 .../RevisionHistoryModal/SessionHistoryList.tsx      |  4 ++--
 .../TagAutocomplete/AutocompleteTagResult.tsx        |  2 +-
 .../javascripts/Components/Tags/TagsSectionTitle.tsx |  2 +-
 app/assets/stylesheets/_navigation.scss              |  5 -----
 app/assets/stylesheets/_reach-sub.scss               |  2 +-
 app/assets/stylesheets/_sn.scss                      |  2 +-
 app/assets/stylesheets/_theme.scss                   |  6 +++---
 app/assets/stylesheets/utils/_color.scss             | 12 ++++++------
 package.json                                         |  2 +-
 yarn.lock                                            |  8 ++++----
 35 files changed, 62 insertions(+), 67 deletions(-)

diff --git a/app/assets/javascripts/Components/AccountMenu/AdvancedOptions.tsx b/app/assets/javascripts/Components/AccountMenu/AdvancedOptions.tsx
index 03ae5f2ea..97b900d2a 100644
--- a/app/assets/javascripts/Components/AccountMenu/AdvancedOptions.tsx
+++ b/app/assets/javascripts/Components/AccountMenu/AdvancedOptions.tsx
@@ -98,7 +98,7 @@ export const AdvancedOptions: FunctionComponent<Props> = observer(
         >
           <div className="flex items-center">
             Advanced options
-            <Icon type="chevron-down" className="color-grey-1 ml-1" />
+            <Icon type="chevron-down" className="color-passive-1 ml-1" />
           </div>
         </button>
         {showAdvanced ? (
diff --git a/app/assets/javascripts/Components/AccountMenu/ConfirmPassword.tsx b/app/assets/javascripts/Components/AccountMenu/ConfirmPassword.tsx
index 6dcbf0f88..e1dbc3cfb 100644
--- a/app/assets/javascripts/Components/AccountMenu/ConfirmPassword.tsx
+++ b/app/assets/javascripts/Components/AccountMenu/ConfirmPassword.tsx
@@ -113,8 +113,8 @@ export const ConfirmPassword: FunctionComponent<Props> = observer(
         </div>
         <div className="px-3 mb-3 text-sm">
           Because your notes are encrypted using your password,{' '}
-          <span className="color-dark-red">Standard Notes does not have a password reset option</span>. If you forget
-          your password, you will permanently lose access to your data.
+          <span className="color-danger">Standard Notes does not have a password reset option</span>. If you forget your
+          password, you will permanently lose access to your data.
         </div>
         <form onSubmit={handleConfirmFormSubmit} className="px-3 mb-1">
           <DecoratedPasswordInput
@@ -127,7 +127,7 @@ export const ConfirmPassword: FunctionComponent<Props> = observer(
             ref={passwordInputRef}
             value={confirmPassword}
           />
-          {error ? <div className="color-dark-red my-2">{error}</div> : null}
+          {error ? <div className="color-danger my-2">{error}</div> : null}
           <Button
             className="btn-w-full mt-1 mb-3"
             label={isRegistering ? 'Creating account...' : 'Create account & sign in'}
diff --git a/app/assets/javascripts/Components/AccountMenu/GeneralAccountMenu.tsx b/app/assets/javascripts/Components/AccountMenu/GeneralAccountMenu.tsx
index 2e6ea136f..fcbfe83d9 100644
--- a/app/assets/javascripts/Components/AccountMenu/GeneralAccountMenu.tsx
+++ b/app/assets/javascripts/Components/AccountMenu/GeneralAccountMenu.tsx
@@ -110,7 +110,7 @@ export const GeneralAccountMenu: FunctionComponent<Props> = observer(
                   </div>
                 </div>
               )}
-              <div className="flex cursor-pointer color-grey-1" onClick={doSynchronization}>
+              <div className="flex cursor-pointer color-passive-1" onClick={doSynchronization}>
                 <Icon type="sync" />
               </div>
             </div>
@@ -122,7 +122,7 @@ export const GeneralAccountMenu: FunctionComponent<Props> = observer(
                 You’re offline. Sign in to sync your notes and preferences across all your devices and enable end-to-end
                 encryption.
               </div>
-              <div className="flex items-center color-grey-1">
+              <div className="flex items-center color-passive-1">
                 <Icon type="cloud-off" className="mr-2" />
                 <span className="font-semibold">Offline</span>
               </div>
diff --git a/app/assets/javascripts/Components/AccountMenu/SignIn.tsx b/app/assets/javascripts/Components/AccountMenu/SignIn.tsx
index 0b85a4b3a..b1ad58828 100644
--- a/app/assets/javascripts/Components/AccountMenu/SignIn.tsx
+++ b/app/assets/javascripts/Components/AccountMenu/SignIn.tsx
@@ -153,7 +153,7 @@ export const SignInPane: FunctionComponent<Props> = observer(({ application, app
       </div>
       <div className="px-3 mb-1">
         <DecoratedInput
-          className={`mb-2 ${error ? 'border-dark-red' : null}`}
+          className={`mb-2 ${error ? 'border-danger' : null}`}
           left={[<Icon type="email" className="color-neutral" />]}
           type="email"
           placeholder="Email"
@@ -165,7 +165,7 @@ export const SignInPane: FunctionComponent<Props> = observer(({ application, app
           ref={emailInputRef}
         />
         <DecoratedPasswordInput
-          className={`mb-2 ${error ? 'border-dark-red' : null}`}
+          className={`mb-2 ${error ? 'border-danger' : null}`}
           disabled={isSigningIn}
           left={[<Icon type="password" className="color-neutral" />]}
           onChange={handlePasswordChange}
@@ -175,7 +175,7 @@ export const SignInPane: FunctionComponent<Props> = observer(({ application, app
           ref={passwordInputRef}
           value={password}
         />
-        {error ? <div className="color-dark-red my-2">{error}</div> : null}
+        {error ? <div className="color-danger my-2">{error}</div> : null}
         <Button
           className="btn-w-full mt-1 mb-3"
           label={isSigningIn ? 'Signing in...' : 'Sign in'}
diff --git a/app/assets/javascripts/Components/AttachedFilesPopover/AttachedFilesPopover.tsx b/app/assets/javascripts/Components/AttachedFilesPopover/AttachedFilesPopover.tsx
index 6bf91dce8..947e29f17 100644
--- a/app/assets/javascripts/Components/AttachedFilesPopover/AttachedFilesPopover.tsx
+++ b/app/assets/javascripts/Components/AttachedFilesPopover/AttachedFilesPopover.tsx
@@ -153,7 +153,7 @@ export const AttachedFilesPopover: FunctionComponent<Props> = observer(
               <Button variant="normal" onClick={handleAttachFilesClick} onBlur={closeOnBlur}>
                 {currentTab === PopoverTabs.AttachedFiles ? 'Attach' : 'Upload'} files
               </Button>
-              <div className="text-xs color-grey-0 mt-3">Or drop your files here</div>
+              <div className="text-xs color-passive-0 mt-3">Or drop your files here</div>
             </div>
           )}
         </div>
diff --git a/app/assets/javascripts/Components/AttachedFilesPopover/PopoverFileItem.tsx b/app/assets/javascripts/Components/AttachedFilesPopover/PopoverFileItem.tsx
index df0881ebe..5985f4bf7 100644
--- a/app/assets/javascripts/Components/AttachedFilesPopover/PopoverFileItem.tsx
+++ b/app/assets/javascripts/Components/AttachedFilesPopover/PopoverFileItem.tsx
@@ -99,7 +99,7 @@ export const PopoverFileItem: FunctionComponent<PopoverFileItemProps> = ({
               )}
             </div>
           )}
-          <div className="text-xs color-grey-0">
+          <div className="text-xs color-passive-0">
             {file.created_at.toLocaleString()} · {formatSizeToReadableString(file.decryptedSize)}
           </div>
         </div>
diff --git a/app/assets/javascripts/Components/Button/Button.tsx b/app/assets/javascripts/Components/Button/Button.tsx
index eca0e336e..f6e4f6c1f 100644
--- a/app/assets/javascripts/Components/Button/Button.tsx
+++ b/app/assets/javascripts/Components/Button/Button.tsx
@@ -22,7 +22,7 @@ const getClassName = (variant: ButtonVariant, danger: boolean, disabled: boolean
   }
 
   if (disabled) {
-    colors = variant === 'normal' ? 'bg-default color-grey-2' : 'bg-grey-2 color-info-contrast'
+    colors = variant === 'normal' ? 'bg-default color-passive-2' : 'bg-passive-2 color-info-contrast'
     focusHoverStates =
       variant === 'normal'
         ? 'focus:bg-default focus:outline-none hover:bg-default'
diff --git a/app/assets/javascripts/Components/ChallengeModal/ChallengePrompt.tsx b/app/assets/javascripts/Components/ChallengeModal/ChallengePrompt.tsx
index 4f2159d1a..8b1d34212 100644
--- a/app/assets/javascripts/Components/ChallengeModal/ChallengePrompt.tsx
+++ b/app/assets/javascripts/Components/ChallengeModal/ChallengePrompt.tsx
@@ -33,13 +33,13 @@ export const ChallengeModalPrompt: FunctionComponent<Props> = ({ prompt, values,
       {prompt.validation === ChallengeValidation.ProtectionSessionDuration ? (
         <div className="min-w-76">
           <div className="text-sm font-medium mb-2">Allow protected access for</div>
-          <div className="flex items-center justify-between bg-grey-4 rounded p-1">
+          <div className="flex items-center justify-between bg-passive-4 rounded p-1">
             {ProtectionSessionDurations.map((option) => {
               const selected = option.valueInSeconds === values[prompt.id].value
               return (
                 <label
                   className={`cursor-pointer px-2 py-1.5 rounded ${
-                    selected ? 'bg-default color-foreground font-semibold' : 'color-grey-0 hover:bg-grey-3'
+                    selected ? 'bg-default color-foreground font-semibold' : 'color-passive-0 hover:bg-passive-3'
                   }`}
                 >
                   <input
diff --git a/app/assets/javascripts/Components/ContentListView/ListItemTags.tsx b/app/assets/javascripts/Components/ContentListView/ListItemTags.tsx
index ec29935d2..4d9258c85 100644
--- a/app/assets/javascripts/Components/ContentListView/ListItemTags.tsx
+++ b/app/assets/javascripts/Components/ContentListView/ListItemTags.tsx
@@ -12,8 +12,8 @@ export const ListItemTags: FunctionComponent<{
   return (
     <div className="flex flex-wrap mt-1.5 text-xs gap-2">
       {tags.map((tag) => (
-        <span className="inline-flex items-center py-1 px-1.5 bg-grey-4-opacity-variant color-foreground rounded-0.5">
-          <Icon type="hashtag" className="sn-icon--small color-grey-1 mr-1" />
+        <span className="inline-flex items-center py-1 px-1.5 bg-passive-4-opacity-variant color-foreground rounded-0.5">
+          <Icon type="hashtag" className="sn-icon--small color-passive-1 mr-1" />
           <span>{tag}</span>
         </span>
       ))}
diff --git a/app/assets/javascripts/Components/Dropdown/Dropdown.tsx b/app/assets/javascripts/Components/Dropdown/Dropdown.tsx
index 580a4bc0d..abf75f76d 100644
--- a/app/assets/javascripts/Components/Dropdown/Dropdown.tsx
+++ b/app/assets/javascripts/Components/Dropdown/Dropdown.tsx
@@ -41,7 +41,7 @@ const CustomDropdownButton: FunctionComponent<ListboxButtonProps> = ({
       <div className="dropdown-selected-label">{label}</div>
     </div>
     <ListboxArrow className={`sn-dropdown-arrow ${isExpanded ? 'sn-dropdown-arrow-flipped' : ''}`}>
-      <Icon type="menu-arrow-down" className="sn-icon--small color-grey-1" />
+      <Icon type="menu-arrow-down" className="sn-icon--small color-passive-1" />
     </ListboxArrow>
   </>
 )
diff --git a/app/assets/javascripts/Components/Files/FilePreviewModal.tsx b/app/assets/javascripts/Components/Files/FilePreviewModal.tsx
index 10b621b46..b9795bd6a 100644
--- a/app/assets/javascripts/Components/Files/FilePreviewModal.tsx
+++ b/app/assets/javascripts/Components/Files/FilePreviewModal.tsx
@@ -208,7 +208,7 @@ const FilePreviewModal: FunctionComponent<Props> = observer(({ application, appS
                 <div className="font-bold text-base mb-2">This file can't be previewed.</div>
                 {isFilePreviewable ? (
                   <>
-                    <div className="text-sm text-center color-grey-0 mb-4 max-w-35ch">
+                    <div className="text-sm text-center color-passive-0 mb-4 max-w-35ch">
                       There was an error loading the file. Try again, or download the file and open it using another
                       application.
                     </div>
@@ -234,7 +234,7 @@ const FilePreviewModal: FunctionComponent<Props> = observer(({ application, appS
                   </>
                 ) : (
                   <>
-                    <div className="text-sm text-center color-grey-0 mb-4 max-w-35ch">
+                    <div className="text-sm text-center color-passive-0 mb-4 max-w-35ch">
                       To view this file, download it and open it using another application.
                     </div>
                     <Button
diff --git a/app/assets/javascripts/Components/Input/DecoratedInput.tsx b/app/assets/javascripts/Components/Input/DecoratedInput.tsx
index 6548c09cf..6c738d418 100644
--- a/app/assets/javascripts/Components/Input/DecoratedInput.tsx
+++ b/app/assets/javascripts/Components/Input/DecoratedInput.tsx
@@ -10,7 +10,7 @@ const getClassNames = (hasLeftDecorations: boolean, hasRightDecorations: boolean
     input: `w-full border-0 focus:shadow-none bg-transparent color-text ${
       !hasLeftDecorations && hasRightDecorations ? 'pl-2' : ''
     } ${hasRightDecorations ? 'pr-2' : ''}`,
-    disabled: 'bg-grey-5 cursor-not-allowed',
+    disabled: 'bg-passive-5 cursor-not-allowed',
   }
 }
 
diff --git a/app/assets/javascripts/Components/Input/DecoratedPasswordInput.tsx b/app/assets/javascripts/Components/Input/DecoratedPasswordInput.tsx
index 11d067e00..7c1db6294 100644
--- a/app/assets/javascripts/Components/Input/DecoratedPasswordInput.tsx
+++ b/app/assets/javascripts/Components/Input/DecoratedPasswordInput.tsx
@@ -10,7 +10,7 @@ const Toggle: FunctionComponent<{
   setIsToggled: StateUpdater<boolean>
 }> = ({ isToggled, setIsToggled }) => (
   <IconButton
-    className="w-5 h-5 p-0 justify-center sk-circle hover:bg-grey-4 color-neutral"
+    className="w-5 h-5 p-0 justify-center sk-circle hover:bg-passive-4 color-neutral"
     icon={isToggled ? 'eye-off' : 'eye'}
     iconClassName="sn-icon--small"
     title="Show/hide password"
diff --git a/app/assets/javascripts/Components/Input/FloatingLabelInput.tsx b/app/assets/javascripts/Components/Input/FloatingLabelInput.tsx
index 72e078b7a..d554f80ef 100644
--- a/app/assets/javascripts/Components/Input/FloatingLabelInput.tsx
+++ b/app/assets/javascripts/Components/Input/FloatingLabelInput.tsx
@@ -38,12 +38,12 @@ export const FloatingLabelInput: FunctionComponent<Props> = forwardRef(
 
     const LABEL_CLASSNAME = `hidden absolute ${!focused ? 'color-neutral' : 'color-info'} ${
       focused || value ? 'flex top-0 left-2 pt-1.5 px-1' : ''
-    } ${isInvalid ? 'color-dark-red' : ''} ${labelClassName}`
+    } ${isInvalid ? 'color-danger' : ''} ${labelClassName}`
 
     const INPUT_CLASSNAME = `w-full h-full ${
       focused || value ? 'pt-6 pb-2' : 'py-2.5'
     } px-3 text-input border-1 border-solid border-main rounded placeholder-medium text-input focus:ring-info ${
-      isInvalid ? 'border-dark-red placeholder-dark-red' : ''
+      isInvalid ? 'border-danger placeholder-dark-red' : ''
     } ${inputClassName}`
 
     const handleFocus = () => setFocused(true)
diff --git a/app/assets/javascripts/Components/NoteTags/NoteTag.tsx b/app/assets/javascripts/Components/NoteTags/NoteTag.tsx
index 2c9d52845..93080d118 100644
--- a/app/assets/javascripts/Components/NoteTags/NoteTag.tsx
+++ b/app/assets/javascripts/Components/NoteTags/NoteTag.tsx
@@ -119,7 +119,7 @@ export const NoteTag = observer(({ appState, tag }: Props) => {
     >
       <Icon type="hashtag" className="sn-icon--small color-info mr-1" />
       <span className="whitespace-nowrap overflow-hidden overflow-ellipsis max-w-290px">
-        {prefixTitle && <span className="color-grey-1">{prefixTitle}</span>}
+        {prefixTitle && <span className="color-passive-1">{prefixTitle}</span>}
         {title}
       </span>
       {showDeleteButton && (
diff --git a/app/assets/javascripts/Components/NotesOptions/ListedActionsOption.tsx b/app/assets/javascripts/Components/NotesOptions/ListedActionsOption.tsx
index 7e31352e2..176bd9d4e 100644
--- a/app/assets/javascripts/Components/NotesOptions/ListedActionsOption.tsx
+++ b/app/assets/javascripts/Components/NotesOptions/ListedActionsOption.tsx
@@ -58,7 +58,7 @@ const ListedMenuItem: FunctionComponent<ListedMenuItemProps> = ({
       <div className="flex flex-col">
         <div className="font-semibold">{action.label}</div>
         {action.access_type && (
-          <div className="text-xs mt-0.5 color-grey-0">
+          <div className="text-xs mt-0.5 color-passive-0">
             {'Uses '}
             <strong>{action.access_type}</strong>
             {' access to this note.'}
@@ -191,7 +191,7 @@ const ListedActionsMenu: FunctionComponent<ListedActionsMenuProps> = ({ applicat
                   />
                 ))
               ) : (
-                <div className="px-3 py-2 color-grey-0 select-none">No actions available</div>
+                <div className="px-3 py-2 color-passive-0 select-none">No actions available</div>
               )}
             </Fragment>
           ))}
@@ -199,7 +199,7 @@ const ListedActionsMenu: FunctionComponent<ListedActionsMenuProps> = ({ applicat
       ) : null}
       {!isFetchingAccounts && !menuGroups.length ? (
         <div className="w-full flex items-center justify-center px-4 py-6">
-          <div className="color-grey-0 select-none">No Listed accounts found</div>
+          <div className="color-passive-0 select-none">No Listed accounts found</div>
         </div>
       ) : null}
     </>
diff --git a/app/assets/javascripts/Components/PremiumFeaturesModal/PremiumFeaturesModal.tsx b/app/assets/javascripts/Components/PremiumFeaturesModal/PremiumFeaturesModal.tsx
index 11a4b271f..82a84aa27 100644
--- a/app/assets/javascripts/Components/PremiumFeaturesModal/PremiumFeaturesModal.tsx
+++ b/app/assets/javascripts/Components/PremiumFeaturesModal/PremiumFeaturesModal.tsx
@@ -50,7 +50,7 @@ export const PremiumFeaturesModal: FunctionalComponent<Props> = ({
             </div>
             <div className="text-lg text-center font-bold mb-1">Enable Advanced Features</div>
           </AlertDialogLabel>
-          <AlertDialogDescription className="text-sm text-center color-grey-1 px-4.5 mb-2">
+          <AlertDialogDescription className="text-sm text-center color-passive-1 px-4.5 mb-2">
             In order to use <span className="font-semibold">{featureName}</span> and other advanced features, please
             purchase a subscription or upgrade your current plan.
           </AlertDialogDescription>
diff --git a/app/assets/javascripts/Components/PurchaseFlow/Panes/CreateAccount.tsx b/app/assets/javascripts/Components/PurchaseFlow/Panes/CreateAccount.tsx
index 0fa0cccd7..904675153 100644
--- a/app/assets/javascripts/Components/PurchaseFlow/Panes/CreateAccount.tsx
+++ b/app/assets/javascripts/Components/PurchaseFlow/Panes/CreateAccount.tsx
@@ -140,7 +140,7 @@ export const CreateAccount: FunctionComponent<Props> = observer(({ appState, app
               disabled={isCreatingAccount}
               isInvalid={isEmailInvalid}
             />
-            {isEmailInvalid ? <div className="color-dark-red mb-4">Please provide a valid email.</div> : null}
+            {isEmailInvalid ? <div className="color-danger mb-4">Please provide a valid email.</div> : null}
             <FloatingLabelInput
               className="min-w-90 xs:min-w-auto mb-4"
               id="purchase-create-account-password"
@@ -163,7 +163,7 @@ export const CreateAccount: FunctionComponent<Props> = observer(({ appState, app
               isInvalid={isPasswordNotMatching}
             />
             {isPasswordNotMatching ? (
-              <div className="color-dark-red mb-4">Passwords don't match. Please try again.</div>
+              <div className="color-danger mb-4">Passwords don't match. Please try again.</div>
             ) : null}
           </div>
         </form>
diff --git a/app/assets/javascripts/Components/PurchaseFlow/Panes/SignIn.tsx b/app/assets/javascripts/Components/PurchaseFlow/Panes/SignIn.tsx
index a196f2cc8..2cf8f7e93 100644
--- a/app/assets/javascripts/Components/PurchaseFlow/Panes/SignIn.tsx
+++ b/app/assets/javascripts/Components/PurchaseFlow/Panes/SignIn.tsx
@@ -125,7 +125,7 @@ export const SignIn: FunctionComponent<Props> = observer(({ appState, applicatio
               isInvalid={isEmailInvalid}
             />
             {isEmailInvalid && !otherErrorMessage ? (
-              <div className="color-dark-red mb-4">Please provide a valid email.</div>
+              <div className="color-danger mb-4">Please provide a valid email.</div>
             ) : null}
             <FloatingLabelInput
               className={`min-w-90 xs:min-w-auto ${otherErrorMessage ? 'mb-2' : 'mb-4'}`}
@@ -138,7 +138,7 @@ export const SignIn: FunctionComponent<Props> = observer(({ appState, applicatio
               disabled={isSigningIn}
               isInvalid={isPasswordInvalid}
             />
-            {otherErrorMessage ? <div className="color-dark-red mb-4">{otherErrorMessage}</div> : null}
+            {otherErrorMessage ? <div className="color-danger mb-4">{otherErrorMessage}</div> : null}
           </div>
           <Button
             className={`${isSigningIn ? 'min-w-30' : 'min-w-24'} py-2.5 mb-5`}
@@ -148,7 +148,7 @@ export const SignIn: FunctionComponent<Props> = observer(({ appState, applicatio
             disabled={isSigningIn}
           />
         </form>
-        <div className="text-sm font-medium color-grey-1">
+        <div className="text-sm font-medium color-passive-1">
           Don’t have an account yet?{' '}
           <a
             className={`color-info ${isSigningIn ? 'cursor-not-allowed' : 'cursor-pointer '}`}
diff --git a/app/assets/javascripts/Components/PurchaseFlow/PurchaseFlowView.tsx b/app/assets/javascripts/Components/PurchaseFlow/PurchaseFlowView.tsx
index 2a88abbd2..13d42adcc 100644
--- a/app/assets/javascripts/Components/PurchaseFlow/PurchaseFlowView.tsx
+++ b/app/assets/javascripts/Components/PurchaseFlow/PurchaseFlowView.tsx
@@ -29,7 +29,7 @@ export const PurchaseFlowView: FunctionComponent<PurchaseFlowViewProps> = observ
   const { currentPane } = appState.purchaseFlow
 
   return (
-    <div className="flex items-center justify-center overflow-hidden h-full w-full absolute top-left-0 z-index-purchase-flow bg-grey-super-light">
+    <div className="flex items-center justify-center overflow-hidden h-full w-full absolute top-left-0 z-index-purchase-flow bg-passive-super-light">
       <div className="relative fit-content">
         <div className="relative p-12 xs:px-8 mb-4 bg-default border-1 border-solid border-main rounded xs:rounded-0">
           <SNLogoFull className="mb-5" />
@@ -37,7 +37,7 @@ export const PurchaseFlowView: FunctionComponent<PurchaseFlowViewProps> = observ
         </div>
         <div className="flex justify-end xs:px-4">
           <a
-            className="mr-3 font-medium color-grey-1"
+            className="mr-3 font-medium color-passive-1"
             href="https://standardnotes.com/privacy"
             target="_blank"
             rel="noopener noreferrer"
@@ -45,7 +45,7 @@ export const PurchaseFlowView: FunctionComponent<PurchaseFlowViewProps> = observ
             Privacy
           </a>
           <a
-            className="font-medium color-grey-1"
+            className="font-medium color-passive-1"
             href="https://standardnotes.com/help"
             target="_blank"
             rel="noopener noreferrer"
diff --git a/app/assets/javascripts/Components/RevisionHistoryModal/LegacyHistoryList.tsx b/app/assets/javascripts/Components/RevisionHistoryModal/LegacyHistoryList.tsx
index 35aca66bc..2b9c468e5 100644
--- a/app/assets/javascripts/Components/RevisionHistoryModal/LegacyHistoryList.tsx
+++ b/app/assets/javascripts/Components/RevisionHistoryModal/LegacyHistoryList.tsx
@@ -68,7 +68,7 @@ export const LegacyHistoryList: FunctionComponent<Props> = ({
           </HistoryListItem>
         )
       })}
-      {!legacyHistory?.length && <div className="color-grey-0 select-none">No legacy history found</div>}
+      {!legacyHistory?.length && <div className="color-passive-0 select-none">No legacy history found</div>}
     </div>
   )
 }
diff --git a/app/assets/javascripts/Components/RevisionHistoryModal/RemoteHistoryList.tsx b/app/assets/javascripts/Components/RevisionHistoryModal/RemoteHistoryList.tsx
index c433bc827..c940e4793 100644
--- a/app/assets/javascripts/Components/RevisionHistoryModal/RemoteHistoryList.tsx
+++ b/app/assets/javascripts/Components/RevisionHistoryModal/RemoteHistoryList.tsx
@@ -57,7 +57,7 @@ export const RemoteHistoryList: FunctionComponent<RemoteHistoryListProps> = obse
           if (group.entries && group.entries.length) {
             return (
               <Fragment key={group.title}>
-                <div className="px-3 mt-2.5 mb-1 font-semibold color-text uppercase color-grey-0 select-none">
+                <div className="px-3 mt-2.5 mb-1 font-semibold color-text uppercase color-passive-0 select-none">
                   {group.title}
                 </div>
                 {group.entries.map((entry) => (
@@ -82,7 +82,7 @@ export const RemoteHistoryList: FunctionComponent<RemoteHistoryListProps> = obse
           }
         })}
         {!remoteHistoryLength && !isFetchingRemoteHistory && (
-          <div className="color-grey-0 select-none">No remote history found</div>
+          <div className="color-passive-0 select-none">No remote history found</div>
         )}
       </div>
     )
diff --git a/app/assets/javascripts/Components/RevisionHistoryModal/RevisionContentLocked.tsx b/app/assets/javascripts/Components/RevisionHistoryModal/RevisionContentLocked.tsx
index c2c41c9e1..f22885185 100644
--- a/app/assets/javascripts/Components/RevisionHistoryModal/RevisionContentLocked.tsx
+++ b/app/assets/javascripts/Components/RevisionHistoryModal/RevisionContentLocked.tsx
@@ -29,7 +29,7 @@ export const RevisionContentLocked: FunctionComponent<{
       <div className="flex flex-col items-center text-center max-w-40%">
         <HistoryLockedIllustration />
         <div class="text-lg font-bold mt-2 mb-1">Can't access this version</div>
-        <div className="mb-4 color-grey-0 leading-140%">
+        <div className="mb-4 color-passive-0 leading-140%">
           {getPremiumContentCopy(
             !isUserSubscriptionCanceled && !isUserSubscriptionExpired && userSubscriptionName
               ? userSubscriptionName
diff --git a/app/assets/javascripts/Components/RevisionHistoryModal/RevisionHistoryModalWrapper.tsx b/app/assets/javascripts/Components/RevisionHistoryModal/RevisionHistoryModalWrapper.tsx
index e5878369d..5b483b67c 100644
--- a/app/assets/javascripts/Components/RevisionHistoryModal/RevisionHistoryModalWrapper.tsx
+++ b/app/assets/javascripts/Components/RevisionHistoryModal/RevisionHistoryModalWrapper.tsx
@@ -48,7 +48,7 @@ const RevisionContentPlaceholder: FunctionComponent<RevisionContentPlaceholderPr
   >
     {isFetchingSelectedRevision && <div className={`sk-spinner w-5 h-5 spinner-info ${ABSOLUTE_CENTER_CLASSNAME}`} />}
     {!isFetchingSelectedRevision && !selectedRevision ? (
-      <div className={`color-grey-0 select-none ${ABSOLUTE_CENTER_CLASSNAME}`}>No revision selected</div>
+      <div className={`color-passive-0 select-none ${ABSOLUTE_CENTER_CLASSNAME}`}>No revision selected</div>
     ) : null}
   </div>
 )
diff --git a/app/assets/javascripts/Components/RevisionHistoryModal/SelectedRevisionContent.tsx b/app/assets/javascripts/Components/RevisionHistoryModal/SelectedRevisionContent.tsx
index 57e5f438e..9b87e6eb3 100644
--- a/app/assets/javascripts/Components/RevisionHistoryModal/SelectedRevisionContent.tsx
+++ b/app/assets/javascripts/Components/RevisionHistoryModal/SelectedRevisionContent.tsx
@@ -54,7 +54,7 @@ export const SelectedRevisionContent: FunctionComponent<SelectedRevisionContentP
                 {selectedRevision.payload.content.text}
               </textarea>
             ) : (
-              <div className={`color-grey-0 ${ABSOLUTE_CENTER_CLASSNAME}`}>Empty note.</div>
+              <div className={`color-passive-0 ${ABSOLUTE_CENTER_CLASSNAME}`}>Empty note.</div>
             )}
           </div>
         )}
diff --git a/app/assets/javascripts/Components/RevisionHistoryModal/SessionHistoryList.tsx b/app/assets/javascripts/Components/RevisionHistoryModal/SessionHistoryList.tsx
index 1953918b2..205730c69 100644
--- a/app/assets/javascripts/Components/RevisionHistoryModal/SessionHistoryList.tsx
+++ b/app/assets/javascripts/Components/RevisionHistoryModal/SessionHistoryList.tsx
@@ -57,7 +57,7 @@ export const SessionHistoryList: FunctionComponent<Props> = ({
         if (group.entries && group.entries.length) {
           return (
             <Fragment key={group.title}>
-              <div className="px-3 mt-2.5 mb-1 font-semibold color-text uppercase color-grey-0 select-none">
+              <div className="px-3 mt-2.5 mb-1 font-semibold color-text uppercase color-passive-0 select-none">
                 {group.title}
               </div>
               {group.entries.map((entry, index) => (
@@ -79,7 +79,7 @@ export const SessionHistoryList: FunctionComponent<Props> = ({
           return null
         }
       })}
-      {!sessionHistoryLength && <div className="color-grey-0 select-none">No session history found</div>}
+      {!sessionHistoryLength && <div className="color-passive-0 select-none">No session history found</div>}
     </div>
   )
 }
diff --git a/app/assets/javascripts/Components/TagAutocomplete/AutocompleteTagResult.tsx b/app/assets/javascripts/Components/TagAutocomplete/AutocompleteTagResult.tsx
index b730de071..cce905368 100644
--- a/app/assets/javascripts/Components/TagAutocomplete/AutocompleteTagResult.tsx
+++ b/app/assets/javascripts/Components/TagAutocomplete/AutocompleteTagResult.tsx
@@ -79,7 +79,7 @@ export const AutocompleteTagResult = observer(({ appState, tagResult, closeOnBlu
     >
       <Icon type="hashtag" className="color-neutral mr-2 min-h-5 min-w-5" />
       <span className="whitespace-nowrap overflow-hidden overflow-ellipsis">
-        {prefixTitle && <span className="grey-2">{prefixTitle}</span>}
+        {prefixTitle && <span className="color-passive-2">{prefixTitle}</span>}
         {autocompleteSearchQuery === ''
           ? title
           : splitQueryInString(title, autocompleteSearchQuery).map((substring, index) => (
diff --git a/app/assets/javascripts/Components/Tags/TagsSectionTitle.tsx b/app/assets/javascripts/Components/Tags/TagsSectionTitle.tsx
index 4188fd321..8dbaec464 100644
--- a/app/assets/javascripts/Components/Tags/TagsSectionTitle.tsx
+++ b/app/assets/javascripts/Components/Tags/TagsSectionTitle.tsx
@@ -40,7 +40,7 @@ export const TagsSectionTitle: FunctionComponent<Props> = observer(({ features,
       <div className="sk-h3 title">
         <span className="sk-bold">Tags</span>
         <Tooltip label={TAG_FOLDERS_FEATURE_TOOLTIP}>
-          <label className="ml-1 sk-bold color-grey-2 cursor-pointer" onClick={showPremiumAlert}>
+          <label className="ml-1 sk-bold color-passive-2 cursor-pointer" onClick={showPremiumAlert}>
             Folders
           </label>
         </Tooltip>
diff --git a/app/assets/stylesheets/_navigation.scss b/app/assets/stylesheets/_navigation.scss
index 88ab24fa0..77ba22477 100644
--- a/app/assets/stylesheets/_navigation.scss
+++ b/app/assets/stylesheets/_navigation.scss
@@ -53,11 +53,6 @@ $content-horizontal-padding: 16px;
 
     &.active {
       opacity: 1;
-
-      &.is-over {
-        background-color: var(--sn-stylekit-white);
-        color: var(--sn-stylekit-secondary-contrast-foreground-color);
-      }
     }
   }
 
diff --git a/app/assets/stylesheets/_reach-sub.scss b/app/assets/stylesheets/_reach-sub.scss
index 511443cba..a7d4fbb1f 100644
--- a/app/assets/stylesheets/_reach-sub.scss
+++ b/app/assets/stylesheets/_reach-sub.scss
@@ -20,7 +20,7 @@
 }
 
 .challenge-modal-overlay::before {
-  background-color: var(--sn-stylekit-grey-5);
+  background-color: var(--sn-stylekit-passive-color-5);
 }
 
 [data-reach-dialog-content] {
diff --git a/app/assets/stylesheets/_sn.scss b/app/assets/stylesheets/_sn.scss
index 93d6a3daa..b500d5300 100644
--- a/app/assets/stylesheets/_sn.scss
+++ b/app/assets/stylesheets/_sn.scss
@@ -211,7 +211,7 @@
 }
 
 .placeholder-dark-red::placeholder {
-  @extend .color-dark-red;
+  @extend .color-danger;
 }
 
 .placeholder-medium::placeholder {
diff --git a/app/assets/stylesheets/_theme.scss b/app/assets/stylesheets/_theme.scss
index c13bc770e..8cc2324da 100644
--- a/app/assets/stylesheets/_theme.scss
+++ b/app/assets/stylesheets/_theme.scss
@@ -15,10 +15,10 @@
   --text-selection-background-color: var(--sn-stylekit-info-color);
 
   --note-preview-progress-color: var(--sn-stylekit-info-color);
-  --note-preview-progress-background-color: var(--sn-stylekit-grey-4-opacity-variant);
+  --note-preview-progress-background-color: var(--sn-stylekit-passive-color-4-opacity-variant);
 
   --note-preview-selected-progress-color: var(--sn-stylekit-secondary-background-color);
-  --note-preview-selected-progress-background-color:var(--sn-stylekit-grey-4-opacity-variant);
+  --note-preview-selected-progress-background-color:var(--sn-stylekit-passive-color-4-opacity-variant);
 
   --items-column-background-color: var(--sn-stylekit-background-color);
   --items-column-items-background-color: var(--sn-stylekit-background-color);
@@ -37,7 +37,7 @@
   --preferences-navigation-icon-color: var(--sn-stylekit-neutral-color);
   --preferences-navigation-selected-background-color: var(--sn-stylekit-info-backdrop-color);
 
-  --dropdown-menu-radio-button-inactive-color: var(--sn-stylekit-grey-1);
+  --dropdown-menu-radio-button-inactive-color: var(--sn-stylekit-passive-color-1);
 
   --panel-resizer-background-color: var(--sn-stylekit-secondary-contrast-background-color);
   --link-element-color: var(--sn-stylekit-info-color);
diff --git a/app/assets/stylesheets/utils/_color.scss b/app/assets/stylesheets/utils/_color.scss
index 049365e05..e725b5ba8 100644
--- a/app/assets/stylesheets/utils/_color.scss
+++ b/app/assets/stylesheets/utils/_color.scss
@@ -9,16 +9,16 @@
   opacity: $opacity;
 }
 
-.bg-grey-super-light {
-  background-color: var(--sn-stylekit-grey-super-light);
+.bg-passive-super-light {
+  background-color: var(--sn-stylekit-passive-color-super-light);
 }
 
 .bg-inverted-default {
   background-color: var(--sn-stylekit-contrast-foreground-color);
 }
 
-.hover\:bg-grey-4:hover {
-  background: var(--sn-stylekit-grey-4);
+.hover\:bg-passive-4:hover {
+  background: var(--sn-stylekit-passive-color-4);
 }
 
 .focus\:bg-info:focus {
@@ -45,8 +45,8 @@
   background-color: var(--sn-stylekit-background-color);
 }
 
-.hover\:bg-grey-5:hover {
-  background-color: var(--sn-stylekit-grey-5);
+.hover\:bg-passive-5:hover {
+  background-color: var(--sn-stylekit-passive-color-5);
 }
 
 .bg-warning-faded::after {
diff --git a/package.json b/package.json
index 18f1028b0..a29412798 100644
--- a/package.json
+++ b/package.json
@@ -75,7 +75,7 @@
     "@standardnotes/icons": "^1.1.7",
     "@standardnotes/sncrypto-web": "1.10.1",
     "@standardnotes/snjs": "2.113.2",
-    "@standardnotes/stylekit": "5.27.1",
+    "@standardnotes/stylekit": "5.29.0",
     "@zip.js/zip.js": "^2.4.10",
     "mobx": "^6.5.0",
     "mobx-react-lite": "^3.3.0",
diff --git a/yarn.lock b/yarn.lock
index 0f91e73d4..fbd33747e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2421,10 +2421,10 @@
     "@standardnotes/sncrypto-common" "^1.9.0"
     "@standardnotes/utils" "^1.6.10"
 
-"@standardnotes/stylekit@5.27.1":
-  version "5.27.1"
-  resolved "https://registry.yarnpkg.com/@standardnotes/stylekit/-/stylekit-5.27.1.tgz#49a49d72865759647c64e01841f2a55ba464be9a"
-  integrity sha512-Sto/SCxtPPXZmRKJtvTZGck0Pl4pOIhR36CKT24R6it1P/9eabeqWL0E83Gutj5ME2mqa/hl8Cg/ipMheDz2uQ==
+"@standardnotes/stylekit@5.29.0":
+  version "5.29.0"
+  resolved "https://registry.yarnpkg.com/@standardnotes/stylekit/-/stylekit-5.29.0.tgz#0288c2f202c4c8b3aafdac3315bfa241a1303c07"
+  integrity sha512-tbr3HPj7shQr2HnrUgiADQr3zvxuKJEY0CJnf2SbW/+LGFRXqFbteOXtRRcpGEWU6B4+XoDvOkakXqWsfeVJkQ==
   dependencies:
     "@nanostores/preact" "^0.1.3"
     "@reach/listbox" "^0.16.2"