mirror of https://github.com/vector-im/riot-web
				
				
				
			Color cleanup number 10 (#7132)
							parent
							
								
									6d79b95876
								
							
						
					
					
						commit
						4eadb3bca1
					
				|  | @ -56,7 +56,7 @@ limitations under the License. | |||
|         position: absolute; | ||||
|         height: 20px; | ||||
|         width: 20px; | ||||
|         background-color: $groupheader-button-color; | ||||
|         background-color: $header-panel-text-primary-color; | ||||
|         mask-repeat: no-repeat; | ||||
|         mask-size: contain; | ||||
|     } | ||||
|  |  | |||
|  | @ -28,7 +28,7 @@ limitations under the License. | |||
| 
 | ||||
| .mx_HeaderButtons::before { | ||||
|     content: ""; | ||||
|     background-color: $header-divider-color; | ||||
|     background-color: $header-panel-text-primary-color; | ||||
|     opacity: 0.5; | ||||
|     margin: 6px 8px; | ||||
|     border-radius: 1px; | ||||
|  |  | |||
|  | @ -229,7 +229,7 @@ $pulse-color: $alert; | |||
|         margin: 11px auto 29px auto; | ||||
|         height: 42px; | ||||
|         width: 42px; | ||||
|         background-color: $rightpanel-button-color; | ||||
|         background-color: $header-panel-text-primary-color; | ||||
|         mask-repeat: no-repeat; | ||||
|         mask-size: contain; | ||||
|         mask-position: center; | ||||
|  |  | |||
|  | @ -49,7 +49,7 @@ limitations under the License. | |||
|     } | ||||
| 
 | ||||
|     .mx_TabbedView_tabLabel_active .mx_TabbedView_maskedIcon::before { | ||||
|         background-color: $tab-label-active-icon-bg-color; | ||||
|         background-color: $tab-label-active-fg-color; | ||||
|     } | ||||
| 
 | ||||
|     .mx_TabbedView_maskedIcon { | ||||
|  |  | |||
|  | @ -16,7 +16,7 @@ limitations under the License. | |||
| 
 | ||||
| .mx_CreateEvent { | ||||
|     &::before { | ||||
|         background-color: $composer-e2e-icon-color; | ||||
|         background-color: $header-panel-text-primary-color; | ||||
|         mask-image: url('$(res)/img/element-icons/chat-bubbles.svg'); | ||||
|     } | ||||
| } | ||||
|  |  | |||
|  | @ -16,7 +16,7 @@ limitations under the License. | |||
| 
 | ||||
| .mx_MJitsiWidgetEvent { | ||||
|     &::before { | ||||
|         background-color: $composer-e2e-icon-color; // XXX: Variable abuse | ||||
|         background-color: $header-panel-text-primary-color; // XXX: Variable abuse | ||||
|         mask-image: url('$(res)/img/element-icons/call/video-call.svg'); | ||||
|     } | ||||
| } | ||||
|  |  | |||
|  | @ -26,7 +26,7 @@ limitations under the License. | |||
| 
 | ||||
|     &.mx_cryptoEvent_icon::after { | ||||
|         mask-image: url('$(res)/img/e2e/normal.svg'); | ||||
|         background-color: $composer-e2e-icon-color; | ||||
|         background-color: $header-panel-text-primary-color; | ||||
|     } | ||||
| 
 | ||||
|     &.mx_cryptoEvent_icon_verified::after { | ||||
|  |  | |||
|  | @ -51,7 +51,7 @@ limitations under the License. | |||
|                 left: 0; | ||||
|                 mask-repeat: no-repeat; | ||||
|                 mask-position: center; | ||||
|                 background-color: $rightpanel-button-color; | ||||
|                 background-color: $header-panel-text-primary-color; | ||||
|             } | ||||
|         } | ||||
| 
 | ||||
|  |  | |||
|  | @ -40,7 +40,7 @@ limitations under the License. | |||
|             mask-image: url('$(res)/img/minimise.svg'); | ||||
|             mask-repeat: no-repeat; | ||||
|             mask-position: 7px center; | ||||
|             background-color: $rightpanel-button-color; | ||||
|             background-color: $header-panel-text-primary-color; | ||||
|         } | ||||
|     } | ||||
| 
 | ||||
|  |  | |||
|  | @ -70,7 +70,7 @@ limitations under the License. | |||
| 
 | ||||
| .mx_E2EIcon_normal::after { | ||||
|     mask-image: url('$(res)/img/e2e/normal.svg'); | ||||
|     background-color: $composer-e2e-icon-color; | ||||
|     background-color: $header-panel-text-primary-color; | ||||
| } | ||||
| 
 | ||||
