Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Replace Sass variables with custom properties on _font-weights.pcss #10554

Merged
merged 5 commits into from
Apr 21, 2023
Merged

Replace Sass variables with custom properties on _font-weights.pcss #10554

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
603d1de
Replace `$font-normal` and `$font-semi-bold`
luixxiul Apr 9, 2023
a33b9c2
Replace `font-weight: 600` with the custom property
luixxiul Apr 9, 2023
cc6fedc
Merge branch 'develop' into css-variables-font-weights
luixxiul Apr 20, 2023
ed62bcb
Merge branch 'develop' into css-variables-font-weights
luixxiul Apr 21, 2023
9e30d1b
Replace the existing variables
luixxiul Apr 21, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions res/css/_common.pcss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -132,7 +132,7 @@ input[type="password"] {
font-family: inherit;
padding: 9px;
font-size: $font-14px;
font-weight: 600;
font-weight: var(--font-semi-bold);
min-width: 0;
}

Expand Down Expand Up @@ -575,7 +575,7 @@ legend {
margin-bottom: 5px;

/* flip colours for the secondary ones */
font-weight: 600;
font-weight: var(--font-semi-bold);
border: 1px solid $accent;
color: $accent;
background-color: $button-secondary-bg-color;
Expand Down Expand Up @@ -794,7 +794,7 @@ legend {

@define-mixin LegacyCallButton {
box-sizing: border-box;
font-weight: 600;
font-weight: var(--font-semi-bold);
height: $font-24px;
line-height: $font-24px;
margin-right: 0;
Expand All @@ -816,7 +816,7 @@ legend {

@define-mixin ThreadRepliesAmount {
color: $secondary-content;
font-weight: $font-semi-bold;
font-weight: var(--font-semi-bold);
white-space: nowrap;
position: relative;
padding: 0 $spacing-12 0 $spacing-8;
Expand Down
6 changes: 4 additions & 2 deletions res/css/_font-weights.pcss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,5 +14,7 @@ See the License for the specific language governing permissions and
limitations under the License.
*/

$font-normal: 400;
$font-semi-bold: 600;
:root {
--font-normal: 400;
--font-semi-bold: 600;
}
2 changes: 1 addition & 1 deletion res/css/components/views/beacon/_BeaconListItem.pcss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@ limitations under the License.
margin-bottom: $spacing-8;

.mx_BeaconStatus_label {
font-weight: $font-semi-bold;
font-weight: var(--font-semi-bold);
}
}

Expand Down
2 changes: 1 addition & 1 deletion res/css/components/views/beacon/_OwnBeaconStatus.pcss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,5 +27,5 @@ limitations under the License.
.mx_OwnBeaconStatus_destructiveButton {
/* override button link_inline styles */
color: $alert !important;
font-weight: $font-semi-bold !important;
font-weight: var(--font-semi-bold) !important;
}
2 changes: 1 addition & 1 deletion res/css/components/views/elements/_FilterDropdown.pcss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,7 +72,7 @@ limitations under the License.
}

.mx_FilterDropdown_optionLabel {
font-weight: $font-semi-bold;
font-weight: var(--font-semi-bold);
display: block;
}

Expand Down
2 changes: 1 addition & 1 deletion res/css/components/views/elements/_FilterTabGroup.pcss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ limitations under the License.

&:checked + span {
color: $accent;
font-weight: $font-semi-bold;
font-weight: var(--font-semi-bold);
// underline
box-shadow: 0 1.5px 0 0 currentColor;
}
Expand Down
2 changes: 1 addition & 1 deletion res/css/components/views/pips/_WidgetPip.pcss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ limitations under the License.
padding: $spacing-12;
display: flex;
font-size: $font-12px;
font-weight: $font-semi-bold;
font-weight: var(--font-semi-bold);
background: linear-gradient(rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0));
}

Expand Down
2 changes: 1 addition & 1 deletion res/css/components/views/spaces/_QuickThemeSwitcher.pcss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ limitations under the License.
}

.mx_QuickThemeSwitcher_heading {
font-weight: $font-semi-bold;
font-weight: var(--font-semi-bold);
font-size: $font-12px;
line-height: $font-15px;
color: $secondary-content;
Expand Down
2 changes: 1 addition & 1 deletion res/css/structures/_GenericDropdownMenu.pcss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -92,7 +92,7 @@ limitations under the License.

span:first-child {
color: $primary-content;
font-weight: $font-semi-bold;
font-weight: var(--font-semi-bold);
}
}

Expand Down
6 changes: 3 additions & 3 deletions res/css/structures/_HomePage.pcss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,15 +37,15 @@ limitations under the License.
}

