fix(web): navigation styles (#1177)

packages/components/src/Packages/Themes/org.standardnotes.theme-autobiography/src/main.scss

@@ -6,6 +6,13 @@
   --highlight-color: #d68420;
   --highlight-contrast: #e3ae74;
 
+  --sn-stylekit-passive-color-0: #7e582a;
+  --sn-stylekit-passive-color-1: #a37337;
+  --sn-stylekit-passive-color-3: #d9c6b1;
+  --sn-stylekit-passive-color-4: #e3d5c4;
+  --sn-stylekit-passive-color-4-opacity-variant: #c9995e3d;
+  --sn-stylekit-passive-color-5: #e9d9c7;
+
   --sn-stylekit-info-color: #a37337;
   --sn-stylekit-info-contrast-color: #ebcdaa;
 
@@ -33,7 +40,7 @@
   --sn-stylekit-contrast-foreground-color: var(--foreground-color);
   --sn-stylekit-contrast-border-color: var(--border-color);
 
-  --sn-stylekit-secondary-background-color: var(--background-1);
+  --sn-stylekit-secondary-background-color: var(--sn-stylekit-passive-color-4);
   --sn-stylekit-secondary-foreground-color: var(--foreground-color);
   --sn-stylekit-secondary-border-color: var(--border-color);
 
@@ -51,11 +58,6 @@
   --sn-desktop-titlebar-border-color: var(--border-color);
   --sn-desktop-titlebar-ui-color: var(--foreground-color);
   --sn-desktop-titlebar-ui-hover-color: var(--highlight-color);
-
-  --sn-stylekit-passive-color-0: #7e582a;
-  --sn-stylekit-passive-color-1: #a37337;
-  --sn-stylekit-passive-color-4-opacity-variant: #c9995e3d;
-  --sn-stylekit-passive-color-5: #e9d9c7;
 }
 
 #notes-column .note.selected,

packages/components/src/Packages/Themes/org.standardnotes.theme-focus/src/main.scss

@@ -12,6 +12,11 @@
 
   // StyleKit Vars
 
+  --sn-stylekit-passive-color-0: #999999;
+  --sn-stylekit-passive-color-3: #28292b;
+  --sn-stylekit-passive-color-4: #1c1d1e;
+  --sn-stylekit-passive-color-5: #1d1f20;
+
   --sn-stylekit-shadow-color: #000000;
 
   --sn-stylekit-info-color: var(--highlight-color);
@@ -40,7 +45,7 @@
   --sn-stylekit-contrast-foreground-color: #ffffff;
   --sn-stylekit-contrast-border-color: #000000;
 
-  --sn-stylekit-secondary-background-color: #0f1011;
+  --sn-stylekit-secondary-background-color: var(--sn-stylekit-passive-color-4);
   --sn-stylekit-secondary-foreground-color: #ffffff;
   --sn-stylekit-secondary-border-color: #000000;
 
@@ -59,9 +64,4 @@
   --sn-stylekit-scrollbar-thumb-color: var(--sn-stylekit-info-color);
 
   --sn-stylekit-menu-border: 1px solid #424242;
-
-  --sn-stylekit-passive-color-0: #999999;
-  --sn-stylekit-passive-color-3: #28292b;
-  --sn-stylekit-passive-color-4: #1c1d1e;
-  --sn-stylekit-passive-color-5: #1d1f20;
 }

packages/components/src/Packages/Themes/org.standardnotes.theme-futura/src/main.scss

@@ -5,6 +5,13 @@
   --border-color: #20222c;
 
   // StyleKit Vars
+
+  --sn-stylekit-passive-color-0: #a4a5b3;
+  --sn-stylekit-passive-color-3: #3a3a48;
+  --sn-stylekit-passive-color-4: #2c2c39;
+  --sn-stylekit-passive-color-4-opacity-variant: #292937;
+  --sn-stylekit-passive-color-5: #2e2e3e;
+
   --sn-stylekit-shadow-color: var(--border-color);
 
   --sn-stylekit-info-color: var(--highlight-color);
