matty/ncd-fe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

pl-fe: Remove confusingly named accent-blue color, lighten links in dark/black mode

Browse Source 
Signed-off-by: nicole mikołajczyk <git@mkljczk.pl>
This commit is contained in:
nicole mikołajczyk
2026-01-06 04:25:04 +01:00
parent ff0e3cb58b
commit 4e91d696c7
32 changed files with 38 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/pl-fe/src/components/link.tsx
View File

@ -4,7 +4,7 @@ import React from 'react';
const Link = (props: LinkProps) => (
<Comp
{...props}
className='text-primary-600 hover:underline dark:text-accent-blue'
className='text-primary-600 hover:underline dark:text-primary-400'
/>
);

2
packages/pl-fe/src/components/mention.tsx
View File

@ -24,7 +24,7 @@ const Mention: React.FC<IMention> = ({ mention: { acct, username }, disabled })
<Link
to='/@{$username}'
params={{ username: acct }}
className='text-primary-600 hover:underline dark:text-accent-blue'
className='text-primary-600 hover:underline dark:text-primary-400'
onClick={handleClick}
dir='ltr'
>

2
packages/pl-fe/src/components/parsed-content.tsx
View File

@ -253,7 +253,7 @@ function parseContent({
<Link
to='/@{$username}'
params={{ username: mention.acct }}
className='text-primary-600 hover:underline dark:text-accent-blue'
className='text-primary-600 hover:underline dark:text-primary-400'
dir='ltr'
onClick={(e) => e.stopPropagation()}
>

4
packages/pl-fe/src/components/parsed-mfm.tsx
View File

@ -412,7 +412,7 @@ const ParsedMfm: React.FC<IParsedMfm> = React.memo(({ text, emojis, mentions, sp
<Link
to='/@{$username}'
params={{ username: mention.acct }}
className='text-primary-600 hover:underline dark:text-accent-blue'
className='text-primary-600 hover:underline dark:text-primary-400'
dir='ltr'
onClick={(e) => e.stopPropagation()}
>
@ -430,7 +430,7 @@ const ParsedMfm: React.FC<IParsedMfm> = React.memo(({ text, emojis, mentions, sp
<Link
to='/@{$username}'
params={{ username: token.props.acct.slice(1) }}
className='text-primary-600 hover:underline dark:text-accent-blue'
className='text-primary-600 hover:underline dark:text-primary-400'
dir='ltr'
onClick={(e) => e.stopPropagation()}
>

4
packages/pl-fe/src/components/site-error-boundary.tsx
View File

@ -100,7 +100,7 @@ const SiteErrorBoundary: React.FC<ISiteErrorBoundary> = ({ children }) => {
defaultMessage="We're sorry for the interruption. If the problem persists, please reach out to our support team. You may also try to {clearCookies} (this will log you out)."
values={{
clearCookies: (
<a href='/' onClick={clearCookies} className='text-primary-600 hover:underline dark:text-accent-blue'>
<a href='/' onClick={clearCookies} className='text-primary-600 hover:underline dark:text-primary-400'>
<FormattedMessage
id='alert.unexpected.clear_cookies'
defaultMessage='clear cookies and browser data'
@ -118,7 +118,7 @@ const SiteErrorBoundary: React.FC<ISiteErrorBoundary> = ({ children }) => {
</Text>
<div className='mt-10'>
<a href='/' className='text-base font-medium text-primary-600 hover:underline dark:text-accent-blue'>
<a href='/' className='text-base font-medium text-primary-600 hover:underline dark:text-primary-400'>
<FormattedMessage id='alert.unexpected.return_home' defaultMessage='Return Home' />
{' '}
<span className='inline-block rtl:rotate-180' aria-hidden='true'>&rarr;</span>

2
packages/pl-fe/src/components/status-mention.tsx
View File

@ -23,7 +23,7 @@ const StatusMention: React.FC<IStatusMention> = ({ accountId, fallback }) => {
<Link
to='/@{$username}'
params={{ username: account.acct }}
className='text-primary-600 hover:underline dark:text-accent-blue'
className='text-primary-600 hover:underline dark:text-primary-400'
dir='ltr'
onClick={(e) => e.stopPropagation()}
>

2
packages/pl-fe/src/components/status-reply-mentions.tsx
View File

@ -64,7 +64,7 @@ const StatusReplyMentions: React.FC<IStatusReplyMentions> = ({ status, hoverable
key={account.id}
to='/@{$username}'
params={{ username: account.acct }}
className='inline-block max-w-[200px] truncate align-bottom text-primary-600 no-underline [direction:ltr] hover:text-primary-700 hover:underline dark:text-accent-blue dark:hover:text-accent-blue'
className='inline-block max-w-[200px] truncate align-bottom text-primary-600 no-underline [direction:ltr] hover:text-primary-700 hover:underline dark:text-primary-400 dark:hover:text-primary-400'
onClick={(e) => e.stopPropagation()}
>
@{account.username}

4
packages/pl-fe/src/components/status.tsx
View File

@ -309,7 +309,7 @@ const Status: React.FC<IStatus> = (props) => {
<StatusInfo
className='-mb-1'
avatarSize={avatarSize}
icon={<Icon src={require('@phosphor-icons/core/regular/users-three.svg')} className='size-4 text-primary-600 dark:text-accent-blue' />}
icon={<Icon src={require('@phosphor-icons/core/regular/users-three.svg')} className='size-4 text-primary-600 dark:text-primary-400' />}
text={
<FormattedMessage
id='status.group'
@ -344,7 +344,7 @@ const Status: React.FC<IStatus> = (props) => {
<Text theme='muted'>
<FormattedMessage id='status.filtered' defaultMessage='Filtered' />: {filterResults.map(({ filter }) => filter.title).join(', ')}.
{' '}
<button className='text-primary-600 hover:underline dark:text-accent-blue' onClick={handleUnfilter}>
<button className='text-primary-600 hover:underline dark:text-primary-400' onClick={handleUnfilter}>
<FormattedMessage id='status.show_filter_reason' defaultMessage='Show anyway' />
</button>
</Text>

2
packages/pl-fe/src/components/ui/button/useButtonStyles.ts
View File

@ -9,7 +9,7 @@ const themes = {
'bg-white dark:bg-primary-900 border-gray-400 dark:border-gray-800 hover:border-primary-300 dark:hover:border-primary-700 focus:border-primary-500 text-gray-900 dark:text-gray-100 focus:ring-primary-500',
accent: 'border-transparent bg-secondary-500 hover:bg-secondary-400 focus:bg-secondary-500 text-gray-100 focus:ring-secondary-300',
danger: 'border-transparent bg-danger-100 dark:bg-danger-900 text-danger-600 dark:text-danger-200 hover:bg-danger-600 hover:text-gray-100 dark:hover:text-gray-100 dark:hover:bg-danger-500 focus:ring-danger-500',
transparent: 'border-transparent bg-transparent text-primary-600 dark:text-accent-blue dark:bg-transparent hover:bg-gray-200 dark:hover:bg-gray-800/50',
transparent: 'border-transparent bg-transparent text-primary-600 dark:text-primary-400 dark:bg-transparent hover:bg-gray-200 dark:hover:bg-gray-800/50',
outline: 'border-gray-100 border-2 bg-transparent text-gray-100 hover:bg-white/10',
muted: 'border border-solid bg-transparent border-gray-400 dark:border-gray-800 hover:border-primary-300 dark:hover:border-primary-700 focus:border-primary-500 text-gray-800 dark:text-gray-100 focus:ring-primary-500',
};

2
packages/pl-fe/src/components/ui/text.tsx
View File

@ -4,7 +4,7 @@ import React from 'react';
const themes = {
default: 'text-gray-900 dark:text-gray-100',
danger: 'text-danger-700 dark:text-danger-500',
primary: 'text-primary-600 dark:text-accent-blue',
primary: 'text-primary-600 dark:text-primary-400',
muted: 'text-gray-700 dark:text-gray-600',
subtle: 'text-gray-400 dark:text-gray-500',
success: 'text-success-600',

4
packages/pl-fe/src/components/ui/toast.tsx
View File

@ -51,7 +51,7 @@ const Toast = (props: IToast) => {
return (
<Icon
src={require('@phosphor-icons/core/regular/info.svg')}
className='size-6 text-primary-600 dark:text-accent-blue'
className='size-6 text-primary-600 dark:text-primary-400'
aria-hidden
/>
);
@ -67,7 +67,7 @@ const Toast = (props: IToast) => {
};
const renderAction = () => {
const classNames = 'mt-0.5 flex-shrink-0 rounded-full text-sm font-medium text-primary-600 dark:text-accent-blue hover:underline focus:outline-none';
const classNames = 'mt-0.5 flex-shrink-0 rounded-full text-sm font-medium text-primary-600 dark:text-primary-400 hover:underline focus:outline-none';
if (action && actionLabel) {
return (

2
packages/pl-fe/src/features/chats/components/chat-message.tsx
View File

@ -230,7 +230,7 @@ const ChatMessage = (props: IChatMessage) => {
'text-ellipsis break-words relative rounded-md py-2 px-3 max-w-full space-y-2 [&_.mention]:underline': true,
'rounded-tr-sm': (!!chatMessage.attachment) && isMyMessage,
'rounded-tl-sm': (!!chatMessage.attachment) && !isMyMessage,
'[&_.mention]:text-primary-600 dark:[&_.mention]:text-accent-blue': !isMyMessage,
'[&_.mention]:text-primary-600 dark:[&_.mention]:text-primary-400': !isMyMessage,
'[&_.mention]:text-white dark:[&_.mention]:white': isMyMessage,
'bg-primary-500 text-white': isMyMessage,
'bg-gray-200 dark:bg-gray-800 text-gray-900 dark:text-gray-100': !isMyMessage,

2
packages/pl-fe/src/features/chats/components/chat-widget/chat-settings.tsx
View File

@ -112,7 +112,7 @@ const ChatSettings = () => {
</HStack>
<Stack space={5}>
<button onClick={isBlocked ? handleUnblockUser : handleBlockUser} className='flex w-full items-center space-x-2 text-sm font-bold text-primary-600 dark:text-accent-blue'>
<button onClick={isBlocked ? handleUnblockUser : handleBlockUser} className='flex w-full items-center space-x-2 text-sm font-bold text-primary-600 dark:text-primary-400'>
<Icon src={require('@phosphor-icons/core/regular/prohibit.svg')} className='size-5' />
<span>{intl.formatMessage(isBlocked ? messages.unblockUser : messages.blockUser, { acct: chat.account.acct })}</span>
</button>

2
packages/pl-fe/src/features/chats/components/shoutbox-message-list.tsx
View File

@ -67,7 +67,7 @@ const ShoutboxMessage: React.FC<IShoutboxMessage> = ({ message, isMyMessage }) =
className={
clsx({
'text-ellipsis break-words relative rounded-md py-2 px-3 max-w-full space-y-2 [&_.mention]:underline': true,
'[&_.mention]:text-primary-600 dark:[&_.mention]:text-accent-blue': !isMyMessage,
'[&_.mention]:text-primary-600 dark:[&_.mention]:text-primary-400': !isMyMessage,
'[&_.mention]:text-white dark:[&_.mention]:white': isMyMessage,
'bg-primary-500 text-white': isMyMessage,
'bg-gray-200 dark:bg-gray-800 text-gray-900 dark:text-gray-100': !isMyMessage,

2
packages/pl-fe/src/features/compose-event/components/upload-button.tsx
View File

@ -31,7 +31,7 @@ const UploadButton: React.FC<IUploadButton> = ({ disabled, onSelectFile }) => {
};
return (
<HStack className='size-full cursor-pointer text-primary-500 dark:text-accent-blue' space={3} alignItems='center' justifyContent='center' element='label'>
<HStack className='size-full cursor-pointer text-primary-500 dark:text-primary-400' space={3} alignItems='center' justifyContent='center' element='label'>
<Icon
src={require('@phosphor-icons/core/regular/upload.svg')}
className='size-7'

2
packages/pl-fe/src/features/compose/components/reply-mentions.tsx
View File

@ -51,7 +51,7 @@ const ReplyMentions: React.FC<IReplyMentions> = ({ composeId }) => {
return (
<span
key={acct}
className='inline-block text-primary-600 no-underline [direction:ltr] hover:text-primary-700 hover:underline dark:text-accent-blue dark:hover:text-accent-blue'
className='inline-block text-primary-600 no-underline [direction:ltr] hover:text-primary-700 hover:underline dark:text-primary-400 dark:hover:text-primary-400'
>
@{username}
</span>

4
packages/pl-fe/src/features/compose/editor/index.tsx
View File

@ -67,8 +67,8 @@ interface IComposeEditor {
const theme: InitialConfigType['theme'] = {
emoji: 'select-none',
hashtag: 'hover:underline text-primary-600 dark:text-accent-blue hover:text-primary-800 dark:hover:text-accent-blue',
link: 'hover:underline text-primary-600 dark:text-accent-blue hover:text-primary-800 dark:hover:text-accent-blue',
hashtag: 'hover:underline text-primary-600 dark:text-primary-400 hover:text-primary-800 dark:hover:text-primary-400',
link: 'hover:underline text-primary-600 dark:text-primary-400 hover:text-primary-800 dark:hover:text-primary-400',
text: {
bold: 'font-bold',
code: 'font-mono',

2
packages/pl-fe/src/features/compose/editor/plugins/floating-link-editor-plugin.tsx
View File

@ -198,7 +198,7 @@ const FloatingLinkEditor = ({
</>
) : (
<>
<a className='mr-8 block truncate text-primary-600 no-underline hover:underline dark:text-accent-blue' href={linkUrl} target='_blank' rel='noopener noreferrer'>
<a className='mr-8 block truncate text-primary-600 no-underline hover:underline dark:text-primary-400' href={linkUrl} target='_blank' rel='noopener noreferrer'>
{linkUrl}
</a>
<div

2
packages/pl-fe/src/features/edit-profile/components/header-picker.tsx
View File

@ -63,7 +63,7 @@ const HeaderPicker = React.forwardRef<HTMLInputElement, IMediaInput>(({
<label
ref={picker}
className={clsx(
'dark:sm:shadow-inset relative h-24 w-full cursor-pointer overflow-hidden rounded-lg bg-primary-100 text-primary-500 dark:bg-gray-800 dark:text-accent-blue sm:h-36 sm:shadow',
'dark:sm:shadow-inset relative h-24 w-full cursor-pointer overflow-hidden rounded-lg bg-primary-100 text-primary-500 dark:bg-gray-800 dark:text-primary-400 sm:h-36 sm:shadow',
{
'border-2 border-primary-600 border-dashed !z-[99]': isDragging,
'ring-2 ring-offset-2 ring-primary-600': isDraggedOver,

2
packages/pl-fe/src/features/group/components/group-header.tsx
View File

@ -156,7 +156,7 @@ const GroupHeader: React.FC<IGroupHeader> = ({ group }) => {
<Text
theme='muted'
align='center'
className='[&_a]:text-primary-600 [&_a]:hover:underline [&_a]:dark:text-accent-blue'
className='[&_a]:text-primary-600 [&_a]:hover:underline [&_a]:dark:text-primary-400'
>
<ParsedContent html={group.note} emojis={group.emojis} />
</Text>

2
packages/pl-fe/src/features/group/components/group-relationship.tsx
View File

@ -23,7 +23,7 @@ const GroupRelationship = ({ group }: IGroupRelationship) => {
space={1}
alignItems='center'
data-testid='group-relationship'
className='text-primary-600 dark:text-accent-blue'
className='text-primary-600 dark:text-primary-400'
>
<Icon
className='size-4'

2
packages/pl-fe/src/features/status/components/detailed-status.tsx
View File

@ -52,7 +52,7 @@ const DetailedStatus: React.FC<IDetailedStatus> = ({
icon={
<Icon
src={require('@phosphor-icons/core/regular/users-three.svg')}
className='size-4 text-primary-600 dark:text-accent-blue'
className='size-4 text-primary-600 dark:text-primary-400'
/>
}
text={

2
packages/pl-fe/src/hooks/use-theme-css.ts
View File

@ -57,8 +57,6 @@ const normalizeColors = (theme: Partial<Pick<PlFeConfig, 'brandColor' | 'accentC
'gradient-start': normalizedColors.primary?.['500'],
// @ts-ignore
'gradient-end': normalizedColors.accent?.['500'],
// @ts-ignore
'accent-blue': normalizedColors.primary?.['600'],
...normalizedColors,
} as typeof normalizedColors;
};

4
packages/pl-fe/src/modals/manage-group-modal/steps/confirmation-step.tsx
View File

@ -48,7 +48,7 @@ const ConfirmationStep: React.FC<IConfirmationStep> = ({ group }) => {
<Stack space={3}>
<Stack>
<label
className='dark:sm:shadow-inset relative h-24 w-full cursor-pointer overflow-hidden rounded-lg bg-primary-100 text-primary-500 dark:bg-gray-800 dark:text-accent-blue sm:h-36 sm:shadow'
className='dark:sm:shadow-inset relative h-24 w-full cursor-pointer overflow-hidden rounded-lg bg-primary-100 text-primary-500 dark:bg-gray-800 dark:text-primary-400 sm:h-36 sm:shadow'
>
{group.header && <img className='size-full object-cover' src={group.header} alt={group.header_description} />}
</label>
@ -62,7 +62,7 @@ const ConfirmationStep: React.FC<IConfirmationStep> = ({ group }) => {
<Text size='2xl' weight='bold' align='center'>{group.display_name}</Text>
<Text
size='md'
className='mx-auto max-w-sm [&_a]:text-primary-600 [&_a]:hover:underline [&_a]:dark:text-accent-blue'
className='mx-auto max-w-sm [&_a]:text-primary-600 [&_a]:hover:underline [&_a]:dark:text-primary-400'
>
<ParsedContent html={group.note} emojis={group.emojis} />
</Text>

2
packages/pl-fe/src/modals/report-modal/steps/confirmation-step.tsx
View File

@ -21,7 +21,7 @@ const renderTermsOfServiceLink = (href: string) => (
<a
href={href}
target='_blank'
className='text-primary-600 hover:text-primary-800 hover:underline dark:text-accent-blue dark:hover:text-accent-blue'
className='text-primary-600 hover:text-primary-800 hover:underline dark:text-primary-400 dark:hover:text-primary-400'
>
{termsOfServiceText}
</a>

1
packages/pl-fe/src/normalizers/pl-fe/pl-fe-config.ts
View File

@ -47,7 +47,6 @@ const plFeConfigSchema = coerceObject({
accentColor: v.fallback(v.string(), ''),
colors: v.fallback(v.nullable(v.objectWithRest(
{
'accent-blue': v.string(),
'gradient-end': v.string(),
'gradient-start': v.string(),
greentext: v.string(),

6
packages/pl-fe/src/pages/dashboard/theme-editor.tsx
View File

@ -194,12 +194,6 @@ const ThemeEditorPage: React.FC = () => {
onChange={updateColor('greentext')}
/>
<ColorListItem
label={intl.formatMessage(messages.colorAccentBlue)}
value={colors['accent-blue']}
onChange={updateColor('accent-blue')}
/>
<ColorListItem
label={intl.formatMessage(messages.colorGradientStart)}
value={colors['gradient-start']}

4
packages/pl-fe/src/pages/statuses/event-information.tsx
View File

@ -79,7 +79,7 @@ const EventInformationPage: React.FC = () => {
text.push(
<React.Fragment key='event-map'>
<br />
<a href='#' className='text-primary-600 hover:underline dark:text-accent-blue' onClick={handleShowMap}>
<a href='#' className='text-primary-600 hover:underline dark:text-primary-400' onClick={handleShowMap}>
<FormattedMessage id='event.show_on_map' defaultMessage='Show on map' />
</a>
</React.Fragment>,
@ -156,7 +156,7 @@ const EventInformationPage: React.FC = () => {
{status.event.links.map(link => (
<HStack space={2} alignItems='center'>
<Icon src={require('@phosphor-icons/core/regular/link-simple.svg')} />
<a href={link.remote_url || link.url} className='text-primary-600 hover:underline dark:text-accent-blue' target='_blank'>
<a href={link.remote_url || link.url} className='text-primary-600 hover:underline dark:text-primary-400' target='_blank'>
{(link.remote_url || link.url).replace(/^https?:\/\//, '')}
</a>
</HStack>

4
packages/pl-fe/src/styles/markup.scss
View File

@ -28,7 +28,7 @@
}
a {
@apply text-primary-600 dark:text-accent-blue hover:underline;
@apply text-primary-600 dark:text-primary-400 hover:underline;
}
strong {
@ -119,7 +119,7 @@
}
.status-link {
@apply hover:underline text-primary-600 dark:text-accent-blue hover:text-primary-800 dark:hover:text-accent-blue;
@apply hover:underline text-primary-600 dark:text-primary-400 hover:text-primary-800 dark:hover:text-primary-400;
}
span.invisible {

4
packages/pl-fe/src/styles/new/mixins.scss
View File

@ -42,7 +42,7 @@
} @else if $theme == danger {
@apply text-danger-700 dark:text-danger-500;
} @else if $theme == primary {
@apply text-primary-600 dark:text-accent-blue;
@apply text-primary-600 dark:text-primary-400;
} @else if $theme == muted {
@apply text-gray-700 dark:text-gray-600;
} @else if $theme == subtle {
@ -148,7 +148,7 @@
} @else if $theme == danger {
@apply border-transparent bg-danger-100 dark:bg-danger-900 text-danger-600 dark:text-danger-200 hover:bg-danger-600 hover:text-gray-100 dark:hover:text-gray-100 dark:hover:bg-danger-500 focus:ring-danger-500;
} @else if $theme == transparent {
@apply border-transparent bg-transparent text-primary-600 dark:text-accent-blue dark:bg-transparent hover:bg-gray-200 dark:hover:bg-gray-800/50;
@apply border-transparent bg-transparent text-primary-600 dark:text-primary-400 dark:bg-transparent hover:bg-gray-200 dark:hover:bg-gray-800/50;
} @else if $theme == outline {
@apply border-gray-100 border-2 bg-transparent text-gray-100 hover:bg-white/10;
} @else if $theme == muted {

2
packages/pl-fe/src/styles/utilities.scss
View File

@ -4,7 +4,7 @@
}
.mention {
@apply text-primary-600 dark:text-accent-blue hover:underline;
@apply text-primary-600 dark:text-primary-400 hover:underline;
}
.emoji-lg img.emojione {

3
packages/pl-fe/tailwind.config.ts
View File

@ -23,7 +23,7 @@ const config: Config = {
extend: {
boxShadow: ({ theme }) => ({
'3xl': '0 25px 75px -15px rgba(0, 0, 0, 0.25)',
'inset-ring': `inset 0 0 0 2px ${theme('colors.accent-blue')}`,
'inset-ring': `inset 0 0 0 2px ${theme('colors.primary.600')}`,
}),
fontSize: {
base: '0.9375rem',
@ -65,7 +65,6 @@ const config: Config = {
success: [50, 100, 200, 300, 400, 500, 600, 700, 800, 900],
danger: [50, 100, 200, 300, 400, 500, 600, 700, 800, 900],
accent: [300, 500],
'accent-blue': true,
'gradient-start': true,
'gradient-end': true,
'greentext': true,