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

Compound Typography pass (#11103)

Browse source 
* Integrate compound design tokens

The icons should not be included in this repo, and should live in the compound design token repo, but for simplicity sake at this phase of the integration they will be added here

* Delete unused or incorrect - sass variables

* Typography pass

* Deprecate _font-weights.pcss and use Compound instead

* lint fix

* Fix snapshot

* Fix typography pass feedback

* Remove unwanted e2e test

cypress tests should test functionality not visual output. And we should not test visual output by inspecting CSS properties

* lintfix

* Migration script for baseFontSize

* Updates after design review

* Update font scaling panel to use min/max size

* Fix custom font

* Fix font slider e2e test

* Update custom font

* Update new baseFontSizeV2

* Disambiguate heading props

* Fix appearance test

* change max font size

* fix e2ee test

* fix tests

* test baseFontSize migration code

* typescript strict

* Migrate baseFontSize account setting

* Change assertion for font size

* Fix font size controller test
This commit is contained in:
Germain 2023-06-29 11:30:25 +01:00 • committed by GitHub
parent ce479c5774
commit 9c7d935aae
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
199 changed files with 606 additions and 608 deletions
Download patch file Download diff file Expand all files Collapse all files

15
res/css/views/auth/_AuthBody.pcss
View file

@ -25,7 +25,7 @@ limitations under the License.
box-sizing: border-box;
b {
font-weight: var(--font-semi-bold);
font-weight: var(--cpd-font-weight-semibold);
}
&.mx_AuthBody_flex {
@ -35,14 +35,13 @@ limitations under the License.
h1 {
font-size: $font-24px;
font-weight: var(--font-semi-bold);
font-weight: var(--cpd-font-weight-semibold);
margin-top: $spacing-8;
color: $authpage-primary-color;
}
h2 {
font-size: $font-14px;
font-weight: var(--font-semi-bold);
font: var(--cpd-font-body-md-semibold);
color: $authpage-secondary-color;
}
@ -141,7 +140,7 @@ limitations under the License.
/* specialisation for password reset views */
.mx_AuthBody.mx_AuthBody_forgot-password {
font-size: $font-14px;
font: var(--cpd-font-body-md-regular);
color: $primary-content;
padding: 50px 32px;
min-height: 600px;
@ -156,7 +155,7 @@ limitations under the License.
}
.mx_Login_submit {
font-weight: var(--font-semi-bold);
font-weight: var(--cpd-font-weight-semibold);
margin: 0 0 $spacing-16;
}
@ -169,7 +168,7 @@ limitations under the License.
}
.mx_AuthBody_sign-in-instead-button {
font-weight: var(--font-semi-bold);
font-weight: var(--cpd-font-weight-semibold);
padding: $spacing-4;
}
@ -263,7 +262,7 @@ limitations under the License.
text-align: center;
> a {
font-weight: var(--font-semi-bold);
font-weight: var(--cpd-font-weight-semibold);
}
}

2
res/css/views/auth/_AuthFooter.pcss
View file

@ -17,7 +17,7 @@ limitations under the License.
.mx_AuthFooter {
text-align: center;
width: 100%;
font-size: $font-14px;
font: var(--cpd-font-body-md-regular);
opacity: 0.72;
padding: 20px 0;
background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8));

5
res/css/views/auth/_CompleteSecurityBody.pcss
View file

@ -25,13 +25,12 @@ limitations under the License.
h2 {
font-size: $font-24px;
font-weight: var(--font-semi-bold);
font-weight: var(--cpd-font-weight-semibold);
margin-top: 0;
}
h3 {
font-size: $font-14px;
font-weight: var(--font-semi-bold);
font: var(--cpd-font-body-md-semibold);
}
a:link,

3
res/css/views/auth/_LanguageSelector.pcss
View file

@ -20,8 +20,7 @@ limitations under the License.
.mx_AuthBody_language .mx_Dropdown_input {
border: none;
font-size: $font-14px;
font-weight: var(--font-semi-bold);
font: var(--cpd-font-body-md-semibold);
color: $authpage-lang-color;
width: auto;
}

4
res/css/views/auth/_LoginWithQR.pcss
View file

