PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3
47944 commits 1 branch 0 tags 338 MiB
Commit graph

64 commits

Author SHA1 Message Date
Robin
a0795c7518
Improve readability of badges and pills (#12360) 
* Improve readability of badges and pills

Badges will now always use light theme colors so that they become white-on-gray in both themes, and the contrast of pills has been increased so that they use primary action colors as the background.

* Fix tests
 2024-03-22 00:27:13 +00:00
Robin
26b4d47af1
Refine the colors of some more components (#12343) 
* Refine the colors of some more components

This is a reintroduction of https://github.com/matrix-org/matrix-react-sdk/pull/12255, and should be the last part of the Compound color refinement work (https://github.com/element-hq/element-web/issues/26992). I've updated the following components to reflect design decisions (https://www.figma.com/file/pqhlirZFEwEp5XpudSbiia/Theming-Web-templates?type=design&node-id=80-60219&mode=design&t=mjqwylUie1vRwzOV-0) that will help them fit in better with the new design system:

- Message bubbles
- Pills
- Sent indicators
- Jump to bottom/unread buttons
- Composer placeholder
- Notification badges
- Room sublists
- Verification shields
- Date separators
- Tooltips

Closes https://github.com/element-hq/element-web/issues/22122

* Update some screenshots
 2024-03-18 15:47:55 +00:00
Robin
6eafe0e5a8
Refine styles of controls to match Compound (#12299) 
This changes the styles of buttons, other form controls, and tabs in settings to:

1. Improve their usage of semantic colors, so that they adapt correctly to custom themes
2. Make them more visually coherent with the new Compound design system, as we integrate more of it into the app

This is a re-introduction of https://github.com/matrix-org/matrix-react-sdk/pull/12241 with the difference that we're now using our branding colors again on form colors, and buttons have become rounded to match the appearance of new Compound buttons.
 2024-03-05 04:25:47 +00:00
Robin
8bbad9f653
Enable custom themes to theme Compound (#12240) 
* 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).
 2024-02-13 14:07:58 +00:00
Robin
3052025dd0
Use new semantic tokens for username colors (#12209) 
* Use new semantic tokens for username colors

To match the tokens now used by the Compound Web avatar component

* Fix incorrect lock icon

* Update screenshots
 2024-02-06 20:54:30 +00:00
Germain
ac32d45bcd
Usability fixes for new room header (#11729) 
* Usability fixes for new room header

* lintfix

* Apply padding to both heading and topic

* lintfix

* comment clarity

* Remove title attr
 2023-10-11 14:43:01 +00:00
Germain
38d24f164a
Compound color pass (#11079) 
* 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

* Pareto color pass on the light theme

* bugfixes in the light color pass

* Compound color pass dark theme

* Compound color pass high contrast

* Fix typo

* fix tooltip

* Fix PR feedback

* fix composer button mixin

* Normalise some of the auth page colors

* Update based on figma feedback

* lintfix

* regenerate theme index

* Fix cypress tests

Removed the CSS assertions in the room header as it overlaps with the Percy snapshot

* fix more e2e tests

* update colors based on feedback

* fix color pass

* Fix theme overrides

* Restore -transparent

* fix color mapping

* Final colour pass update

* Do not consume compound colors directly

* rethemedex

* Update pass

* Final tweaks

* a11y pass

* scope opacity to checkbox and not label

* Add missing customisations var for theming

* lintfix

* remove unwanted test
 2023-07-12 17:46:49 +00:00
Michael Weimann
526645c791
Apply prettier formatting 2022-12-12 12:24:14 +01:00
Germain
72c24af5c0
Disallow invalid inline style comments in stylesheets (#9099) 2022-07-27 14:39:29 +01:00
Michael Telatynski
01f4bb8c78
Rename PostCSS files to .pcss (#9013) 
* Rename PostCSS files to `.pcss`

* Make Stylelint happy

* Delint

* Rename new files too

* delint

* Fix bad comment placement
 2022-07-15 14:53:23 +01:00
Šimon Brandner
7da8c51c6b
Improve colors in settings (#7283) 2022-06-14 18:17:10 +00:00
Šimon Brandner
b5ac9493dd
Improve pills (#6398) 2022-05-05 11:13:09 +02:00
Michael Telatynski
fe4683df10
Fix some issues with threads rendering (#8305) 2022-04-13 12:24:44 +01:00
Travis Ralston
fce36ec826
Delete groups (legacy communities system) (#8027) 
* Remove deprecated feature_communities_v2_prototypes

* Update _components

* i18n

* delint

* Cut out a bit more dead code

* Carve into legacy components

* Carve into mostly the room list code

* Carve into instances of "groupId"

* Carve out more of what comes up with "groups"

* Carve out some settings

* ignore related groups state

* Remove instances of spacesEnabled

* Fix some obvious issues

* Remove now-unused css

* Fix variable naming for legacy components

* Update i18n

* Misc cleanup from manual review

* Update snapshot for changed flag

* Appease linters

* rethemedex

* Remove now-unused AddressPickerDialog

* Make ConfirmUserActionDialog's member a required prop

* Remove useless override from RightPanelStore

* Remove extraneous CSS

* Update i18n

* Demo: "Communities are now Spaces" landing page

* Restore linkify for group IDs

* Demo: Dialog on click for communities->spaces notice

* i18n for demos

* i18n post-merge

* Update copy

* Appease the linter

* Post-merge cleanup

* Re-add spaces_learn_more_url to the new SdkConfig place

* Round 1 of post-merge fixes

* i18n

Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>
 2022-03-22 23:07:37 +00:00
Akash Patel
328bbd0e08
set icon-button-color to be configurable (#7725) 2022-02-17 09:40:23 +00:00
Šimon Brandner
fe7f453b1f
Make a few colors customizable (#7270) 2021-12-03 09:05:25 +00:00
Šimon Brandner
9db0ebb7f5
Task/colors 11 (#7211) 2021-11-29 12:52:09 +00:00
Šimon Brandner
4eadb3bca1
Color cleanup number 10 (#7132) 2021-11-16 10:10:44 +00:00
Michael Telatynski
27c3153947
Unified room context menus (#7072) 2021-11-15 11:39:25 +00:00
Šimon Brandner
9abb2f5ff4
Color cleanup 8 (#7108) 
* $accent-color -> $accent

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

* Remove $accent-bg-color

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

* $notice-primary-color -> $alert

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

* Remove $notice-primary-bg-color

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

* Remove $accent-50pct

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

* $warning-color -> $alert

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

* Remove $accent-darker

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

* Remove $orange-warning-color

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

* Remove $warning-bg-color

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

* Remove $info-bg-color

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
 2021-11-11 13:37:29 +00:00
Šimon Brandner
71d8946641
Color cleanup number 7 (#7094) 
* $reaction-row-button-selected-border-color -> $accent-color

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

* $reaction-row-button-bg-color -> $header-panel-bg-color

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

* Remove $room-warning-bg-color

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

* Remove $button-link-bg-color

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

* Remove $tab-label-icon-bg-color

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

* Remove $tab-label-bg-color

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

* Remove $event-redacted-border-color

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

* Remove $event-redacted-fg-color

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

* Remove $panel-divider-color

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

* $search-placeholder-color -> #61708b

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

* $search-bg-color -> #181b21

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

* $header-panel-border-color -> #000000

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

* Remove $scrollbar-track-color

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

* $eventbubble-avatar-outline -> $background

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
 2021-11-10 09:46:33 +00:00
Šimon Brandner
07d9e93d67
Color cleanup number six (#7050) 
* Remove $voip-decline-color and $voip-accept-color

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

* Remove $dialog-background-bg-color

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

* $mention-user-pill-bg-color -> $warning-color

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

* $plinth-bg-color -> $secondary-accent-color

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

* $input-lighter-fg-color -> $input-darker-fg-color

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

* $input-valid-border-color -> $accent-color

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

* $input-invalid-border-color -> $warning-color

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

* $button-bg-color -> $accent-color

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

* $avatar-bg-color -> $background

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

* $preview-widget-fg-color -> $greyed-fg-color

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

* $settings-profile-button-fg-color -> $settings-profile-overlay-placeholder-fg-color

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

* $presence-online -> $accent-color

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

* $pinned-unread-color -> $notice-primary-color

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

* $event-highlight-fg-color -> $warning-color

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

* $tab-label-active-bg-color -> $accent-color

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

* $button-primary-bg-color -> $accent-color

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

* $button-danger-bg-color -> $notice-primary-color

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

* $button-link-fg-color -> $accent-color

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

* $togglesw-on-color -> $accent-color

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

* $slider-selection-color -> $accent-color

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

* $progressbar-fg-color -> $accent-color

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

* $authpage-body-bg-color -> $background

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

* Fix merge issue

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

* Fix second merge issue

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
 2021-11-08 11:50:53 +00:00
Šimon Brandner
0794be1e98
$notice-secondary-color -> $tertiary-content 
Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
 2021-10-16 20:21:27 +02:00
Šimon Brandner
ca6ed64811
$roomlist-header-color -> $tertiary-content 
Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
 2021-10-16 20:21:26 +02:00
Šimon Brandner
79efd61b66
$roomsublist-divider-color -> $primary-content 
Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
 2021-10-16 20:21:26 +02:00
Šimon Brandner
36531be8ca
$roomtile-preview-color -> $secondary-content 
Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
 2021-10-16 20:21:26 +02:00
Šimon Brandner
1691127ad2
$field-focused-label-bg-color -> $background 
Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
 2021-10-16 20:21:20 +02:00
Šimon Brandner
71eeb836d9
Merge remote-tracking branch 'upstream/develop' into task/colors-4 
Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
 2021-10-15 15:23:32 +02:00
Šimon Brandner
15076ce796
Fix issues with custom themes (#6937) 
Fallback to non-custom colors in custom themes

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
 2021-10-13 16:43:01 +02:00
Šimon Brandner
8a9c493f3a
Use correct color for a selected room in the 
Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
 2021-10-01 20:40:18 +02:00
Dariusz Niemczyk
17f59131d8
Merge pull request #6868 from SimonBrandner/task/colors-3-mk2 
Color clean-up #3 mk2
 2021-10-01 11:04:15 +02:00
Šimon Brandner
86cccc716c
Remove $interactive-tooltip 
Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
 2021-09-27 09:00:05 +02:00
Šimon Brandner
861b4c957f
Allow for customization of compound colors 
Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
 2021-09-27 08:35:02 +02:00
Andrew Ferrazzutti
a29487625e Set dark theme colors for auth components 
Fixes https://github.com/vector-im/element-web/issues/18865

Signed-off-by: Andrew Ferrazzutti <fair@miscworks.net>
 2021-09-09 02:18:23 -04:00
Šimon Brandner
3d9a0286dc
Revert "$avatar-bg-color -> $background" 
This reverts commit a3a6f73049.
 2021-08-24 09:04:17 +02:00
Šimon Brandner
bf87413442
Revert "$roomlist-header-color -> $tertiary-content" 
This reverts commit 25a3a8ddfd.
 2021-08-24 09:02:17 +02:00
Šimon Brandner
25a3a8ddfd
$roomlist-header-color -> $tertiary-content 
Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
 2021-08-12 17:19:31 +02:00
Šimon Brandner
a3a6f73049
$avatar-bg-color -> $background 
Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
 2021-08-12 17:19:30 +02:00
Šimon Brandner
e5fd19c332
$primary-fg-color -> $primary-content 
Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
 2021-08-12 17:18:18 +02:00
Šimon Brandner
2afee596a9
$primary-bg-color -> $background 
Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
 2021-08-12 17:17:34 +02:00
Benedikt Tissot
02be0fd300 allow customizing the bubble layout colors 
- correct fallback values in the _legacy_dark.scss files
- read variables to override default values
 2021-08-06 13:10:33 +02:00
Travis Ralston
43208c01a1 Fix variable naming 2020-10-14 16:30:38 -06:00
RinkiyaKeDad
4f8b0afc41 updated TagPanel 2020-10-10 18:00:06 +05:30
Bruno Windels
603415c2ec fix index mismatch 2020-09-28 16:20:16 +02:00
Travis Ralston
361d524e7e Rename remaining SCSS variables to remove 2 suffix 2020-07-17 16:18:15 -06:00
Travis Ralston
0e054c05c2 Remove unused SCSS variables + fix tertiary colour 2020-07-17 16:15:14 -06:00
Travis Ralston
40e4347114 Replace $roomtile-badge-fg-color with $accent-fg-color 2020-07-17 16:08:47 -06:00
Travis Ralston
1cecabb0b3 Replace $roomtile-name-color with $muted-fg-color (equivalent) 2020-07-17 16:03:26 -06:00
Travis Ralston
a30da8dcdb Rename RoomList2 SCSS variables 2020-07-17 15:59:35 -06:00
Bruno Windels
7ca8b27dc1 Make custom themes acceptable with recent changes for element theme 
Note that custom themes are still based on the old theme, now called legacy-light/dark
 2020-07-15 10:38:24 +02:00