| .mx_E2EIcon_verified::after { | ||||
|  |  | |||
|  | @ -43,7 +43,7 @@ limitations under the License. | |||
|     mask-repeat: no-repeat; | ||||
|     width: 16px; | ||||
|     height: 16px; | ||||
|     background-color: $rightpanel-button-color; | ||||
|     background-color: $header-panel-text-primary-color; | ||||
| } | ||||
| 
 | ||||
| .mx_EntityTile .mx_PresenceLabel { | ||||
|  |  | |||
|  | @ -443,7 +443,7 @@ $left-gutter: 64px; | |||
| .mx_EventTile_e2eIcon_normal { | ||||
|     &::after { | ||||
|         mask-image: url('$(res)/img/e2e/normal.svg'); | ||||
|         background-color: $composer-e2e-icon-color; | ||||
|         background-color: $header-panel-text-primary-color; | ||||
|     } | ||||
|     opacity: 1; | ||||
| } | ||||
|  |  | |||
|  | @ -39,7 +39,7 @@ limitations under the License. | |||
|     mask-image: url('$(res)/img/minimise.svg'); | ||||
|     mask-repeat: no-repeat; | ||||
|     mask-position: 16px center; | ||||
|     background-color: $rightpanel-button-color; | ||||
|     background-color: $header-panel-text-primary-color; | ||||
| } | ||||
| 
 | ||||
| .mx_MemberInfo_name h2 { | ||||
|  |  | |||
|  | @ -137,13 +137,6 @@ limitations under the License. | |||
|     animation: 0.2s visualbell; | ||||
| } | ||||
| 
 | ||||
| .mx_MessageComposer_input blockquote { | ||||
|     color: $blockquote-fg-color; | ||||
|     margin: 0 0 16px; | ||||
|     padding: 0 15px; | ||||
|     border-left: 4px solid $blockquote-bar-color; | ||||
| } | ||||
| 
 | ||||
