_custom.pcss (6111B)
1 /* 2 Copyright 2024 New Vector Ltd. 3 Copyright 2019 The Matrix.org Foundation C.I.C. 4 5 SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial 6 Please see LICENSE files in the repository root for full details. 7 */ 8 9 $font-family: var(--font-family, $font-family); 10 $monospace-font-family: var(--font-family-monospace, $monospace-font-family); 11 12 /* Colors from Figma Compound https://www.figma.com/file/X4XTH9iS2KGJ2wFKDqkyed/Compound?node-id=559%3A741 */ 13 $accent: var(--accent-color, $accent); 14 $alert: var(--alert, $alert); 15 $links: var(--links, $links); 16 $primary-content: var(--primary-content, $primary-content); 17 $secondary-content: var(--secondary-content, $secondary-content); 18 $tertiary-content: var(--tertiary-content, $tertiary-content); 19 $quaternary-content: var(--quaternary-content, $quaternary-content); 20 $quinary-content: var(--quinary-content, $quinary-content); 21 $system: var(--system, $system); 22 $system-transparent: var(--system-transparent, #e1e6ec00); 23 $background: var(--background, $background); 24 $panels: var(--panels, var(--cpd-color-gray-600)); 25 $panel-actions: var(--panels-actions, var(--cpd-color-gray-300)); 26 27 /* --timeline-background-color */ 28 $custom-theme-background: var(--timeline-background-color, var(--cpd-color-bg-canvas-default)); 29 $button-secondary-bg-color: $custom-theme-background; 30 $lightbox-border-color: $custom-theme-background; 31 $menu-bg-color: $custom-theme-background; 32 $message-action-bar-bg-color: $custom-theme-background; 33 $background: $custom-theme-background; 34 $togglesw-ball-color: var(--cpd-color-bg-action-primary-rest); 35 $togglesw-off-color: var(--togglesw-off-color); 36 $droptarget-bg-color: var(--timeline-background-color-50pct); /* still needs alpha at .5 */ 37 $authpage-modal-bg-color: var(--timeline-background-color-50pct); /* still needs alpha at .59 */ 38 $roomheader-bg-color: $custom-theme-background; 39 40 /* --roomlist-highlights-color */ 41 $panel-actions: var(--roomlist-highlights-color); 42 43 /* --sidebar-color */ 44 $spacePanel-bg-color: var(--sidebar-color); 45 $tooltip-timeline-bg-color: var(--sidebar-color); 46 $dialog-backdrop-color: var(--sidebar-color-50pct); 47 48 /* --roomlist-background-color */ 49 $header-panel-bg-color: var(--roomlist-background-color); 50 $header-panel-bg-hover: var(--cpd-color-bg-action-secondary-hovered); 51 $panel-gradient: var(--roomlist-background-color-0pct), var(--roomlist-background-color); 52 /* these were #f2f5f8 instead of #f3f8fd, but close enough */ 53 $dark-panel-bg-color: var(--roomlist-background-color); 54 $input-lighter-bg-color: var(--roomlist-background-color); 55 $secondary-accent-color: var(--roomlist-background-color); 56 $selected-color: var(--roomlist-background-color); 57 $widget-menu-bar-bg-color: var(--roomlist-background-color); 58 $roomlist-bg-color: var(--roomlist-background-color); 59 60 /* --timeline-text-color */ 61 $message-action-bar-fg-color: var(--timeline-text-color); 62 $primary-content: var(--timeline-text-color); 63 $roomtopic-color: var(--timeline-text-color-50pct); 64 /* was #212121 */ 65 $topleftmenu-color: var(--timeline-text-color); 66 /* was #45474a */ 67 $dialog-title-fg-color: var(--timeline-text-color); 68 /* was #4e5054 */ 69 $authpage-lang-color: var(--timeline-text-color); 70 /* was #232f32 */ 71 $authpage-primary-color: var(--timeline-text-color); 72 73 /* --roomlist-separator-color */ 74 $input-darker-bg-color: var(--roomlist-separator-color); 75 $primary-hairline-color: var(--roomlist-separator-color); /* originally #e5e5e5, but close enough */ 76 $secondary-hairline-color: var(--secondary-hairline-color); 77 78 /* --timeline-text-secondary-color */ 79 $authpage-secondary-color: var(--timeline-text-secondary-color); 80 $pinned-color: var(--timeline-text-secondary-color); 81 $settings-subsection-fg-color: var(--timeline-text-secondary-color); 82 $roomheader-addroom-bg-color: var(--timeline-text-secondary-color); 83 /* was #747474 */ 84 $light-fg-color: var(--timeline-text-secondary-color); 85 $focus-bg-color: var(--focus-bg-color, $focus-bg-color); 86 $room-highlight-color: var(--room-highlight-color); 87 88 $rte-room-pill-color: $room-highlight-color; 89 90 /* was #888888 */ 91 $info-plinth-fg-color: var(--timeline-text-secondary-color); 92 93 /* --primary-color */ 94 $accent-alt: var(--primary-color); 95 96 /* --warning-color */ 97 $button-danger-disabled-bg-color: var(--warning-color-50pct); /* still needs alpha at 0.5 */ 98 99 /* --timeline-highlights-color */ 100 $event-selected-color: var(--timeline-highlights-color); 101 $event-highlight-bg-color: var(--timeline-highlights-color); 102 103 /* redirect some variables away from their hardcoded values in the light theme */ 104 $settings-grey-fg-color: $primary-content; 105 106 /* --eventbubble colors */ 107 $eventbubble-self-bg: var(--eventbubble-self-bg, $eventbubble-self-bg); 108 $eventbubble-others-bg: var(--eventbubble-others-bg, $eventbubble-others-bg); 109 $eventbubble-bg-hover: var(--eventbubble-bg-hover, $eventbubble-bg-hover); 110 111 $reaction-row-button-selected-bg-color: var( 112 --reaction-row-button-selected-bg-color, 113 $reaction-row-button-selected-bg-color 114 ); 115 116 $menu-selected-color: var(--menu-selected-color, $menu-selected-color); 117 $pill-bg-color: var(--other-user-pill-bg-color, $pill-bg-color); 118 $pill-hover-bg-color: var(--other-user-pill-bg-color, $pill-hover-bg-color); 119 $pill-press-bg-color: var(--other-user-pill-bg-color, $pill-press-bg-color); 120 $icon-button-color: var(--icon-button-color, $icon-button-color); 121 122 $strong-input-border-color: var(--strong-input-border-color, $strong-input-border-color); 123 $inverted-bg-color: var(--strong-input-border-color, $inverted-bg-color); 124 125 /** 126 * Variation of the accent color. 127 * Generate this colour scale using LeonardoColor 128 * TODO: Add link 129 */ 130 $accent-100: var(--accent-color-100); 131 $accent-200: var(--accent-color-200); 132 $accent-300: var(--accent-color-300); 133 $accent-400: var(--accent-color-400); 134 $accent-500: var(--accent-color-500); 135 $accent-600: var(--accent-color-600); 136 $accent-700: var(--accent-color-700); 137 $accent-800: var(--accent-color-800); 138 $accent-900: var(--accent-color-900); 139 $accent-1000: var(--accent-color-1000); 140 $accent-1100: var(--accent-color-1100); 141 $accent-1200: var(--accent-color-1200); 142 $accent-1300: var(--accent-color-1300); 143 $accent-1400: var(--accent-color-1400);