imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Refine styles of controls to match Compound (#12299)

Browse source 
This changes the styles of buttons, other form controls, and tabs in settings to:

1. Improve their usage of semantic colors, so that they adapt correctly to custom themes
2. Make them more visually coherent with the new Compound design system, as we integrate more of it into the app

This is a re-introduction of https://github.com/matrix-org/matrix-react-sdk/pull/12241 with the difference that we're now using our branding colors again on form colors, and buttons have become rounded to match the appearance of new Compound buttons.
This commit is contained in:
Robin 2024-03-04 23:25:47 -05:00 • committed by GitHub
parent 5c8b14c53e
commit 6eafe0e5a8
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
119 changed files with 225 additions and 201 deletions
Download patch file Download diff file Expand all files Collapse all files

9
res/css/views/dialogs/_CompoundDialog.pcss
View file

@ -44,13 +44,10 @@ limitations under the License.
.mx_CompoundDialog_cancelButton {
@mixin customisedCancelButton;
width: 20px;
height: 20px;
/* Align with middle of title, 34px from right edge */
/* Align with middle of title, 30px from right edge */
position: absolute;
top: 34px;
right: 34px;
top: 30px;
right: 30px;
}
}

3
res/css/views/dialogs/_CreateRoomDialog.pcss
View file

@ -21,7 +21,8 @@ limitations under the License.
list-style: none;
font-weight: var(--cpd-font-weight-semibold);
cursor: pointer;
color: $accent;
color: var(--cpd-color-text-primary);
text-decoration: underline;
width: fit-content;
/* list-style doesn't do it for webkit */

3
res/css/views/dialogs/_FeedbackDialog.pcss
View file

