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

@@ -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'