* 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
* 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
* Delete unused or incorrect - sass variables
* Typography pass
* Deprecate _font-weights.pcss and use Compound instead
* lint fix
* Fix snapshot
* Fix typography pass feedback
* Remove unwanted e2e test
cypress tests should test functionality not visual output. And we should not test visual output by inspecting CSS properties
* lintfix
* Migration script for baseFontSize
* Updates after design review
* Update font scaling panel to use min/max size
* Fix custom font
* Fix font slider e2e test
* Update custom font
* Update new baseFontSizeV2
* Disambiguate heading props
* Fix appearance test
* change max font size
* fix e2ee test
* fix tests
* test baseFontSize migration code
* typescript strict
* Migrate baseFontSize account setting
* Change assertion for font size
* Fix font size controller test
* Rename classes of appTileBodyClass
Include mx_AppTileBody_fadeInSpinner in mx_AppTileBody, the class name applied by default
* Apply a common CSS declaration to mx_AppTileBody
* Strictify style rule specificity to avoid visual regressions - mx_AppTileBody--*
* Run prettier
* Change --normal to --large
* Edit and add comments
When you add, edit, or remove style rules from mx_appTileBody without causing a visual regression, it is imperative to keep in mind which selector should be worked on. The comments should help developers who are not familiar with the style codebase to avoid a regression.
* Rename classes of appTileBodyClass
Include mx_AppTileBody_fadeInSpinner in mx_AppTileBody, the class name applied by default
* Apply a common CSS declaration to mx_AppTileBody
* Strictify style rule specificity to avoid visual regressions - mx_AppTileBody--*
* Run prettier
* Change --normal to --large
* Edit and add comments
When you add, edit, or remove style rules from mx_appTileBody without causing a visual regression, it is imperative to keep in mind which selector should be worked on. The comments should help developers who are not familiar with the style codebase to avoid a regression.
* Update a Jest snapshot
* Update a Jest snapshot
Because the style rules do not belong to AppsDrawer.tsx and are used by other multiple components, it is sensible to manage the rules on _common.pcss rather than _AppsDrapwer.pcss to improve maintainability.
* Add a Jest snapshot of AppPermission
* Move the test inside 'for a pinned widget' category
* Make only spinner message bold
* Set font size specified with "mx_AppPermission_smallText" by default
- Add "mx_AppPermission_largeText" for elements whose size has not been specified with mx_AppPermission_smallText
- Create _AppWarning.pcss for AppWarning
* Make AppPermission panel scrollable, keeping the content at the center
* Run prettier
* Use Heading component
* Use Icon component
* Fix the test
* Add a snapshot to track AppTile in AppsDrawer
* Conform to the naming policy - AppsContainer resizer
* Nest 'mx_AppsContainer_resizer_container_handle' to enforce the style
- mx_AppsContainer_resizer
- mx_AppsContainer_resizer_container
- mx_AppsContainer_resizer_container_handle
* Rename "mx_AppsContainer_resizer" to "mx_AppsDrawer_resizer"
PersistentVResizer is defined by mx_AppsDrawer (see const "classes")
* Remove obsolete style rules
These have been obsolete since 3c5c2bef6d.
* Remove _RoleButton.pcss
mx_RoleButton_tooltip style rules are used only on NotificationBadge.tsx.
* Rename the class
* Remove mx_MemberInfo_profileField
* Merge mx_MemberInfo_profile with mx_MemberInfo_container
* Remove redundant div elements
* Update a Jest snapshot
* Use icon component for buttons on mx_AppTileMenuBar_widgets
* Remove redundant declarations
* Add a Percy snapshot test
* Set color value to mx_Icon, fill and stroke with currentColor
* Iterate
* Fix class names - from m_ to mx_
* Move mx_RoomView_auxPanel from _RoomView.pcss to _AuxPanel.pcss
The class name 'mx_RoomView_auxPanel' belongs to AuxPanel, not RoomView
* Correct naming
* Strictify: mx_RoomView_auxPanel *
* Nest mx_AuxPanel_stateViews_span
* Sort
* Run prettier
* Use custom properties
* Revert "Use custom properties"
This reverts commit fe720d05f4572e74e71887203d43c491f0723a92.
* Replace: %s/mx_RightPanel_headerButton/mx_RoomHeader_button/g
* Conform the selectors to our naming policy: with flag (--)
- %s/mx_RoomHeader_button_highlight/mx_RoomHeader_button--highlight/g
- %s/mx_RoomHeader_button_unread/mx_RoomHeader_button--unread/g
* Update a Jest snapshot
* Move the declarations and Sass variables
- Move Sass variables to the place where they are used
* Separate mx_AppWarning and mx_AppPermission
* Remove mx_AppPermission_row for a type selector
* Nest: mx_AppPermission
* Run prettier
* Create a CSS file for AppPermission
* Set zero min-width to prevent input area blowout
* Set min-width values to mx_SearchBar_input and mx_SearchBar_button
* Prevent the input area and cancel button from being overlapped by BaseCard
* Use custom properties: --size-button-search
* Take Percy snapshot of mx_SearchBar
* Apply suggestions from code review
Co-authored-by: Richard van der Hoff <1389908+richvdh@users.noreply.github.com>
* Edit a comment
* Feedback
* Edit a comment
* Update cypress/e2e/timeline/timeline.spec.ts
Co-authored-by: Richard van der Hoff <1389908+richvdh@users.noreply.github.com>
---------
Co-authored-by: Richard van der Hoff <1389908+richvdh@users.noreply.github.com>
This fixes a visual regression introduced in 73007d6dd6: AppTiles with the class mx_AppTile_mini don't get an mx_AppsDrawer as their parent, so the --AppTile_mini-height variable needs a broader scope.
* Nesting
* Run prettier
* Common style rules for `mx_AppTileBody` and `mx_AppTileBody_mini`
* Common style rules for iframe
* Use a custom property for height
* Replace with a custom property - $MiniAppTileHeight
* Replace with a custom property - $MinWidth
* Group common declarations
* Sorting
* Use CSS custom property: --timeline-image-border-radius
Remove the same variable from _MImageBody.pcss
* Rename the property
The property is neither limited to a timeline nor image, but applied to M.*?Body components as well, such as MLocationBody and MVideoBody.
* Remove obsolete style blocks from _MemberInfo.pcss
Deprecated by 2b432b0d82
* Remove obsolete style blocks from _MemberInfo.pcss
Deprecated by fce36ec826
* Nesting: mx_AppLoading
* Conform class and animation name to the naming policy
* Nesting for maintainability, preventing the rule from becoming an orphan
* Rename the class: mx_AppLoading to mx_AppTile_loading
* Remove a mixin - mx_Tooltip_dark
The mixin has been used on `_AppsDrawer.pcss` only.
* Rename mx_Tooltip_dark based on the naming policy
'mx_Tooltip_dark' has been used on `AppPermission.tsx` only.
* Nesting: `mx_ResizeHandle`
* Nesting: `> div`
* Run prettier
* Use a custom property
* Remove a redundant declaration: `cursor: row-resize`
The resizer is either vertical or horizontal, and since `cursor: row-resize` is applied by default, it does not need to be repeated here.
* Conform the class names to the naming policy
* Revert "Use a custom property"
This reverts commit 6116939eec7d9e4220b89a638623e5876e143adf.
* Remove an obsolete variable - `$MessageTimestamp_width_hover`
Added by 9b54aba4c0
Deprecated 5343be7814
* Replace a variable with a custom property - $MessageTimestamp_width
* Merge with an existing property in :root
rename
* Manage the variable on _MessageTimestamp.pcss
* Manage rules related to EventTile on `_EventTile.pcss`
The style rules with the selector "mx_EventTile" should be managed on _EventTile.pcss.
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Merge - `--EventTile_irc_line_info-margin-inline-start`
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Merge - `mx_EventTile_msgOption`
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Merge - `mx_MessageTimestamp`
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Merge - `mx_EventTileBubble`
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Merge - `mx_ReplyChain`
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Merge - `mx_ReplyTile .mx_EventTileBubble`
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Merge - `&.mx_EventTile_isEditing > .mx_EventTile_line`
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Merge - `&.mx_EventTile_info`
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Convert the variable with a custom property
To fix the syntax error "Undefined variable $irc-line-height" because of cascading order.
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Merge - '.mx_EventTile_emote'
The class is both specified by the const 'classes' (for classNames of mx_EventTile) and const 'lineClasses' (for mx_EventTile_line), but it is irrelevant here because the style rule does not expect mx_EventTile_avatar to be a direct descendant. In other words, both ".mx_EventTile.mx_EventTile_emote" and ".mx_EventTile .mx_EventTile_emote" are accepted.
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
---------
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Replace a Sass variable with a CSS custom property - $container-gap-width
* Replace a Sass variable with a CSS custom property - $container-border-width
* Move declarations out of `mx_EventTile:not([data-layout=bubble])`
merging style rules on _EventBubbleTile.scss
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Remove an obsolete `!important` flag from `&.mx_EventTile_continuation`
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Remove `clear: unset` declaration from EventTile on bubble layout
While mx_EventTile:not([data-layout="bubble"]) suggests that "clear: both" would not be applied to the bubble layout, the value "both" has been in fact luckily applied thanks to "mx_RoomView_MessageList li" on _RoomView.pcss, imported later than _EventTile.pcss.
Since "clear: both" is declared for mx_EventTile, this declaration is no longer needed here.
Though the value of that declaration of mx_EventTile on the timeline (including ThreadView) seems to have been overridden by "mx_RoomView_MessageList li" for all layouts, it should not be removed yet until E2E tests which check visual regressions are implemented, in order to minimize the risk of a regression outside of the timeline.
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Remove `:not()` pseudo class from `_FilePanel.pcss`
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Remove `!important` flag from `_MessageEditHistoryDialog.pcss`
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Remove a comment about overriding
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
* Run prettier
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
---------
Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
Co-authored-by: Richard van der Hoff <1389908+richvdh@users.noreply.github.com>