@@ -33,7 +40,7 @@
   --sn-stylekit-contrast-foreground-color: #a9aabe;
   --sn-stylekit-contrast-border-color: #0f1116;
 
-  --sn-stylekit-secondary-background-color: #20202b;
+  --sn-stylekit-secondary-background-color: var(--sn-stylekit-passive-color-4);
   --sn-stylekit-secondary-foreground-color: #a9aabe;
   --sn-stylekit-secondary-border-color: #20222c;
 
@@ -52,10 +59,4 @@
   --sn-desktop-titlebar-ui-hover-color: var(--highlight-color);
 
   --sn-stylekit-menu-border: 1px solid #434b60;
-
-  --sn-stylekit-passive-color-0: #a4a5b3;
-  --sn-stylekit-passive-color-3: #3a3a48;
-  --sn-stylekit-passive-color-4: #2c2c39;
-  --sn-stylekit-passive-color-4-opacity-variant: #292937;
-  --sn-stylekit-passive-color-5: #2e2e3e;
 }

packages/components/src/Packages/Themes/org.standardnotes.theme-midnight/src/main.scss

@@ -26,6 +26,13 @@
   --sn-desktop-titlebar-ui-hover-color: var(--sn-stylekit-info-color);
 
   // StyleKit Vars
+
+  --sn-stylekit-passive-color-0: #94979e;
+  --sn-stylekit-passive-color-3: #2c2c39;
+  --sn-stylekit-passive-color-4: #313142;
+  --sn-stylekit-passive-color-4-opacity-variant: #292937;
+  --sn-stylekit-passive-color-5: #313142;
+
   --sn-stylekit-shadow-color: #20202b;
 
   --sn-stylekit-background-color: #20202b;
@@ -36,7 +43,7 @@
   --sn-stylekit-contrast-foreground-color: var(--ui-text-color);
   --sn-stylekit-contrast-border-color: var(--border-color);
 
-  --sn-stylekit-secondary-background-color: #292937;
+  --sn-stylekit-secondary-background-color: var(--sn-stylekit-passive-color-4);
   --sn-stylekit-secondary-foreground-color: var(--ui-text-color);
   --sn-stylekit-secondary-border-color: var(--border-color);
 
@@ -53,10 +60,4 @@
   --sn-stylekit-scrollbar-thumb-color: var(--sn-stylekit-info-color);
 
   --sn-stylekit-menu-border: 1px solid #494965;
-
-  --sn-stylekit-passive-color-0: #94979e;
-  --sn-stylekit-passive-color-3: #2c2c39;
-  --sn-stylekit-passive-color-4: #313142;
-  --sn-stylekit-passive-color-4-opacity-variant: #292937;
-  --sn-stylekit-passive-color-5: #313142;
 }

packages/components/src/Packages/Themes/org.standardnotes.theme-solarized-dark/src/main.scss

@@ -25,6 +25,14 @@
   --sn-component-inner-border-color: var(--highlight-color);
 
   // StyleKit Vars
+
+  --sn-stylekit-passive-color-0: #a8bdbd;
+  --sn-stylekit-passive-color-1: #93a1a1;
+  --sn-stylekit-passive-color-3: #0d4f60;
+  --sn-stylekit-passive-color-4: #083642;
+  --sn-stylekit-passive-color-4-opacity-variant: #2aa1983d;
+  --sn-stylekit-passive-color-5: #003542;
+
   --sn-stylekit-info-color: var(--highlight-color);
   --sn-stylekit-info-contrast-color: var(--foreground-color);
 
@@ -52,7 +60,7 @@
   --sn-stylekit-contrast-foreground-color: var(--foreground-color);
   --sn-stylekit-contrast-border-color: var(--border-color);
 
-  --sn-stylekit-secondary-background-color: var(--background-1);
+  --sn-stylekit-secondary-background-color: var(--sn-stylekit-passive-color-4);
   --sn-stylekit-secondary-foreground-color: var(--foreground-color);
   --sn-stylekit-secondary-border-color: var(--border-color);
 
