38e1da5626
Fix inability to change accent colour consistently in custom theming ( #12772 )
...
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com >
2024-07-15 10:02:29 +00:00
8c49f3f2ea
Update gfm.css to github-markdown-css ( #12613 )
...
* Update gfm.css to github-markdown-css
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com >
* Update screenshots
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com >
---------
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com >
2024-06-13 16:27:37 +00:00
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
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
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
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
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
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
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
526645c791
Apply prettier formatting
2022-12-12 12:24:14 +01:00
72c24af5c0
Disallow invalid inline style comments in stylesheets ( #9099 )
2022-07-27 14:39:29 +01:00
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
7da8c51c6b
Improve colors in settings ( #7283 )
2022-06-14 18:17:10 +00:00
b5ac9493dd
Improve pills ( #6398 )
2022-05-05 11:13:09 +02:00
fe4683df10
Fix some issues with threads rendering ( #8305 )
2022-04-13 12:24:44 +01:00
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
328bbd0e08
set icon-button-color to be configurable ( #7725 )
2022-02-17 09:40:23 +00:00
fe7f453b1f
Make a few colors customizable ( #7270 )
2021-12-03 09:05:25 +00:00
9db0ebb7f5
Task/colors 11 ( #7211 )
2021-11-29 12:52:09 +00:00
4eadb3bca1
Color cleanup number 10 ( #7132 )
2021-11-16 10:10:44 +00:00
27c3153947
Unified room context menus ( #7072 )
2021-11-15 11:39:25 +00:00
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
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
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
0794be1e98
$notice-secondary-color -> $tertiary-content
...
Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com >
2021-10-16 20:21:27 +02:00
ca6ed64811
$roomlist-header-color -> $tertiary-content
...
Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com >
2021-10-16 20:21:26 +02:00
79efd61b66
$roomsublist-divider-color -> $primary-content
...
Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com >
2021-10-16 20:21:26 +02:00
36531be8ca
$roomtile-preview-color -> $secondary-content
...
Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com >
2021-10-16 20:21:26 +02:00
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
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
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
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
17f59131d8
Merge pull request #6868 from SimonBrandner/task/colors-3-mk2
...
Color clean-up #3 mk2
2021-10-01 11:04:15 +02:00
86cccc716c
Remove $interactive-tooltip
...
Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com >
2021-09-27 09:00:05 +02:00
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
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
3d9a0286dc
Revert "$avatar-bg-color -> $background"
...
This reverts commit a3a6f73049
2021-08-24 09:04:17 +02:00
bf87413442
Revert "$roomlist-header-color -> $tertiary-content"
...
This reverts commit 25a3a8ddfd
2021-08-24 09:02:17 +02:00
25a3a8ddfd
$roomlist-header-color -> $tertiary-content
...
Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com >
2021-08-12 17:19:31 +02:00
a3a6f73049
$avatar-bg-color -> $background
...
Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com >
2021-08-12 17:19:30 +02:00
e5fd19c332
$primary-fg-color -> $primary-content
...
Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com >
2021-08-12 17:18:18 +02:00
2afee596a9
$primary-bg-color -> $background
...
Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com >
2021-08-12 17:17:34 +02:00
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
43208c01a1
Fix variable naming
2020-10-14 16:30:38 -06:00
4f8b0afc41
updated TagPanel
2020-10-10 18:00:06 +05:30
603415c2ec
fix index mismatch
2020-09-28 16:20:16 +02:00
361d524e7e
Rename remaining SCSS variables to remove 2 suffix
2020-07-17 16:18:15 -06:00
0e054c05c2
Remove unused SCSS variables + fix tertiary colour
2020-07-17 16:15:14 -06:00
40e4347114
Replace $roomtile-badge-fg-color with $accent-fg-color
2020-07-17 16:08:47 -06:00
1cecabb0b3
Replace $roomtile-name-color with $muted-fg-color (equivalent)
2020-07-17 16:03:26 -06:00
