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

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;
}