| .mx_MessageComposer_input pre { | ||||
|     background-color: $rte-code-bg-color; | ||||
|     border-radius: 3px; | ||||
|  |  | |||
|  | @ -48,11 +48,6 @@ $h3-color: $primary-content; | |||
| $focus-bg-color: $room-highlight-color; | ||||
| $roomtopic-color: $text-secondary-color; | ||||
| $light-fg-color: $header-panel-text-secondary-color; | ||||
| $composer-e2e-icon-color: $header-panel-text-primary-color; | ||||
| $header-divider-color: $header-panel-text-primary-color; | ||||
| $groupFilterPanel-button-color: $header-panel-text-primary-color; | ||||
| $groupheader-button-color: $header-panel-text-primary-color; | ||||
| $rightpanel-button-color: $header-panel-text-primary-color; | ||||
| $muted-fg-color: $header-panel-text-primary-color; | ||||
| $info-plinth-bg-color: $header-panel-bg-color; | ||||
| $dark-panel-bg-color: $header-panel-bg-color; | ||||
|  | @ -79,7 +74,6 @@ $input-border-color: rgba(231, 231, 231, 0.2); | |||
| $input-darker-bg-color: #181b21; | ||||
| $input-darker-fg-color: #61708b; | ||||
| $input-lighter-bg-color: #f2f5f8; | ||||
| $input-focused-border-color: #238cf5; | ||||
| // ******************** | ||||
| 
 | ||||
| // Menu | ||||
|  | @ -122,7 +116,6 @@ $widget-body-bg-color: rgba(141, 151, 165, 0.2); | |||
| // ******************** | ||||
| $tab-label-fg-color: $primary-content; | ||||
| $tab-label-active-fg-color: $primary-content; | ||||
| $tab-label-active-icon-bg-color: $primary-content; | ||||
| // ******************** | ||||
| 
 | ||||
| // Buttons | ||||
|  |  | |||
|  | @ -86,15 +86,9 @@ $settings-subsection-fg-color: $text-secondary-color; | |||
| $topleftmenu-color: $text-primary-color; | ||||
| $roomheader-addroom-bg-color: #3c4556; | ||||
| $roomheader-addroom-fg-color: $text-primary-color; | ||||
| $groupFilterPanel-button-color: $header-panel-text-primary-color; | ||||
| $groupheader-button-color: $header-panel-text-primary-color; | ||||
| $rightpanel-button-color: $header-panel-text-primary-color; | ||||
| $icon-button-color: $header-panel-text-primary-color; | ||||
| $roomtopic-color: $text-secondary-color; | ||||
| 
 | ||||
| $header-divider-color: $header-panel-text-primary-color; | ||||
| $composer-e2e-icon-color: $header-panel-text-primary-color; | ||||
| 
 | ||||
| // Legacy theme backports | ||||
| $accent: #0DBD8B; | ||||
| $alert: #FF5B55; | ||||
|  | @ -148,7 +142,6 @@ $event-timestamp-color: $text-secondary-color; | |||
| // Tabbed views | ||||
| $tab-label-fg-color: $text-primary-color; | ||||
| $tab-label-active-fg-color: $text-primary-color; | ||||
| $tab-label-active-icon-bg-color: $text-primary-color; | ||||
| 
 | ||||
| // Buttons | ||||
| $button-primary-fg-color: #ffffff; | ||||
|  |  | |||
|  | @ -112,7 +112,6 @@ $neutral-badge-color: #dbdbdb; | |||
| $preview-widget-bar-color: #ddd; | ||||
| 
 | ||||
| $blockquote-bar-color: #ddd; | ||||
| $blockquote-fg-color: #777; | ||||
| 
 | ||||
| $settings-grey-fg-color: #a2a2a2; | ||||
| $settings-profile-overlay-placeholder-fg-color: #2e2f32; | ||||
|  | @ -124,19 +123,15 @@ $rte-code-bg-color: rgba(0, 0, 0, 0.04); | |||
| $rte-room-pill-color: #aaa; | ||||
| $rte-group-pill-color: #aaa; | ||||
| 
 | ||||
| $header-panel-text-primary-color: #91a1c0; | ||||
| 
 | ||||
| $topleftmenu-color: #212121; | ||||
| $roomheader-bg-color: $primary-bg-color; | ||||
| $roomheader-addroom-bg-color: #91a1c0; | ||||
| $roomheader-addroom-fg-color: $accent-fg-color; | ||||
| $groupFilterPanel-button-color: #91a1c0; | ||||
| $groupheader-button-color: #91a1c0; | ||||
| $rightpanel-button-color: #91a1c0; | ||||
| $icon-button-color: #91a1c0; | ||||
| $roomtopic-color: #9e9e9e; | ||||
| 
 | ||||
| $composer-e2e-icon-color: #91a1c0; | ||||
| $header-divider-color: #91a1c0; | ||||
| 
 | ||||
| // ******************** | ||||
| 
 | ||||
| $theme-button-bg-color: #e3e8f0; | ||||
|  | @ -230,7 +225,6 @@ $lightbox-border-color: #ffffff; | |||
| // Tabbed views | ||||
| $tab-label-fg-color: #45474a; | ||||
| $tab-label-active-fg-color: #ffffff; | ||||
| $tab-label-active-icon-bg-color: $tab-label-active-fg-color; | ||||
| 
 | ||||
| // Buttons | ||||
| $button-primary-fg-color: #ffffff; | ||||
|  |  | |||
|  | @ -101,8 +101,6 @@ $settings-subsection-fg-color: var(--timeline-text-secondary-color); | |||
| $roomheader-addroom-bg-color: var(--timeline-text-secondary-color); | ||||
| // was #747474 | ||||
| $light-fg-color: var(--timeline-text-secondary-color); | ||||
| // was #777777 | ||||
| $blockquote-fg-color: var(--timeline-text-secondary-color); | ||||
| // was #888888 | ||||
| $greyed-fg-color: var(--timeline-text-secondary-color); | ||||
| $info-plinth-fg-color: var(--timeline-text-secondary-color); | ||||
|  |  | |||
|  | @ -53,6 +53,7 @@ $icon-button-color: $quaternary-content; | |||
| 
 | ||||
| // Colors that aren't in Figma - we need to get rid of these | ||||
| // ******************** | ||||
| $header-panel-text-primary-color: #91A1C0; | ||||
| $muted-fg-color: #61708b; | ||||
| $light-fg-color: #747474; | ||||
| $focus-bg-color: #dddddd; | ||||
|  | @ -72,12 +73,7 @@ $strong-input-border-color: #c7c7c7; | |||
| $neutral-badge-color: #dbdbdb; | ||||
| $preview-widget-bar-color: #ddd; | ||||
| $topleftmenu-color: #212121; | ||||
| $groupFilterPanel-button-color: #91A1C0; | ||||
| $groupheader-button-color: #91A1C0; | ||||
| $rightpanel-button-color: #91A1C0; | ||||
| $roomtopic-color: #9e9e9e; | ||||
| $composer-e2e-icon-color: #91A1C0; | ||||
| $header-divider-color: #91A1C0; | ||||
| $groupFilterPanel-bg-color: rgba(232, 232, 232, 0.77); | ||||
| $progressbar-bg-color: rgba(141, 151, 165, 0.2); | ||||
| $panel-gradient: rgba(242, 245, 248, 0), rgba(242, 245, 248, 1); | ||||
|  | @ -91,7 +87,6 @@ $memberstatus-placeholder-color: $muted-fg-color; | |||
| // Blockquote | ||||
| // ******************** | ||||
| $blockquote-bar-color: #ddd; | ||||
| $blockquote-fg-color: #777; | ||||
| // ******************** | ||||
| 
 | ||||
| // Tooltip | ||||
|  | @ -103,13 +98,13 @@ $tooltip-timeline-fg-color: $background; | |||
| // Widget | ||||
| // ******************** | ||||
| $widget-menu-bar-bg-color: $secondary-accent-color; | ||||
| $widget-body-bg-color: #FFF; | ||||
| $widget-body-bg-color: $background; | ||||
| // ******************** | ||||
| 
 | ||||
| // Menu | ||||
| // ******************** | ||||
| $menu-border-color: #e7e7e7; | ||||
| $menu-bg-color: #fff; | ||||
| $menu-bg-color: $system; | ||||
| $menu-box-shadow-color: rgba(118, 131, 156, 0.6); | ||||
| $menu-selected-color: #f5f8fa; | ||||
| // ******************** | ||||
|  | @ -119,7 +114,7 @@ $menu-selected-color: #f5f8fa; | |||
| $settings-grey-fg-color: #a2a2a2; | ||||
| $settings-profile-overlay-placeholder-fg-color: #2e2f32; | ||||
| $settings-profile-button-bg-color: #e7e7e7; | ||||
| $settings-subsection-fg-color: #61708b; | ||||
| $settings-subsection-fg-color: $muted-fg-color; | ||||
| // ******************** | ||||
| 
 | ||||
| // RoomHeader | ||||
|  | @ -150,7 +145,7 @@ $input-border-color: #e7e7e7; | |||
| $input-darker-bg-color: $quinary-content; | ||||
| $input-darker-fg-color: #9fa9ba; | ||||
| $input-lighter-bg-color: #f2f5f8; | ||||
| $input-focused-border-color: #238cf5; | ||||
| $input-focused-border-color: $accent-alt; | ||||
| // ******************** | ||||
| 
 | ||||
| // Dialog | ||||
|  | @ -173,7 +168,7 @@ $imagebody-giflabel-color: rgba(255, 255, 255, 1); | |||
| $roomlist-button-bg-color: rgba(141, 151, 165, 0.2); // Buttons include the filter box, explore button, and sublist buttons | ||||
| $roomlist-bg-color: rgba(245, 245, 245, 0.90); | ||||
| $roomsublist-skeleton-ui-bg: linear-gradient(180deg, #ffffff 0%, #ffffff00 100%); | ||||
| $roomtile-default-badge-bg-color: #61708b; | ||||
| $roomtile-default-badge-bg-color: $muted-fg-color; | ||||
| // ******************** | ||||
| 
 | ||||
| // e2e | ||||
|  | @ -188,12 +183,11 @@ $e2e-warning-color: #ba6363; | |||
| // ******************** | ||||
| $tab-label-fg-color: #45474a; | ||||
| $tab-label-active-fg-color: $background; | ||||
| $tab-label-active-icon-bg-color: $tab-label-active-fg-color; | ||||
| // ******************** | ||||
| 
 | ||||
| // Buttons | ||||
| // ******************** | ||||
| $button-primary-fg-color: #ffffff; | ||||
| $button-primary-fg-color: $background; | ||||
| $button-secondary-bg-color: $accent-fg-color; | ||||
| $button-danger-fg-color: $background; | ||||
| $button-danger-disabled-fg-color: $background; | ||||
|  | @ -203,7 +197,7 @@ $button-danger-disabled-bg-color: #f5b6bb; // TODO: Verify color | |||
| // Toggle switch | ||||
| // ******************** | ||||
| $togglesw-off-color: #c1c9d6; | ||||
| $togglesw-ball-color: #fff; | ||||
| $togglesw-ball-color: $background; | ||||
| // ******************** | ||||
| 
 | ||||
| // Authpage | ||||
|  | @ -213,7 +207,7 @@ $authpage-modal-bg-color: rgba(245, 245, 245, 0.90); | |||
| $authpage-focus-bg-color: #dddddd; | ||||
| $authpage-lang-color: #4e5054; | ||||
| $authpage-primary-color: #232f32; | ||||
| $authpage-secondary-color: #61708b; | ||||
| $authpage-secondary-color: $muted-fg-color; | ||||
| // ******************** | ||||
| 
 | ||||
| // Message action bar | ||||
|  | @ -251,7 +245,7 @@ $eventbubble-reply-color: $quaternary-content; | |||
| 
 | ||||
| // Lightbox | ||||
| // ******************** | ||||
| $lightbox-fg-color: #ffffff; | ||||
| $lightbox-fg-color: $background; | ||||
| $lightbox-background-bg-color: #000; | ||||
| $lightbox-background-bg-opacity: 0.95; | ||||
| // ******************** | ||||
|  |  | |||
		Loading…
	
		Reference in New Issue
	
	 Šimon Brandner
						Šimon Brandner