rmorawski/standardnotes-app-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Mo
2022-05-23 18:09:30 -05:00
committed by GitHub
parent 4e621cadde
commit c6839f776a
35 changed files with 62 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/assets/javascripts/Components/AccountMenu/AdvancedOptions.tsx
View File

@@ -98,7 +98,7 @@ export const AdvancedOptions: FunctionComponent<Props> = observer(
> >
<div className="flex items-center"> <div className="flex items-center">
Advanced options Advanced options
<Icon type="chevron-down" className="color-grey-1 ml-1" /> <Icon type="chevron-down" className="color-passive-1 ml-1" />
</div> </div>
</button> </button>
{showAdvanced ? ( {showAdvanced ? (

6
app/assets/javascripts/Components/AccountMenu/ConfirmPassword.tsx
View File

@@ -113,8 +113,8 @@ export const ConfirmPassword: FunctionComponent<Props> = observer(
</div> </div>
<div className="px-3 mb-3 text-sm"> <div className="px-3 mb-3 text-sm">
Because your notes are encrypted using your password,{' '} 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 <span className="color-danger">Standard Notes does not have a password reset option</span>. If you forget your
your password, you will permanently lose access to your data. password, you will permanently lose access to your data.
</div> </div>
<form onSubmit={handleConfirmFormSubmit} className="px-3 mb-1"> <form onSubmit={handleConfirmFormSubmit} className="px-3 mb-1">
<DecoratedPasswordInput <DecoratedPasswordInput
@@ -127,7 +127,7 @@ export const ConfirmPassword: FunctionComponent<Props> = observer(
ref={passwordInputRef} ref={passwordInputRef}
value={confirmPassword} value={confirmPassword}
/> />
{error ? <div className="color-dark-red my-2">{error}</div> : null} {error ? <div className="color-danger my-2">{error}</div> : null}
<Button <Button
className="btn-w-full mt-1 mb-3" className="btn-w-full mt-1 mb-3"
label={isRegistering ? 'Creating account...' : 'Create account & sign in'} label={isRegistering ? 'Creating account...' : 'Create account & sign in'}

4
app/assets/javascripts/Components/AccountMenu/GeneralAccountMenu.tsx
View File

@@ -110,7 +110,7 @@ export const GeneralAccountMenu: FunctionComponent<Props> = observer(
</div> </div>
</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" /> <Icon type="sync" />
</div> </div>
</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 You’re offline. Sign in to sync your notes and preferences across all your devices and enable end-to-end
encryption. encryption.
</div> </div>
<div className="flex items-center color-grey-1"> <div className="flex items-center color-passive-1">
<Icon type="cloud-off" className="mr-2" /> <Icon type="cloud-off" className="mr-2" />
<span className="font-semibold">Offline</span> <span className="font-semibold">Offline</span>
</div> </div>

6
app/assets/javascripts/Components/AccountMenu/SignIn.tsx
View File

@@ -153,7 +153,7 @@ export const SignInPane: FunctionComponent<Props> = observer(({ application, app
</div> </div>
<div className="px-3 mb-1"> <div className="px-3 mb-1">
<DecoratedInput <DecoratedInput
className={`mb-2 ${error ? 'border-dark-red' : null}`} className={`mb-2 ${error ? 'border-danger' : null}`}
left={[<Icon type="email" className="color-neutral" />]} left={[<Icon type="email" className="color-neutral" />]}
type="email" type="email"
placeholder="Email" placeholder="Email"
@@ -165,7 +165,7 @@ export const SignInPane: FunctionComponent<Props> = observer(({ application, app
ref={emailInputRef} ref={emailInputRef}
/> />
<DecoratedPasswordInput <DecoratedPasswordInput
className={`mb-2 ${error ? 'border-dark-red' : null}`} className={`mb-2 ${error ? 'border-danger' : null}`}
disabled={isSigningIn} disabled={isSigningIn}
left={[<Icon type="password" className="color-neutral" />]} left={[<Icon type="password" className="color-neutral" />]}
onChange={handlePasswordChange} onChange={handlePasswordChange}
@@ -175,7 +175,7 @@ export const SignInPane: FunctionComponent<Props> = observer(({ application, app
ref={passwordInputRef} ref={passwordInputRef}
value={password} value={password}
/> />
{error ? <div className="color-dark-red my-2">{error}</div> : null} {error ? <div className="color-danger my-2">{error}</div> : null}
<Button <Button
className="btn-w-full mt-1 mb-3" className="btn-w-full mt-1 mb-3"
label={isSigningIn ? 'Signing in...' : 'Sign in'} label={isSigningIn ? 'Signing in...' : 'Sign in'}

2
app/assets/javascripts/Components/AttachedFilesPopover/AttachedFilesPopover.tsx
View File

@@ -153,7 +153,7 @@ export const AttachedFilesPopover: FunctionComponent<Props> = observer(
<Button variant="normal" onClick={handleAttachFilesClick} onBlur={closeOnBlur}> <Button variant="normal" onClick={handleAttachFilesClick} onBlur={closeOnBlur}>
{currentTab === PopoverTabs.AttachedFiles ? 'Attach' : 'Upload'} files {currentTab === PopoverTabs.AttachedFiles ? 'Attach' : 'Upload'} files
</Button> </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>
)} )}
</div> </div>

2
app/assets/javascripts/Components/AttachedFilesPopover/PopoverFileItem.tsx
View File

@@ -99,7 +99,7 @@ export const PopoverFileItem: FunctionComponent<PopoverFileItemProps> = ({
)} )}
</div> </div>
)} )}
<div className="text-xs color-grey-0"> <div className="text-xs color-passive-0">
{file.created_at.toLocaleString()} · {formatSizeToReadableString(file.decryptedSize)} {file.created_at.toLocaleString()} · {formatSizeToReadableString(file.decryptedSize)}
</div> </div>
</div> </div>

2
app/assets/javascripts/Components/Button/Button.tsx
View File

@@ -22,7 +22,7 @@ const getClassName = (variant: ButtonVariant, danger: boolean, disabled: boolean
} }
if (disabled) { 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 = focusHoverStates =
variant === 'normal' variant === 'normal'
? 'focus:bg-default focus:outline-none hover:bg-default' ? 'focus:bg-default focus:outline-none hover:bg-default'

4
app/assets/javascripts/Components/ChallengeModal/ChallengePrompt.tsx
View File

@@ -33,13 +33,13 @@ export const ChallengeModalPrompt: FunctionComponent<Props> = ({ prompt, values,
{prompt.validation === ChallengeValidation.ProtectionSessionDuration ? ( {prompt.validation === ChallengeValidation.ProtectionSessionDuration ? (
<div className="min-w-76"> <div className="min-w-76">
<div className="text-sm font-medium mb-2">Allow protected access for</div> <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) => { {ProtectionSessionDurations.map((option) => {
const selected = option.valueInSeconds === values[prompt.id].value const selected = option.valueInSeconds === values[prompt.id].value
return ( return (
<label <label
className={`cursor-pointer px-2 py-1.5 rounded ${ 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 <input

4
app/assets/javascripts/Components/ContentListView/ListItemTags.tsx
View File

@@ -12,8 +12,8 @@ export const ListItemTags: FunctionComponent<{
return ( return (
<div className="flex flex-wrap mt-1.5 text-xs gap-2"> <div className="flex flex-wrap mt-1.5 text-xs gap-2">
{tags.map((tag) => ( {tags.map((tag) => (
<span className="inline-flex items-center py-1 px-1.5 bg-grey-4-opacity-variant color-foreground rounded-0.5"> <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-grey-1 mr-1" /> <Icon type="hashtag" className="sn-icon--small color-passive-1 mr-1" />
<span>{tag}</span> <span>{tag}</span>
</span> </span>
))} ))}

2
app/assets/javascripts/Components/Dropdown/Dropdown.tsx
View File

@@ -41,7 +41,7 @@ const CustomDropdownButton: FunctionComponent<ListboxButtonProps> = ({
<div className="dropdown-selected-label">{label}</div> <div className="dropdown-selected-label">{label}</div>
</div> </div>
<ListboxArrow className={`sn-dropdown-arrow ${isExpanded ? 'sn-dropdown-arrow-flipped' : ''}`}> <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> </ListboxArrow>
</> </>
) )

4
app/assets/javascripts/Components/Files/FilePreviewModal.tsx
View File

@@ -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> <div className="font-bold text-base mb-2">This file can't be previewed.</div>
{isFilePreviewable ? ( {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 There was an error loading the file. Try again, or download the file and open it using another
application. application.
</div> </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. To view this file, download it and open it using another application.
</div> </div>
<Button <Button

2
app/assets/javascripts/Components/Input/DecoratedInput.tsx
View File

@@ -10,7 +10,7 @@ const getClassNames = (hasLeftDecorations: boolean, hasRightDecorations: boolean
input: `w-full border-0 focus:shadow-none bg-transparent color-text ${ input: `w-full border-0 focus:shadow-none bg-transparent color-text ${
!hasLeftDecorations && hasRightDecorations ? 'pl-2' : '' !hasLeftDecorations && hasRightDecorations ? 'pl-2' : ''
} ${hasRightDecorations ? 'pr-2' : ''}`, } ${hasRightDecorations ? 'pr-2' : ''}`,
disabled: 'bg-grey-5 cursor-not-allowed', disabled: 'bg-passive-5 cursor-not-allowed',
} }
} }

2
app/assets/javascripts/Components/Input/DecoratedPasswordInput.tsx
View File

@@ -10,7 +10,7 @@ const Toggle: FunctionComponent<{
setIsToggled: StateUpdater<boolean> setIsToggled: StateUpdater<boolean>
}> = ({ isToggled, setIsToggled }) => ( }> = ({ isToggled, setIsToggled }) => (
<IconButton <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'} icon={isToggled ? 'eye-off' : 'eye'}
iconClassName="sn-icon--small" iconClassName="sn-icon--small"
title="Show/hide password" title="Show/hide password"

4
app/assets/javascripts/Components/Input/FloatingLabelInput.tsx
View File

@@ -38,12 +38,12 @@ export const FloatingLabelInput: FunctionComponent<Props> = forwardRef(
const LABEL_CLASSNAME = `hidden absolute ${!focused ? 'color-neutral' : 'color-info'} ${ const LABEL_CLASSNAME = `hidden absolute ${!focused ? 'color-neutral' : 'color-info'} ${
focused || value ? 'flex top-0 left-2 pt-1.5 px-1' : '' 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 ${ const INPUT_CLASSNAME = `w-full h-full ${
focused || value ? 'pt-6 pb-2' : 'py-2.5' 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 ${ } 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}` } ${inputClassName}`
const handleFocus = () => setFocused(true) const handleFocus = () => setFocused(true)

2
app/assets/javascripts/Components/NoteTags/NoteTag.tsx
View File

@@ -119,7 +119,7 @@ export const NoteTag = observer(({ appState, tag }: Props) => {
> >
<Icon type="hashtag" className="sn-icon--small color-info mr-1" /> <Icon type="hashtag" className="sn-icon--small color-info mr-1" />
<span className="whitespace-nowrap overflow-hidden overflow-ellipsis max-w-290px"> <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} {title}
</span> </span>
{showDeleteButton && ( {showDeleteButton && (

6
app/assets/javascripts/Components/NotesOptions/ListedActionsOption.tsx
View File

@@ -58,7 +58,7 @@ const ListedMenuItem: FunctionComponent<ListedMenuItemProps> = ({
<div className="flex flex-col"> <div className="flex flex-col">
<div className="font-semibold">{action.label}</div> <div className="font-semibold">{action.label}</div>
{action.access_type && ( {action.access_type && (
<div className="text-xs mt-0.5 color-grey-0"> <div className="text-xs mt-0.5 color-passive-0">
{'Uses '} {'Uses '}
<strong>{action.access_type}</strong> <strong>{action.access_type}</strong>
{' access to this note.'} {' 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> </Fragment>
))} ))}
@@ -199,7 +199,7 @@ const ListedActionsMenu: FunctionComponent<ListedActionsMenuProps> = ({ applicat
) : null} ) : null}
{!isFetchingAccounts && !menuGroups.length ? ( {!isFetchingAccounts && !menuGroups.length ? (
<div className="w-full flex items-center justify-center px-4 py-6"> <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> </div>
) : null} ) : null}
</> </>

2
app/assets/javascripts/Components/PremiumFeaturesModal/PremiumFeaturesModal.tsx
View File

@@ -50,7 +50,7 @@ export const PremiumFeaturesModal: FunctionalComponent<Props> = ({
</div> </div>
<div className="text-lg text-center font-bold mb-1">Enable Advanced Features</div> <div className="text-lg text-center font-bold mb-1">Enable Advanced Features</div>
</AlertDialogLabel> </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 In order to use <span className="font-semibold">{featureName}</span> and other advanced features, please
purchase a subscription or upgrade your current plan. purchase a subscription or upgrade your current plan.
</AlertDialogDescription> </AlertDialogDescription>

4
app/assets/javascripts/Components/PurchaseFlow/Panes/CreateAccount.tsx
View File

@@ -140,7 +140,7 @@ export const CreateAccount: FunctionComponent<Props> = observer(({ appState, app
disabled={isCreatingAccount} disabled={isCreatingAccount}
isInvalid={isEmailInvalid} 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 <FloatingLabelInput
className="min-w-90 xs:min-w-auto mb-4" className="min-w-90 xs:min-w-auto mb-4"
id="purchase-create-account-password" id="purchase-create-account-password"
@@ -163,7 +163,7 @@ export const CreateAccount: FunctionComponent<Props> = observer(({ appState, app
isInvalid={isPasswordNotMatching} isInvalid={isPasswordNotMatching}
/> />
{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} ) : null}
</div> </div>
</form> </form>

6
app/assets/javascripts/Components/PurchaseFlow/Panes/SignIn.tsx
View File

@@ -125,7 +125,7 @@ export const SignIn: FunctionComponent<Props> = observer(({ appState, applicatio
isInvalid={isEmailInvalid} isInvalid={isEmailInvalid}
/> />
{isEmailInvalid && !otherErrorMessage ? ( {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} ) : null}
<FloatingLabelInput <FloatingLabelInput
className={`min-w-90 xs:min-w-auto ${otherErrorMessage ? 'mb-2' : 'mb-4'}`} 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} disabled={isSigningIn}
isInvalid={isPasswordInvalid} isInvalid={isPasswordInvalid}
/> />
{otherErrorMessage ? <div className="color-dark-red mb-4">{otherErrorMessage}</div> : null} {otherErrorMessage ? <div className="color-danger mb-4">{otherErrorMessage}</div> : null}
</div> </div>
<Button <Button
className={`${isSigningIn ? 'min-w-30' : 'min-w-24'} py-2.5 mb-5`} 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} disabled={isSigningIn}
/> />
</form> </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?{' '} Don’t have an account yet?{' '}
<a <a
className={`color-info ${isSigningIn ? 'cursor-not-allowed' : 'cursor-pointer '}`} className={`color-info ${isSigningIn ? 'cursor-not-allowed' : 'cursor-pointer '}`}

6
app/assets/javascripts/Components/PurchaseFlow/PurchaseFlowView.tsx
View File

@@ -29,7 +29,7 @@ export const PurchaseFlowView: FunctionComponent<PurchaseFlowViewProps> = observ
const { currentPane } = appState.purchaseFlow const { currentPane } = appState.purchaseFlow
return ( 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 fit-content">
<div className="relative p-12 xs:px-8 mb-4 bg-default border-1 border-solid border-main rounded xs:rounded-0"> <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" /> <SNLogoFull className="mb-5" />
@@ -37,7 +37,7 @@ export const PurchaseFlowView: FunctionComponent<PurchaseFlowViewProps> = observ
</div> </div>
<div className="flex justify-end xs:px-4"> <div className="flex justify-end xs:px-4">
<a <a
className="mr-3 font-medium color-grey-1" className="mr-3 font-medium color-passive-1"
href="https://standardnotes.com/privacy" href="https://standardnotes.com/privacy"
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
@@ -45,7 +45,7 @@ export const PurchaseFlowView: FunctionComponent<PurchaseFlowViewProps> = observ
Privacy Privacy
</a> </a>
<a <a
className="font-medium color-grey-1" className="font-medium color-passive-1"
href="https://standardnotes.com/help" href="https://standardnotes.com/help"
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"

2
app/assets/javascripts/Components/RevisionHistoryModal/LegacyHistoryList.tsx
View File

@@ -68,7 +68,7 @@ export const LegacyHistoryList: FunctionComponent<Props> = ({
</HistoryListItem> </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> </div>
) )
} }

4
app/assets/javascripts/Components/RevisionHistoryModal/RemoteHistoryList.tsx
View File

@@ -57,7 +57,7 @@ export const RemoteHistoryList: FunctionComponent<RemoteHistoryListProps> = obse
if (group.entries && group.entries.length) { if (group.entries && group.entries.length) {
return ( return (
<Fragment key={group.title}> <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} {group.title}
</div> </div>
{group.entries.map((entry) => ( {group.entries.map((entry) => (
@@ -82,7 +82,7 @@ export const RemoteHistoryList: FunctionComponent<RemoteHistoryListProps> = obse
} }
})} })}
{!remoteHistoryLength && !isFetchingRemoteHistory && ( {!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> </div>
) )

2
app/assets/javascripts/Components/RevisionHistoryModal/RevisionContentLocked.tsx
View File

@@ -29,7 +29,7 @@ export const RevisionContentLocked: FunctionComponent<{
<div className="flex flex-col items-center text-center max-w-40%"> <div className="flex flex-col items-center text-center max-w-40%">
<HistoryLockedIllustration /> <HistoryLockedIllustration />
<div class="text-lg font-bold mt-2 mb-1">Can't access this version</div> <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( {getPremiumContentCopy(
!isUserSubscriptionCanceled && !isUserSubscriptionExpired && userSubscriptionName !isUserSubscriptionCanceled && !isUserSubscriptionExpired && userSubscriptionName
? userSubscriptionName ? userSubscriptionName

2
app/assets/javascripts/Components/RevisionHistoryModal/RevisionHistoryModalWrapper.tsx
View File

@@ -48,7 +48,7 @@ const RevisionContentPlaceholder: FunctionComponent<RevisionContentPlaceholderPr
> >
{isFetchingSelectedRevision && <div className={`sk-spinner w-5 h-5 spinner-info ${ABSOLUTE_CENTER_CLASSNAME}`} />} {isFetchingSelectedRevision && <div className={`sk-spinner w-5 h-5 spinner-info ${ABSOLUTE_CENTER_CLASSNAME}`} />}
{!isFetchingSelectedRevision && !selectedRevision ? ( {!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} ) : null}
</div> </div>
) )

2
app/assets/javascripts/Components/RevisionHistoryModal/SelectedRevisionContent.tsx
View File

@@ -54,7 +54,7 @@ export const SelectedRevisionContent: FunctionComponent<SelectedRevisionContentP
{selectedRevision.payload.content.text} {selectedRevision.payload.content.text}
</textarea> </textarea>
) : ( ) : (
<div className={`color-grey-0 ${ABSOLUTE_CENTER_CLASSNAME}`}>Empty note.</div> <div className={`color-passive-0 ${ABSOLUTE_CENTER_CLASSNAME}`}>Empty note.</div>
)} )}
</div> </div>
)} )}

4
app/assets/javascripts/Components/RevisionHistoryModal/SessionHistoryList.tsx
View File

@@ -57,7 +57,7 @@ export const SessionHistoryList: FunctionComponent<Props> = ({
if (group.entries && group.entries.length) { if (group.entries && group.entries.length) {
return ( return (
<Fragment key={group.title}> <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} {group.title}
</div> </div>
{group.entries.map((entry, index) => ( {group.entries.map((entry, index) => (
@@ -79,7 +79,7 @@ export const SessionHistoryList: FunctionComponent<Props> = ({
return null 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> </div>
) )
} }

2
app/assets/javascripts/Components/TagAutocomplete/AutocompleteTagResult.tsx
View File

@@ -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" /> <Icon type="hashtag" className="color-neutral mr-2 min-h-5 min-w-5" />
<span className="whitespace-nowrap overflow-hidden overflow-ellipsis"> <span className="whitespace-nowrap overflow-hidden overflow-ellipsis">
{prefixTitle && <span className="grey-2">{prefixTitle}</span>} {prefixTitle && <span className="color-passive-2">{prefixTitle}</span>}
{autocompleteSearchQuery === '' {autocompleteSearchQuery === ''
? title ? title
: splitQueryInString(title, autocompleteSearchQuery).map((substring, index) => ( : splitQueryInString(title, autocompleteSearchQuery).map((substring, index) => (

2
app/assets/javascripts/Components/Tags/TagsSectionTitle.tsx
View File

@@ -40,7 +40,7 @@ export const TagsSectionTitle: FunctionComponent<Props> = observer(({ features,
<div className="sk-h3 title"> <div className="sk-h3 title">
<span className="sk-bold">Tags</span> <span className="sk-bold">Tags</span>
<Tooltip label={TAG_FOLDERS_FEATURE_TOOLTIP}> <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 Folders
</label> </label>
</Tooltip> </Tooltip>

5
app/assets/stylesheets/_navigation.scss
View File

@@ -53,11 +53,6 @@ $content-horizontal-padding: 16px;
&.active { &.active {
opacity: 1; opacity: 1;
&.is-over {
background-color: var(--sn-stylekit-white);
color: var(--sn-stylekit-secondary-contrast-foreground-color);
}
} }
} }

2
app/assets/stylesheets/_reach-sub.scss
View File

@@ -20,7 +20,7 @@
} }
.challenge-modal-overlay::before { .challenge-modal-overlay::before {
background-color: var(--sn-stylekit-grey-5); background-color: var(--sn-stylekit-passive-color-5);
} }
[data-reach-dialog-content] { [data-reach-dialog-content] {

2
app/assets/stylesheets/_sn.scss
View File

@@ -211,7 +211,7 @@
} }
.placeholder-dark-red::placeholder { .placeholder-dark-red::placeholder {
@extend .color-dark-red; @extend .color-danger;
} }
.placeholder-medium::placeholder { .placeholder-medium::placeholder {

6
app/assets/stylesheets/_theme.scss
View File

@@ -15,10 +15,10 @@
--text-selection-background-color: var(--sn-stylekit-info-color); --text-selection-background-color: var(--sn-stylekit-info-color);
--note-preview-progress-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-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-background-color: var(--sn-stylekit-background-color);
--items-column-items-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-icon-color: var(--sn-stylekit-neutral-color);
--preferences-navigation-selected-background-color: var(--sn-stylekit-info-backdrop-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); --panel-resizer-background-color: var(--sn-stylekit-secondary-contrast-background-color);
--link-element-color: var(--sn-stylekit-info-color); --link-element-color: var(--sn-stylekit-info-color);

12
app/assets/stylesheets/utils/_color.scss
View File

@@ -9,16 +9,16 @@
opacity: $opacity; opacity: $opacity;
} }
.bg-grey-super-light { .bg-passive-super-light {
background-color: var(--sn-stylekit-grey-super-light); background-color: var(--sn-stylekit-passive-color-super-light);
} }
.bg-inverted-default { .bg-inverted-default {
background-color: var(--sn-stylekit-contrast-foreground-color); background-color: var(--sn-stylekit-contrast-foreground-color);
} }
.hover\:bg-grey-4:hover { .hover\:bg-passive-4:hover {
background: var(--sn-stylekit-grey-4); background: var(--sn-stylekit-passive-color-4);
} }
.focus\:bg-info:focus { .focus\:bg-info:focus {
@@ -45,8 +45,8 @@
background-color: var(--sn-stylekit-background-color); background-color: var(--sn-stylekit-background-color);
} }
.hover\:bg-grey-5:hover { .hover\:bg-passive-5:hover {
background-color: var(--sn-stylekit-grey-5); background-color: var(--sn-stylekit-passive-color-5);
} }
.bg-warning-faded::after { .bg-warning-faded::after {

2
package.json
View File

@@ -75,7 +75,7 @@
"@standardnotes/icons": "^1.1.7", "@standardnotes/icons": "^1.1.7",
"@standardnotes/sncrypto-web": "1.10.1", "@standardnotes/sncrypto-web": "1.10.1",
"@standardnotes/snjs": "2.113.2", "@standardnotes/snjs": "2.113.2",
"@standardnotes/stylekit": "5.27.1", "@standardnotes/stylekit": "5.29.0",
"@zip.js/zip.js": "^2.4.10", "@zip.js/zip.js": "^2.4.10",
"mobx": "^6.5.0", "mobx": "^6.5.0",
"mobx-react-lite": "^3.3.0", "mobx-react-lite": "^3.3.0",

8
yarn.lock
View File

@@ -2421,10 +2421,10 @@
"@standardnotes/sncrypto-common" "^1.9.0" "@standardnotes/sncrypto-common" "^1.9.0"
"@standardnotes/utils" "^1.6.10" "@standardnotes/utils" "^1.6.10"
"@standardnotes/stylekit@5.27.1": "@standardnotes/stylekit@5.29.0":
version "5.27.1" version "5.29.0"
resolved "https://registry.yarnpkg.com/@standardnotes/stylekit/-/stylekit-5.27.1.tgz#49a49d72865759647c64e01841f2a55ba464be9a" resolved "https://registry.yarnpkg.com/@standardnotes/stylekit/-/stylekit-5.29.0.tgz#0288c2f202c4c8b3aafdac3315bfa241a1303c07"
integrity sha512-Sto/SCxtPPXZmRKJtvTZGck0Pl4pOIhR36CKT24R6it1P/9eabeqWL0E83Gutj5ME2mqa/hl8Cg/ipMheDz2uQ== integrity sha512-tbr3HPj7shQr2HnrUgiADQr3zvxuKJEY0CJnf2SbW/+LGFRXqFbteOXtRRcpGEWU6B4+XoDvOkakXqWsfeVJkQ==
dependencies: dependencies:
"@nanostores/preact" "^0.1.3" "@nanostores/preact" "^0.1.3"
"@reach/listbox" "^0.16.2" "@reach/listbox" "^0.16.2"