This repository has been archived by the owner on Sep 11, 2024. It is now read-only.
-
-
Notifications
You must be signed in to change notification settings - Fork 827
custom theme refactor #7726
Closed
Closed
custom theme refactor #7726
Changes from all commits
Commits
Show all changes
2 commits
Select commit
Hold shift + click to select a range
File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,7 +1,8 @@ | ||
| @import "../../../../res/css/_font-sizes.scss"; | ||
| @import "../../legacy-light/css/_paths.scss"; | ||
| @import "../../legacy-light/css/_fonts.scss"; | ||
| @import "../../legacy-light/css/_legacy-light.scss"; | ||
| @import "../../legacy-common/css/_paths.scss"; | ||
| @import "../../legacy-common/css/_fonts.scss"; | ||
| @import "../../legacy-common/css/_legacy-default.scss"; | ||
| @import "../../legacy-dark/css/_legacy-dark.scss"; | ||
| @import "../../light-custom/css/_custom.scss"; | ||
| @import "../../legacy-common/css/_legacy-custom.scss"; | ||
| @import "../../legacy-common/css/_legacy-common.scss"; | ||
| @import "../../../../res/css/_components.scss"; |
File renamed without changes.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,93 @@ | ||
| // typical text (dark-on-white in light skin) | ||
| $secondary-fg-color: $primary-fg-color; | ||
| $tertiary-fg-color: $primary-fg-color; | ||
|
|
||
| // used for dialog box text | ||
| $light-fg-color: $header-panel-text-secondary-color; | ||
|
|
||
| $selection-fg-color: $primary-bg-color; | ||
|
|
||
| $groupFilterPanel-bg-color: $base-color; | ||
| $inverted-bg-color: $groupFilterPanel-bg-color; | ||
|
|
||
| // used by AddressSelector | ||
| $selected-color: $secondary-accent-color; | ||
|
|
||
| $resend-button-divider-color: $input-darker-bg-color; | ||
|
|
||
| $roomheader-bg-color: $primary-bg-color; | ||
|
|
||
| // Legacy theme backports | ||
| $primary-content: $primary-fg-color; | ||
| $secondary-content: $secondary-fg-color; | ||
| $tertiary-content: $tertiary-fg-color; | ||
| $quinary-content: $quaternary-content; | ||
| $background: $primary-bg-color; | ||
| $panels: rgba($system, 0.9); | ||
| $panel-selected: rgba($panel-base, 0.3); | ||
| $panel-hover: rgba($panel-base, 0.1); | ||
| $panel-actions: $roomtile-selected-bg-color; | ||
| $space-nav: rgba($panel-base, 0.15); | ||
|
|
||
| $roomlist-filter-active-bg-color: $panel-actions; | ||
| $roomlist-header-color: $primary-fg-color; | ||
|
|
||
| $voipcall-plinth-color: $system; | ||
|
|
||
| $call-view-button-on-foreground: $secondary-content; | ||
| $call-view-button-on-background: $background; | ||
| $call-view-button-off-foreground: $background; | ||
| $call-view-button-off-background: $secondary-content; | ||
|
|
||
| $tooltip-timeline-bg-color: $groupFilterPanel-bg-color; | ||
|
|
||
| // pinned events indicator | ||
| $pinned-color: $tertiary-content; | ||
|
|
||
| $groupFilterPanel-divider-color: $tertiary-content; | ||
|
|
||
| // ***** Mixins! ***** | ||
|
|
||
| @define-mixin mx_DialogButton { | ||
| /* align images in buttons (eg spinners) */ | ||
| vertical-align: middle; | ||
| border: 0px; | ||
| border-radius: 8px; | ||
| font-family: $font-family; | ||
| font-size: $font-14px; | ||
| color: $button-fg-color; | ||
| background-color: $accent; | ||
| width: auto; | ||
| padding: 7px; | ||
| padding-left: 1.5em; | ||
| padding-right: 1.5em; | ||
| cursor: pointer; | ||
| display: inline-block; | ||
| outline: none; | ||
| } | ||
|
|
||
| @define-mixin mx_DialogButton_hover { | ||
| } | ||
|
|
||
| @define-mixin mx_DialogButton_danger { | ||
| background-color: $accent; | ||
| } | ||
|
|
||
| @define-mixin mx_DialogButton_small { | ||
| @mixin mx_DialogButton; | ||
| font-size: $font-15px; | ||
| padding: 0px 1.5em 0px 1.5em; | ||
| } | ||
|
|
||
| @define-mixin mx_DialogButton_secondary { | ||
| // flip colours for the secondary ones | ||
| font-weight: 600; | ||
| border: 1px solid $accent !important; | ||
| color: $accent; | ||
| background-color: $button-secondary-bg-color; | ||
| } | ||
|
|
||
| @define-mixin mx_Dialog_link { | ||
| color: $accent; | ||
| text-decoration: none; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,127 @@ | ||
| // XXX: check this? | ||
| /* Nunito lacks combining diacritics, so these will fall through | ||
| to the next font. Helevetica's diacritics however do not combine | ||
| nicely (on OSX, at least) and result in a huge horizontal mess. | ||
| Arial empirically gets it right, hence prioritising Arial here. */ | ||
| /* We fall through to Twemoji for emoji rather than falling through | ||
| to native Emoji fonts (if any) to ensure cross-browser consistency */ | ||
| /* Noto Color Emoji contains digits, in fixed-width, therefore causing | ||
| digits in flowed text to stand out. | ||
| TODO: Consider putting all emoji fonts to the end rather than the front. */ | ||
| $font-family: 'Nunito', 'Twemoji', 'Apple Color Emoji', 'Segoe UI Emoji', 'Arial', 'Helvetica', sans-serif, 'Noto Color Emoji'; | ||
|
|
||
| $monospace-font-family: 'Inconsolata', 'Twemoji', 'Apple Color Emoji', 'Segoe UI Emoji', 'Courier', monospace, 'Noto Color Emoji'; | ||
|
|
||
| // button UI (white-on-green in light skin) | ||
| $accent-fg-color: #ffffff; | ||
| $accent-alt: #238cf5; | ||
|
|
||
| $focus-brightness: 105%; | ||
| $location-marker-color: #ffffff; | ||
|
|
||
| // informational plinth | ||
| $info-plinth-fg-color: #888; | ||
|
|
||
| // used by RoomDropTarget | ||
| $droptarget-bg-color: rgba(255, 255, 255, 0.5); | ||
|
|
||
| // used for the border of input text fields | ||
| $input-border-color: #e7e7e7; | ||
|
|
||
| $button-fg-color: white; | ||
|
|
||
| // apart from login forms, which have stronger border | ||
| $strong-input-border-color: #c7c7c7; | ||
|
|
||
| // used for UserSettings EditableText | ||
| $input-underline-color: rgba(151, 151, 151, 0.5); | ||
| $input-fg-color: rgba(74, 74, 74, 0.9); | ||
|
|
||
| $avatar-initial-color: #ffffff; | ||
|
|
||
| $dialog-shadow-color: rgba(0, 0, 0, 0.48); | ||
|
|
||
| $lightbox-background-bg-color: #000; | ||
|
|
||
| $imagebody-giflabel: rgba(0, 0, 0, 0.7); | ||
| $imagebody-giflabel-border: rgba(0, 0, 0, 0.2); | ||
| $imagebody-giflabel-color: rgba(255, 255, 255, 1); | ||
|
|
||
| $info-plinth-fg-color: #888; | ||
|
|
||
| $neutral-badge-color: #dbdbdb; | ||
|
|
||
| $preview-widget-bar-color: #ddd; | ||
|
|
||
| $blockquote-bar-color: #ddd; | ||
|
|
||
| $settings-grey-fg-color: #a2a2a2; | ||
| $settings-profile-button-bg-color: #e7e7e7; | ||
|
|
||
| $rte-bg-color: #e9e9e9; | ||
| $rte-code-bg-color: rgba(0, 0, 0, 0.04); | ||
|
|
||
| $theme-button-bg-color: #e3e8f0; | ||
|
|
||
| $presence-away: #d9b072; | ||
| $presence-offline: #e3e8f0; | ||
|
|
||
| // Legacy theme backports | ||
| $accent: #0DBD8B; | ||
| $alert: #FF5B55; | ||
| $links: #0086e6; | ||
| $quaternary-content: #6F7882; | ||
|
|
||
| $username-variant1-color: #368bd6; | ||
| $username-variant2-color: #ac3ba8; | ||
| $username-variant3-color: #03b381; | ||
| $username-variant4-color: #e64f7a; | ||
| $username-variant5-color: #ff812d; | ||
| $username-variant6-color: #2dc2c5; | ||
| $username-variant7-color: #5c56f5; | ||
| $username-variant8-color: #74d12c; | ||
|
|
||
| $yellow-background: #fff8e3; | ||
|
|
||
| $copy-button-url: "$(res)/img/feather-customised/clipboard.svg"; | ||
|
|
||
| // e2e | ||
| $e2e-verified-color: #76cfa5; // N.B. *NOT* the same as $accent | ||
| $e2e-unknown-color: #e8bf37; | ||
| $e2e-unverified-color: #e8bf37; | ||
| $e2e-warning-color: #ba6363; | ||
|
|
||
| // ImageView | ||
| $lightbox-bg-color: #454545; | ||
| $lightbox-fg-color: #ffffff; | ||
| $lightbox-border-color: #ffffff; | ||
|
|
||
| // Buttons | ||
| $button-primary-fg-color: #ffffff; | ||
| $button-danger-fg-color: #ffffff; | ||
| $button-danger-disabled-fg-color: #ffffff; | ||
| $button-danger-disabled-bg-color: #f5b6bb; // TODO: Verify color | ||
|
|
||
| // Toggle switch | ||
| $togglesw-ball-color: #fff; | ||
|
|
||
| // Slider | ||
| $slider-background-color: #c1c9d6; | ||
|
|
||
| $authpage-bg-color: #2e3649; | ||
| $authpage-modal-bg-color: rgba(255, 255, 255, 0.59); | ||
| $authpage-focus-bg-color: #dddddd; | ||
| $authpage-lang-color: #4e5054; | ||
| $authpage-primary-color: #232f32; | ||
| $authpage-secondary-color: #61708b; | ||
|
|
||
| $tooltip-timeline-fg-color: #ffffff; | ||
|
|
||
| // See non-legacy _light for variable information | ||
| $voice-record-stop-symbol-color: #ff4b55; | ||
| $voice-record-live-circle-color: #ff4b55; | ||
|
|
||
| $composer-shadow-color: tranparent; | ||
|
|
||
| // Bubble tiles | ||
| $eventbubble-reply-color: #C1C6CD; |
File renamed without changes.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Why are these and a bunch of others no longer changeable?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
primary-contentis redefined later on in the same file: https://github.com/matrix-org/matrix-react-sdk/pull/7726/files/21b8d90ca9cc4eb0e2b9332ccf70575d88fdcb19#diff-b489440c03bfaa8d465751827c8382ec7567b730e4362f9166d4c205942f3d49R68There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
secondary-contentwould be redefined bysecondary-fg-colorby both the light and dark theme:https://github.com/matrix-org/matrix-react-sdk/pull/7726/files/21b8d90ca9cc4eb0e2b9332ccf70575d88fdcb19#diff-ddc2c6eb3509b80549b30df3977708adfc119bfcea6e9253f88133791998666bL94
https://github.com/matrix-org/matrix-react-sdk/pull/7726/files/21b8d90ca9cc4eb0e2b9332ccf70575d88fdcb19#diff-90861a924b357562176a919e52e7efbe2f21df686d105dd439fcf244c9d51108L147
Thus no matter what the user defined for
secondary-contentit would not be respected in the theme. Sincesecondary-content = $secondary-fg-coloris common for both light and dark themes it was moved into the newly createdlegacy_commonfile, which holds higher level css variables.There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
tertiary-contenthas the same issue assecondary-content. Note a followup solution would be to clean up these variables are just duplicates are unnecessary but this PR focuses only on reordering the imports and keeping the same variables and behavior. Of course, this is just extra work if we want custom themes to be based off the current themes instead of the legacy themes, which is why I did not work on making the legacy themes as clean/streamlined as possible as I would rather do that for the newer themes. But fixing the import order is important for the current custom theming which is an issue I want to tackle and hence this PR.There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
For other variables the reasons are similar, if you really want I go through and doc the reason for each variable. However, I would rather spend my time working on getting custom themes updated for the new themes instead of focusing on this codebase which will be deleted shortly.