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

Enable custom themes to theme Compound (#12240)

Browse source 
* Enable custom themes to theme Compound

* Remove the now redundant username color variables

They are replaced by the Compound theming options (specifically, username colors can be themed by changing the color of Compound's decorative color tokens).
This commit is contained in:
Robin 2024-02-13 09:07:58 -05:00 • committed by GitHub
parent 203c15f205
commit 8bbad9f653
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
9 changed files with 77 additions and 49 deletions
Download patch file Download diff file Expand all files Collapse all files

2
res/css/_common.pcss
View file

@ -17,7 +17,7 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
@import url("@vector-im/compound-design-tokens/assets/web/css/compound-design-tokens.css");
@import url("@vector-im/compound-design-tokens/assets/web/css/compound-design-tokens.css") layer(compound);
@import url("@vector-im/compound-web/dist/style.css");
@import "./_font-sizes.pcss";
@import "./_animations.pcss";

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

@ -14,8 +14,6 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
@charset "utf-8";
.mx_JumpToBottomButton {
z-index: 1000;
position: absolute;

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

@ -14,8 +14,6 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
@charset "utf-8";
.mx_TopUnreadMessagesBar {
z-index: 1000;
position: absolute;

11
res/themes/light-custom/css/_custom.pcss
View file

@ -32,9 +32,6 @@ $background: var(--background, $background);
$panels: var(--panels, var(--cpd-color-gray-600));
$panel-actions: var(--panels-actions, var(--cpd-color-gray-300));
/* --accent-color */
$username-variant3-color: var(--accent-color);
/* --timeline-background-color */
$button-secondary-bg-color: var(--timeline-background-color);
$lightbox-border-color: var(--timeline-background-color);
@ -110,14 +107,6 @@ $accent-alt: var(--primary-color);
/* --warning-color */
$button-danger-disabled-bg-color: var(--warning-color-50pct); /* still needs alpha at 0.5 */
/* --username colors (which use a 0-based index) */
$username-variant1-color: var(--username-colors_0, $username-variant1-color);
$username-variant2-color: var(--username-colors_1, $username-variant2-color);
$username-variant3-color: var(--username-colors_2, $username-variant3-color);
$username-variant4-color: var(--username-colors_3, $username-variant4-color);
$username-variant5-color: var(--username-colors_4, $username-variant5-color);
$username-variant6-color: var(--username-colors_5, $username-variant6-color);
/* --timeline-highlights-color */
$event-selected-color: var(--timeline-highlights-color);
$event-highlight-bg-color: var(--timeline-highlights-color);

2
res/themes/light/css/light.pcss
View file

@ -1,5 +1,3 @@
@import url("@vector-im/compound-design-tokens/assets/web/css/compound-design-tokens.css");
@import "../../../../res/css/_font-sizes.pcss";
@import "_paths.pcss";
@import "_fonts.pcss";