Implement CSS theme tokens behind feature flag (#36861)

This commit is contained in:
diondiondion
2025-11-17 10:44:55 +01:00
committed by GitHub
parent 489bee8f4e
commit 284b46fee7
58 changed files with 19690 additions and 87 deletions

View File

@@ -553,7 +553,6 @@ class Status extends ImmutablePureComponent {
}
const {statusContentProps, hashtagBar} = getHashtagBarForStatus(status);
return (
<Hotkeys handlers={handlers} focusable={!unfocusable}>
<div className={classNames('status__wrapper', `status__wrapper-${status.get('visibility')}`, { 'status__wrapper-reply': !!status.get('in_reply_to_id'), unread, focusable: !this.props.muted })} tabIndex={this.props.muted || unfocusable ? null : 0} data-featured={featured ? 'true' : null} aria-label={textForScreenReader({intl, status, rebloggedByText, isQuote: isQuotedPost})} ref={this.handleRef} data-nosnippet={status.getIn(['account', 'noindex'], true) || undefined}>

View File

@@ -64,6 +64,7 @@ const StandaloneBoostButton: FC<ReblogButtonProps> = ({ status, counters }) => {
title={intl.formatMessage(meta ?? title)}
icon='retweet'
iconComponent={iconComponent}
className='status__action-bar__button'
onClick={!disabled ? handleClick : undefined}
counter={
counters
@@ -195,6 +196,7 @@ const BoostOrQuoteMenu: FC<ReblogButtonProps> = ({ status, counters }) => {
isMenuDisabled ? messages.all_disabled : messages.reblog_or_quote,
)}
icon='retweet'
className='status__action-bar__button'
iconComponent={boostIcon}
counter={
counters

View File

@@ -406,15 +406,19 @@ class StatusActionBar extends ImmutablePureComponent {
status={status}
needsStatusRefresh={quickBoosting && status.get('quote_approval') === null}
items={menu}
icon='ellipsis-h'
iconComponent={MoreHorizIcon}
direction='right'
title={intl.formatMessage(messages.more)}
onOpen={() => {
dismissQuoteHint();
return true;
}}
/>
>
<IconButton
className='status__action-bar__button'
icon='ellipsis-h'
iconComponent={MoreHorizIcon}
title={intl.formatMessage(messages.more)}
/>
</Dropdown>
)}
</RemoveQuoteHint>
</div>

View File

@@ -104,17 +104,19 @@ export const RulesSection: FC<RulesSectionProps> = ({ isLoading = false }) => {
defaultMessage='Language'
/>
</label>
<select onChange={handleLocaleChange} id='language-select'>
{localeOptions.map((option) => (
<option
key={option.value}
value={option.value}
selected={option.value === selectedLocale}
>
{option.text}
</option>
))}
</select>
<div className='select-wrapper'>
<select onChange={handleLocaleChange} id='language-select'>
{localeOptions.map((option) => (
<option
key={option.value}
value={option.value}
selected={option.value === selectedLocale}
>
{option.text}
</option>
))}
</select>
</div>
</div>
)}
</Section>

View File

@@ -24,12 +24,12 @@ export default class FollowRequestNote extends ImmutablePureComponent {
</div>
<div className='follow-request-banner__action'>
<button type='button' className='button button-tertiary button--confirmation' onClick={onAuthorize}>
<button type='button' className='button button-secondary button--confirmation' onClick={onAuthorize}>
<Icon id='check' icon={CheckIcon} />
<FormattedMessage id='follow_request.authorize' defaultMessage='Authorize' />
</button>
<button type='button' className='button button-tertiary button--destructive' onClick={onReject}>
<button type='button' className='button button-secondary button--destructive' onClick={onReject}>
<Icon id='times' icon={CloseIcon} />
<FormattedMessage id='follow_request.reject' defaultMessage='Reject' />
</button>

View File

@@ -1,38 +0,0 @@
import PropTypes from 'prop-types';
import { PureComponent } from 'react';
const iconStyle = {
height: null,
lineHeight: '27px',
minWidth: `${18 * 1.28571429}px`,
};
export default class TextIconButton extends PureComponent {
static propTypes = {
label: PropTypes.string.isRequired,
title: PropTypes.string,
active: PropTypes.bool,
onClick: PropTypes.func.isRequired,
ariaControls: PropTypes.string,
};
render () {
const { label, title, active, ariaControls } = this.props;
return (
<button
type='button'
title={title}
aria-label={title}
className={`text-icon-button ${active ? 'active' : ''}`}
aria-expanded={active}
onClick={this.props.onClick}
aria-controls={ariaControls} style={iconStyle}
>
{label}
</button>
);
}
}

View File

@@ -166,7 +166,7 @@ const Compose: React.FC<{ multiColumn: boolean }> = ({ multiColumn }) => {
<div className='drawer__inner'>
<ComposeFormContainer />
<div className='drawer__inner__mastodon'>
<div className='drawer__inner__mastodon with-zig-zag-decoration'>
<img alt='' draggable='false' src={mascot ?? elephantUIPlane} />
</div>
</div>

View File

@@ -75,7 +75,7 @@ export const DisabledAccountBanner: React.FC = () => {
</a>
<button
type='button'
className='button button--block button-tertiary'
className='button button--block button-secondary'
onClick={handleLogOutClick}
>
<FormattedMessage

View File

@@ -46,7 +46,7 @@ export const SignInBanner: React.FC = () => {
<a
href={sso_redirect}
data-method='post'
className='button button--block button-tertiary'
className='button button--block button-secondary'
>
<FormattedMessage
id='sign_in_banner.sso_redirect'
@@ -98,7 +98,7 @@ export const SignInBanner: React.FC = () => {
/>
</p>
{signupButton}
<a href='/auth/sign_in' className='button button--block button-tertiary'>
<a href='/auth/sign_in' className='button button--block button-secondary'>
<FormattedMessage id='sign_in_banner.sign_in' defaultMessage='Login' />
</a>
</div>

View File

@@ -98,7 +98,7 @@ class BundleColumnError extends PureComponent {
<div className='error-column__message__actions'>
{errorType === 'network' && <Button onClick={this.handleRetry}><FormattedMessage id='bundle_column_error.retry' defaultMessage='Try again' /></Button>}
{errorType === 'error' && <CopyButton value={stacktrace}><FormattedMessage id='bundle_column_error.copy_stacktrace' defaultMessage='Copy error report' /></CopyButton>}
<Link to='/' className={classNames('button', { 'button-tertiary': errorType !== 'routing' })}><FormattedMessage id='bundle_column_error.return' defaultMessage='Go back home' /></Link>
<Link to='/' className={classNames('button', { 'button-secondary': errorType !== 'routing' })}><FormattedMessage id='bundle_column_error.return' defaultMessage='Go back home' /></Link>
</div>
</div>
</div>

View File

@@ -46,7 +46,7 @@ export const ModalPlaceholder: React.FC<{
defaultMessage='Try again'
/>
</Button>
<Button onClick={handleClose} className='button button-tertiary'>
<Button onClick={handleClose} className='button button-secondary'>
<FormattedMessage
id='bundle_modal_error.close'
defaultMessage='Close'

View File

@@ -104,7 +104,7 @@ const LoginOrSignUp: React.FC = () => {
<a
href={sso_redirect}
data-method='post'
className='button button--block button-tertiary'
className='button button--block button-secondary'
>
<FormattedMessage
id='sign_in_banner.sso_redirect'
@@ -143,7 +143,7 @@ const LoginOrSignUp: React.FC = () => {
return (
<div className='ui__navigation-bar__sign-up'>
{signupButton}
<a href='/auth/sign_in' className='button button-tertiary'>
<a href='/auth/sign_in' className='button button-secondary'>
<FormattedMessage
id='sign_in_banner.sign_in'
defaultMessage='Login'