tarrien/Mastodon
1
0 Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge commit '31abef8917879917a330419fe3981a2fb7f35b69' into glitch-soc/merge-upstream

Browse Source 
Conflicts:
- `app/services/post_status_service.rb`:
  Upstream added a line adjacent to one that had been modified due to local-only posting.
  Added upstream's change.
- `tsconfig.json`:
  Upstream updated Typescript and updated `tsconfig` in the process by changing paths, where
  glitch-soc had extra paths. Updated as upstream did.
This commit is contained in:
Claire committed 2026-03-25 21:36:32 +01:00
2 parents 24bc05f3a4 31abef8917
commit 79958d9442
209 files changed
+2115 -1265
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

app/javascript/mastodon/components/admin/ReportReasonSelector.jsx
+3 -1
View File
@@ -1,12 +1,14 @@
import PropTypes from 'prop-types';
import { PureComponent } from 'react';
import { injectIntl, defineMessages } from 'react-intl';
import { defineMessages } from 'react-intl';
import classNames from 'classnames';
import api from 'mastodon/api';
import { injectIntl } from '../intl';
const messages = defineMessages({
legal: { id: 'report.categories.legal', defaultMessage: 'Legal' },
other: { id: 'report.categories.other', defaultMessage: 'Other' },
app/javascript/mastodon/components/alt_text_badge/index.tsx
+1 -2
View File
@@ -1,4 +1,4 @@
import { useState, useCallback, useRef, useId, Fragment } from 'react';
import { useState, useCallback, useRef, useId } from 'react';
import { FormattedMessage, useIntl } from 'react-intl';
@@ -84,7 +84,6 @@ export const AltTextBadge: React.FC<{ description: string }> = ({
<FormattedMessage
id='alt_text_badge.title'
defaultMessage='Alt text'
tagName={Fragment}
/>
</h4>
app/javascript/mastodon/components/callout/styles.module.css
+7 -7
View File
@@ -3,7 +3,7 @@
align-items: start;
padding: 12px;
gap: 8px;
background-color: var(--color-bg-brand-softer);
background-color: var(--color-bg-brand-softest);
color: var(--color-text-primary);
border-radius: 12px;
}
@@ -86,11 +86,11 @@
}
.variantSubtle {
border: 1px solid var(--color-bg-brand-softer);
border: 1px solid var(--color-bg-brand-softest);
background-color: var(--color-bg-primary);
.icon {
background-color: var(--color-bg-brand-softer);
background-color: var(--color-bg-brand-softest);
}
}
@@ -105,11 +105,11 @@
.variantInverted {
background-color: var(--color-bg-inverted);
color: var(--color-text-on-inverted);
color: var(--color-text-inverted);
}
.variantSuccess {
background-color: var(--color-bg-success-softer);
background-color: var(--color-bg-success-softest);
.icon {
background-color: var(--color-bg-success-soft);
@@ -117,7 +117,7 @@
}
.variantWarning {
background-color: var(--color-bg-warning-softer);
background-color: var(--color-bg-warning-softest);
.icon {
background-color: var(--color-bg-warning-soft);
@@ -125,7 +125,7 @@
}
.variantError {
background-color: var(--color-bg-error-softer);
background-color: var(--color-bg-error-softest);
.icon {
background-color: var(--color-bg-error-soft);
app/javascript/mastodon/components/form_fields/select.module.scss
+1 -1
View File
@@ -61,6 +61,6 @@
}
[data-has-error='true'] & {
border-color: var(--color-text-error);
border-color: var(--color-border-error);
}
}
app/javascript/mastodon/components/form_fields/text_input.module.scss
+2 -2
View File
@@ -32,11 +32,11 @@
&:focus:user-invalid,
&:required:user-invalid,
[data-has-error='true'] & {
outline-color: var(--color-text-error);
outline-color: var(--color-border-error);
}
&:focus {
outline-color: var(--color-text-brand);
outline-color: var(--color-border-brand);
}
&:required:user-valid {
app/javascript/mastodon/components/intl.tsx
+26
View File
@@ -0,0 +1,26 @@
import type { ComponentClass } from 'react';
import { useIntl } from 'react-intl';
interface IntlHocProps<TProps extends Record<string, unknown>> {
component: ComponentClass<TProps>;
props: TProps;
}
export const IntlHoc = <TProps extends Record<string, unknown>>({
component: Component,
props,
}: IntlHocProps<TProps>) => {
const intl = useIntl();
return <Component {...props} intl={intl} />;
};
export const injectIntl = <TProps extends Record<string, unknown>>(
Component: ComponentClass<TProps>,
) => {
const WrappedComponent = (props: Omit<TProps, 'intl'>) => (
<IntlHoc component={Component} props={props as TProps} />
);
WrappedComponent.displayName = `injectIntl(${(Component.displayName ?? Component.name) || 'Component'})`;
return WrappedComponent;
};
app/javascript/mastodon/components/server_banner.jsx
+3 -1
View File
@@ -1,7 +1,7 @@
import PropTypes from 'prop-types';
import { PureComponent } from 'react';
import { FormattedMessage, defineMessages, injectIntl } from 'react-intl';
import { FormattedMessage, defineMessages } from 'react-intl';
import { Link } from 'react-router-dom';
@@ -14,6 +14,8 @@ import { ShortNumber } from 'mastodon/components/short_number';
import { Skeleton } from 'mastodon/components/skeleton';
import { domain } from 'mastodon/initial_state';
import { injectIntl } from './intl';
const messages = defineMessages({
aboutActiveUsers: { id: 'server_banner.about_active_users', defaultMessage: 'People using this server during the last 30 days (Monthly Active Users)' },
});
app/javascript/mastodon/components/status.jsx
+2 -1
View File
@@ -1,6 +1,6 @@
import PropTypes from 'prop-types';
import { injectIntl, defineMessages, FormattedMessage } from 'react-intl';
import { defineMessages, FormattedMessage } from 'react-intl';
import classNames from 'classnames';
@@ -24,6 +24,7 @@ import { MediaGallery, Video, Audio } from '../features/ui/util/async-components
import { SensitiveMediaContext } from '../features/ui/util/sensitive_media_context';
import { displayMedia } from '../initial_state';
import { injectIntl } from './intl';
import { StatusHeader } from './status/header'
import { LinkedDisplayName } from './display_name';
import { getHashtagBarForStatus } from './hashtag_bar';
app/javascript/mastodon/components/status_action_bar/index.jsx
+3 -1
View File
@@ -1,6 +1,6 @@
import PropTypes from 'prop-types';
import { defineMessages, injectIntl } from 'react-intl';
import { defineMessages } from 'react-intl';
import { withRouter } from 'react-router-dom';
@@ -23,10 +23,12 @@ import { Dropdown } from 'mastodon/components/dropdown_menu';
import { me, quickBoosting } from '../../initial_state';
import { IconButton } from '../icon_button';
import { injectIntl } from '../intl';
import { BoostButton } from '../status/boost_button';
import { RemoveQuoteHint } from './remove_quote_hint';
import { quoteItemState, selectStatusState } from '../status/boost_button_utils';
const messages = defineMessages({
delete: { id: 'status.delete', defaultMessage: 'Delete' },
redraft: { id: 'status.redraft', defaultMessage: 'Delete & re-draft' },
app/javascript/mastodon/components/status_content.jsx
+2 -1
View File
@@ -1,7 +1,7 @@
import PropTypes from 'prop-types';
import { PureComponent } from 'react';
import { FormattedMessage, injectIntl } from 'react-intl';
import { FormattedMessage } from 'react-intl';
import classnames from 'classnames';
import { withRouter } from 'react-router-dom';
@@ -16,6 +16,7 @@ import { identityContextPropShape, withIdentity } from 'mastodon/identity_contex
import { languages as preloadedLanguages } from 'mastodon/initial_state';
import { EmojiHTML } from './emoji/html';
import { injectIntl } from './intl';
import { HandledLink } from './status/handled_link';
const MAX_HEIGHT = 706; // 22px * 32 (+ 2px padding at the top)
app/javascript/mastodon/components/status_quoted.tsx
-1
View File
@@ -335,7 +335,6 @@ export const QuotedStatus: React.FC<QuotedStatusProps> = ({
return (
<div className='status__quote'>
{/* @ts-expect-error Status is not yet typed */}
<StatusContainer
isQuotedPost
id={quotedStatusId}
app/javascript/mastodon/components/tags/style.module.css
+2 -2
View File
@@ -22,8 +22,8 @@ button.tag:focus-visible {
}
.active {
border-color: var(--color-text-brand);
background: var(--color-bg-brand-softer);
border-color: var(--color-border-brand);
background: var(--color-bg-brand-softest);
color: var(--color-text-brand);
}
app/javascript/mastodon/containers/status_container.jsx
+1 -2
View File
@@ -1,5 +1,3 @@
import { injectIntl } from 'react-intl';
import { connect } from 'react-redux';
import {
@@ -43,6 +41,7 @@ import {
undoStatusTranslation,
} from '../actions/statuses';
import { setStatusQuotePolicy } from '../actions/statuses_typed';
import { injectIntl } from '../components/intl';
import Status from '../components/status';
import { deleteModal } from '../initial_state';
import { makeGetStatus, makeGetPictureInPicture } from '../selectors';
app/javascript/mastodon/features/about/index.jsx
+2 -1
View File
@@ -1,13 +1,14 @@
import PropTypes from 'prop-types';
import { PureComponent } from 'react';
import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
import { defineMessages, FormattedMessage } from 'react-intl';
import { Helmet } from 'react-helmet';
import ImmutablePropTypes from 'react-immutable-proptypes';
import { connect } from 'react-redux';
import { injectIntl } from '@/mastodon/components/intl';
import { fetchServer, fetchExtendedDescription, fetchDomainBlocks } from 'mastodon/actions/server';
import { Account } from 'mastodon/components/account';
import Column from 'mastodon/components/column';
app/javascript/mastodon/features/account_edit/modals/image_alt.tsx
+28 -19
View File
@@ -3,6 +3,7 @@ import { useCallback, useState } from 'react';
import { FormattedMessage } from 'react-intl';
import { CharacterCounter } from '@/mastodon/components/character_counter';
import { Details } from '@/mastodon/components/details';
import { TextAreaField } from '@/mastodon/components/form_fields';
import { LoadingIndicator } from '@/mastodon/components/loading_indicator';
@@ -84,7 +85,12 @@ export const ImageAltTextField: FC<{
const altLimit = useAppSelector(
(state) =>
state.server.getIn(
['server', 'configuration', 'media_attachments', 'description_limit'],
[
'server',
'configuration',
'accounts',
'max_header_description_length',
],
150,
) as number,
);
@@ -100,23 +106,26 @@ export const ImageAltTextField: FC<{
<>
<img src={imageSrc} alt='' className={classes.altImage} />
<TextAreaField
label={
<FormattedMessage
id='account_edit.image_alt_modal.text_label'
defaultMessage='Alt text'
/>
}
hint={
<FormattedMessage
id='account_edit.image_alt_modal.text_hint'
defaultMessage='Alt text helps screen reader users to understand your content.'
/>
}
onChange={handleChange}
value={altText}
maxLength={altLimit}
/>
<div>
<TextAreaField
label={
<FormattedMessage
id='account_edit.image_alt_modal.text_label'
defaultMessage='Alt text'
/>
}
hint={
<FormattedMessage
id='account_edit.image_alt_modal.text_hint'
defaultMessage='Alt text helps screen reader users to understand your content.'
/>
}
onChange={handleChange}
value={altText}
maxLength={altLimit}
/>
<CharacterCounter currentString={altText} maxLength={altLimit} />
</div>
{!hideTip && (
<Details
@@ -130,7 +139,7 @@ export const ImageAltTextField: FC<{
>
<FormattedMessage
id='account_edit.image_alt_modal.details_content'
defaultMessage='DO: <ul> <li>Describe yourself as pictured</li> <li>Use third person language (e.g. “Alex” instead of “me”)</li> <li>Be succinct – a few words is often enough</li> </ul> DON’T: <ul> <li>Start with “Photo of” – it’s redundant for screen readers</li> </ul> EXAMPLE: <ul> <li>“Alex wearing a green shirt and glasses”</li> </ul>'
defaultMessage='DO: <ul> <li>Describe yourself as pictured</li> <li>Use third person language (e.g. “Alex” instead of “me”)</li> <li>Be succinct – a few words is often enough</li> </ul> DON’T: <ul> <li>Start with “Photo of” – it’s redundant for screen readers</li> </ul> EXAMPLE: <ul> <li>“Alex wearing a green shirt and glasses”</li></ul>'
values={{
ul: (chunks) => <ul>{chunks}</ul>,
li: (chunks) => <li>{chunks}</li>,
app/javascript/mastodon/features/account_edit/modals/styles.module.scss
+1 -1
View File
@@ -58,7 +58,7 @@
transition: background 0.2s ease-in-out;
&:hover {
background: var(--color-bg-brand-softer);
background: var(--color-bg-brand-softest);
}
&:focus-visible {
app/javascript/mastodon/features/account_edit/styles.module.scss
+3 -3
View File
@@ -160,7 +160,7 @@
&:active,
&:focus,
&:hover {
background-color: var(--color-bg-brand-softer);
background-color: var(--color-bg-brand-softest);
}
&:disabled {
@@ -177,7 +177,7 @@
.deleteButton {
--default-icon-color: var(--color-text-error);
--hover-bg-color: var(--color-bg-error-base-hover);
--hover-bg-color: var(--color-bg-error-base);
--hover-icon-color: var(--color-text-on-error-base);
}
@@ -201,7 +201,7 @@
&,
&:global(.active) {
// Overrides the transparent background added by default with .active
--hover-bg-color: var(--color-bg-brand-softer-solid);
--hover-bg-color: var(--color-bg-brand-softest);
}
position: absolute;
app/javascript/mastodon/features/account_timeline/components/redesign.module.scss
+6 -6
View File
@@ -93,7 +93,7 @@
}
svg {
background: var(--color-bg-brand-softer);
background: var(--color-bg-brand-softest);
width: 28px;
height: 28px;
padding: 5px;
@@ -184,7 +184,7 @@ $button-fallback-breakpoint: $button-breakpoint + 55px;
.badgeMuted {
background-color: var(--color-bg-inverted);
color: var(--color-text-on-inverted);
color: var(--color-text-inverted);
}
.badgeBlocked {
@@ -270,7 +270,7 @@ svg.badgeIcon {
}
.fieldVerified {
background-color: var(--color-bg-success-softer);
background-color: var(--color-bg-success-softest);
dt {
padding-right: 24px;
@@ -292,8 +292,8 @@ svg.badgeIcon {
}
.fieldOverflowButton {
--default-bg-color: var(--color-bg-secondary-solid);
--hover-bg-color: var(--color-bg-brand-softer-solid);
--default-bg-color: var(--color-bg-secondary);
--hover-bg-color: var(--color-bg-brand-softest);
position: absolute;
right: 8px;
@@ -413,7 +413,7 @@ svg.badgeIcon {
:global(.active) {
color: var(--color-text-brand);
border-bottom: 4px solid var(--color-text-brand);
border-bottom: 4px solid var(--color-border-brand);
padding-bottom: 14px;
}
}
app/javascript/mastodon/features/alt_text_modal/components/info_button.tsx
+1
View File
@@ -59,6 +59,7 @@ export const InfoButton: React.FC = () => {
>
<FormattedMessage
id='info_button.what_is_alt_text'
// eslint-disable-next-line formatjs/prefer-full-sentence
defaultMessage='<h1>What is alt text?</h1>
<p>Alt text provides image descriptions for people with vision impairments, low-bandwidth connections, or those seeking extra context.</p>
app/javascript/mastodon/features/blocks/index.jsx
+2 -1
View File
@@ -1,6 +1,6 @@
import PropTypes from 'prop-types';
import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
import { defineMessages, FormattedMessage } from 'react-intl';
import ImmutablePropTypes from 'react-immutable-proptypes';
import ImmutablePureComponent from 'react-immutable-pure-component';
@@ -8,6 +8,7 @@ import { connect } from 'react-redux';
import { debounce } from 'lodash';
import { injectIntl } from '@/mastodon/components/intl';
import BlockIcon from '@/material-icons/400-24px/block-fill.svg?react';
import { Account } from 'mastodon/components/account';
app/javascript/mastodon/features/collections/detail/accounts_list.tsx
+1 -6
View File
@@ -1,4 +1,4 @@
import { Fragment, useCallback, useRef, useState } from 'react';
import { useCallback, useRef, useState } from 'react';
import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
@@ -100,14 +100,12 @@ const RevokeControls: React.FC<{
<FormattedMessage
id='collections.detail.accept_inclusion'
defaultMessage='Okay'
tagName={Fragment}
/>
</Button>
<Button secondary onClick={confirmRevoke}>
<FormattedMessage
id='collections.detail.revoke_inclusion'
defaultMessage='Remove me'
tagName={Fragment}
/>
</Button>
</div>
@@ -143,7 +141,6 @@ const SensitiveScreen: React.FC<{
<FormattedMessage
id='content_warning.show'
defaultMessage='Show anyway'
tagName={Fragment}
/>
</Button>
</div>
@@ -205,7 +202,6 @@ export const CollectionAccountsList: React.FC<{
values={{
author: <SimpleAuthorName id={collection.account_id} />,
}}
tagName={Fragment}
/>
</h3>
<Article
@@ -231,7 +227,6 @@ export const CollectionAccountsList: React.FC<{
<FormattedMessage
id='collections.detail.other_accounts_in_collection'
defaultMessage='Others in this collection:'
tagName={Fragment}
/>
</h3>
</>
app/javascript/mastodon/features/collections/editor/details.tsx
+1 -2
View File
@@ -1,4 +1,4 @@
import { Fragment, useCallback, useMemo } from 'react';
import { useCallback, useMemo } from 'react';
import { FormattedMessage, useIntl } from 'react-intl';
@@ -413,7 +413,6 @@ const LanguageField: React.FC = () => {
<FormattedMessage
id='collections.collection_language_none'
defaultMessage='None'
tagName={Fragment}
/>
</option>
{languages?.map(([code, name, localName]) => (
app/javascript/mastodon/features/community_timeline/components/column_settings.jsx
+3 -1
View File
@@ -1,10 +1,12 @@
import PropTypes from 'prop-types';
import { PureComponent } from 'react';
import { injectIntl, FormattedMessage } from 'react-intl';
import { FormattedMessage } from 'react-intl';
import ImmutablePropTypes from 'react-immutable-proptypes';
import { injectIntl } from '@/mastodon/components/intl';
import SettingToggle from '../../notifications/components/setting_toggle';
class ColumnSettings extends PureComponent {
app/javascript/mastodon/features/community_timeline/index.jsx
+2 -1
View File
@@ -1,13 +1,14 @@
import PropTypes from 'prop-types';
import { PureComponent } from 'react';
import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
import { defineMessages, FormattedMessage } from 'react-intl';
import { Helmet } from 'react-helmet';
import { connect } from 'react-redux';
import PeopleIcon from '@/material-icons/400-24px/group.svg?react';
import { injectIntl } from '@/mastodon/components/intl';
import { DismissableBanner } from 'mastodon/components/dismissable_banner';
import { identityContextPropShape, withIdentity } from 'mastodon/identity_context';
import { domain, localLiveFeedAccess } from 'mastodon/initial_state';
app/javascript/mastodon/features/compose/components/compose_form.jsx
+2 -1
View File
@@ -1,7 +1,7 @@
import PropTypes from 'prop-types';
import { createRef } from 'react';
import { defineMessages, injectIntl } from 'react-intl';
import { defineMessages } from 'react-intl';
import classNames from 'classnames';
@@ -15,6 +15,7 @@ import { missingAltTextModal } from 'mastodon/initial_state';
import AutosuggestInput from 'mastodon/components/autosuggest_input';
import AutosuggestTextarea from 'mastodon/components/autosuggest_textarea';
import { Button } from 'mastodon/components/button';
import { injectIntl } from '@/mastodon/components/intl';
import EmojiPickerDropdown from '../containers/emoji_picker_dropdown_container';
import PollButtonContainer from '../containers/poll_button_container';
import SpoilerButtonContainer from '../containers/spoiler_button_container';
app/javascript/mastodon/features/compose/components/emoji_picker_dropdown.jsx
+2 -1
View File
@@ -1,7 +1,7 @@
import PropTypes from 'prop-types';
import { PureComponent } from 'react';
import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
import { defineMessages, FormattedMessage } from 'react-intl';
import classNames from 'classnames';
@@ -12,6 +12,7 @@ import Overlay from 'react-overlays/Overlay';
import MoodIcon from '@/material-icons/400-20px/mood.svg?react';
import { IconButton } from 'mastodon/components/icon_button';
import { injectIntl } from '@/mastodon/components/intl';
import { buildCustomEmojis, categoriesFromEmojis } from '../../emoji/emoji';
import { EmojiPicker as EmojiPickerAsync } from '../../ui/util/async-components';
app/javascript/mastodon/features/compose/components/poll_button.jsx
+2 -1
View File
@@ -1,9 +1,10 @@
import PropTypes from 'prop-types';
import { PureComponent } from 'react';
import { defineMessages, injectIntl } from 'react-intl';
import { defineMessages } from 'react-intl';
import BarChart4BarsIcon from '@/material-icons/400-20px/bar_chart_4_bars.svg?react';
import { injectIntl } from '@/mastodon/components/intl';
import { IconButton } from '../../../components/icon_button';
app/javascript/mastodon/features/compose/components/upload_button.jsx
+2 -1
View File
@@ -1,12 +1,13 @@
import PropTypes from 'prop-types';
import { defineMessages, injectIntl } from 'react-intl';
import { defineMessages } from 'react-intl';
import ImmutablePropTypes from 'react-immutable-proptypes';
import ImmutablePureComponent from 'react-immutable-pure-component';
import { connect } from 'react-redux';
import PhotoLibraryIcon from '@/material-icons/400-20px/photo_library.svg?react';
import { injectIntl } from '@/mastodon/components/intl';
import { IconButton } from 'mastodon/components/icon_button';
const messages = defineMessages({
app/javascript/mastodon/features/compose/containers/spoiler_button_container.js
+2 -1
View File
@@ -1,8 +1,9 @@
import { injectIntl, defineMessages } from 'react-intl';
import { defineMessages } from 'react-intl';
import { connect } from 'react-redux';
import WarningIcon from '@/material-icons/400-20px/warning.svg?react';
import { injectIntl } from '@/mastodon/components/intl';
import { IconButton } from 'mastodon/components/icon_button';
import { changeComposeSpoilerness } from '../../../actions/compose';
app/javascript/mastodon/features/favourites/index.jsx
+2 -1
View File
@@ -1,6 +1,6 @@
import PropTypes from 'prop-types';
import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
import { defineMessages, FormattedMessage } from 'react-intl';
import { Helmet } from 'react-helmet';
@@ -15,6 +15,7 @@ import { fetchFavourites, expandFavourites } from 'mastodon/actions/interactions
import { Account } from 'mastodon/components/account';
import ColumnHeader from 'mastodon/components/column_header';
import { Icon } from 'mastodon/components/icon';
import { injectIntl } from '@/mastodon/components/intl';
import { LoadingIndicator } from 'mastodon/components/loading_indicator';
import ScrollableList from 'mastodon/components/scrollable_list';
import Column from 'mastodon/features/ui/components/column';
app/javascript/mastodon/features/filters/select_filter.jsx
+2 -1
View File
@@ -1,7 +1,7 @@
import PropTypes from 'prop-types';
import { PureComponent } from 'react';
import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
import { defineMessages, FormattedMessage } from 'react-intl';
import { connect } from 'react-redux';
@@ -9,6 +9,7 @@ import fuzzysort from 'fuzzysort';
import AddIcon from '@/material-icons/400-24px/add.svg?react';
import { Icon } from 'mastodon/components/icon';
import { injectIntl } from '@/mastodon/components/intl';
import { toServerSideType } from 'mastodon/utils/filters';
import { loupeIcon, deleteIcon } from 'mastodon/utils/icons';
app/javascript/mastodon/features/follow_requests/components/account_authorize.jsx
+2 -1
View File
@@ -1,6 +1,6 @@
import PropTypes from 'prop-types';
import { defineMessages, injectIntl } from 'react-intl';
import { defineMessages } from 'react-intl';
import { Link } from 'react-router-dom';
@@ -13,6 +13,7 @@ import CloseIcon from '@/material-icons/400-24px/close.svg?react';
import { Avatar } from '@/mastodon/components/avatar';
import { DisplayName } from '@/mastodon/components/display_name';
import { IconButton } from '@/mastodon/components/icon_button';
import { injectIntl } from '@/mastodon/components/intl';
import { EmojiHTML } from '@/mastodon/components/emoji/html';
const messages = defineMessages({
app/javascript/mastodon/features/follow_requests/index.jsx
+2 -1
View File
@@ -1,6 +1,6 @@
import PropTypes from 'prop-types';
import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
import { defineMessages, FormattedMessage } from 'react-intl';
import { Helmet } from 'react-helmet';
@@ -11,6 +11,7 @@ import { connect } from 'react-redux';
import { debounce } from 'lodash';
import PersonAddIcon from '@/material-icons/400-24px/person_add.svg?react';
import { injectIntl } from '@/mastodon/components/intl';
import { fetchFollowRequests, expandFollowRequests } from '../../actions/accounts';
import ScrollableList from '../../components/scrollable_list';
app/javascript/mastodon/features/hashtag_timeline/components/column_settings.jsx
+3 -1
View File
@@ -1,7 +1,7 @@
import PropTypes from 'prop-types';
import { PureComponent } from 'react';
import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
import { defineMessages, FormattedMessage } from 'react-intl';
import ImmutablePropTypes from 'react-immutable-proptypes';
@@ -9,6 +9,8 @@ import { NonceProvider } from 'react-select';
import AsyncSelect from 'react-select/async';
import Toggle from 'react-toggle';
import { injectIntl } from '@/mastodon/components/intl';
import SettingToggle from '../../notifications/components/setting_toggle';
const messages = defineMessages({
app/javascript/mastodon/features/home_timeline/index.jsx
+2 -1
View File
@@ -1,7 +1,7 @@
import PropTypes from 'prop-types';
import { PureComponent } from 'react';
import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
import { defineMessages, FormattedMessage } from 'react-intl';
import classNames from 'classnames';
import { Helmet } from 'react-helmet';
@@ -10,6 +10,7 @@ import { connect } from 'react-redux';
import CampaignIcon from '@/material-icons/400-24px/campaign.svg?react';
import HomeIcon from '@/material-icons/400-24px/home-fill.svg?react';
import { injectIntl } from '@/mastodon/components/intl';
import { SymbolLogo } from 'mastodon/components/logo';
import { fetchAnnouncements, toggleShowAnnouncements } from 'mastodon/actions/announcements';
import { IconWithBadge } from 'mastodon/components/icon_with_badge';
app/javascript/mastodon/features/keyboard_shortcuts/index.jsx
+2 -1
View File
@@ -1,6 +1,6 @@
import PropTypes from 'prop-types';
import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
import { defineMessages, FormattedMessage } from 'react-intl';
import { Helmet } from 'react-helmet';
@@ -9,6 +9,7 @@ import ImmutablePureComponent from 'react-immutable-pure-component';
import InfoIcon from '@/material-icons/400-24px/info.svg?react';
import Column from 'mastodon/components/column';
import ColumnHeader from 'mastodon/components/column_header';
import { injectIntl } from '@/mastodon/components/intl';
const messages = defineMessages({
heading: { id: 'keyboard_shortcuts.heading', defaultMessage: 'Keyboard Shortcuts' },
app/javascript/mastodon/features/mutes/index.jsx
+2 -1
View File
@@ -1,6 +1,6 @@
import PropTypes from 'prop-types';
import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
import { defineMessages, FormattedMessage } from 'react-intl';
import { Helmet } from 'react-helmet';
@@ -12,6 +12,7 @@ import { debounce } from 'lodash';
import VolumeOffIcon from '@/material-icons/400-24px/volume_off.svg?react';
import { Account } from 'mastodon/components/account';
import { injectIntl } from '@/mastodon/components/intl';
import { fetchMutes, expandMutes } from '../../actions/mutes';
import { LoadingIndicator } from '../../components/loading_indicator';
app/javascript/mastodon/features/notifications/components/follow_request.jsx
+2 -1
View File
@@ -1,6 +1,6 @@
import PropTypes from 'prop-types';
import { defineMessages, injectIntl } from 'react-intl';
import { defineMessages } from 'react-intl';
import { Link } from 'react-router-dom';
@@ -12,6 +12,7 @@ import CloseIcon from '@/material-icons/400-24px/close.svg?react';
import { Avatar } from 'mastodon/components/avatar';
import { DisplayName } from 'mastodon/components/display_name';
import { IconButton } from 'mastodon/components/icon_button';
import { injectIntl } from '@/mastodon/components/intl';
const messages = defineMessages({
authorize: { id: 'follow_request.authorize', defaultMessage: 'Authorize' },
app/javascript/mastodon/features/notifications/components/notification.jsx
+2 -1
View File
@@ -1,6 +1,6 @@
import PropTypes from 'prop-types';
import { injectIntl, FormattedMessage, defineMessages } from 'react-intl';
import { FormattedMessage, defineMessages } from 'react-intl';
import classNames from 'classnames';
import { Link, withRouter } from 'react-router-dom';
@@ -20,6 +20,7 @@ import StarIcon from '@/material-icons/400-24px/star-fill.svg?react';
import { Account } from 'mastodon/components/account';
import { LinkedDisplayName } from '@/mastodon/components/display_name';
import { Icon } from 'mastodon/components/icon';
import { injectIntl } from '@/mastodon/components/intl';
import { Hotkeys } from 'mastodon/components/hotkeys';
import { StatusQuoteManager } from 'mastodon/components/status_quoted';
import { me } from 'mastodon/initial_state';
app/javascript/mastodon/features/notifications/components/report.jsx
+2 -1
View File
@@ -1,11 +1,12 @@
import PropTypes from 'prop-types';
import { defineMessages, FormattedMessage, injectIntl } from 'react-intl';
import { defineMessages, FormattedMessage } from 'react-intl';
import ImmutablePropTypes from 'react-immutable-proptypes';
import ImmutablePureComponent from 'react-immutable-pure-component';
import { AvatarOverlay } from 'mastodon/components/avatar_overlay';
import { injectIntl } from '@/mastodon/components/intl';
import { RelativeTimestamp } from 'mastodon/components/relative_timestamp';
// This needs to be kept in sync with app/models/report.rb
app/javascript/mastodon/features/notifications/containers/column_settings_container.js
+2 -1
View File
@@ -1,9 +1,10 @@
import { defineMessages, injectIntl } from 'react-intl';
import { defineMessages } from 'react-intl';
import { connect } from 'react-redux';
import { openModal } from 'mastodon/actions/modal';
import { fetchNotifications , setNotificationsFilter } from 'mastodon/actions/notification_groups';
import { injectIntl } from '@/mastodon/components/intl';
import { showAlert } from '../../../actions/alerts';
import { requestBrowserPermission } from '../../../actions/notifications';
app/javascript/mastodon/features/pinned_statuses/index.jsx
+2 -1
View File
@@ -1,6 +1,6 @@
import PropTypes from 'prop-types';
import { defineMessages, injectIntl } from 'react-intl';
import { defineMessages } from 'react-intl';
import { Helmet } from 'react-helmet';
@@ -9,6 +9,7 @@ import ImmutablePureComponent from 'react-immutable-pure-component';
import { connect } from 'react-redux';
import PushPinIcon from '@/material-icons/400-24px/push_pin.svg?react';
import { injectIntl } from '@/mastodon/components/intl';
import { getStatusList } from 'mastodon/selectors';
import { fetchPinnedStatuses } from '../../actions/pin_statuses';
app/javascript/mastodon/features/public_timeline/components/column_settings.jsx
+3 -1
View File
@@ -1,10 +1,12 @@
import PropTypes from 'prop-types';
import { PureComponent } from 'react';
import { injectIntl, FormattedMessage } from 'react-intl';
import { FormattedMessage } from 'react-intl';
import ImmutablePropTypes from 'react-immutable-proptypes';
import { injectIntl } from '@/mastodon/components/intl';
import SettingToggle from '../../notifications/components/setting_toggle';
class ColumnSettings extends PureComponent {
app/javascript/mastodon/features/public_timeline/index.jsx
+2 -1
View File
@@ -1,7 +1,7 @@
import PropTypes from 'prop-types';
import { PureComponent } from 'react';
import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
import { defineMessages, FormattedMessage } from 'react-intl';
import { Helmet } from 'react-helmet';
@@ -9,6 +9,7 @@ import { connect } from 'react-redux';
import PublicIcon from '@/material-icons/400-24px/public.svg?react';
import { DismissableBanner } from 'mastodon/components/dismissable_banner';
import { injectIntl } from '@/mastodon/components/intl';
import { identityContextPropShape, withIdentity } from 'mastodon/identity_context';
import { domain, localLiveFeedAccess, remoteLiveFeedAccess } from 'mastodon/initial_state';
import { canViewFeed } from 'mastodon/permissions';
app/javascript/mastodon/features/reblogs/index.jsx
+2 -1
View File
@@ -1,6 +1,6 @@
import PropTypes from 'prop-types';
import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
import { defineMessages, FormattedMessage } from 'react-intl';
import { Helmet } from 'react-helmet';
@@ -13,6 +13,7 @@ import { debounce } from 'lodash';
import RefreshIcon from '@/material-icons/400-24px/refresh.svg?react';
import { Account } from 'mastodon/components/account';
import { Icon } from 'mastodon/components/icon';
import { injectIntl } from '@/mastodon/components/intl';
import { fetchReblogs, expandReblogs } from '../../actions/interactions';
import ColumnHeader from '../../components/column_header';
app/javascript/mastodon/features/report/category.jsx
+2 -1
View File
@@ -1,13 +1,14 @@
import PropTypes from 'prop-types';
import { PureComponent } from 'react';
import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
import { defineMessages, FormattedMessage } from 'react-intl';
import { List as ImmutableList } from 'immutable';
import ImmutablePropTypes from 'react-immutable-proptypes';
import { connect } from 'react-redux';
import { Button } from 'mastodon/components/button';
import { injectIntl } from '@/mastodon/components/intl';
import Option from './components/option';
app/javascript/mastodon/features/status/components/action_bar.jsx
+2 -1
View File
@@ -1,7 +1,7 @@
import PropTypes from 'prop-types';
import { PureComponent } from 'react';
import { defineMessages, injectIntl } from 'react-intl';
import { defineMessages } from 'react-intl';
import ImmutablePropTypes from 'react-immutable-proptypes';
import { connect } from 'react-redux';
@@ -13,6 +13,7 @@ import ReplyIcon from '@/material-icons/400-24px/reply.svg?react';
import ReplyAllIcon from '@/material-icons/400-24px/reply_all.svg?react';
import StarIcon from '@/material-icons/400-24px/star-fill.svg?react';
import StarBorderIcon from '@/material-icons/400-24px/star.svg?react';
import { injectIntl } from '@/mastodon/components/intl';
import { identityContextPropShape, withIdentity } from 'mastodon/identity_context';
import { PERMISSION_MANAGE_USERS, PERMISSION_MANAGE_FEDERATION } from 'mastodon/permissions';
app/javascript/mastodon/features/status/index.jsx
+2 -1
View File
@@ -1,6 +1,6 @@
import PropTypes from 'prop-types';
import { defineMessages, injectIntl } from 'react-intl';
import { defineMessages } from 'react-intl';
import classNames from 'classnames';
import { Helmet } from 'react-helmet';
@@ -15,6 +15,7 @@ import VisibilityIcon from '@/material-icons/400-24px/visibility.svg?react';
import VisibilityOffIcon from '@/material-icons/400-24px/visibility_off.svg?react';
import { Hotkeys } from 'mastodon/components/hotkeys';
import { Icon } from 'mastodon/components/icon';
import { injectIntl } from '@/mastodon/components/intl';
import { LoadingIndicator } from 'mastodon/components/loading_indicator';
import { ScrollContainer } from 'mastodon/containers/scroll_container';
import BundleColumnError from 'mastodon/features/ui/components/bundle_column_error';
app/javascript/mastodon/features/subscribed_languages_modal/index.jsx
+2 -1
View File
@@ -1,6 +1,6 @@
import PropTypes from 'prop-types';
import { defineMessages, FormattedMessage, injectIntl } from 'react-intl';
import { defineMessages, FormattedMessage } from 'react-intl';
import { createSelector } from '@reduxjs/toolkit';
import { is, List as ImmutableList, Set as ImmutableSet } from 'immutable';
@@ -12,6 +12,7 @@ import CloseIcon from '@/material-icons/400-24px/close.svg?react';
import { followAccount } from 'mastodon/actions/accounts';
import { Button } from 'mastodon/components/button';
import { IconButton } from 'mastodon/components/icon_button';
import { injectIntl } from '@/mastodon/components/intl';
import Option from 'mastodon/features/report/components/option';
import { languages as preloadedLanguages } from 'mastodon/initial_state';
app/javascript/mastodon/features/ui/components/bundle_column_error.jsx
+2 -1
View File
@@ -1,7 +1,7 @@
import PropTypes from 'prop-types';
import { PureComponent } from 'react';
import { injectIntl, FormattedMessage } from 'react-intl';
import { FormattedMessage } from 'react-intl';
import classNames from 'classnames';
import { Helmet } from 'react-helmet';
@@ -9,6 +9,7 @@ import { Link } from 'react-router-dom';
import { Button } from 'mastodon/components/button';
import Column from 'mastodon/components/column';
import { injectIntl } from '@/mastodon/components/intl';
import { GIF } from 'mastodon/components/gif';
class CopyButton extends PureComponent {
app/javascript/mastodon/features/ui/components/filter_modal.jsx
+2 -1
View File
@@ -1,6 +1,6 @@
import PropTypes from 'prop-types';
import { defineMessages, FormattedMessage, injectIntl } from 'react-intl';
import { defineMessages, FormattedMessage } from 'react-intl';
import ImmutablePureComponent from 'react-immutable-pure-component';
import { connect } from 'react-redux';
@@ -9,6 +9,7 @@ import CloseIcon from '@/material-icons/400-24px/close.svg?react';
import { fetchFilters, createFilter, createFilterStatus } from 'mastodon/actions/filters';
import { fetchStatus } from 'mastodon/actions/statuses';
import { IconButton } from 'mastodon/components/icon_button';
import { injectIntl } from '@/mastodon/components/intl';
import AddedToFilter from 'mastodon/features/filters/added_to_filter';
import SelectFilter from 'mastodon/features/filters/select_filter';
app/javascript/mastodon/features/ui/components/report_modal.jsx
+2 -1
View File
@@ -1,6 +1,6 @@
import PropTypes from 'prop-types';
import { defineMessages, FormattedMessage, injectIntl } from 'react-intl';
import { defineMessages, FormattedMessage } from 'react-intl';
import { OrderedSet } from 'immutable';
import ImmutablePropTypes from 'react-immutable-proptypes';
@@ -12,6 +12,7 @@ import { submitReport } from 'mastodon/actions/reports';
import { fetchServer } from 'mastodon/actions/server';
import { expandAccountTimeline } from 'mastodon/actions/timelines';
import { IconButton } from 'mastodon/components/icon_button';
import { injectIntl } from '@/mastodon/components/intl';
import Category from 'mastodon/features/report/category';
import Comment from 'mastodon/features/report/comment';
import Rules from 'mastodon/features/report/rules';
app/javascript/mastodon/features/ui/components/skip_links/skip_links.module.scss
+1 -1
View File
@@ -33,7 +33,7 @@
&:focus-within {
outline: var(--outline-focus-default);
background: var(--color-bg-brand-softer);
background: var(--color-bg-brand-softest);
}
:any-link {
app/javascript/mastodon/features/ui/index.jsx
+2 -1
View File
@@ -1,7 +1,7 @@
import PropTypes from 'prop-types';
import { PureComponent } from 'react';
import { defineMessages, injectIntl } from 'react-intl';
import { defineMessages } from 'react-intl';
import classNames from 'classnames';
import { Redirect, Route, withRouter } from 'react-router-dom';
@@ -16,6 +16,7 @@ import { synchronouslySubmitMarkers, submitMarkers, fetchMarkers } from 'mastodo
import { fetchNotifications } from 'mastodon/actions/notification_groups';
import { INTRODUCTION_VERSION } from 'mastodon/actions/onboarding';
import { AlertsController } from 'mastodon/components/alerts_controller';
import { injectIntl } from '@/mastodon/components/intl';
import { Hotkeys } from 'mastodon/components/hotkeys';
import { HoverCardController } from 'mastodon/components/hover_card_controller';
import { PictureInPicture } from 'mastodon/features/picture_in_picture';
app/javascript/mastodon/locales/intl_provider.tsx
-1
View File
@@ -50,7 +50,6 @@ export const IntlProvider: React.FC<
locale={locale}
messages={messages}
onError={onProviderError}
textComponent='span'
{...props}
>
{children}
app/javascript/mastodon/polyfills/intl.ts
+2 -2
View File
@@ -1,6 +1,6 @@
// import { shouldPolyfill as shouldPolyfillCanonicalLocales } from '@formatjs/intl-getcanonicallocales/should-polyfill';
// import { shouldPolyfill as shouldPolyfillLocale } from '@formatjs/intl-locale/should-polyfill';
import { shouldPolyfill as shoudPolyfillPluralRules } from '@formatjs/intl-pluralrules/should-polyfill';
import { shouldPolyfill as shoudPolyfillPluralRules } from '@formatjs/intl-pluralrules/should-polyfill.js';
// import { shouldPolyfill as shouldPolyfillNumberFormat } from '@formatjs/intl-numberformat/should-polyfill';
// import { shouldPolyfill as shouldPolyfillIntlDateTimeFormat } from '@formatjs/intl-datetimeformat/should-polyfill';
// import { shouldPolyfill as shouldPolyfillIntlRelativeTimeFormat } from '@formatjs/intl-relativetimeformat/should-polyfill';
@@ -54,7 +54,7 @@ async function loadIntlPluralRulesPolyfills(locale: string) {
return;
}
// Load the polyfill 1st BEFORE loading data
await import('@formatjs/intl-pluralrules/polyfill-force');
await import('@formatjs/intl-pluralrules/polyfill-force.js');
await import(
`../../../../node_modules/@formatjs/intl-pluralrules/locale-data/${unsupportedLocale}.js`
);
app/javascript/styles/entrypoints/mailer.scss
+46
View File
@@ -721,6 +721,52 @@ table + p {
line-height: 24px;
}
// Banner item
.email-banner-table {
border-radius: 12px;
background-color: #1b001f;
background-image: url('../../images/mailer-new/common/header-bg-start.png');
background-position: left top;
background-repeat: repeat;
}
.email-banner-td {
padding: 24px 24px 14px;
}
.email-banner-text-td {
p {
margin: 0 0 12px;
color: #fff;
font-size: 14px;
font-weight: 600;
line-height: 16.8px;
}
.email-desktop-flex {
align-items: center;
}
.email-btn-table {
background-color: #fff;
}
.email-btn-td {
mso-padding-alt: 10px;
}
.email-btn-a {
color: #181820;
padding-left: 10px;
padding-right: 10px;
}
div + div {
margin-inline-start: auto;
margin-bottom: 12px;
}
}
// Checklist item
.email-checklist-wrapper-td {
padding: 4px 0;
app/javascript/styles/mastodon/_mixins.scss
+1 -1
View File
@@ -7,7 +7,7 @@
background: var(--color-bg-secondary);
color: var(--color-text-primary);
border-radius: 4px;
border: 1px solid var(--color-border-on-bg-secondary);
border: 1px solid var(--color-border-primary);
font-size: 17px;
line-height: normal;
margin: 0;
app/javascript/styles/mastodon/accounts.scss
+8 -8
View File
@@ -13,7 +13,7 @@
&:active,
&:focus {
.card__bar {
background: var(--color-bg-brand-softer);
background: var(--color-bg-brand-softest);
}
}
}
@@ -220,8 +220,8 @@
.information-badge {
&.superapp {
color: var(--color-text-success);
background-color: var(--color-bg-success-softer);
border-color: var(--color-border-on-bg-success-softer);
background-color: var(--color-bg-success-softest);
border-color: var(--color-border-success-soft);
}
}
@@ -229,7 +229,7 @@
display: inline-flex;
padding: 4px;
padding-inline-end: 8px;
border: 1px solid var(--color-text-brand);
border: 1px solid var(--color-border-brand);
color: var(--color-text-brand);
font-weight: 500;
font-size: 12px;
@@ -255,8 +255,8 @@
.simple_form .not_recommended {
color: var(--color-text-error);
background-color: var(--color-bg-error-softer);
border-color: var(--color-border-on-bg-error-softer);
background-color: var(--color-bg-error-softest);
border-color: var(--color-border-error-soft);
}
.account__header__fields {
@@ -310,8 +310,8 @@
}
.verified {
border: 1px solid var(--color-border-on-bg-success-softer);
background: var(--color-bg-success-softer);
border: 1px solid var(--color-border-success-soft);
background: var(--color-bg-success-softest);
a {
color: var(--color-text-success);
app/javascript/styles/mastodon/admin.scss
+10 -10
View File
@@ -68,7 +68,7 @@ $content-width: 840px;
border-radius: 4px;
&:focus {
background: var(--color-bg-brand-softer);
background: var(--color-bg-brand-softest);
}
.material-close {
@@ -438,7 +438,7 @@ $content-width: 840px;
}
ul .simple-navigation-active-leaf a {
border-bottom-color: var(--color-text-brand);
border-bottom-color: var(--color-border-brand);
}
}
}
@@ -499,7 +499,7 @@ body,
kbd {
font-family: Courier, monospace;
background-color: var(--color-bg-brand-softer);
background-color: var(--color-bg-brand-softest);
padding: 4px;
padding-bottom: 2px;
border-radius: 5px;
@@ -566,7 +566,7 @@ kbd {
&.selected {
color: var(--color-text-brand);
border-bottom: 2px solid var(--color-text-brand);
border-bottom: 2px solid var(--color-border-brand);
}
}
}
@@ -845,14 +845,14 @@ a.name-tag,
.speech-bubble {
margin-bottom: 20px;
border-inline-start: 4px solid var(--color-text-brand);
border-inline-start: 4px solid var(--color-border-brand);
&.positive {
border-color: var(--color-text-success);
}
&.negative {
border-color: var(--color-text-error);
border-color: var(--color-border-error);
}
&.warning {
@@ -1314,7 +1314,7 @@ a.sparkline {
&:hover,
&:focus,
&:active {
background: var(--color-bg-brand-softer);
background: var(--color-bg-brand-softest);
}
}
@@ -1938,7 +1938,7 @@ a.sparkline {
width: calc(1.375rem + 1px);
height: calc(1.375rem + 1px);
background: var(--color-bg-primary);
border: 1px solid var(--color-text-brand);
border: 1px solid var(--color-border-brand);
color: var(--color-text-brand);
border-radius: 8px;
}
@@ -2022,8 +2022,8 @@ a.sparkline {
display: block;
box-sizing: border-box;
color: var(--color-text-primary);
background: var(--color-bg-brand-softer);
border: 1px solid var(--color-border-on-bg-brand-softer);
background: var(--color-bg-brand-softest);
border: 1px solid var(--color-border-brand-soft);
border-radius: 8px;
padding: 8px 13px;
position: relative;
app/javascript/styles/mastodon/basics.scss
+3 -3
View File
@@ -2,13 +2,13 @@
html {
color: var(--color-text-primary);
background: var(--color-bg-ambient);
background: var(--color-bg-primary);
&.custom-scrollbars {
scrollbar-color: var(--color-text-secondary) var(--color-bg-secondary);
}
--outline-focus-default: 2px solid var(--color-text-brand);
--outline-focus-default: 2px solid var(--color-border-brand);
--avatar-border-radius: 8px;
--max-media-height-small: 460px;
--max-media-height-large: 566px;
@@ -46,7 +46,7 @@ html.has-modal {
body {
font-family: $font-sans-serif, sans-serif;
background: var(--color-bg-ambient);
background: var(--color-bg-primary);
font-size: 13px;
line-height: 18px;
font-weight: 400;
app/javascript/styles/mastodon/components.scss
+80 -82
View File
@@ -114,7 +114,7 @@
}
&:focus-visible {
outline: 2px solid var(--color-bg-brand-base);
outline: var(--outline-focus-default);
outline-offset: 2px;
}
@@ -169,12 +169,12 @@
color: var(--color-text-brand);
background: transparent;
padding: 6px 17px;
border: 1px solid var(--color-text-brand);
border: 1px solid var(--color-border-brand);
&:active,
&:focus,
&:hover {
border-color: var(--color-text-brand);
border-color: var(--color-border-brand);
color: var(--color-text-brand);
background-color: transparent;
text-decoration: none;
@@ -184,7 +184,7 @@
&:active,
&:focus,
&:hover {
border-color: var(--color-text-error);
border-color: var(--color-border-error);
color: var(--color-text-error);
}
}
@@ -284,8 +284,8 @@
--default-icon-color: var(--color-text-secondary);
--default-bg-color: transparent;
--hover-icon-color: var(--color-text-primary);
--hover-bg-color: var(--color-bg-brand-softer);
--focus-outline-color: var(--color-text-brand);
--hover-bg-color: var(--color-bg-brand-softest);
--focus-outline-color: var(--color-border-brand);
display: inline-flex;
color: var(--default-icon-color);
@@ -364,8 +364,8 @@
&.copied {
color: var(--color-text-success);
transition: none;
background-color: var(--color-bg-success-softer);
border-color: var(--color-border-on-bg-brand-softer);
background-color: var(--color-bg-success-softest);
border-color: var(--color-border-success-soft);
}
}
@@ -537,21 +537,21 @@ body > [data-popper-placement] {
flex-direction: column;
flex: 0 1 auto;
border-radius: 4px;
border: 1px solid var(--color-border-on-bg-secondary);
border: 1px solid var(--color-border-primary);
transition: border-color 300ms linear;
position: relative;
background: var(--color-bg-secondary);
&.active {
transition: none;
border-color: var(--color-text-brand);
border-color: var(--color-border-brand);
}
}
&__warning {
color: var(--color-text-primary);
background: var(--color-bg-warning-softer);
border: 1px solid var(--color-border-on-bg-warning-softer);
background: var(--color-bg-warning-softest);
border: 1px solid var(--color-border-warning-soft);
padding: 8px 10px;
border-radius: 4px;
font-size: 13px;
@@ -619,7 +619,7 @@ body > [data-popper-placement] {
.spoiler-input__input {
padding: 12px 12px - 5px;
background: var(--color-bg-brand-softer);
background: var(--color-bg-brand-softest);
color: var(--color-text-brand);
}
@@ -885,7 +885,7 @@ body > [data-popper-placement] {
line-height: 20px;
letter-spacing: 0.1px;
color: var(--color-text-brand);
background-color: var(--color-bg-secondary-solid);
background-color: var(--color-bg-secondary);
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
@@ -917,7 +917,7 @@ body > [data-popper-placement] {
gap: 4px;
color: var(--color-text-brand);
background: transparent;
border: 1px solid var(--color-text-brand);
border: 1px solid var(--color-border-brand);
border-radius: 6px;
padding: 4px 8px;
font-size: 13px;
@@ -1464,9 +1464,9 @@ body > [data-popper-placement] {
.focusable {
&:focus-visible {
outline: 2px solid var(--color-text-brand);
outline: 2px solid var(--color-border-brand);
outline-offset: -2px;
background: var(--color-bg-brand-softer);
background: var(--color-bg-brand-softest);
}
}
@@ -1587,7 +1587,7 @@ body > [data-popper-placement] {
content: '';
position: absolute;
inset: 0;
background: var(--color-bg-brand-softer);
background: var(--color-bg-brand-softest);
opacity: 0;
animation: fade 0.7s reverse both 0.3s;
pointer-events: none;
@@ -1739,7 +1739,7 @@ body > [data-popper-placement] {
.notification-ungrouped--direct,
.notification-group--direct,
.notification-group--annual-report {
background: var(--color-bg-brand-softer);
background: var(--color-bg-brand-softest);
&:focus {
background: var(--color-bg-brand-soft);
@@ -1877,7 +1877,7 @@ body > [data-popper-placement] {
.detailed-status__wrapper-direct {
.detailed-status,
.detailed-status__action-bar {
background: var(--color-bg-brand-softer);
background: var(--color-bg-brand-softest);
}
.status__prepend {
@@ -1932,7 +1932,7 @@ body > [data-popper-placement] {
line-height: 20px;
letter-spacing: 0.25px;
color: var(--color-text-secondary);
background: var(--color-bg-brand-softer);
background: var(--color-bg-brand-softest);
border-radius: 8px;
cursor: default;
}
@@ -2060,7 +2060,7 @@ body > [data-popper-placement] {
&__domain-pill {
display: inline-flex;
background: var(--color-bg-brand-softer);
background: var(--color-bg-brand-softest);
border-radius: 4px;
border: 0;
color: var(--color-text-brand);
@@ -2121,7 +2121,7 @@ body > [data-popper-placement] {
&__handle {
border: 2px dashed var(--color-border-on-brand-softer);
background: var(--color-bg-brand-softer);
background: var(--color-bg-brand-softest);
padding: 12px 8px;
color: var(--color-text-brand);
border-radius: 4px;
@@ -2903,11 +2903,15 @@ a.account__display-name {
&:focus,
&:hover,
&:active {
&:not(:disabled, [aria-disabled='true']) {
background: var(--color-bg-secondary);
&:where(:not(:disabled, [aria-disabled='true'])) {
background: var(--color-bg-brand-softest);
outline: 0;
}
}
&:focus-visible {
outline: var(--outline-focus-default);
}
}
button:disabled,
@@ -3072,7 +3076,7 @@ a.account__display-name {
}
&:focus-visible {
border-top-color: var(--color-text-brand);
border-top-color: var(--color-border-brand);
border-radius: 0;
}
}
@@ -3087,7 +3091,7 @@ a.account__display-name {
border-top: 0;
@media screen and (min-width: $no-gap-breakpoint) {
border-top: 10px solid var(--color-bg-ambient);
border-top: 10px solid var(--color-bg-primary);
}
}
@@ -3586,7 +3590,7 @@ a.account__display-name {
&.focused {
transition: none;
outline: 0;
border-color: var(--color-text-brand);
border-color: var(--color-border-brand);
}
&.copied {
@@ -3986,25 +3990,14 @@ a.account__display-name {
height: 20px;
padding: 0;
border-radius: 10px;
background-color: rgb(from var(--color-bg-brand-softer) r g b / 50%);
border: 1px solid rgb(from var(--color-text-brand) r g b / 50%);
background-color: var(--color-bg-tertiary);
border: 1px solid var(--color-border-primary);
box-sizing: border-box;
.react-toggle:hover:not(.react-toggle--disabled) & {
background-color: rgb(
from var(--color-bg-brand-softer) r g b /
calc(50% + var(--overlay-strength-brand))
);
}
.react-toggle--checked & {
background-color: var(--color-bg-brand-base);
border-color: var(--color-bg-brand-base);
}
.react-toggle--checked:not(.react-toggle--disabled):hover & {
background-color: var(--color-bg-brand-base-hover);
}
}
.react-toggle-track-check,
@@ -4020,6 +4013,7 @@ a.account__display-name {
height: 16px;
border-radius: 50%;
background-color: var(--color-text-on-brand-base);
box-shadow: 0 2px 4px 0 color-mix(var(--color-black), transparent 75%);
box-sizing: border-box;
transition: all 0.25s ease;
transition-property: border-color, left;
@@ -4081,8 +4075,8 @@ a.account__display-name {
&:focus-visible {
outline: none;
border-color: var(--color-text-brand);
background: var(--color-bg-brand-softer);
border-color: var(--color-border-brand);
background: var(--color-bg-brand-softest);
}
&--logo {
@@ -4457,7 +4451,7 @@ a.status-card {
}
&:focus-visible {
outline: 2px solid var(--color-text-brand);
outline: var(--outline-focus-default);
outline-offset: -2px;
}
}
@@ -4545,7 +4539,7 @@ a.status-card {
z-index: 1;
&.active {
box-shadow: 0 1px 0 var(--color-bg-brand-softer);
box-shadow: 0 1px 0 var(--color-bg-brand-softest);
&::before {
display: block;
@@ -4655,7 +4649,7 @@ a.status-card {
&.active {
.column-header__icon {
color: var(--color-text-brand);
text-shadow: 0 0 10px var(--color-bg-brand-softer);
text-shadow: 0 0 10px var(--color-bg-brand-softest);
}
}
@@ -5150,7 +5144,7 @@ a.status-card {
&:hover,
&:active,
&:focus {
background: var(--color-bg-brand-softer);
background: var(--color-bg-brand-softest);
color: color-mix(
in oklab,
var(--color-text-primary),
@@ -5752,7 +5746,7 @@ a.status-card {
.visibility-modal {
&__quote-warning {
color: var(--color-text-primary);
background: var(--color-bg-warning-softer);
background: var(--color-bg-warning-softest);
padding: 16px;
border-radius: 4px;
@@ -5787,7 +5781,7 @@ a.status-card {
display: flex;
align-items: center;
color: var(--color-text-primary);
background: var(--color-bg-secondary-solid);
background: var(--color-bg-secondary);
border: 1px solid var(--color-border-primary);
padding: 8px 12px;
width: 100%;
@@ -5848,7 +5842,8 @@ a.status-card {
.icon-button {
padding: 0;
color: var(--color-text-secondary);
--default-icon-color: inherit;
}
.icon {
@@ -5901,7 +5896,10 @@ a.status-card {
background: var(--color-bg-brand-base);
.icon-button {
color: inherit;
--default-icon-color: inherit;
--default-bg-color: transparent;
--hover-icon-color: inherit;
--hover-bg-color: var(--color-bg-brand-base-hover);
}
}
@@ -6000,7 +5998,7 @@ a.status-card {
}
&:focus-visible {
box-shadow: 0 0 0 2px var(--color-text-brand);
box-shadow: 0 0 0 2px var(--color-border-brand);
}
&[aria-hidden='true'] {
@@ -6254,9 +6252,7 @@ a.status-card {
--default-icon-color: var(--color-text-on-media);
--default-bg-color: transparent;
--hover-icon-color: var(--color-text-on-media);
--hover-bg-color: rgb(
from var(--color-text-on-media) r g b / var(--overlay-strength-brand)
);
--hover-bg-color: rgb(from var(--color-text-on-media) r g b / 10%);
.icon {
filter: var(--overlay-icon-shadow);
@@ -6272,8 +6268,7 @@ a.status-card {
--default-icon-color: var(--color-text-favourite-highlight);
--hover-icon-color: var(--color-text-favourite-highlight);
--hover-bg-color: rgb(
from var(--color-text-favourite-highlight) r g b /
var(--overlay-strength-brand)
from var(--color-text-favourite-highlight) r g b / 10%
);
}
@@ -6918,7 +6913,7 @@ a.status-card {
}
.button.button-secondary {
border-color: var(--color-text-error);
border-color: var(--color-border-error);
color: var(--color-text-error);
flex: 0 0 auto;
@@ -6986,7 +6981,7 @@ a.status-card {
&:hover,
&:active,
&:focus {
background: var(--color-bg-brand-softer);
background: var(--color-bg-brand-softest);
}
}
}
@@ -7431,7 +7426,7 @@ a.status-card {
inset: 2px;
z-index: 1;
border-radius: inherit;
border: 2px solid var(--color-text-on-inverted);
border: 2px solid var(--color-text-inverted);
outline: 2px solid var(--color-bg-inverted);
pointer-events: none;
}
@@ -8150,7 +8145,7 @@ a.status-card {
&.checked,
&.indeterminate {
border-color: var(--color-text-brand);
border-color: var(--color-border-brand);
}
.icon {
@@ -8691,7 +8686,7 @@ noscript {
}
&:focus {
background: var(--color-bg-brand-softer);
background: var(--color-bg-brand-softest);
}
}
}
@@ -8953,7 +8948,7 @@ noscript {
}
&__root {
background: var(--color-bg-brand-softer);
background: var(--color-bg-brand-softest);
font-size: 13px;
display: flex;
align-items: flex-end;
@@ -9037,13 +9032,13 @@ noscript {
&__item {
flex-shrink: 0;
background: var(--color-bg-brand-softer);
background: var(--color-bg-brand-softest);
color: color-mix(
in oklab,
var(--color-text-primary),
var(--color-text-secondary)
);
border: 1px solid var(--color-border-on-bg-brand-softer);
border: 1px solid var(--color-border-brand-soft);
border-radius: 3px;
box-sizing: border-box;
margin: 2px;
@@ -9092,8 +9087,8 @@ noscript {
&.active {
color: var(--color-text-brand);
background-color: var(--color-bg-brand-softer);
border-color: var(--color-text-brand);
background-color: var(--color-bg-brand-softest);
border-color: var(--color-border-brand);
transition: all 100ms ease-in;
transition-property: background-color, color;
}
@@ -9156,7 +9151,7 @@ noscript {
inset-inline-start: 0;
width: 100%;
height: 100%;
border-inline-start: 4px solid var(--color-text-brand);
border-inline-start: 4px solid var(--color-border-brand);
pointer-events: none;
}
}
@@ -9679,7 +9674,7 @@ noscript {
}
&.invalid &__input {
border-color: var(--color-text-error);
border-color: var(--color-border-error);
}
&.expanded .search__popout {
@@ -9950,8 +9945,8 @@ noscript {
margin: 10px;
margin-bottom: 5px;
border-radius: 8px;
border: 1px solid var(--color-border-on-bg-brand-softer);
background: var(--color-bg-brand-softer);
border: 1px solid var(--color-border-brand-soft);
background: var(--color-bg-brand-softest);
overflow: hidden;
flex-shrink: 0;
@@ -10017,8 +10012,8 @@ noscript {
}
.warning-banner {
border: 1px solid var(--color-border-on-bg-error-softer);
background: var(--color-bg-error-softer);
border: 1px solid var(--color-border-error-soft);
background: var(--color-bg-error-softest);
&__message {
h1 {
@@ -10354,7 +10349,7 @@ noscript {
width: auto;
padding: 15px;
margin: 0;
color: var(--color-text-on-inverted);
color: var(--color-text-inverted);
background: var(--color-bg-inverted);
backdrop-filter: blur(8px);
border-radius: 8px;
@@ -10408,7 +10403,7 @@ noscript {
&:hover,
&:focus,
&:active {
background: var(--color-bg-brand-softer);
background: var(--color-bg-brand-softest);
}
}
@@ -10510,13 +10505,16 @@ noscript {
color: inherit;
text-decoration: none;
padding: 4px 12px;
background: var(--color-bg-brand-softer);
background: var(--color-bg-brand-softest);
border-radius: 4px;
font-weight: 500;
&:hover,
&:focus,
&:active {
&:active,
.focusable:focus-visible &,
.detailed-status__wrapper-direct .detailed-status &,
.status__wrapper-direct & {
background: var(--color-bg-brand-soft);
}
}
@@ -10536,10 +10534,10 @@ noscript {
padding: 16px 0;
padding-bottom: 0;
border-bottom: 1px solid var(--color-border-primary);
background: var(--color-bg-brand-softer);
background: var(--color-bg-brand-softest);
&.focusable:focus-visible {
background: var(--color-bg-brand-softer);
background: var(--color-bg-brand-softest);
}
&__header {
@@ -11201,7 +11199,7 @@ noscript {
inset-inline-start: 0;
width: 100%;
height: 100%;
border-inline-start: 4px solid var(--color-text-brand);
border-inline-start: 4px solid var(--color-border-brand);
pointer-events: none;
}
}
@@ -11398,8 +11396,8 @@ noscript {
display: block;
box-sizing: border-box;
color: var(--color-text-primary);
background: var(--color-bg-brand-softer);
border: 1px solid var(--color-border-on-bg-brand-softer);
background: var(--color-bg-brand-softest);
border: 1px solid var(--color-border-brand-soft);
border-radius: 8px;
padding: 8px (5px + 8px);
position: relative;
app/javascript/styles/mastodon/dashboard.scss
+3 -3
View File
@@ -30,7 +30,7 @@
&:hover,
&:focus,
&:active {
background: var(--color-bg-brand-softer);
background: var(--color-bg-brand-softest);
}
}
}
@@ -100,12 +100,12 @@
}
&.positive {
background: var(--color-bg-success-softer);
background: var(--color-bg-success-softest);
color: var(--color-text-success);
}
&.negative {
background: var(--color-bg-error-softer);
background: var(--color-bg-error-softest);
color: var(--color-text-error);
}
app/javascript/styles/mastodon/emoji_picker.scss
+1 -1
View File
@@ -168,7 +168,7 @@
inset-inline-start: 0;
width: 100%;
height: 100%;
background-color: var(--color-bg-brand-softer);
background-color: var(--color-bg-brand-softest);
border-radius: 100%;
}
}
app/javascript/styles/mastodon/forms.scss
+14 -14
View File
@@ -32,7 +32,7 @@ code {
display: block;
background: linear-gradient(
to bottom,
var(--color-bg-secondary-solid),
var(--color-bg-secondary),
transparent
);
position: absolute;
@@ -573,7 +573,7 @@ code {
input[type='datetime-local'] {
&:focus:user-invalid:not(:placeholder-shown),
&:required:user-invalid:not(:placeholder-shown) {
border-color: var(--color-text-error);
border-color: var(--color-border-error);
}
}
@@ -763,7 +763,7 @@ code {
input[type='datetime-local'],
textarea,
select {
border-color: var(--color-text-error);
border-color: var(--color-border-error);
}
}
@@ -801,27 +801,27 @@ code {
.flash-message {
color: var(--color-text-brand);
background: transparent;
border: 1px solid var(--color-text-brand);
border: 1px solid var(--color-border-brand);
border-radius: 4px;
padding: 15px 10px;
margin-bottom: 30px;
text-align: center;
&.notice {
border: 1px solid var(--color-border-on-bg-success-softer);
background: var(--color-bg-success-softer);
border: 1px solid var(--color-border-success-soft);
background: var(--color-bg-success-softest);
color: var(--color-text-success);
}
&.warning {
border: 1px solid var(--color-border-on-bg-warning-softer);
background: var(--color-bg-warning-softer);
border: 1px solid var(--color-border-warning-soft);
background: var(--color-bg-warning-softest);
color: var(--color-text-warning);
}
&.alert {
border: 1px solid var(--color-border-on-bg-error-softer);
background: var(--color-bg-error-softer);
border: 1px solid var(--color-border-error-soft);
background: var(--color-bg-error-softest);
color: var(--color-text-error);
}
@@ -887,7 +887,7 @@ code {
}
&:focus {
background: var(--color-bg-brand-softer);
background: var(--color-bg-brand-softest);
}
}
@@ -1373,7 +1373,7 @@ code {
cursor: pointer;
&:hover {
background-color: var(--color-bg-brand-softer);
background-color: var(--color-bg-brand-softest);
}
img {
@@ -1404,7 +1404,7 @@ code {
}
&.invalid img {
outline: 1px solid var(--color-text-error);
outline: 1px solid var(--color-border-error);
outline-offset: -1px;
}
@@ -1414,7 +1414,7 @@ code {
width: 100%;
height: 100%;
position: absolute;
background: var(--color-bg-error-softer);
background: var(--color-bg-error-softest);
z-index: 2;
border-radius: 8px;
}
app/javascript/styles/mastodon/modal.scss
+2 -2
View File
@@ -1,7 +1,7 @@
@use 'variables' as *;
.modal-layout {
background: var(--color-bg-brand-softer);
background: var(--color-bg-brand-softest);
display: flex;
flex-direction: column;
height: 100vh;
@@ -42,7 +42,7 @@
position: absolute;
inset: auto 0 0;
height: 32px;
background-color: var(--color-bg-brand-softer);
background-color: var(--color-bg-brand-softest);
/* Decorative zig-zag pattern at the bottom of the page */
mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 234.80078 31.757813" width="234.80078" height="31.757812"><path d="M19.599609 0c-1.05 0-2.10039.375-2.90039 1.125L0 16.925781v14.832031h234.80078V17.025391l-16.5-15.900391c-1.6-1.5-4.20078-1.5-5.80078 0l-13.80078 13.099609c-1.6 1.5-4.19883 1.5-5.79883 0L179.09961 1.125c-1.6-1.5-4.19883-1.5-5.79883 0L159.5 14.224609c-1.6 1.5-4.20078 1.5-5.80078 0L139.90039 1.125c-1.6-1.5-4.20078-1.5-5.80078 0l-13.79883 13.099609c-1.6 1.5-4.20078 1.5-5.80078 0L100.69922 1.125c-1.600001-1.5-4.198829-1.5-5.798829 0l-13.59961 13.099609c-1.6 1.5-4.200781 1.5-5.800781 0L61.699219 1.125c-1.6-1.5-4.198828-1.5-5.798828 0L42.099609 14.224609c-1.6 1.5-4.198828 1.5-5.798828 0L22.5 1.125C21.7.375 20.649609 0 19.599609 0z" fill="black"/></svg>');
app/javascript/styles/mastodon/polls.scss
+1 -1
View File
@@ -86,7 +86,7 @@
padding: 8px 12px;
&:focus {
border-color: var(--color-text-brand);
border-color: var(--color-border-brand);
}
@media screen and (width <= 600px) {
app/javascript/styles/mastodon/tables.scss
+20
View File
@@ -93,6 +93,26 @@
}
}
&.mini-table {
border-top: 1px solid var(--color-border-primary);
width: 50%;
& > tbody > tr > th,
& > tbody > tr > td {
padding: 12px 0;
}
& > tbody > tr > th {
color: var(--color-text-secondary);
font-weight: 400;
}
& > tbody > tr > td {
color: var(--color-text-primary);
font-weight: 600;
}
}
&.batch-table {
& > thead > tr > th {
background: var(--color-bg-primary);
app/javascript/styles/mastodon/theme/_base.scss
+46 -17
View File
@@ -1,40 +1,69 @@
@mixin palette {
--color-black: #000;
--color-grey-950: #181820;
--color-grey-800: #3a3a50;
--color-grey-700: #44445f;
--color-grey-600: #535374;
--color-grey-500: #67678e;
--color-grey-400: #88a;
--color-grey-300: #b2b1c8;
--color-grey-200: #d7d6e1;
--color-grey-100: #eeedf3;
--color-grey-50: #f6f6f9;
--color-white: #fff;
--color-indigo-700: #5638cc;
--color-indigo-600: #6147e6;
--color-indigo-400: #8280f9;
--color-indigo-300: #a5abfd;
--color-indigo-200: #c8cdfe;
--color-indigo-100: #e0e3ff;
--color-black: #000;
// Grey
--color-grey-50: #f6f6f9;
--color-grey-100: #eeedf3;
--color-grey-200: #d7d6e1;
--color-grey-300: #b2b1c8;
--color-grey-400: #88a;
--color-grey-500: #67678e;
--color-grey-600: #535374;
--color-grey-700: #44445f;
--color-grey-800: #3a3a50;
--color-grey-900: #21212c;
--color-grey-950: #181820;
// Indigo
--color-indigo-50: #f0f1ff;
--color-indigo-100: #e0e3ff;
--color-indigo-200: #c8cdfe;
--color-indigo-300: #a5abfd;
--color-indigo-400: #8280f9;
--color-indigo-500: #7263f2;
--color-indigo-600: #6147e6;
--color-indigo-700: #5638cc;
--color-indigo-800: #48359c;
--color-indigo-900: #3d317c;
--color-indigo-950: #261e48;
// Red
--color-red-50: #fef2f2;
--color-red-100: #ffe2e2;
--color-red-200: #ffc9c9;
--color-red-300: #ffa2a2;
--color-red-400: #ff6467;
--color-red-500: #fb2c36;
--color-red-600: #e7000b;
--color-red-700: #c10007;
--color-red-800: #9f0712;
--color-red-900: #82181a;
--color-red-950: #460809;
// Yellow
--color-yellow-50: #fffbeb;
--color-yellow-100: #fef3c6;
--color-yellow-200: #fee685;
--color-yellow-300: #ffd230;
--color-yellow-400: #ffb900;
--color-yellow-500: #fe9a00;
--color-yellow-600: #e17100;
--color-yellow-700: #bb4d00;
--color-yellow-800: #973c00;
--color-yellow-900: #7b3306;
--color-yellow-950: #461901;
// Green
--color-green-50: #f0fdf4;
--color-green-100: #dcfce7;
--color-green-200: #b9f8cf;
--color-green-300: #7bf1a8;
--color-green-400: #05df72;
--color-green-500: #00c950;
--color-green-600: #00a63e;
--color-green-700: #008236;
--color-green-800: #016630;
--color-green-900: #0d542b;
--color-green-950: #032e15;
}
app/javascript/styles/mastodon/theme/_dark.scss
+51 -107
View File
@@ -5,150 +5,92 @@
--color-text-primary: var(--color-grey-100);
--color-text-secondary: var(--color-grey-300);
--color-text-tertiary: var(--color-grey-400);
--color-text-on-inverted: var(--color-grey-950);
--color-text-tertiary: var(--color-grey-400); // legacy
--color-text-inverted: var(--color-grey-950);
--color-text-brand: var(--color-indigo-300);
--color-text-brand-soft: color-mix(
in oklab,
var(--color-text-primary),
var(--color-text-brand)
);
); // legacy
--color-text-on-brand-base: var(--color-white);
--color-text-brand-on-inverted: var(--color-indigo-600);
--color-text-brand-on-inverted: var(--color-indigo-600); // legacy
--color-text-error: var(--color-red-300);
--color-text-on-error-base: var(--color-white);
--color-text-warning: var(--color-yellow-400);
--color-text-warning: var(--color-yellow-400); // legacy
--color-text-on-warning-base: var(--color-white);
--color-text-success: var(--color-green-400);
--color-text-success: var(--color-green-400); // legacy
--color-text-on-success-base: var(--color-white);
--color-text-disabled: var(--color-grey-600);
--color-text-on-disabled: var(--color-grey-400);
--color-text-bookmark-highlight: var(--color-text-error);
--color-text-favourite-highlight: var(--color-text-warning);
--color-text-on-media: var(--color-white);
--color-text-disabled: var(--color-grey-600); // legacy
--color-text-on-disabled: var(--color-grey-400); // legacy
--color-text-bookmark-highlight: var(--color-text-error); // legacy
--color-text-favourite-highlight: var(--color-text-warning); // legacy
--color-text-on-media: var(--color-white); // legacy
--color-text-status-links: color-mix(
in oklab,
var(--color-text-primary),
var(--color-text-secondary)
);
); // legacy
/* BACKGROUND TOKENS */
// Neutrals
--color-bg-primary: var(--color-grey-950);
--overlay-strength-secondary: 4%;
--color-bg-secondary-base: var(--color-white);
--color-bg-secondary: #{utils.css-alpha(
var(--color-bg-secondary-base),
var(--overlay-strength-secondary)
)};
--color-bg-secondary-solid: color-mix(
in srgb,
var(--color-bg-primary),
var(--color-bg-secondary-base) var(--overlay-strength-secondary)
);
--color-bg-tertiary: color-mix(
in oklab,
var(--color-bg-primary),
var(--color-bg-secondary-base) calc(2 * var(--overlay-strength-secondary))
);
--color-bg-secondary: var(--color-grey-900);
--color-bg-tertiary: var(--color-grey-800); // legacy
// Utility
--color-bg-ambient: var(--color-bg-primary);
--color-bg-inverted: var(--color-grey-50);
--color-bg-media-base: var(--color-black);
--color-bg-media-strength: 65%;
--color-bg-media: #{utils.css-alpha(
var(--color-bg-media-base),
var(--color-bg-media-strength)
)};
--color-bg-overlay: var(--color-black);
--color-bg-disabled: var(--color-grey-700);
--color-bg-overlay-base: #{utils.css-alpha(var(--color-grey-950), 60%)};
--color-bg-overlay-highlight: #{utils.css-alpha(var(--color-white), 5%)};
--color-bg-overlay: var(--color-black); // legacy
--color-bg-media-base: var(--color-black); // legacy
--color-bg-media: #{utils.css-alpha(var(--color-bg-media-base), 65%)}; // legacy
--color-bg-disabled: var(--color-grey-700); // legacy
// Brand
--overlay-strength-brand: 22%;
--color-bg-brand-base: var(--color-indigo-700);
--color-bg-brand-base-hover: color-mix(
in oklab,
var(--color-bg-brand-base),
var(--color-bg-primary) var(--overlay-strength-brand)
);
--color-bg-brand-soft: #{utils.css-alpha(
#6f4df5,
calc(var(--overlay-strength-brand) * 2)
)};
--color-bg-brand-softer: #{utils.css-alpha(
var(--color-bg-brand-base),
var(--overlay-strength-brand)
)};
--color-bg-brand-softer-solid: color-mix(
in srgb,
var(--color-bg-primary),
var(--color-bg-brand-base) var(--overlay-strength-brand)
);
--color-bg-brand-base-hover: var(--color-indigo-800); // legacy
--color-bg-brand-soft: var(--color-indigo-900);
--color-bg-brand-softest: var(--color-indigo-950);
// Error
--overlay-strength-error: 10%;
--color-bg-error-base: var(--color-red-800);
--color-bg-error-base-hover: color-mix(
in oklab,
var(--color-bg-error-base),
var(--color-bg-primary) var(--overlay-strength-error)
);
--color-bg-error-base: var(--color-red-700);
--color-bg-error-base-hover: var(--color-red-800); // legacy
--color-bg-error-soft: var(--color-red-900);
--color-bg-error-softer: var(--color-red-950);
--color-bg-error-softest: var(--color-red-950);
// Warning
--overlay-strength-warning: 10%;
--color-bg-warning-base: var(--color-yellow-700);
--color-bg-warning-base-hover: color-mix(
in oklab,
var(--color-bg-warning-base),
var(--color-bg-primary) var(--overlay-strength-warning)
);
--color-bg-warning-base: var(--color-yellow-700); // legacy
--color-bg-warning-soft: var(--color-yellow-900);
--color-bg-warning-softer: var(--color-yellow-950);
--color-bg-warning-softest: var(--color-yellow-950);
// Success
--overlay-strength-success: 15%;
--color-bg-success-base: var(--color-green-600);
--color-bg-success-base-hover: color-mix(
in oklab,
var(--color-bg-success-base),
var(--color-bg-primary) var(--overlay-strength-success)
);
--color-bg-success-base: var(--color-green-600); // legacy
--color-bg-success-soft: var(--color-green-900);
--color-bg-success-softer: var(--color-green-950);
--color-bg-success-softest: var(--color-green-950);
/* BORDER TOKENS */
--border-strength-primary: 18%;
--color-border-primary: #{utils.css-alpha(
var(--color-indigo-200),
var(--border-strength-primary)
)};
--color-border-media: rgb(252 248 255 / 15%);
--color-border-verified: rgb(220, 3, 240);
--color-border-on-bg-secondary: #{utils.css-alpha(
var(--color-indigo-200),
calc(var(--border-strength-primary) / 1.5)
)};
--color-border-on-bg-brand-softer: var(--color-border-primary);
--color-border-on-bg-error-softer: #{utils.css-alpha(
var(--color-text-error),
50%
)};
--color-border-on-bg-warning-softer: #{utils.css-alpha(
--color-border-primary: var(--color-grey-800);
--color-border-brand: var(--color-text-brand);
--color-border-brand-soft: var(--color-indigo-800);
--color-border-error: var(--color-red-300);
--color-border-media: rgb(252 248 255 / 15%); // legacy
--color-border-error-soft: #{utils.css-alpha(var(--color-border-error), 50%)}; // legacy
--color-border-warning-soft: #{utils.css-alpha(
var(--color-text-warning),
50%
)};
--color-border-on-bg-success-softer: #{utils.css-alpha(
)}; // legacy
--color-border-success-soft: #{utils.css-alpha(
var(--color-text-success),
50%
)};
--color-border-on-bg-inverted: var(--color-border-primary);
)}; // legacy
/* SHADOW TOKENS */
/* SHADOW TOKENS (LEGACY) */
--shadow-strength-primary: 80%;
--color-shadow-primary: #{utils.css-alpha(
@@ -160,16 +102,16 @@
0 8px 10px -6px var(--color-shadow-primary);
--overlay-icon-shadow: drop-shadow(0 0 8px var(--color-shadow-primary));
/* GRAPHS/CHARTS TOKENS */
/* GRAPHS/CHARTS TOKENS (LEGACY) */
--color-graph-primary-stroke: var(--color-text-brand);
--color-graph-primary-fill: var(--color-bg-brand-softer);
--color-graph-primary-fill: var(--color-bg-brand-softest);
--color-graph-warning-stroke: var(--color-text-warning);
--color-graph-warning-fill: var(--color-bg-warning-softer);
--color-graph-warning-fill: var(--color-bg-warning-softest);
--color-graph-disabled-stroke: var(--color-text-disabled);
--color-graph-disabled-fill: var(--color-bg-disabled);
/* LEGACY TOKENS */
/* RICH TEXT TOKENS (LEGACY) */
--rich-text-container-color: rgb(87 24 60 / 100%);
--rich-text-text-color: rgb(255 175 212 / 100%);
@@ -182,7 +124,9 @@
--color-text-primary: var(--color-grey-50);
--color-text-status-links: var(--color-text-brand);
/* BORDER TOKENS */
/* BACKGROUND TOKENS */
--color-bg-error-base: var(--color-red-800);
--border-strength-primary: 30%;
/* BORDER TOKENS */
--color-border-primary: var(--color-grey-600);
}
app/javascript/styles/mastodon/theme/_light.scss
+51 -107
View File
@@ -5,145 +5,88 @@
--color-text-primary: var(--color-grey-950);
--color-text-secondary: var(--color-grey-600);
--color-text-tertiary: var(--color-grey-500);
--color-text-on-inverted: var(--color-white);
--color-text-tertiary: var(--color-grey-500); // legacy
--color-text-inverted: var(--color-white);
--color-text-brand: var(--color-indigo-700);
--color-text-brand-soft: color-mix(
in oklab,
var(--color-text-primary),
var(--color-text-brand)
);
); // legacy
--color-text-on-brand-base: var(--color-white);
--color-text-brand-on-inverted: var(--color-indigo-400);
--color-text-brand-on-inverted: var(--color-indigo-400); // legacy
--color-text-error: var(--color-red-800);
--color-text-on-error-base: var(--color-white);
--color-text-warning: var(--color-yellow-600);
--color-text-warning: var(--color-yellow-600); // legacy
--color-text-on-warning-base: var(--color-white);
--color-text-success: var(--color-green-600);
--color-text-success: var(--color-green-600); // legacy
--color-text-on-success-base: var(--color-white);
--color-text-disabled: var(--color-grey-300);
--color-text-on-disabled: var(--color-grey-200);
--color-text-bookmark-highlight: var(--color-text-error);
--color-text-favourite-highlight: var(--color-text-warning);
--color-text-on-media: var(--color-white);
--color-text-status-links: var(--color-text-brand);
--color-text-disabled: var(--color-grey-300); // legacy
--color-text-on-disabled: var(--color-grey-200); // legacy
--color-text-bookmark-highlight: var(--color-text-error); // legacy
--color-text-favourite-highlight: var(--color-text-warning); // legacy
--color-text-on-media: var(--color-white); // legacy
--color-text-status-links: var(--color-text-brand); // legacy
/* BACKGROUND TOKENS */
// Neutrals
--color-bg-primary: var(--color-white);
--overlay-strength-secondary: 4%;
--color-bg-secondary-base: #000550;
--color-bg-secondary: #{color-mix(
in oklab,
var(--color-bg-primary),
var(--color-bg-secondary-base) var(--overlay-strength-secondary)
)};
--color-bg-secondary-solid: #{color-mix(
in srgb,
var(--color-bg-primary),
var(--color-bg-secondary-base) var(--overlay-strength-secondary)
)};
--color-bg-tertiary: #{color-mix(
in oklab,
var(--color-bg-primary),
var(--color-bg-secondary-base) calc(2 * var(--overlay-strength-secondary))
)};
--color-bg-secondary: var(--color-grey-50);
--color-bg-tertiary: var(--color-grey-100); // legacy
// Utility
--color-bg-ambient: var(--color-bg-primary);
--color-bg-inverted: var(--color-grey-950);
--color-bg-media-base: var(--color-black);
--color-bg-media-strength: 65%;
--color-bg-media: #{utils.css-alpha(
var(--color-bg-media-base),
var(--color-bg-media-strength)
)};
--color-bg-overlay: var(--color-bg-primary);
--color-bg-disabled: var(--color-grey-400);
--color-bg-overlay-base: #{utils.css-alpha(var(--color-grey-950), 60%)};
--color-bg-overlay-highlight: #{utils.css-alpha(var(--color-grey-950), 5%)};
--color-bg-overlay: var(--color-bg-primary); // legacy
--color-bg-media-base: var(--color-black); // legacy
--color-bg-media: #{utils.css-alpha(var(--color-bg-media-base), 65%)}; // legacy
--color-bg-disabled: var(--color-grey-400); // legacy
// Brand
--overlay-strength-brand: 6%;
--color-bg-brand-base: var(--color-indigo-700);
--color-bg-brand-base-hover: color-mix(
in oklab,
var(--color-bg-brand-base),
black var(--overlay-strength-brand)
);
--color-bg-brand-soft: #{utils.css-alpha(
#0012d8,
calc(var(--overlay-strength-brand) * 2)
)};
--color-bg-brand-softer: #{utils.css-alpha(
#0012d8,
var(--overlay-strength-brand)
)};
--color-bg-brand-softer-solid: color-mix(
in srgb,
var(--color-bg-primary),
var(--color-bg-brand-base) var(--overlay-strength-brand)
);
--color-bg-brand-base-hover: var(--color-indigo-800); // legacy
--color-bg-brand-soft: var(--color-indigo-100);
--color-bg-brand-softest: var(--color-indigo-50);
// Error
--overlay-strength-error: 5%;
--color-bg-error-base: var(--color-red-800);
--color-bg-error-base-hover: color-mix(
in oklab,
var(--color-bg-error-base),
black var(--overlay-strength-error)
);
--color-bg-error-base: var(--color-red-700);
--color-bg-error-base-hover: var(--color-red-800); // legacy
--color-bg-error-soft: var(--color-red-100);
--color-bg-error-softer: var(--color-red-50);
--color-bg-error-softest: var(--color-red-50);
// Warning
--overlay-strength-warning: 10%;
--color-bg-warning-base: var(--color-yellow-700);
--color-bg-warning-base-hover: color-mix(
in oklab,
var(--color-bg-warning-base),
black var(--overlay-strength-warning)
);
--color-bg-warning-base: var(--color-yellow-700); // legacy
--color-bg-warning-soft: var(--color-yellow-100);
--color-bg-warning-softer: var(--color-yellow-50);
--color-bg-warning-softest: var(--color-yellow-50);
// Success
--overlay-strength-success: 15%;
--color-bg-success-base: var(--color-green-600);
--color-bg-success-base-hover: color-mix(
in oklab,
var(--color-bg-success-base),
black var(--overlay-strength-success)
);
--color-bg-success-base: var(--color-green-600); // legacy
--color-bg-success-soft: var(--color-green-100);
--color-bg-success-softer: var(--color-green-50);
--color-bg-success-softest: var(--color-green-50);
/* BORDER TOKENS */
--border-strength-primary: 15%;
--color-border-primary: color-mix(
in oklab,
var(--color-bg-primary),
var(--color-grey-950) var(--border-strength-primary)
);
--color-border-media: rgb(252 248 255 / 15%);
--color-border-verified: rgb(220, 3, 240);
--color-border-on-bg-secondary: var(--color-grey-200);
--color-border-on-bg-brand-softer: var(--color-indigo-200);
--color-border-on-bg-error-softer: #{utils.css-alpha(
var(--color-text-error),
50%
)};
--color-border-on-bg-warning-softer: #{utils.css-alpha(
--color-border-primary: var(--color-grey-200);
--color-border-brand: var(--color-text-brand);
--color-border-brand-soft: var(--color-indigo-200);
--color-border-error: var(--color-red-700);
--color-border-media: rgb(252 248 255 / 15%); // legacy
--color-border-error-soft: #{utils.css-alpha(var(--color-text-error), 50%)}; // legacy
--color-border-warning-soft: #{utils.css-alpha(
var(--color-text-warning),
50%
)};
--color-border-on-bg-success-softer: #{utils.css-alpha(
)}; // legacy
--color-border-success-soft: #{utils.css-alpha(
var(--color-text-success),
50%
)};
--color-border-on-bg-inverted: var(--color-border-primary);
)}; // legacy
/* SHADOW TOKENS */
/* SHADOW TOKENS (LEGACY) */
--shadow-strength-primary: 30%;
--color-shadow-primary: #{utils.css-alpha(
@@ -155,16 +98,16 @@
0 8px 10px -6px var(--color-shadow-primary);
--overlay-icon-shadow: drop-shadow(0 0 8px var(--color-shadow-primary));
/* GRAPHS/CHARTS TOKENS */
/* GRAPHS/CHARTS TOKENS (LEGACY) */
--color-graph-primary-stroke: var(--color-text-brand);
--color-graph-primary-fill: var(--color-bg-brand-softer);
--color-graph-primary-fill: var(--color-bg-brand-softest);
--color-graph-warning-stroke: var(--color-text-warning);
--color-graph-warning-fill: var(--color-bg-warning-softer);
--color-graph-warning-fill: var(--color-bg-warning-softest);
--color-graph-disabled-stroke: var(--color-text-disabled);
--color-graph-disabled-fill: var(--color-bg-disabled);
/* LEGACY TOKENS */
/* RICH TEXT TOKENS (LEGACY) */
--rich-text-container-color: rgb(255 216 231 / 100%);
--rich-text-text-color: rgb(114 47 83 / 100%);
@@ -179,8 +122,9 @@
--color-text-tertiary: var(--color-grey-700);
--color-text-brand: var(--color-indigo-600);
/* BORDER TOKENS */
/* BACKGROUND TOKENS */
--color-bg-error-base: var(--color-red-800);
--border-strength-primary: 30%;
--color-border-on-bg-secondary: var(--color-grey-300);
/* BORDER TOKENS */
--color-border-primary: var(--color-grey-300);
}
app/javascript/styles/mastodon/widgets.scss
+1 -1
View File
@@ -69,7 +69,7 @@
}
&.active .avatar-stack .account__avatar {
border-color: var(--color-text-brand);
border-color: var(--color-border-brand);
}
.trends__item__current {