@ -57,7 +57,7 @@ limitations under the License.
margin-left: $spacing-12;
}
font-size: $font-14px;
font: var(--cpd-font-body-md-regular);
h1 {
font-size: $font-24px;
@ -111,7 +111,7 @@ limitations under the License.
.mx_LoginWithQR_confirmationDigits {
text-align: center;
margin: $spacing-48 auto;
font-weight: var(--font-semi-bold);
font-weight: var(--cpd-font-weight-semibold);
font-size: $font-24px;
color: $primary-content;
}

10
res/css/views/beta/_BetaCard.pcss
View file

@ -31,7 +31,7 @@ limitations under the License.
flex: 1;
.mx_BetaCard_title {
font-weight: var(--font-semi-bold);
font-weight: var(--cpd-font-weight-semibold);
font-size: $font-18px;
line-height: $font-22px;
color: $primary-content;
@ -73,8 +73,7 @@ limitations under the License.
.mx_BetaCard_faq {
margin-top: $spacing-20;
font-size: $font-12px;
line-height: $font-15px;
font: var(--cpd-font-body-xs-regular);
> h4 {
margin: $spacing-12 0 0;
@ -108,8 +107,7 @@ limitations under the License.
.mx_SettingsFlag_microcopy {
margin-top: $spacing-4;
font-size: $font-12px;
line-height: $font-15px;
font: var(--cpd-font-body-sm-regular);
}
}
}
@ -121,7 +119,7 @@ limitations under the License.
border-radius: 8px;
text-transform: uppercase;
font-size: $font-12px;
font-weight: var(--font-semi-bold);
font-weight: var(--cpd-font-weight-semibold);
line-height: 15px;
color: $button-primary-fg-color;
display: inline-block;

5
res/css/views/context_menus/_IconizedContextMenu.pcss
View file

@ -30,7 +30,7 @@ limitations under the License.
.mx_IconizedContextMenu_optionList_label {
font-size: $font-15px;
font-weight: var(--font-semi-bold);
font-weight: var(--cpd-font-weight-semibold);
}
/* the notFirst class is for cases where the optionList might be under a header of sorts. */
@ -79,8 +79,7 @@ limitations under the License.
padding-bottom: 12px;
text-decoration: none;
color: $primary-content;
font-size: $font-15px;
line-height: $font-24px;
font: var(--cpd-font-body-md-regular);
/* Create a flexbox to more easily define the list items */
display: flex;

6
res/css/views/dialogs/_AddExistingToSpaceDialog.pcss
View file

@ -48,7 +48,7 @@ limitations under the License.
margin: 0;
color: $secondary-content;
font-size: $font-12px;
font-weight: var(--font-semi-bold);
font-weight: var(--cpd-font-weight-semibold);
line-height: $font-15px;
}
@ -96,7 +96,7 @@ limitations under the License.
}
.mx_AddExistingToSpace_errorHeading {
font-weight: var(--font-semi-bold);
font-weight: var(--cpd-font-weight-semibold);
font-size: $font-15px;
line-height: $font-18px;
color: $alert;
@ -171,7 +171,7 @@ limitations under the License.
> div {
> h1 {
font-weight: var(--font-semi-bold);
font-weight: var(--cpd-font-weight-semibold);
font-size: $font-18px;
line-height: $font-22px;
margin: 0;

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

@ -37,7 +37,7 @@ limitations under the License.
h1 {
display: inline-block;
font-weight: var(--font-semi-bold);
font-weight: var(--cpd-font-weight-semibold);
font-size: $font-24px;
margin: 0; /* managed by header class */
}

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

@ -34,7 +34,7 @@ limitations under the License.
}
.mx_ConfirmUserActionDialog_reasonField {
font-size: $font-14px;
font: var(--cpd-font-body-md-regular);
color: $primary-content;
background-color: $background;
}

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

@ -19,7 +19,7 @@ limitations under the License.
.mx_CreateRoomDialog_details_summary {
list-style: none;
font-weight: var(--font-semi-bold);
font-weight: var(--cpd-font-weight-semibold);
cursor: pointer;
color: $accent;
@ -96,7 +96,7 @@ limitations under the License.
.mx_SettingsFlag_label {
flex: 1 1 0;
min-width: 0;
font-weight: var(--font-semi-bold);
font-weight: var(--cpd-font-weight-semibold);
}
.mx_ToggleSwitch {

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

@ -19,7 +19,7 @@ limitations under the License.
font-size: $font-16px;
display: block;
font-family: $font-family;
font-weight: var(--font-semi-bold);
font-weight: var(--cpd-font-weight-semibold);
color: $primary-content;
margin-top: 18px;
margin-bottom: 12px;

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

@ -41,7 +41,7 @@ limitations under the License.
> h3 {
margin-top: 0;
margin-bottom: 8px;
font-weight: var(--font-semi-bold);
font-weight: var(--cpd-font-weight-semibold);
font-size: $font-18px;
line-height: $font-22px;
}

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

@ -27,7 +27,7 @@ limitations under the License.
margin: 0 0 6px;
color: $secondary-content;
font-size: $font-12px;
font-weight: var(--font-semi-bold);
font-weight: var(--cpd-font-weight-semibold);
line-height: $font-15px;
}

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

@ -17,7 +17,7 @@ limitations under the License.
.mx_GenericFeatureFeedbackDialog {
.mx_GenericFeatureFeedbackDialog_subheading {
color: $primary-content;
font-size: $font-14px;
font: var(--cpd-font-body-md-regular);
line-height: $font-20px;
margin-bottom: 24px;
}

10
res/css/views/dialogs/_InviteDialog.pcss
View file

@ -52,8 +52,8 @@ limitations under the License.
> input[type="text"] {
margin: 6px 0 !important;
height: 24px;
font: var(--cpd-font-body-md-regular);
line-height: $font-24px;
font-size: $font-14px;
padding-inline-start: $spacing-12;
border: 0 !important;
outline: 0 !important;
@ -110,11 +110,11 @@ limitations under the License.
.mx_InviteDialog_section_hidden_suggestions_disclaimer {
padding: $spacing-8 0 $spacing-16 0;
font-size: $font-14px;
font: var(--cpd-font-body-md-regular);
> span {
color: $primary-content;
font-weight: var(--font-semi-bold);
font-weight: var(--cpd-font-weight-semibold);
}
> p {
@ -277,7 +277,7 @@ limitations under the License.
input {
font-size: 18px;
font-weight: var(--font-semi-bold);
font-weight: var(--cpd-font-weight-semibold);
padding-top: 0;
}
@ -429,7 +429,7 @@ limitations under the License.
.mx_InviteDialog_tile_nameStack_name {
font-size: $font-15px;
font-weight: var(--font-semi-bold);
font-weight: var(--cpd-font-weight-semibold);
color: $primary-content;
}

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

@ -16,9 +16,7 @@ limitations under the License.
.mx_JoinRuleDropdown {
margin-bottom: 8px;
font-weight: normal;
font-family: $font-family;
font-size: $font-14px;
font: var(--cpd-font-body-md-regular);
color: $primary-content;
.mx_Dropdown_input {
@ -26,7 +24,7 @@ limitations under the License.
}
.mx_Dropdown_option {
font-size: $font-14px;
font: var(--cpd-font-body-md-regular);
line-height: $font-32px;
height: 32px;
min-height: 32px;

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

@ -54,7 +54,7 @@ limitations under the License.
margin: 0;
color: $secondary-content;
font-size: $font-12px;
font-weight: var(--font-semi-bold);
font-weight: var(--cpd-font-weight-semibold);
line-height: $font-15px;
}

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

@ -31,7 +31,7 @@ limitations under the License.
.mx_MessageEditHistoryDialog_edits {
list-style-type: none;
font-size: $font-14px;
font: var(--cpd-font-body-md-regular);
padding: 0;
color: $primary-content;

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

@ -23,7 +23,7 @@ limitations under the License.
}
h2 {
font-weight: var(--font-semi-bold);
font-weight: var(--cpd-font-weight-semibold);
font-size: $font-15px;
line-height: $font-24px;
margin-top: 0;

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

@ -94,7 +94,7 @@ limitations under the License.
.mx_RoomSettingsDialog_workspace_channel_details {
color: $primary-content;
font-weight: var(--font-semi-bold);
font-weight: var(--cpd-font-weight-semibold);
.mx_RoomSettingsDialog_channel {
margin-inline-start: 5px;

5
res/css/views/dialogs/_ServerPickerDialog.pcss
View file

@ -23,7 +23,8 @@ limitations under the License.
> p {
color: $secondary-content;
font-size: $font-14px;
font: var(--cpd-font-body-md-regular);
margin: 16px 0;
&:first-of-type {
@ -37,7 +38,7 @@ limitations under the License.
> h2 {
font-size: $font-15px;
font-weight: var(--font-semi-bold);
font-weight: var(--cpd-font-weight-semibold);
color: $secondary-content;
margin: 16px 0 16px 8px;
}

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

@ -18,7 +18,7 @@ limitations under the License.
color: $primary-content;
.mx_SpaceSettings_errorText {
font-weight: var(--font-semi-bold);
font-weight: var(--cpd-font-weight-semibold);
font-size: $font-12px;
line-height: $font-15px;
color: $alert;
@ -42,7 +42,7 @@ limitations under the License.
margin-bottom: 4px;
.mx_StyledRadioButton_content {
font-weight: var(--font-semi-bold);
font-weight: var(--cpd-font-weight-semibold);
line-height: $font-18px;
color: $primary-content;
}
@ -71,7 +71,7 @@ limitations under the License.
.mx_AccessibleButton_hasKind {
&.mx_AccessibleButton_kind_link {
font-size: $font-14px;
font: var(--cpd-font-body-md-regular);
margin: 7px 18px;
&.mx_SettingsTab_showAdvanced {

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

@ -163,7 +163,7 @@ limitations under the License.
.mx_SpotlightDialog_section {
> h4,
> .mx_SpotlightDialog_sectionHeader > h4 {
font-weight: var(--font-semi-bold);
font-weight: var(--cpd-font-weight-semibold);
font-size: $font-12px;
line-height: $font-15px;
color: $secondary-content;

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

@ -20,14 +20,14 @@ limitations under the License.
.mx_Dialog {
color: $primary-content;
font-size: $font-14px;
font: var(--cpd-font-body-md-regular);
padding: $spacing-24 $spacing-24 $spacing-16;
text-align: center;
width: 485px;
h1 {
font-size: $font-24px;
font-weight: var(--font-semi-bold);
font-weight: var(--cpd-font-weight-semibold);
}
.mx_VerifyEMailDialog_text-light {

4
res/css/views/dialogs/security/_CreateSecretStorageDialog.pcss
View file

@ -38,7 +38,7 @@ limitations under the License.
.mx_SettingsFlag_label {
flex: 1 1 0;
min-width: 0;
font-weight: var(--font-semi-bold);
font-weight: var(--cpd-font-weight-semibold);
}
.mx_ToggleSwitch {
@ -103,7 +103,7 @@ limitations under the License.
.mx_CreateSecretStorageDialog_optionTitle {
color: $dialog-title-fg-color;
font-weight: var(--font-semi-bold);
font-weight: var(--cpd-font-weight-semibold);
font-size: $font-18px;
padding-bottom: 10px;
}

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

@ -40,7 +40,7 @@ limitations under the License.
display: inline-flex;
align-items: center;
justify-content: center;
font-size: $font-14px;
font: var(--cpd-font-body-md-regular);
border: none; /* override default <button /> styles */
word-break: keep-all; /* prevent button text in Chinese/Japanese/Korean (CJK) from being collapsed */
@ -90,7 +90,7 @@ limitations under the License.
&.mx_AccessibleButton_kind_primary,
&.mx_AccessibleButton_kind_primary_outline,
&.mx_AccessibleButton_kind_secondary {
font-weight: var(--font-semi-bold);
font-weight: var(--cpd-font-weight-semibold);
}
&.mx_AccessibleButton_kind_primary,

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

@ -26,6 +26,6 @@ limitations under the License.
mask-size: contain;
width: $font-11px;
height: $font-11px;
margin-left: $font-3px;
margin-left: 0.3rem;
vertical-align: middle;
}

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

@ -63,7 +63,7 @@ limitations under the License.
.mx_FacePile_summary {
margin-left: 12px;
font-size: $font-14px;
font: var(--cpd-font-body-md-regular);
line-height: $font-24px;
color: $tertiary-content;
}

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

@ -38,9 +38,7 @@ limitations under the License.
.mx_Field input,
.mx_Field select,
.mx_Field textarea {
font-family: inherit;
font-weight: normal;
font-size: $font-14px;
font: var(--cpd-font-body-md-regular);
border: none;
/* Even without a border here, we still need this avoid overlapping the rounded */
/* corners on the field above. */
@ -99,7 +97,7 @@ limitations under the License.
transition: font-size 0.25s ease-out 0.1s, color 0.25s ease-out 0.1s, transform 0.25s ease-out 0.1s,
background-color 0.25s ease-out 0.1s;
background-color: transparent;
font-size: $font-14px;
font: var(--cpd-font-body-md-regular);
transform: translateY(0);
position: absolute;
left: 0px;
@ -183,5 +181,5 @@ limitations under the License.
}
.mx_Field .mx_CountryDropdown {
width: $font-78px;
width: fit-content;
}

13
res/css/views/elements/_GenericEventListSummary.pcss
View file

@ -95,17 +95,22 @@ limitations under the License.
margin-top: $spacing-4;
.mx_EventTile_line {
line-height: $font-20px;
line-height: 1.25;
}
.mx_GenericEventListSummary_spacer {
line-height: $font-22px;
line-height: 1.375;
}
.mx_TextualEvent.mx_GenericEventListSummary_summary {
font-size: $font-13px;
font: var(--cpd-font-body-sm-regular);
}
}
/* Make all state events one order smaller than the other events */
.mx_EventTile {
font: var(--cpd-font-body-sm-regular);
}
}
.mx_GenericEventListSummary_unstyledList {
@ -114,7 +119,7 @@ limitations under the License.
}
.mx_TextualEvent.mx_GenericEventListSummary_summary {
font-size: $font-14px;
font: var(--cpd-font-body-sm-regular);
display: inline-flex;
}

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

@ -39,7 +39,7 @@ limitations under the License.
color: $info-plinth-fg-color;
border-left: none;
border-right: none;
font-weight: var(--font-semi-bold);
font-weight: var(--cpd-font-weight-semibold);
padding: 9px 10px;
flex: 0 0 auto;
}

3
res/css/views/elements/_SSOButtons.pcss
View file

@ -32,8 +32,7 @@ limitations under the License.
text-align: center;
border-radius: 8px;
display: inline-block;
font-size: $font-14px;
font-weight: var(--font-semi-bold);
font: var(--cpd-font-body-md-semibold);
border: 1px solid $input-border-color;
color: $primary-content;

5
res/css/views/elements/_ServerPicker.pcss
View file

@ -21,11 +21,10 @@ limitations under the License.
display: grid;
grid-template-columns: auto min-content;
grid-template-rows: auto auto auto;
font-size: $font-14px;
line-height: $font-20px;
font: var(--cpd-font-body-md-regular);
> h2 {
font-weight: var(--font-semi-bold);
font-weight: var(--cpd-font-weight-semibold);
margin: 0 0 20px;
grid-column: 1;
grid-row: 1;

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

@ -44,7 +44,6 @@ limitations under the License.
flex: 1;
display: flex;
flex-direction: column;
font-size: $font-14px;
color: $primary-content;
padding-right: 10px;
padding-top: 4px;
@ -52,8 +51,7 @@ limitations under the License.
.mx_SettingsFlag_microcopy {
margin-top: 4px;
font-size: $font-12px;
line-height: $font-15px;
font: var(--cpd-font-body-sm-regular);
color: $secondary-content;
/* Support code/pre elements in settings flag descriptions */

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

@ -120,7 +120,7 @@ limitations under the License.
.mx_Slider_selection_label {
color: $muted-fg-color;
font-size: $font-14px;
font: var(--cpd-font-body-md-regular);
}
}
}

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

@ -16,8 +16,7 @@ limitations under the License.
.mx_Checkbox {
$size: $font-16px;
$border-size: $font-1-5px;
$border-radius: $font-4px;
$border-radius: 0.4rem;
display: flex;
align-items: flex-start;
@ -44,7 +43,7 @@ limitations under the License.
width: $size;
size: 0.5rem;
border: $border-size solid rgba($muted-fg-color, 0.5);
border: 1px solid rgba($muted-fg-color, 0.5);
box-sizing: border-box;
border-radius: $border-radius;

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

@ -65,7 +65,7 @@ limitations under the License.
width: $font-16px;
margin-left: 2px; /* For the highlight on focus */
border: $font-1-5px solid $radio-circle-color;
border: 1px solid $radio-circle-color;
border-radius: $font-16px;
> div {

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

@ -107,7 +107,7 @@ limitations under the License.
}
.mx_Tooltip_title {
font-weight: var(--font-semi-bold);
font-weight: var(--cpd-font-weight-semibold);
}
.mx_Tooltip_sub {

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

@ -26,7 +26,7 @@ limitations under the License.
justify-content: flex-end;
h1 {
font-weight: var(--font-semi-bold);
font-weight: var(--cpd-font-weight-semibold);
font-size: $font-32px;
text-align: center;
}

4
res/css/views/emojipicker/_EmojiPicker.pcss
View file

@ -213,7 +213,7 @@ limitations under the License.
.mx_EmojiPicker_category_label,
.mx_EmojiPicker_preview_name {
font-size: $font-16px;
font-weight: var(--font-semi-bold);
font-weight: var(--cpd-font-weight-semibold);
margin: 0;
}
@ -246,7 +246,7 @@ limitations under the License.
.mx_EmojiPicker_shortcode {
color: $light-fg-color;
overflow-wrap: break-word;
font-size: $font-14px;
font: var(--cpd-font-body-md-regular);
&::before,
&::after {

2
res/css/views/messages/_CallEvent.pcss
View file

@ -67,7 +67,7 @@ limitations under the License.
}
.mx_CallEvent_active .mx_CallEvent_title {
font-weight: var(--font-semi-bold);
font-weight: var(--cpd-font-weight-semibold);
}
.mx_CallEvent_columns {

2
res/css/views/messages/_DateSeparator.pcss
View file

@ -19,7 +19,7 @@ limitations under the License.
margin: 4px 0;
display: flex;
align-items: center;
font-size: $font-14px;
font: var(--cpd-font-body-md-regular);
color: $roomtopic-color;
}

5
res/css/views/messages/_DisambiguatedProfile.pcss
View file

@ -22,13 +22,12 @@ limitations under the License.
cursor: pointer;
.mx_DisambiguatedProfile_displayName {
font-weight: var(--font-semi-bold);
font: var(--cpd-font-body-md-semibold);
margin-inline-end: 0;
}
.mx_DisambiguatedProfile_mxid {
font-weight: var(--font-semi-bold);
font-size: 1.1rem;
font: var(--cpd-font-body-sm-semibold);
margin-inline-start: 5px;
opacity: 0.5; /* Match mx_TextualEvent */
color: $primary-content;

2
res/css/views/messages/_EventTileBubble.pcss
View file

@ -48,7 +48,7 @@ limitations under the License.
}
.mx_EventTileBubble_title {
font-weight: var(--font-semi-bold);
font-weight: var(--cpd-font-weight-semibold);
font-size: $font-15px;
grid-row: 1;
}

2
res/css/views/messages/_LegacyCallEvent.pcss
View file

@ -118,7 +118,7 @@ limitations under the License.
min-width: 0;
.mx_LegacyCallEvent_sender {
font-weight: var(--font-semi-bold);
font-weight: var(--cpd-font-weight-semibold);
font-size: 1.5rem;
line-height: 1.8rem;
margin-bottom: $spacing-4;

2
res/css/views/messages/_MPollBody.pcss
View file

@ -18,7 +18,7 @@ limitations under the License.
margin-top: 8px;
h2 {
font-weight: var(--font-semi-bold);
font-weight: var(--cpd-font-weight-semibold);
font-size: $font-15px;
line-height: $font-24px;
margin-top: 0;

2
res/css/views/messages/_MediaBody.pcss
View file

@ -23,7 +23,7 @@ limitations under the License.
max-width: 243px; /* use max-width instead of width so it fits within right panels */
color: $secondary-content;
font-size: $font-14px;
font: var(--cpd-font-body-md-regular);
line-height: $font-24px;
padding: 6px 12px;

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

@ -25,6 +25,7 @@ limitations under the License.
display: flex;
flex-direction: column;
flex: 1;
font-size: var(--cpd-font-size-body-sm);
.mx_BaseCard_header {
--BaseCard_header_button-margin: $spacing-12;
@ -33,8 +34,7 @@ limitations under the License.
> h2 {
margin: 0 44px;
font-size: $font-18px;
font-weight: var(--font-semi-bold);
font: var(--cpd-font-body-sm-semibold);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
@ -153,8 +153,7 @@ limitations under the License.
> h2 {
color: $tertiary-content;
font-size: $font-12px;
font-weight: 500;
font: var(--cpd-font-body-sm-medium);
margin: $spacing-12;
}
@ -163,9 +162,8 @@ limitations under the License.
padding-inline-start: $spacing-12;
margin: 0;
position: relative;
font-size: $font-13px;
font: var(--cpd-font-heading-sm-medium);
height: 20px;
line-height: 20px;
border-radius: 8px;
overflow: hidden;
white-space: nowrap;
@ -199,8 +197,7 @@ limitations under the License.
.mx_AccessibleButton_kind_secondary {
color: $secondary-content;
background-color: rgba(141, 151, 165, 0.2);
font-weight: var(--font-semi-bold);
font-size: $font-14px;
font: var(--cpd-font-body-md-semibold);
}
.mx_AccessibleButton_disabled {
@ -227,7 +224,7 @@ limitations under the License.
position: initial;
span:first-of-type {
font-weight: var(--font-semi-bold);
font-weight: var(--cpd-font-weight-semibold);
font-size: inherit;
color: $primary-content;
}

7
res/css/views/right_panel/_RoomSummaryCard.pcss
View file

@ -30,11 +30,12 @@ limitations under the License.
.mx_RoomSummaryCard_roomName {
margin: $spacing-12 0 $spacing-4;
font-weight: var(--font-semi-bold);
font-weight: var(--cpd-font-weight-semibold);
font-size: $font-17px;
}
.mx_RoomSummaryCard_alias {
font-size: $font-13px;
font: var(--cpd-font-body-md-regular);
color: $secondary-content;
text-overflow: ellipsis;
}
@ -237,7 +238,7 @@ limitations under the License.
margin-top: 12px;
margin-bottom: 12px;
font-size: $font-13px;
font-weight: var(--font-semi-bold);
font-weight: var(--cpd-font-weight-semibold);
}
}

4
res/css/views/right_panel/_ThreadPanel.pcss
View file

@ -174,7 +174,7 @@ limitations under the License.
h2 {
color: $primary-content;
font-weight: var(--font-semi-bold);
font-weight: var(--cpd-font-weight-semibold);
font-size: $font-18px;
margin-top: 24px;
margin-bottom: 10px;
@ -204,7 +204,7 @@ limitations under the License.
line-height: $font-15px;
> b {
font-weight: var(--font-semi-bold);
font-weight: var(--cpd-font-weight-semibold);
}
}
}

15
res/css/views/right_panel/_UserInfo.pcss
View file

@ -19,7 +19,6 @@ limitations under the License.
/* UserInfo has a circular image at the top so it fits between the back & close buttons */
padding-top: 0;
overflow-y: auto;
font-size: $font-12px;
.mx_UserInfo_cancel {
cursor: pointer;
@ -43,7 +42,7 @@ limitations under the License.
h2 {
font-size: $font-18px;
font-weight: var(--font-semi-bold);
font-weight: var(--cpd-font-weight-semibold);
margin: 18px 0 0 0;
}
@ -145,8 +144,8 @@ limitations under the License.
h3 {
text-transform: uppercase;
color: $tertiary-content;
font-weight: var(--font-semi-bold);
font-size: $font-12px;
font: var(--cpd-font-heading-sm-semibold);
font-weight: var(--cpd-font-weight-semibold);
margin: $spacing-4 0;
}
@ -159,7 +158,7 @@ limitations under the License.
h2 {
display: flex;
font-size: $font-18px;
font-size: $font-17px;
line-height: $font-25px;
flex: 1;
justify-content: center;
@ -221,17 +220,17 @@ limitations under the License.
}
.mx_UserInfo_statusMessage {
$statusLineHeight: 16px;
$statusNumberOfLines: 3;
font: var(--cpd-font-body-sm-regular);
font-size: $font-11px;
line-height: $statusLineHeight;
line-height: 1rem;
opacity: 0.5;
overflow: hidden;
word-break: break-word;
text-overflow: ellipsis;
display: -webkit-box;
max-height: calc($statusLineHeight * $statusNumberOfLines);
max-height: calc(1rem * $statusNumberOfLines);
-webkit-line-clamp: $statusNumberOfLines;
-webkit-box-orient: vertical;
}

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

@ -134,7 +134,7 @@ limitations under the License.
}
.mx_VerificationPanel_QRPhase_helpText {
font-size: $font-14px;
font: var(--cpd-font-body-md-regular);
margin: 30px 0;
text-align: center;
}

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

@ -17,7 +17,7 @@ limitations under the License.
.mx_AliasSettings_localAddresses {
cursor: pointer;
color: $accent;
font-weight: var(--font-semi-bold);
font-weight: var(--cpd-font-weight-semibold);
list-style: none;
/* list-style doesn't do it for webkit */

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

@ -73,7 +73,7 @@ limitations under the License.
.mx_DecryptionFailureBar_start_headline {
grid-area: headline;
font-weight: var(--font-semi-bold);
font-weight: var(--cpd-font-weight-semibold);
font-size: $font-16px;
align-self: center;
}

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

@ -72,7 +72,7 @@ limitations under the License.
.mx_EntityTile_name {
flex: 1 1 0;
overflow: hidden;
font-size: $font-14px;
font: var(--cpd-font-body-md-regular);
text-overflow: ellipsis;
white-space: nowrap;
}

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

@ -29,7 +29,6 @@ $left-gutter: 64px;
max-width: 100%;
clear: both; /* TODO: check if this is necessary */
padding-top: 18px;
font-size: $font-14px;
position: relative;
.mx_EventTile_avatar {
@ -105,7 +104,7 @@ $left-gutter: 64px;
.mx_DisambiguatedProfile {
color: $primary-content;
font-size: $font-14px;
font: var(--cpd-font-body-md-regular);
display: inline-block;
padding-bottom: 0px;
padding-top: 0px;
@ -697,11 +696,9 @@ $left-gutter: 64px;
}
.markdown-body {
font-family: inherit !important;
white-space: normal !important;
line-height: inherit !important;
font: var(--cpd-font-body-md-regular) !important;
letter-spacing: var(--cpd-font-letter-spacing-body-md);
color: inherit; /* inherit the colour from the dark or light theme by default (but not for code blocks) */
font-size: $font-14px;
pre,
code {

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

@ -23,7 +23,7 @@ limitations under the License.
h2 {
font-size: $font-18px;
font-weight: var(--font-semi-bold);
font-weight: var(--cpd-font-weight-semibold);
margin: 16px 0 16px 15px;
}

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

@ -31,7 +31,7 @@ limitations under the License.
h2 {
text-transform: uppercase;
color: $h3-color;
font-weight: var(--font-semi-bold);
font-weight: var(--cpd-font-weight-semibold);
font-size: $font-13px;
padding-left: 3px;
padding-right: 12px;
@ -85,7 +85,7 @@ limitations under the License.
display: flex;
justify-content: center;
color: $button-fg-color;
font-weight: var(--font-semi-bold);
font-weight: var(--cpd-font-weight-semibold);
}
.mx_MemberList_invite.mx_AccessibleButton_disabled {

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

@ -114,7 +114,7 @@ limitations under the License.
min-height: 60px;
justify-content: flex-start;
align-items: flex-start;
font-size: $font-14px;
font: var(--cpd-font-body-md-regular);
margin-right: 6px;
pre {
@ -135,7 +135,7 @@ limitations under the License.
box-shadow: none;
color: $primary-content;
background-color: $background;
font-size: $font-14px;
font: var(--cpd-font-body-md-regular);
max-height: 120px;
overflow: auto;

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

@ -99,7 +99,7 @@ limitations under the License.
.mx_MessageComposerFormatBar_buttonTooltip {
white-space: nowrap;
font-size: $font-13px;
font-weight: var(--font-semi-bold);
font-weight: var(--cpd-font-weight-semibold);
min-width: 54px;
text-align: center;

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

@ -55,7 +55,7 @@ limitations under the License.
> h2 {
margin-top: 24px;
font-size: $font-24px;
font-weight: var(--font-semi-bold);
font-weight: var(--cpd-font-weight-semibold);
}
> p {

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

@ -48,7 +48,7 @@ limitations under the License.
.mx_PinnedEventTile_sender {
grid-area: name;
font-weight: var(--font-semi-bold);
font-weight: var(--cpd-font-weight-semibold);
font-size: $font-15px;
line-height: $font-24px;
text-overflow: ellipsis;

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

@ -86,7 +86,7 @@ limitations under the License.
font-size: 12px;
line-height: 15px;
margin: 16px 16px 8px;
font-weight: var(--font-semi-bold);
font-weight: var(--cpd-font-weight-semibold);
/* shouldn’t be actually focusable */
outline: none;
}

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

@ -17,7 +17,7 @@ limitations under the License.
.mx_ReplyTile {
position: relative;
padding: 2px 0;
font-size: $font-14px;
font: var(--cpd-font-body-md-regular);
&.mx_ReplyTile_audio .mx_MFileBody_info_icon::before {
mask-image: url("$(res)/img/element-icons/speaker.svg");
@ -122,7 +122,7 @@ limitations under the License.
gap: 4px;
.mx_DisambiguatedProfile {
font-size: $font-14px;
font: var(--cpd-font-body-md-regular);
display: inline-block; // anti-zalgo, with overflow hidden
padding: 0;

3
res/css/views/rooms/_RoomBreadcrumbs.pcss
View file

@ -44,8 +44,7 @@ limitations under the License.
}
.mx_RoomBreadcrumbs_placeholder {
font-weight: var(--font-semi-bold);
font-size: $font-14px;
font: var(--cpd-font-body-md-semibold);
line-height: 32px; /* specifically to match the height this is not scaled */
height: 32px;
}

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

@ -36,7 +36,7 @@ limitations under the License.
.mx_RoomCallBanner_label {
color: $primary-content;
font-weight: var(--font-semi-bold);
font-weight: var(--cpd-font-weight-semibold);
padding-right: $spacing-8;
&::before {

12
res/css/views/rooms/_RoomHeader.pcss
View file

@ -71,8 +71,8 @@ limitations under the License.
flex: 0 1 auto;
overflow: hidden;
color: $primary-content;
font-weight: var(--font-semi-bold);
font-size: $font-15px;
font: var(--cpd-font-heading-sm-semibold);
font-weight: var(--cpd-font-weight-semibold);
min-height: 24px;
align-items: center;
border-radius: 6px;
@ -135,15 +135,13 @@ limitations under the License.
}
.mx_RoomHeader_topic {
$lineHeight: $font-16px;
$lines: 2;
flex: 1;
color: $roomtopic-color;
font-weight: 400;
font-size: $font-13px;
line-height: $lineHeight;
max-height: calc($lineHeight * $lines);
font: var(--cpd-font-body-sm-regular);
line-height: 1rem;
max-height: calc(1rem * $lines);
overflow: hidden;
-webkit-line-clamp: $lines; /* See: https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp */

5
res/css/views/rooms/_RoomListHeader.pcss
View file

@ -20,9 +20,8 @@ limitations under the License.
.mx_RoomListHeader_contextLessTitle,
.mx_RoomListHeader_contextMenuButton {
font-size: $font-15px;
line-height: $font-24px;
font-weight: var(--font-semi-bold);
font: var(--cpd-font-heading-sm-semibold);
font-weight: var(--cpd-font-weight-semibold);
padding: 1px 24px 1px 4px;
position: relative;
overflow: hidden;

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

@ -24,7 +24,7 @@ limitations under the License.
h3 {
font-size: $font-18px;
font-weight: var(--font-semi-bold);
font-weight: var(--cpd-font-weight-semibold);
&.mx_RoomPreviewBar_spinnerTitle {
display: flex;
@ -141,7 +141,7 @@ limitations under the License.
}
.mx_RoomPreviewBar_inviter {
font-weight: var(--font-semi-bold);
font-weight: var(--cpd-font-weight-semibold);
}
a.mx_RoomPreviewBar_inviter {

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

@ -23,10 +23,10 @@ limitations under the License.
background-color: $system;
border-radius: 8px;
position: relative;
font-size: $font-14px;
font: var(--cpd-font-body-md-regular);
.mx_RoomPreviewCard_notice {
font-weight: var(--font-semi-bold);
font-weight: var(--cpd-font-weight-semibold);
line-height: $font-24px;
color: $primary-content;
margin-top: $spacing-24;

6
res/css/views/rooms/_RoomSublist.pcss
View file

@ -145,9 +145,7 @@ limitations under the License.
.mx_RoomSublist_headerText {
flex: 1;
max-width: calc(100% - 16px); /* 16px is the badge width */
line-height: $font-16px;
font-size: $font-13px;
font-weight: var(--font-semi-bold);
font: var(--cpd-font-body-sm-semibold);
/* Ellipsize any text overflow */
text-overflow: ellipsis;
@ -399,7 +397,7 @@ limitations under the License.
.mx_RoomSublist_contextMenu_title {
font-size: $font-15px;
line-height: $font-20px;
font-weight: var(--font-semi-bold);
font-weight: var(--cpd-font-weight-semibold);
margin-bottom: 4px;
}

5
res/css/views/rooms/_RoomTile.pcss
View file

@ -71,11 +71,10 @@ limitations under the License.
}
.mx_RoomTile_title {
font-size: $font-14px;
line-height: $font-18px;
font: var(--cpd-font-heading-sm-medium);
&.mx_RoomTile_titleHasUnreadEvents {
font-weight: var(--font-semi-bold);
font-weight: var(--cpd-font-weight-semibold);
}
}

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

@ -61,7 +61,7 @@ limitations under the License.
cursor: pointer;
color: $primary-content;
border-bottom: 2px solid $accent;
font-weight: var(--font-semi-bold);
font-weight: var(--cpd-font-weight-semibold);
word-break: break-all; /* prevent the input area and cancel button from being overlapped by BaseCard */
}

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

@ -18,7 +18,7 @@ limitations under the License.
flex: 1;
display: flex;
flex-direction: column;
font-size: $font-14px;
font: var(--cpd-font-body-md-regular);
/* fixed line height to prevent emoji from being taller than text */
line-height: $font-18px;
justify-content: center;

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

@ -107,7 +107,7 @@ limitations under the License.
}
.mx_ThreadSummary_sender {
font-weight: var(--font-semi-bold);
font-weight: var(--cpd-font-weight-semibold);
}
.mx_ThreadSummary_content {

3
res/css/views/rooms/_WhoIsTypingTile.pcss
View file

@ -57,8 +57,7 @@ limitations under the License.
.mx_WhoIsTypingTile_label {
flex: 1;
font-size: $font-14px;
font-weight: var(--font-semi-bold);
font: var(--cpd-font-body-md-semibold);
color: $roomtopic-color;
}

2
res/css/views/rooms/wysiwyg_composer/_SendWysiwygComposer.pcss
View file

@ -18,7 +18,7 @@ limitations under the License.
flex: 1;
display: flex;
flex-direction: column;
font-size: $font-14px;
font: var(--cpd-font-body-md-regular);
/* fixed line height to prevent emoji from being taller than text */
line-height: $font-18px;
justify-content: center;

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

@ -27,15 +27,14 @@ limitations under the License.
.mx_JoinRuleSettings_spacesWithAccess {
> h4 {
color: $secondary-content;
font-weight: var(--font-semi-bold);
font-weight: var(--cpd-font-weight-semibold);
font-size: $font-12px;
line-height: $font-15px;
text-transform: uppercase;
}
> span {
font-weight: 500;
font-size: $font-14px;
font: var(--cpd-font-body-md-medium);
line-height: 32px; /* matches height of avatar for v-align */
color: $secondary-content;
display: inline-block;
@ -60,7 +59,7 @@ limitations under the License.
.mx_StyledRadioButton_content {
margin-left: 14px;
font-weight: var(--font-semi-bold);
font-weight: var(--cpd-font-weight-semibold);
font-size: $font-15px;
line-height: $font-24px;
color: $primary-content;

5
res/css/views/settings/_Notifications.pcss
View file

@ -58,8 +58,7 @@ limitations under the License.
.mx_UserNotifSettings_gridColumnLabel {
color: $secondary-content;
font-size: $font-12px;
font-weight: var(--font-semi-bold);
font: var(--cpd-font-body-sm-semibold);
}
.mx_UserNotifSettings_gridRowError {
// occupy full row
@ -76,7 +75,7 @@ limitations under the License.
& > div:first-child {
/* section header */
font-size: $font-18px;
font-weight: var(--font-semi-bold);
font-weight: var(--cpd-font-weight-semibold);
}
> table {

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

@ -56,7 +56,7 @@ limitations under the License.
margin-bottom: $spacing-28;
> .mx_AccessibleButton_kind_link {
font-size: $font-14px;
font: var(--cpd-font-body-md-regular);
margin-inline-end: 10px;
}
}

6
res/css/views/settings/_SettingsFieldset.pcss
View file

@ -19,10 +19,8 @@ limitations under the License.
}
.mx_SettingsFieldset_legend {
// matches h3
font-size: $font-18px;
font-weight: var(--font-semi-bold);
line-height: $font-22px;
font: var(--cpd-font-heading-md-semibold);
font-weight: var(--cpd-font-weight-semibold);
display: block;
color: $primary-content;
margin-bottom: 10px;

2
res/css/views/settings/_ThemeChoicePanel.pcss
View file

@ -35,7 +35,7 @@ limitations under the License.
margin-right: 15px;
margin-top: 10px;
font-weight: var(--font-semi-bold);
font-weight: var(--cpd-font-weight-semibold);
> span {
justify-content: center;

2
res/css/views/settings/tabs/_SettingsTab.pcss
View file

@ -48,7 +48,7 @@ limitations under the License.
.mx_SettingsTab_subsectionText {
color: $secondary-content;
font-size: $font-14px;
font: var(--cpd-font-body-md-regular);
display: block;
margin-top: 10px;
margin-inline-end: 80px; /* Align with the rest of the view */

2
res/css/views/settings/tabs/room/_NotificationSettingsTab.pcss
View file

@ -22,7 +22,7 @@ limitations under the License.
color: $primary-content;
font-size: $font-15px;
line-height: $font-18px;
font-weight: var(--font-semi-bold);
font-weight: var(--cpd-font-weight-semibold);
margin-top: 16px;
position: relative;
padding-left: 8px;

2
res/css/views/spaces/_SpaceBasicSettings.pcss
View file

@ -65,7 +65,7 @@ limitations under the License.
display: inline-block;
margin: auto 18px;
color: $links;
font-size: $font-14px; /* See _SpaceSettingsDialog.pcss */
font: var(--cpd-font-body-md-regular);
}
> .mx_SpaceBasicSettings_avatar_remove {

2
res/css/views/spaces/_SpaceCreateMenu.pcss
View file

@ -31,7 +31,7 @@ limitations under the License.
> div {
> h2 {
font-weight: var(--font-semi-bold);
font-weight: var(--cpd-font-weight-semibold);
font-size: $font-18px;
margin-top: 4px;
}

2
res/css/views/terms/_InlineTermsAgreement.pcss
View file

@ -16,7 +16,7 @@ limitations under the License.
.mx_InlineTermsAgreement_cbContainer {
margin-bottom: 10px;
font-size: $font-14px;
font: var(--cpd-font-body-md-regular);
a {
color: $accent;

4
res/css/views/toasts/_AnalyticsToast.pcss
View file

@ -19,13 +19,13 @@ limitations under the License.
background-color: $accent;
color: #ffffff;
border: 1px solid $accent;
font-weight: var(--font-semi-bold);
font-weight: var(--cpd-font-weight-semibold);
}
.mx_AccessibleButton_kind_primary {
background-color: $accent;
color: #ffffff;
border: 1px solid $accent;
font-weight: var(--font-semi-bold);
font-weight: var(--cpd-font-weight-semibold);
}
}

2
res/css/views/toasts/_IncomingCallToast.pcss
View file

@ -36,7 +36,7 @@ limitations under the License.
.mx_IncomingCallToast_room {
display: inline-block;
font-weight: var(--font-semi-bold);
font-weight: var(--cpd-font-weight-semibold);
font-size: $font-15px;
line-height: $font-24px;

34
res/css/views/typography/_Heading.pcss
View file

@ -1,5 +1,5 @@
/*
Copyright 2021 The Matrix.org Foundation C.I.C.
Copyright 2021 - 2023x The Matrix.org Foundation C.I.C.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
@ -14,34 +14,28 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
.mx_Heading_h1 {
font-size: $font-32px;
font-weight: var(--font-semi-bold);
line-height: $font-39px;
.mx_Heading_h1,
.mx_Heading_h2,
.mx_Heading_h3,
.mx_Heading_h4 {
margin-inline: unset;
margin-block: unset;
}
.mx_Heading_h1 {
font: var(--cpd-font-heading-xl-semibold);
}
.mx_Heading_h2 {
font-size: $font-24px;
font-weight: var(--font-semi-bold);
line-height: $font-29px;
margin-inline: unset;
margin-block: unset;
font: var(--cpd-font-heading-lg-semibold);
}
.mx_Heading_h3 {
font-size: $font-18px;
font-weight: var(--font-semi-bold);
line-height: $font-22px;
margin-inline: unset;
margin-block: unset;
font: var(--cpd-font-heading-md-semibold);
font-weight: var(--cpd-font-weight-semibold);
}
.mx_Heading_h4 {
font-size: $font-15px;
font-weight: var(--font-semi-bold);
line-height: $font-20px;
margin-inline: unset;
margin-block: unset;
font: var(--cpd-font-heading-sm-semibold);
font-weight: var(--cpd-font-weight-semibold);
}

2
res/css/views/user-onboarding/_UserOnboardingButton.pcss
View file

@ -37,7 +37,7 @@ limitations under the License.
.mx_Heading_h4 {
margin-right: auto;
font-size: $font-14px;
font: var(--cpd-font-body-md-regular);
color: $primary-content;
}

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

@ -36,7 +36,7 @@ limitations under the License.
background-color: $quinary-content;
border-radius: 40px;
font-size: 18px;
font-weight: var(--font-semi-bold);
font-weight: var(--cpd-font-weight-semibold);
text-align: center;
vertical-align: middle;
margin-left: auto;

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

@ -48,19 +48,19 @@ limitations under the License.
.mx_DialPadContextMenu_title {
color: $muted-fg-color;
font-size: 12px;
font-weight: var(--font-semi-bold);
font-weight: var(--cpd-font-weight-semibold);
}
.mx_DialPadContextMenu_dialled {
height: 1.5em;
font-size: 18px;
font-weight: var(--font-semi-bold);
font-weight: var(--cpd-font-weight-semibold);
border: none;
margin: 0px;
}
.mx_DialPadContextMenu_dialled input {
font-size: 18px;
font-weight: var(--font-semi-bold);
font-weight: var(--cpd-font-weight-semibold);
overflow: hidden;
max-width: 185px;
text-align: left;

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

@ -41,7 +41,7 @@ limitations under the License.
.mx_DialPadModal_title {
color: $muted-fg-color;
font-size: 12px;
font-weight: var(--font-semi-bold);
font-weight: var(--cpd-font-weight-semibold);
}
.mx_DialPadModal_cancel {
@ -65,7 +65,7 @@ limitations under the License.
.mx_DialPadModal_field input {
font-size: 18px;
font-weight: var(--font-semi-bold);
font-weight: var(--cpd-font-weight-semibold);
}
.mx_DialPadModal_dialPad {