@ -60,7 +60,6 @@ limitations under the License.
a,
.mx_AccessibleButton_kind_link {
color: $accent;
text-decoration: underline;
}
@ -132,7 +131,7 @@ limitations under the License.
.mx_StyledRadioButton_checked {
font-size: 24px;
border-color: $accent;
border-color: var(--cpd-color-bg-action-primary-rest);
}
&::after {

4
res/css/views/dialogs/_JoinRuleDropdown.pcss
View file

@ -19,10 +19,6 @@ limitations under the License.
font: var(--cpd-font-body-md-regular);
color: $primary-content;
.mx_Dropdown_input {
border: 1px solid $input-border-color;
}
.mx_Dropdown_option {
font: var(--cpd-font-body-md-regular);
line-height: $font-32px;

2
res/css/views/dialogs/_SpaceSettingsDialog.pcss
View file

@ -71,7 +71,7 @@ limitations under the License.
.mx_AccessibleButton_hasKind {
&.mx_AccessibleButton_kind_link {
font: var(--cpd-font-body-md-regular);
font: var(--cpd-font-body-md-semibold);
margin: 7px 18px;
&.mx_SettingsTab_showAdvanced {

2
res/css/views/dialogs/_SpotlightDialog.pcss
View file

@ -396,7 +396,7 @@ limitations under the License.
left: $spacing-8;
width: 16px;
height: 16px;
background: $accent;
background: var(--cpd-color-icon-primary);
}
}
}

65
res/css/views/elements/_AccessibleButton.pcss
View file

@ -38,11 +38,11 @@ limitations under the License.
&.mx_AccessibleButton_hasKind {
padding: 7px 18px;
text-align: center;
border-radius: 8px;
border-radius: 24px;
display: inline-flex;
align-items: center;
justify-content: center;
font: var(--cpd-font-body-md-regular);
font: var(--cpd-font-body-md-semibold);
border: none; /* override default <button /> styles */
word-break: keep-all; /* prevent button text in Chinese/Japanese/Korean (CJK) from being collapsed */
@ -53,21 +53,23 @@ limitations under the License.
}
&.mx_AccessibleButton_kind_primary_sm {
color: $button-primary-fg-color;
background-color: $accent;
color: var(--cpd-color-text-on-solid-primary);
background-color: var(--cpd-color-bg-action-primary-rest);
}
&.mx_AccessibleButton_kind_danger_sm {
color: $button-danger-fg-color;
background-color: $alert;
color: var(--cpd-color-text-on-solid-primary);
background-color: var(--cpd-color-bg-critical-primary);
}
&.mx_AccessibleButton_kind_link_sm {
color: $accent;
color: var(--cpd-color-text-primary);
text-decoration: underline;
font-weight: var(--cpd-font-weight-semibold);
}
&.mx_AccessibleButton_kind_confirm_sm {
background-color: $accent;
background-color: var(--cpd-color-bg-action-primary-rest);
&::before {
mask-image: url("$(res)/img/feather-customised/check.svg");
@ -75,7 +77,7 @@ limitations under the License.
}
&.mx_AccessibleButton_kind_cancel_sm {
background-color: $alert;
background-color: var(--cpd-color-bg-critical-primary);
&::before {
mask-image: url("$(res)/img/feather-customised/x.svg");
@ -99,26 +101,22 @@ limitations under the License.
font-weight: var(--cpd-font-weight-semibold);
}
&.mx_AccessibleButton_kind_icon_primary,
&.mx_AccessibleButton_kind_icon_primary_outline,
&.mx_AccessibleButton_kind_primary,
&.mx_AccessibleButton_kind_primary_outline {
border: 1px solid $accent;
}
&.mx_AccessibleButton_kind_icon_primary,
&.mx_AccessibleButton_kind_primary {
color: $button-primary-fg-color;
background-color: $accent;
border: 1px solid var(--cpd-color-bg-action-primary-rest);
color: var(--cpd-color-text-on-solid-primary);
background-color: var(--cpd-color-bg-action-primary-rest);
}
&.mx_AccessibleButton_kind_icon_primary_outline,
&.mx_AccessibleButton_kind_primary_outline {
color: $accent;
border: 1px solid var(--cpd-color-border-interactive-secondary);
color: var(--cpd-color-text-primary);
}
&.mx_AccessibleButton_kind_secondary {
color: $accent;
color: var(--cpd-color-text-primary);
text-decoration: underline;
}
&.mx_AccessibleButton_kind_secondary_content {
@ -126,30 +124,30 @@ limitations under the License.
}
&.mx_AccessibleButton_kind_danger {
color: $button-danger-fg-color;
background-color: $alert;
color: var(--cpd-color-text-on-solid-primary);
background-color: var(--cpd-color-bg-critical-primary);
&.mx_AccessibleButton_disabled {
color: $button-danger-disabled-fg-color;
background-color: $button-danger-disabled-bg-color;
color: var(--cpd-color-text-on-solid-primary);
background-color: var(--cpd-color-bg-critical-primary);
}
}
&.mx_AccessibleButton_kind_danger_outline {
color: $alert;
color: var(--cpd-color-text-critical-primary);
background-color: transparent;
border: 1px solid $alert;
border: 1px solid var(--cpd-color-border-critical-subtle);
&.mx_AccessibleButton_disabled {
color: $button-danger-disabled-bg-color;
border-color: $button-danger-disabled-bg-color;
color: var(--cpd-color-text-disabled);
border-color: var(--cpd-color-border-disabled);
}
}
&.mx_AccessibleButton_kind_danger_sm {
&.mx_AccessibleButton_disabled {
color: $button-danger-disabled-fg-color;
background-color: $button-danger-disabled-bg-color;
color: var(--cpd-color-text-disabled);
background-color: var(--cpd-color-bg-subtle-primary);
}
}
@ -158,18 +156,19 @@ limitations under the License.
&.mx_AccessibleButton_kind_danger_inline,
&.mx_AccessibleButton_kind_content_inline {
font-size: inherit;
font-weight: normal;
font-weight: var(--cpd-font-weight-semibold);
line-height: inherit;
padding: 0;
text-decoration: underline;
}
&.mx_AccessibleButton_kind_link,
&.mx_AccessibleButton_kind_link_inline {
color: $accent;
color: var(--cpd-color-text-primary);
}
&.mx_AccessibleButton_kind_danger_inline {
color: $alert;
color: var(--cpd-color-text-critical-primary);
}
&.mx_AccessibleButton_kind_content_inline {

4
res/css/views/elements/_Dropdown.pcss
View file

@ -27,8 +27,8 @@ limitations under the License.
display: flex;
align-items: center;
position: relative;
border-radius: 4px;
border: 1px solid $strong-input-border-color;
border-radius: 8px;
border: 1px solid var(--cpd-color-border-interactive-secondary);
font: var(--cpd-font-body-sm-regular);
user-select: none;
}

11
res/css/views/elements/_Field.pcss
View file

@ -22,17 +22,17 @@ limitations under the License.
min-width: 0;
position: relative;
margin: 1em 0;
border-radius: 4px;
border-radius: 8px;
transition: border-color 0.25s;
border: 1px solid $input-border-color;
border: 1px solid var(--cpd-color-border-interactive-secondary);
}
.mx_Field_prefix {
border-right: 1px solid $input-border-color;
border-right: 1px solid var(--cpd-color-border-interactive-secondary);
}
.mx_Field_postfix {
border-left: 1px solid $input-border-color;
border-left: 1px solid var(--cpd-color-border-interactive-secondary);
}
.mx_Field input,
@ -42,7 +42,7 @@ limitations under the License.
border: none;
/* Even without a border here, we still need this avoid overlapping the rounded */
/* corners on the field above. */
border-radius: 4px;
border-radius: 8px;
padding: 8px 9px;
color: $primary-content;
background-color: $background;
@ -102,6 +102,7 @@ limitations under the License.
background-color 0.25s ease-out 0.1s;
background-color: transparent;
font: var(--cpd-font-body-md-regular);
color: var(--cpd-color-text-secondary);
transform: translateY(0);
position: absolute;
left: 0px;

4
res/css/views/elements/_ProgressBar.pcss
View file

@ -19,10 +19,10 @@ progress.mx_ProgressBar {
width: 60px;
overflow: hidden;
appearance: none;
border: none;
border: var(--cpd-border-width-1) solid var(--cpd-color-gray-400);
@mixin ProgressBarBorderRadius 6px;
@mixin ProgressBarColour $accent;
@mixin ProgressBarColour var(--cpd-color-icon-accent-tertiary);
@mixin ProgressBarBgColour $progressbar-bg-color;
::-webkit-progress-value {
transition: width 1s;

2
res/css/views/elements/_ReplyChain.pcss
View file

@ -25,6 +25,8 @@ limitations under the License.
white-space: nowrap; /* Enforce 'In reply to' to be a single line */
color: $secondary-content;
transition: color ease 0.15s;
font-weight: var(--cpd-font-weight-normal);
text-decoration: inherit;
&:hover {
color: $primary-content;

2
res/css/views/elements/_Slider.pcss
View file

@ -26,7 +26,7 @@ limitations under the License.
background: none;
font-size: 1em; /* set base multiplier for em units applied later */
--active-color: $accent;
--active-color: var(--cpd-color-bg-action-primary-rest);
--selection-dot-size: 2.4em;
&:disabled {

15
res/css/views/elements/_StyledCheckbox.pcss
View file

@ -42,7 +42,7 @@ limitations under the License.
height: $size;
width: $size;
size: 0.5rem;
border: 1px solid $strong-input-border-color;
border: 1px solid var(--cpd-color-border-interactive-primary);
box-sizing: border-box;
border-radius: $border-radius;
@ -80,26 +80,27 @@ limitations under the License.
.mx_Checkbox.mx_Checkbox_kind_solid input[type="checkbox"] {
& + label > .mx_Checkbox_background .mx_Checkbox_checkmark {
background: #ffffff;
background: var(--cpd-color-icon-on-solid-primary);
}
&:checked + label > .mx_Checkbox_background {
background: $accent;
border-color: $accent;
background: var(--cpd-color-bg-accent-rest);
border-color: var(--cpd-color-bg-accent-rest);
}
&:checked:disabled + label > .mx_Checkbox_background {
opacity: 0.5;
background: var(--cpd-color-bg-action-primary-disabled);
border-color: var(--cpd-color-bg-action-primary-disabled);
}
}
.mx_Checkbox.mx_Checkbox_kind_outline input[type="checkbox"] {
& + label > .mx_Checkbox_background .mx_Checkbox_checkmark {
background: $accent;
background: var(--cpd-color-bg-accent-rest);
}
&:checked + label > .mx_Checkbox_background {
background: transparent;
border-color: $accent;
border-color: var(--cpd-color-bg-accent-rest);
}
}

6
res/css/views/elements/_StyledRadioButton.pcss
View file

@ -20,8 +20,8 @@ limitations under the License.
*/
.mx_StyledRadioButton {
$radio-circle-color: $strong-input-border-color;
$active-radio-circle-color: $accent;
$radio-circle-color: var(--cpd-color-border-interactive-primary);
$active-radio-circle-color: var(--cpd-color-bg-accent-rest);
position: relative;
display: flex;
@ -126,5 +126,5 @@ limitations under the License.
}
.mx_StyledRadioButton_checked {
border-color: $accent;
border-color: var(--cpd-color-bg-accent-rest);
}

49
res/css/views/elements/_ToggleSwitch.pcss
View file

@ -17,33 +17,42 @@ limitations under the License.
.mx_ToggleSwitch {
--ToggleSwitch-min-width: $font-44px;
transition: background-color 0.2s ease-out 0.1s;
transition:
background-color 0.2s ease-out 0.1s,
border-color 0.2s ease-out 0.1s;
width: $font-44px;
height: $font-20px;
border-radius: 1.5rem;
padding: 2px;
background-color: $background;
border: 1px solid $strong-input-border-color;
opacity: 0.5;
background-color: var(--cpd-color-bg-canvas-disabled);
border: 1px solid var(--cpd-color-border-disabled);
cursor: not-allowed;
&[aria-disabled="true"] {
cursor: not-allowed;
&.mx_ToggleSwitch_enabled {
cursor: pointer;
background-color: var(--cpd-color-bg-canvas-default);
border: var(--cpd-border-width-1) solid var(--cpd-color-border-interactive-primary);
&.mx_ToggleSwitch_on {
background-color: var(--cpd-color-bg-accent-rest);
border-color: var(--cpd-color-bg-accent-rest);
}
> .mx_ToggleSwitch_ball {
background-color: var(--cpd-color-icon-secondary);
}
}
}
.mx_ToggleSwitch_enabled {
cursor: pointer;
opacity: 1;
}
&.mx_ToggleSwitch_on {
background-color: var(--cpd-color-bg-action-primary-disabled);
border-color: var(--cpd-color-bg-action-primary-disabled);
.mx_ToggleSwitch.mx_ToggleSwitch_on {
background-color: $inverted-bg-color;
> .mx_ToggleSwitch_ball {
left: calc(100% - $font-20px);
background-color: $background;
> .mx_ToggleSwitch_ball {
left: calc(100% - $font-20px);
background-color: var(--cpd-color-icon-on-solid-primary);
}
}
}
@ -52,7 +61,9 @@ limitations under the License.
width: $font-20px;
height: $font-20px;
border-radius: $font-20px;
background-color: $togglesw-ball-color;
transition: left 0.15s ease-out 0.1s;
background-color: var(--cpd-color-bg-action-primary-disabled);
transition:
left 0.15s ease-out 0.1s,
background-color 0.15s ease-out 0.1s;
left: 0;
}

3
res/css/views/right_panel/_BaseCard.pcss
View file

@ -179,6 +179,7 @@ limitations under the License.
left: 0;
mask-repeat: no-repeat;
mask-position: center;
mask-size: 20px;
background-color: var(--cpd-color-icon-secondary);
}
}
@ -195,7 +196,7 @@ limitations under the License.
.mx_BaseCard_close {
order: 999; /* always last */
&::before {
mask-image: url("$(res)/img/icons-close.svg");
mask-image: url("@vector-im/compound-design-tokens/icons/close.svg");
}
}

3
res/css/views/right_panel/_VerificationPanel.pcss
View file

@ -49,9 +49,6 @@ limitations under the License.
.mx_EncryptionPanel_cancel {
@mixin customisedCancelButton;
width: 14px;
height: 14px;
background-color: $settings-subsection-fg-color;
position: absolute;
z-index: 100;
top: 14px;

3
res/css/views/room_settings/_AliasSettings.pcss
View file

@ -16,8 +16,9 @@ limitations under the License.
.mx_AliasSettings_localAddresses {
cursor: pointer;
color: $accent;
color: var(--cpd-color-text-primary);
font-weight: var(--cpd-font-weight-semibold);
text-decoration: underline;
list-style: none;
width: fit-content;

2
res/css/views/rooms/_EditMessageComposer.pcss
View file

@ -33,7 +33,7 @@ limitations under the License.
padding: 3px 6px;
&:focus {
border-color: $accent-500;
border-color: var(--cpd-color-border-interactive-primary);
}
}

2
res/css/views/rooms/_EmojiButton.pcss
View file

@ -15,7 +15,7 @@ limitations under the License.
*/
.mx_EmojiButton {
@mixin composerButton 50%, $accent, $accent-300;
@mixin composerButton 50%, var(--cpd-color-icon-secondary), var(--cpd-color-bg-subtle-secondary);
}
.mx_EmojiButton_highlight {

2
res/css/views/rooms/_EventTile.pcss
View file

@ -240,7 +240,7 @@ $left-gutter: 64px;
> .mx_EventTile_line {
/* TODO: ultimately we probably want some transition on here. */
box-shadow: inset var(--EventTile-box-shadow-offset-x) 0 0 var(--EventTile-box-shadow-spread-radius)
$accent;
var(--cpd-color-bg-action-primary-rest);
}
}

10
res/css/views/rooms/_MessageComposer.pcss
View file

@ -191,7 +191,7 @@ limitations under the License.
}
.mx_MessageComposer_button {
@mixin composerButton 50%, $accent, $accent-300;
@mixin composerButton 50%, var(--cpd-color-icon-secondary), var(--cpd-color-bg-subtle-secondary);
&:last-child {
margin-right: auto;
@ -199,11 +199,11 @@ limitations under the License.
&.mx_MessageComposer_closeButtonMenu {
&::after {
background: $accent-300;
background: var(--cpd-color-bg-subtle-primary);
}
&::before {
background-color: $accent;
background-color: var(--cpd-color-icon-primary);
z-index: 2;
}
}
@ -295,7 +295,7 @@ limitations under the License.
width: 32px;
height: 32px;
border-radius: 100%;
background-color: $accent;
background-color: var(--cpd-color-icon-accent-tertiary);
&::before {
position: absolute;
@ -309,7 +309,7 @@ limitations under the License.
mask-size: contain;
mask-position: center;
background-color: $button-fg-color;
background-color: var(--cpd-color-icon-on-solid-primary);
content: "";
}
}

2
res/css/views/rooms/_RoomInfoLine.pcss
View file

@ -49,6 +49,8 @@ limitations under the License.
.mx_RoomInfoLine_members {
color: inherit;
text-decoration: inherit;
font-weight: inherit;
&::before {
content: "·"; /* visual separator */

4
res/css/views/rooms/_TopUnreadMessagesBar.pcss
View file

@ -30,8 +30,8 @@ limitations under the License.
width: 4px;
height: 4px;
border-radius: 16px;
background-color: $secondary-accent-color;
border: 6px solid $accent;
background-color: var(--cpd-color-bg-canvas-default);
border: 6px solid var(--cpd-color-icon-accent-tertiary);
pointer-events: none;
}

4
res/css/views/settings/_LayoutSwitcher.pcss
View file

@ -63,7 +63,7 @@ limitations under the License.
}
&.mx_LayoutSwitcher_RadioButton_selected {
border-color: $accent;
border-color: var(--cpd-color-bg-accent-rest);
}
}
@ -72,7 +72,7 @@ limitations under the License.
}
.mx_StyledRadioButton_checked {
background-color: $accent-200;
background-color: var(--cpd-color-bg-subtle-secondary);
}
.mx_EventTile {

7
res/css/views/settings/_ProfileSettings.pcss
View file

@ -52,12 +52,9 @@ limitations under the License.
}
.mx_ProfileSettings_buttons {
display: flex;
gap: var(--cpd-space-4x);
margin-top: 10px; /* 18px is already accounted for by the <p> above the buttons */
margin-bottom: $spacing-28;
> .mx_AccessibleButton_kind_link {
font: var(--cpd-font-body-md-regular);
margin-inline-end: 10px;
}
}
}

4
res/css/views/user-onboarding/_UserOnboardingTask.pcss
View file

@ -65,7 +65,7 @@ limitations under the License.
content: "";
position: absolute;
inset: -2px;
background: $accent;
background: var(--cpd-color-icon-accent-tertiary);
border-radius: 32px;
animation-duration: 300ms;
@ -75,7 +75,7 @@ limitations under the License.
}
&::after {
background-color: $background;
background-color: var(--cpd-color-icon-on-solid-primary);
content: "";
mask-repeat: no-repeat;
mask-position: center;

2
res/css/views/voip/_DialPadContextMenu.pcss
View file

@ -37,8 +37,6 @@ limitations under the License.
.mx_DialPadContextMenu_cancel {
@mixin customisedCancelButton;
float: right;
width: 14px;
height: 14px;
}
.mx_DialPadContextMenu_header:focus-within {

2
res/css/views/voip/_DialPadModal.pcss
View file

@ -47,8 +47,6 @@ limitations under the License.
.mx_DialPadModal_cancel {
@mixin customisedCancelButton;
float: right;
width: 14px;
height: 14px;
margin-right: 16px;
}