h1 {
font-weight: $font-semi-bold;
font-weight: var(--font-semi-bold);
font-size: $font-32px;
line-height: $font-44px;
margin-bottom: 4px;
}

h2 {
margin-top: 4px;
font-weight: $font-semi-bold;
font-weight: var(--font-semi-bold);
font-size: $font-18px;
line-height: $font-25px;
color: $muted-fg-color;
Expand Down Expand Up @@ -73,7 +73,7 @@ limitations under the License.
word-break: break-word;
box-sizing: border-box;

font-weight: 600;
font-weight: var(--font-semi-bold);
font-size: $font-15px;
line-height: $font-20px;
color: #fff; /* on all themes */
Expand Down
2 changes: 1 addition & 1 deletion res/css/structures/_LargeLoader.pcss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ limitations under the License.

.mx_LargeLoader_text {
font-size: 24px;
font-weight: 600;
font-weight: var(--font-semi-bold);
padding: 0 16px;
position: relative;
text-align: center;
Expand Down
4 changes: 2 additions & 2 deletions res/css/structures/_QuickSettingsButton.pcss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,7 @@ limitations under the License.
contain: unset; /* let the dropdown paint beyond the context menu */

> div > h2 {
font-weight: $font-semi-bold;
font-weight: var(--font-semi-bold);
font-size: $font-15px;
line-height: $font-24px;
color: $primary-content;
Expand All @@ -72,7 +72,7 @@ limitations under the License.
}

> div > h4 {
font-weight: $font-semi-bold;
font-weight: var(--font-semi-bold);
font-size: $font-12px;
line-height: $font-15px;
text-transform: uppercase;
Expand Down
2 changes: 1 addition & 1 deletion res/css/structures/_RightPanel.pcss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -251,7 +251,7 @@ $pulse-color: $alert;
.mx_RightPanel_scopeHeader {
margin: 24px;
text-align: center;
font-weight: $font-semi-bold;
font-weight: var(--font-semi-bold);
font-size: $font-18px;
line-height: $font-22px;

Expand Down
4 changes: 2 additions & 2 deletions res/css/structures/_RoomSearch.pcss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@ limitations under the License.
/* the following rules are to match that of a real input field */
overflow: hidden;
margin: 9px;
font-weight: $font-semi-bold;
font-weight: var(--font-semi-bold);
}

.mx_RoomSearch_shortcutPrompt {
Expand All @@ -62,7 +62,7 @@ limitations under the License.
font-size: $font-12px;
line-height: $font-15px;
font-family: inherit;
font-weight: $font-semi-bold;
font-weight: var(--font-semi-bold);
color: $light-fg-color;
margin-right: 6px;
white-space: nowrap;
Expand Down
8 changes: 4 additions & 4 deletions res/css/structures/_SpaceHierarchy.pcss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@ limitations under the License.

.mx_SpaceHierarchy_listHeader_header {
grid-column-start: 1;
font-weight: $font-semi-bold;
font-weight: var(--font-semi-bold);
margin: 0;
}

Expand All @@ -71,7 +71,7 @@ limitations under the License.

.mx_SpaceHierarchy_error {
position: relative;
font-weight: $font-semi-bold;
font-weight: var(--font-semi-bold);
color: $alert;
font-size: $font-15px;
line-height: $font-18px;
Expand All @@ -94,7 +94,7 @@ limitations under the License.
.mx_SpaceHierarchy_roomCount {
> h3 {
display: inline;
font-weight: $font-semi-bold;
font-weight: var(--font-semi-bold);
font-size: $font-18px;
line-height: $font-22px;
color: $primary-content;
Expand Down Expand Up @@ -167,7 +167,7 @@ limitations under the License.
gap: 6px 12px;

.mx_SpaceHierarchy_roomTile_item {
font-weight: $font-semi-bold;
font-weight: var(--font-semi-bold);
font-size: $font-15px;
line-height: $font-18px;
display: grid;
Expand Down
6 changes: 3 additions & 3 deletions res/css/structures/_SpacePanel.pcss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -276,7 +276,7 @@ $activeBorderColor: $primary-content;
border-radius: 8px;
background-color: $panel-actions;
font-size: $font-15px !important; /* override inline style */
font-weight: $font-semi-bold;
font-weight: var(--font-semi-bold);
line-height: $font-18px;

& + .mx_BaseAvatar_image {
Expand Down Expand Up @@ -380,7 +380,7 @@ $activeBorderColor: $primary-content;

.mx_SpacePanel_contextMenu_header {
margin: 12px 16px 12px;
font-weight: $font-semi-bold;
font-weight: var(--font-semi-bold);
font-size: $font-15px;
line-height: $font-18px;
overflow: hidden;
Expand Down Expand Up @@ -432,7 +432,7 @@ $activeBorderColor: $primary-content;
color: $tertiary-content;
font-size: $font-10px;
line-height: $font-12px;
font-weight: $font-semi-bold;
font-weight: var(--font-semi-bold);
//margin-left: 8px;
}
}
Expand Down
6 changes: 3 additions & 3 deletions res/css/structures/_SpaceRoomView.pcss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ $SpaceRoomViewInnerWidth: 428px;
border-radius: 8px;
border: 1px solid $input-border-color;
font-size: $font-17px;
font-weight: $font-semi-bold;
font-weight: var(--font-semi-bold);
margin: 20px 0;

> div {
Expand Down Expand Up @@ -73,7 +73,7 @@ $SpaceRoomViewInnerWidth: 428px;
h1 {
margin: 0;
font-size: $font-24px;
font-weight: $font-semi-bold;
font-weight: var(--font-semi-bold);
color: $primary-content;
width: max-content;
}
Expand Down Expand Up @@ -120,7 +120,7 @@ $SpaceRoomViewInnerWidth: 428px;
}

.mx_SpaceRoomView_errorText {
font-weight: $font-semi-bold;
font-weight: var(--font-semi-bold);
font-size: $font-12px;
line-height: $font-15px;
color: $alert;
Expand Down
6 changes: 3 additions & 3 deletions res/css/structures/_ToastContainer.pcss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -115,7 +115,7 @@ limitations under the License.
color: $primary-content;
margin: 0;
font-size: $font-18px;
font-weight: $font-semi-bold;
font-weight: var(--font-semi-bold);
}

.mx_Toast_title_countIndicator {
Expand All @@ -142,7 +142,7 @@ limitations under the License.
.mx_Toast_description {
color: $primary-content;
font-size: $font-15px;
font-weight: $font-semi-bold;
font-weight: var(--font-semi-bold);
max-width: 300px;

a {
Expand All @@ -152,7 +152,7 @@ limitations under the License.

.mx_Toast_detail {
display: block;
font-weight: $font-normal;
font-weight: var(--font-normal);
margin-top: $spacing-4;
max-width: 300px;
}
Expand Down
4 changes: 2 additions & 2 deletions res/css/structures/_UserMenu.pcss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@ limitations under the License.
}

.mx_UserMenu_name {
font-weight: $font-semi-bold;
font-weight: var(--font-semi-bold);
font-size: $font-15px;
line-height: $font-24px;
margin-left: 10px;
Expand Down Expand Up @@ -147,7 +147,7 @@ limitations under the License.
display: inline-block;

> span {
font-weight: 600;
font-weight: var(--font-semi-bold);
display: block;

& + span {
Expand Down
2 changes: 1 addition & 1 deletion res/css/structures/auth/_Login.pcss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ limitations under the License.
.mx_Login_submit {
@mixin mx_DialogButton;
font-size: 15px;
font-weight: 600;
font-weight: var(--font-semi-bold);
width: 100%;
margin-top: 24px;
margin-bottom: 24px;
Expand Down
12 changes: 6 additions & 6 deletions res/css/views/auth/_AuthBody.pcss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ limitations under the License.
box-sizing: border-box;

b {
font-weight: 600;
font-weight: var(--font-semi-bold);
}

&.mx_AuthBody_flex {
Expand All @@ -35,14 +35,14 @@ limitations under the License.

h1 {
font-size: $font-24px;
font-weight: $font-semi-bold;
font-weight: var(--font-semi-bold);
margin-top: $spacing-8;
color: $authpage-primary-color;
}

h2 {
font-size: $font-14px;
font-weight: $font-semi-bold;
font-weight: var(--font-semi-bold);
color: $authpage-secondary-color;
}

Expand Down Expand Up @@ -155,7 +155,7 @@ limitations under the License.
}

.mx_Login_submit {
font-weight: $font-semi-bold;
font-weight: var(--font-semi-bold);
margin: 0 0 $spacing-16;
}

Expand All @@ -168,7 +168,7 @@ limitations under the License.
}

.mx_AuthBody_sign-in-instead-button {
font-weight: $font-semi-bold;
font-weight: var(--font-semi-bold);
padding: $spacing-4;
}

Expand Down Expand Up @@ -262,7 +262,7 @@ limitations under the License.
text-align: center;

> a {
font-weight: $font-semi-bold;
font-weight: var(--font-semi-bold);
}
}

Expand Down
Loading