@@ -72,11 +80,4 @@
   --sn-desktop-titlebar-ui-hover-color: var(--highlight-color);
 
   --sn-stylekit-menu-border: 1px solid #1f5461;
-
-  --sn-stylekit-passive-color-0: #a8bdbd;
-  --sn-stylekit-passive-color-1: #93a1a1;
-  --sn-stylekit-passive-color-3: #0d4f60;
-  --sn-stylekit-passive-color-4: #083642;
-  --sn-stylekit-passive-color-4-opacity-variant: #2aa1983d;
-  --sn-stylekit-passive-color-5: #003542;
 }

packages/components/src/Packages/Themes/org.standardnotes.theme-titanium/src/main.scss

@@ -6,6 +6,10 @@
   --border-color: var(--highlight-color);
 
   // StyleKit Vars
+
+  --sn-stylekit-passive-color-0: #626166;
+  --sn-stylekit-passive-color-4-opacity-variant: #e9e9e9;
+
   --sn-stylekit-shadow-color: var(--highlight-color);
 
   --sn-stylekit-info-color: var(--background-color);
@@ -23,7 +27,7 @@
   --sn-stylekit-danger-color: #f80324;
   --sn-stylekit-danger-contrast-color: #ffffff;
 
-  --sn-stylekit-background-color: #d9dbde;
+  --sn-stylekit-background-color: var(--sn-stylekit-passive-color-4);
   --sn-stylekit-foreground-color: #3d3c40;
   --sn-stylekit-border-color: #c9cccf;
 
@@ -31,7 +35,7 @@
   --sn-stylekit-contrast-foreground-color: #3d3c40;
   --sn-stylekit-contrast-border-color: #c9cccf;
 
-  --sn-stylekit-secondary-background-color: #d8d9de;
+  --sn-stylekit-secondary-background-color: #d9dbde;
   --sn-stylekit-secondary-foreground-color: #3d3c40;
   --sn-stylekit-secondary-border-color: #c9cccf;
 
@@ -53,7 +57,4 @@
   --sn-desktop-titlebar-ui-hover-color: var(--background-color);
 
   --sn-stylekit-menu-border: 1px solid #b2b2b3;
-
-  --sn-stylekit-passive-color-0: #626166;
-  --sn-stylekit-passive-color-4-opacity-variant: #e9e9e9;
 }

packages/styles/src/Styles/_colors.scss

