feat: handle removed grey-x colors from stylekit (#1046)

2022-05-23 18:09:30 -05:00
parent 4e621cadde
commit c6839f776a
35 changed files with 62 additions and 67 deletions
--- 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 ? (
--- 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'}
--- 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>
--- 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'}
--- 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>
--- 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>
--- 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'
--- 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
--- 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>
      ))}
--- 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>
  </>
 )
--- 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
--- 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',
  }
 }

--- 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"
--- 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)
--- 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 && (
--- 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}
    </>
--- 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>
--- 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>
--- 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 '}`}
--- 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"
--- 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>
  )
 }
--- 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>
    )
--- 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
--- 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>
 )
--- 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>
        )}
--- 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>
  )
 }
--- 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) => (
--- 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>
--- 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);
-      }
    }
  }

--- 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] {
--- 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 {
--- 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);
--- 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 {
--- 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",
--- 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"