@@ -1,5 +1,5 @@
 :root {
-  --sn-stylekit-neutral-color: #989898;
+  --sn-stylekit-neutral-color: #72767e;
   --sn-stylekit-neutral-contrast-color: #ffffff;
 
   --sn-stylekit-info-color: #086dd6;
@@ -20,14 +20,14 @@
   --sn-stylekit-background-color: #ffffff;
   // For borders inside background-color
   --sn-stylekit-border-color: #dfe1e4;
-  --sn-stylekit-foreground-color: #000000;
+  --sn-stylekit-foreground-color: #19191C;
   // Colors for layers placed on top of non-prefixed background, border, and foreground
-  --sn-stylekit-contrast-background-color: #f6f6f6;
+  --sn-stylekit-contrast-background-color: rgba(244, 245, 247, 0.72);
   --sn-stylekit-contrast-foreground-color: #2e2e2e;
   --sn-stylekit-contrast-border-color: #e3e3e3; // For borders inside contrast-background-color
 
   // Alternative set of background and contrast options
-  --sn-stylekit-secondary-background-color: #f6f6f6;
+  --sn-stylekit-secondary-background-color: #EEEFF1;
   --sn-stylekit-secondary-foreground-color: #2e2e2e;
   --sn-stylekit-secondary-border-color: #e3e3e3;
 

packages/web/src/javascripts/Components/AccountMenu/AdvancedOptions.tsx

@@ -126,7 +126,7 @@ const AdvancedOptions: FunctionComponent<Props> = ({
           {isPrivateWorkspace && (
             <>
               <DecoratedInput
-                className={'mb-2'}
+                className={{ container: 'mb-2' }}
                 left={[<Icon type="server" className="text-neutral" />]}
                 type="text"
                 placeholder="Userphrase"
@@ -135,7 +135,7 @@ const AdvancedOptions: FunctionComponent<Props> = ({
                 disabled={disabled}
               />
               <DecoratedInput
-                className={'mb-2'}
+                className={{ container: 'mb-2' }}
                 left={[<Icon type="folder" className="text-neutral" />]}
                 type="text"
                 placeholder="Name"

packages/web/src/javascripts/Components/AccountMenu/ConfirmPassword.tsx

@@ -119,7 +119,7 @@ const ConfirmPassword: FunctionComponent<Props> = ({
       </div>
       <form onSubmit={handleConfirmFormSubmit} className="mb-1 px-3">
         <DecoratedPasswordInput
-          className="mb-2"
+          className={{ container: 'mb-2' }}
           disabled={isRegistering}
           left={[<Icon type="password" className="text-neutral" />]}
           onChange={handlePasswordChange}

packages/web/src/javascripts/Components/AccountMenu/CreateAccount.tsx

@@ -114,7 +114,7 @@ const CreateAccount: FunctionComponent<Props> = ({
       </div>
       <form onSubmit={handleRegisterFormSubmit} className="mb-1 px-3">
         <DecoratedInput
-          className="mb-2"
+          className={{ container: 'mb-2' }}
           disabled={isPrivateWorkspace}
           left={[<Icon type="email" className="text-neutral" />]}
           onChange={handleEmailChange}
@@ -125,7 +125,7 @@ const CreateAccount: FunctionComponent<Props> = ({
           value={email}
         />
         <DecoratedPasswordInput
-          className="mb-2"
+          className={{ container: 'mb-2' }}
           left={[<Icon type="password" className="text-neutral" />]}
           onChange={handlePasswordChange}
           onKeyDown={handleKeyDown}

packages/web/src/javascripts/Components/AccountMenu/SignIn.tsx

@@ -153,7 +153,7 @@ const SignInPane: FunctionComponent<Props> = ({ application, viewControllerManag
       </div>
       <div className="mb-1 px-3">
         <DecoratedInput
-          className={`mb-2 ${error ? 'border-danger' : null}`}
+          className={{ container: `mb-2 ${error ? 'border-danger' : null}` }}
           left={[<Icon type="email" className="text-neutral" />]}
           type="email"
           placeholder="Email"
@@ -165,7 +165,7 @@ const SignInPane: FunctionComponent<Props> = ({ application, viewControllerManag
           ref={emailInputRef}
         />
         <DecoratedPasswordInput
-          className={`mb-2 ${error ? 'border-danger' : null}`}
+          className={{ container: `mb-2 ${error ? 'border-danger' : null}` }}
           disabled={isSigningIn}
           left={[<Icon type="password" className="text-neutral" />]}
           onChange={handlePasswordChange}

packages/web/src/javascripts/Components/Bubble/Bubble.tsx

@@ -8,7 +8,7 @@ type Props = {
 
 const styles = {
   base: 'active:border-info active:bg-info active:text-neutral-contrast flex-grow cursor-pointer rounded-full border border-solid px-2 py-1 text-center transition',
-  unselected: 'text-neutral border-secondary-border',
+  unselected: 'text-neutral border-secondary-border bg-default',
   selected: 'text-neutral-contrast border-info bg-info',
 }
 

packages/web/src/javascripts/Components/ChallengeModal/ChallengePrompt.tsx

@@ -65,14 +65,14 @@ const ChallengeModalPrompt: FunctionComponent<Props> = ({ prompt, values, index,
         <DecoratedPasswordInput
           ref={inputRef}
           placeholder={prompt.placeholder}
-          className={`w-full max-w-76 ${isInvalid ? 'border-danger' : ''}`}
+          className={{ container: `w-full max-w-76 ${isInvalid ? 'border-danger' : ''}` }}
           onChange={(value) => onValueChange(value, prompt)}
         />
       ) : (
         <DecoratedInput
           ref={inputRef}
           placeholder={prompt.placeholder}
-          className={`w-full max-w-76 ${isInvalid ? 'border-danger' : ''}`}
+          className={{ container: `w-full max-w-76 ${isInvalid ? 'border-danger' : ''}` }}
           onChange={(value) => onValueChange(value, prompt)}
         />
       )}

packages/web/src/javascripts/Components/Icon/Icon.tsx

@@ -56,6 +56,7 @@ import {
   MenuArrowRightIcon,
   MenuCloseIcon,
   MoreIcon,
+  NotesFilledIcon,
   NotesIcon,
   PasswordIcon,
   PencilFilledIcon,
@@ -123,6 +124,7 @@ export const ICONS = {
   'menu-arrow-down': MenuArrowDownIcon,
   'menu-arrow-right': MenuArrowRightIcon,
   'menu-close': MenuCloseIcon,
+  'notes-filled': NotesFilledIcon,
   'pencil-filled': PencilFilledIcon,
   'pencil-off': PencilOffIcon,
   'pin-filled': PinFilledIcon,

packages/web/src/javascripts/Components/Input/DecoratedInput.tsx

@@ -3,7 +3,7 @@ import { DecoratedInputProps } from './DecoratedInputProps'
 
 const getClassNames = (hasLeftDecorations: boolean, hasRightDecorations: boolean, roundedFull?: boolean) => {
   return {
-    container: `position-relative flex items-stretch overflow-hidden border border-solid border-border bg-default text-sm focus-within:ring-2 focus-within:ring-info ${
+    container: `position-relative flex items-stretch overflow-hidden border border-solid border-passive-3 bg-default text-sm focus-within:ring-2 focus-within:ring-info bg-clip-padding ${
       !hasLeftDecorations && !hasRightDecorations ? 'px-2 py-1.5' : ''
     } ${roundedFull ? 'rounded-full' : 'rounded'}`,
     input: `focus:ring-none w-full border-0 bg-transparent text-text focus:shadow-none focus:outline-none ${
@@ -20,7 +20,7 @@ const DecoratedInput = forwardRef(
   (
     {
       autocomplete = false,
-      className = '',
+      className,
       disabled = false,
       id,
       left,
@@ -43,7 +43,7 @@ const DecoratedInput = forwardRef(
     const classNames = getClassNames(hasLeftDecorations, hasRightDecorations, roundedFull)
 
     return (
-      <div className={`${classNames.container} ${disabled ? classNames.disabled : ''} ${className}`}>
+      <div className={`${classNames.container} ${disabled ? classNames.disabled : ''} ${className?.container}`}>
         {left && (
           <div className="flex items-center px-2 py-1.5">
             {left.map((leftChild, index) => (
@@ -54,7 +54,7 @@ const DecoratedInput = forwardRef(
 
         <input
           autoComplete={autocomplete ? 'on' : 'off'}
-          className={`${classNames.input} ${disabled ? classNames.disabled : ''}`}
+          className={`${classNames.input} ${disabled ? classNames.disabled : ''} ${className?.input}`}
           data-lpignore={type !== 'password' ? true : false}
           disabled={disabled}
           id={id}

packages/web/src/javascripts/Components/Input/DecoratedInputProps.ts

@@ -2,7 +2,10 @@ import { FocusEventHandler, KeyboardEventHandler, ReactNode } from 'react'
 
 export type DecoratedInputProps = {
   autocomplete?: boolean
-  className?: string
+  className?: {
+    container?: string
+    input?: string
+  }
   disabled?: boolean
   id?: string
   left?: ReactNode[]

packages/web/src/javascripts/Components/NoAccountWarning/NoAccountWarningContent.tsx

@@ -24,7 +24,7 @@ const NoAccountWarningContent = ({ accountMenuController, noAccountWarningContro
   }, [noAccountWarningController])
 
   return (
-    <div className="mt-4 grid grid-cols-1 rounded-md p-4 shadow">
+    <div className="mt-4 grid grid-cols-1 rounded-md p-4 shadow-main">
       <h1 className="sk-h3 m-0 text-sm font-semibold">Data not backed up</h1>
       <p className="col-start-1 col-end-3 m-0 mt-1 text-sm">Sign in or register to back up your notes.</p>
       <Button primary small className="col-start-1 col-end-3 mt-3 justify-self-start" onClick={showAccountMenu}>

packages/web/src/javascripts/Components/NoteTags/NoteTag.tsx

@@ -116,7 +116,7 @@ const NoteTag = ({ viewControllerManager, tag }: Props) => {
   return (
     <button
       ref={tagRef}
-      className="hover:bg-secondary-contrast focus:bg-secondary-contrast mt-2 mr-2 flex h-6 cursor-pointer items-center rounded border-0 bg-contrast py-2 pl-1 pr-2 text-xs text-text"
+      className="mt-2 mr-2 flex h-6 cursor-pointer items-center rounded border-0 bg-passive-4-opacity-variant py-2 pl-1 pr-2 text-xs text-text hover:bg-contrast focus:bg-contrast"
       onClick={onTagClick}
       onKeyDown={onKeyDown}
       onFocus={onFocus}

packages/web/src/javascripts/Components/Preferences/Panes/Account/OfflineSubscription.tsx

@@ -89,7 +89,7 @@ const OfflineSubscription: FunctionComponent<Props> = ({ application }) => {
                   placeholder={'Offline Subscription Code'}
                   value={activationCode}
                   disabled={isSuccessfullyActivated}
-                  className={'mb-3'}
+                  className={{ container: 'mb-3' }}
                 />
               )}
             </div>

packages/web/src/javascripts/Components/Preferences/Panes/Security/PasscodeLock.tsx

@@ -205,7 +205,7 @@ const PasscodeLock = ({ application, viewControllerManager }: Props) => {
                 placeholder="Passcode"
               />
               <DecoratedPasswordInput
-                className="mt-2"
+                className={{ container: 'mt-2' }}
                 type="password"
                 value={passcodeConfirmation ? passcodeConfirmation : ''}
                 onChange={handleConfirmPasscodeChange}

packages/web/src/javascripts/Components/Preferences/Panes/TwoFactorAuth/ScanQRCode.tsx

@@ -45,7 +45,7 @@ const ScanQRCode: FunctionComponent<Props> = ({ activation: act }) => {
           </div>
           <div className="min-h-2" />
           <DecoratedInput
-            className="w-92 ml-4"
+            className={{ container: 'w-92 ml-4' }}
             disabled={true}
             value={act.secretKey}
             right={[<CopyButton copyValue={act.secretKey} />]}

packages/web/src/javascripts/Components/Preferences/Panes/TwoFactorAuth/Verification.tsx

@@ -28,7 +28,7 @@ const Verification: FunctionComponent<Props> = ({ activation: act }) => {
               Enter your <b>secret key</b>:
             </div>
             <div className="min-w-2" />
-            <DecoratedInput className={`w-92 ${secretKeyClass}`} onChange={act.setInputSecretKey} />
+            <DecoratedInput className={{ container: `w-92 ${secretKeyClass}` }} onChange={act.setInputSecretKey} />
           </div>
           <div className="flex flex-row items-center">
             <Bullet />
@@ -37,7 +37,7 @@ const Verification: FunctionComponent<Props> = ({ activation: act }) => {
               Verify the <b>authentication code</b> generated by your authenticator app:
             </div>
             <div className="min-w-2" />
-            <DecoratedInput className={`w-30 ${authTokenClass}`} onChange={act.setInputOtpToken} />
+            <DecoratedInput className={{ container: `w-30 ${authTokenClass}` }} onChange={act.setInputOtpToken} />
           </div>
         </div>
       </ModalDialogDescription>

packages/web/src/javascripts/Components/SearchBar/SearchBar.tsx

@@ -48,7 +48,10 @@ const SearchBar = ({ itemListController, searchOptionsController }: Props) => {
       <DecoratedInput
         autocomplete={false}
         title="Searches notes and files in the currently selected tag"
-        className="placeholder:color-passive-0 rounded-full bg-contrast bg-clip-padding px-1"
+        className={{
+          container: 'px-1',
+          input: 'placeholder:text-passive-0',
+        }}
         placeholder="Search"
         value={noteFilterText}
         ref={searchInputRef}

packages/web/src/javascripts/Components/Tags/SmartViewsListItem.tsx

@@ -23,12 +23,12 @@ type Props = {
 const PADDING_BASE_PX = 14
 const PADDING_PER_LEVEL_PX = 21
 
-const smartViewIconType = (view: SmartView): IconType => {
+const smartViewIconType = (view: SmartView, isSelected: boolean): IconType => {
   if (view.uuid === SystemViewId.AllNotes) {
-    return 'notes'
+    return isSelected ? 'notes-filled' : 'notes'
   }
   if (view.uuid === SystemViewId.Files) {
-    return 'file'
+    return 'folder'
   }
   if (view.uuid === SystemViewId.ArchivedNotes) {
     return 'archive'
@@ -101,7 +101,7 @@ const SmartViewsListItem: FunctionComponent<Props> = ({ view, tagsState }) => {
   }, [tagsState, view])
 
   const isFaded = false
-  const iconType = smartViewIconType(view)
+  const iconType = smartViewIconType(view, isSelected)
 
   return (
     <>
@@ -113,7 +113,7 @@ const SmartViewsListItem: FunctionComponent<Props> = ({ view, tagsState }) => {
         }}
       >
         <div className="tag-info">
-          <div className={'tag-icon mr-1'}>
+          <div className={'tag-icon mr-2'}>
             <Icon type={iconType} className={`${isSelected ? 'text-info' : 'text-neutral'}`} />
           </div>
           <input

packages/web/src/javascripts/Components/Tags/TagsListItem.tsx

@@ -216,7 +216,7 @@ export const TagsListItem: FunctionComponent<Props> = observer(({ tag, features,
               </a>
             </div>
           )}
-          <div className={'tag-icon draggable mr-1'} ref={dragRef}>
+          <div className={'tag-icon draggable mr-2'} ref={dragRef}>
             <Icon type="hashtag" className={`${isSelected ? 'text-info' : 'text-neutral'}`} />
           </div>
           <input

packages/web/src/stylesheets/_navigation.scss

@@ -136,7 +136,7 @@ $content-horizontal-padding: 16px;
       .count {
         padding-right: 4px;
         padding-top: 1px;
-        font-weight: bold;
+        font-weight: 400;
         color: var(--navigation-item-count-color);
         min-width: 15px;
         text-align: right;
@@ -174,6 +174,11 @@ $content-horizontal-padding: 16px;
         .title {
           cursor: text;
         }
+
+        .count {
+          --navigation-item-count-color: var(--sn-stylekit-foreground-color);
+          font-weight: 700;
+        }
       }
     }
 

packages/web/src/stylesheets/_theme.scss

@@ -32,7 +32,7 @@
   --navigation-section-title-color: var(--sn-stylekit-secondary-foreground-color);
   --navigation-item-text-color: var(--sn-stylekit-secondary-foreground-color);
   --navigation-item-count-color: var(--sn-stylekit-neutral-color);
-  --navigation-item-selected-background-color: var(--sn-stylekit-secondary-contrast-background-color);
+  --navigation-item-selected-background-color: var(--sn-stylekit-background-color);
 
   --preferences-navigation-icon-color: var(--sn-stylekit-neutral-color);
   --preferences-navigation-selected-background-color: var(--sn-stylekit-info-backdrop-color);

packages/web/tailwind.config.js

@@ -85,6 +85,7 @@ module.exports = {
       default: 'var(--sn-stylekit-background-color)',
       foreground: 'var(--sn-stylekit-foreground-color)',
       contrast: 'var(--sn-stylekit-contrast-background-color)',
+      'secondary-contrast': 'var(--sn-stylekit-secondary-contrast-border-color)',
       text: 'var(--sn-stylekit-contrast-foreground-color)',
       border: 'var(--sn-stylekit-border-color)',
       'secondary-border': 'var(--sn-stylekit-secondary-border-color)',