_light.pcss (12599B)
1 :root { 2 /* This is set to Twemoji when the user opts into the bundled emoji font */ 3 --emoji-font-family: ""; 4 } 5 6 /* Nunito and Inter lacks combining diacritics, so these will fall through 7 to the next font. Helevetica's diacritics sometimes do not combine 8 nicely (on OSX, at least) and result in a huge horizontal mess. 9 Arial empirically gets it right, hence prioritising Arial here. */ 10 /* Noto Color Emoji contains digits, in fixed-width, therefore causing 11 digits in flowed text to stand out. 12 TODO: Consider putting all emoji fonts to the end rather than the front. */ 13 $font-family: 14 "Inter", var(--emoji-font-family), "Apple Color Emoji", "Segoe UI Emoji", "Arial", "Helvetica", sans-serif, 15 "Noto Color Emoji"; 16 17 $monospace-font-family: 18 "Fira Code", var(--emoji-font-family), "Apple Color Emoji", "Segoe UI Emoji", "Courier", monospace, 19 "Noto Color Emoji"; 20 21 /* Colors from Figma Compound https://www.figma.com/file/X4XTH9iS2KGJ2wFKDqkyed/Compound?node-id=559%3A120 */ 22 /* ******************** */ 23 $primary-content: var(--cpd-color-text-primary); 24 $secondary-content: var(--cpd-color-text-secondary); 25 $tertiary-content: var(--cpd-color-gray-800); 26 $quaternary-content: var(--cpd-color-gray-600); 27 $quinary-content: var(--cpd-color-gray-400); 28 29 $system: var(--cpd-color-bg-subtle-primary); 30 $system-transparent: #e1e6ec00; 31 $background: var(--cpd-color-bg-canvas-default); 32 $overlay-background: var(--cpd-color-alpha-gray-1300); 33 34 $panels: var(--cpd-color-bg-subtle-secondary); 35 $panel-actions: var(--cpd-color-alpha-gray-300); 36 37 $separator: var(--cpd-color-gray-400); 38 39 $accent: var(--cpd-color-text-action-accent); 40 $alert: var(--cpd-color-text-critical-primary); 41 $links: var(--cpd-color-text-link-external); 42 $link-external: var(--cpd-color-text-link-external); 43 44 $username-variant1-color: var(--cpd-color-text-decorative-1); 45 $username-variant2-color: var(--cpd-color-text-decorative-2); 46 $username-variant3-color: var(--cpd-color-text-decorative-3); 47 $username-variant4-color: var(--cpd-color-text-decorative-4); 48 $username-variant5-color: var(--cpd-color-text-decorative-5); 49 $username-variant6-color: var(--cpd-color-text-decorative-6); 50 /* ******************** */ 51 52 /** 53 * Creating a `semantic` color scale. This will not be needed with the new 54 * visual language, but necessary during the transition period 55 * This abstract the `green` away from where accent shades are used 56 * Take: `background: rgba($accent, 0.1);` 57 * would be transformed to: `background: $accent-300;` 58 * 59 * To use under very rare circumstances, always prefer the semantics defined 60 * in https://compound.element.io/?path=/docs/tokens-semantic-colors--docs 61 */ 62 $accent-100: var(--cpd-color-green-100); 63 $accent-200: var(--cpd-color-green-200); 64 $accent-300: var(--cpd-color-green-300); 65 $accent-400: var(--cpd-color-green-400); 66 $accent-500: var(--cpd-color-green-500); 67 $accent-600: var(--cpd-color-green-600); 68 $accent-700: var(--cpd-color-green-700); 69 $accent-800: var(--cpd-color-green-800); 70 $accent-900: var(--cpd-color-green-900); 71 $accent-1000: var(--cpd-color-green-1000); 72 $accent-1100: var(--cpd-color-green-1100); 73 $accent-1200: var(--cpd-color-green-1200); 74 $accent-1300: var(--cpd-color-green-1300); 75 $accent-1400: var(--cpd-color-green-1400); 76 77 /* Reused Figma non-compound colors */ 78 /* ******************** */ 79 $inverted-bg-color: var(--cpd-color-bg-action-primary-rest); 80 $header-panel-bg-color: var(--cpd-color-bg-subtle-primary); 81 $header-panel-bg-hover: var(--cpd-color-bg-action-secondary-hovered); 82 /* ******************** */ 83 84 /* Theme specific colors */ 85 /* ******************** */ 86 $icon-button-color: var(--cpd-color-icon-tertiary); 87 /* ******************** */ 88 89 /* Colors that aren't in Figma and are theme specific - we need to get rid of these */ 90 /* ******************** */ 91 $selection-fg-color: $background; 92 $yellow-background: var(--cpd-color-yellow-200); 93 $secondary-accent-color: #f2f5f8; 94 $button-fg-color: $background; 95 $neutral-badge-color: #dbdbdb; 96 $strong-input-border-color: var(--cpd-color-border-interactive-primary); 97 $preview-widget-bar-color: var(--cpd-color-bg-subtle-primary); 98 $accent-fg-color: #f4f6fa; 99 $accent-alt: var(--cpd-color-text-link-external); 100 $info-plinth-fg-color: var(--cpd-color-gray-900); 101 /* ******************** */ 102 103 /* Colors that aren't in Figma - we need to get rid of these */ 104 /* ******************** */ 105 $dark-panel-bg-color: var(--cpd-color-bg-subtle-secondary); 106 $muted-fg-color: #61708b; 107 $light-fg-color: #747474; 108 $focus-bg-color: $preview-widget-bar-color; 109 $info-plinth-bg-color: #f7f7f7; 110 $event-selected-color: var(--cpd-color-bg-subtle-secondary); 111 $topleftmenu-color: #212121; 112 $roomtopic-color: #9e9e9e; 113 $spacePanel-bg-color: rgba(232, 232, 232, 0.77); 114 $panel-gradient: rgba(242, 245, 248, 0), rgba(242, 245, 248, 1); 115 $h3-color: #3d3b39; 116 $event-highlight-bg-color: $yellow-background; 117 $header-panel-text-primary-color: #91a1c0; 118 /* ******************** */ 119 120 /* Blockquote */ 121 /* ******************** */ 122 $blockquote-bar-color: var(--cpd-color-border-interactive-primary); 123 /* ******************** */ 124 125 /* Tooltip */ 126 /* ******************** */ 127 $tooltip-timeline-bg-color: $inverted-bg-color; 128 $tooltip-timeline-fg-color: $background; 129 /* ******************** */ 130 131 /* Widget */ 132 /* ******************** */ 133 $widget-menu-bar-bg-color: $secondary-accent-color; 134 $widget-body-bg-color: $background; 135 /* ******************** */ 136 137 /* Menu */ 138 /* ******************** */ 139 $menu-border-color: #e7e7e7; 140 $menu-bg-color: $background; 141 $menu-box-shadow-color: rgba(118, 131, 156, 0.6); 142 $menu-selected-color: #f5f8fa; 143 /* ******************** */ 144 145 /* Settings */ 146 /* ******************** */ 147 $settings-grey-fg-color: #a2a2a2; 148 $settings-subsection-fg-color: $muted-fg-color; 149 /* ******************** */ 150 151 /* Room */ 152 /* ******************** */ 153 $room-icon-unread-color: var(--cpd-color-icon-tertiary); 154 /* ******************** */ 155 156 /* RoomHeader */ 157 /* ******************** */ 158 $roomheader-addroom-bg-color: rgba(92, 100, 112, 0.2); 159 $roomheader-addroom-fg-color: #5c6470; 160 /* ******************** */ 161 162 /* Rich-text-editor */ 163 /* ******************** */ 164 $pill-bg-color: var(--cpd-color-bg-action-primary-rest); 165 $pill-hover-bg-color: var(--cpd-color-bg-action-primary-hovered); 166 $pill-press-bg-color: var(--cpd-color-bg-action-primary-pressed); 167 $rte-bg-color: #e9e9e9; 168 $rte-code-bg-color: rgba(0, 0, 0, 0.04); 169 /* ******************** */ 170 171 /* Presence */ 172 /* ******************** */ 173 $presence-away: #d9b072; 174 /* not using a compound color here for now as we want to have the same color in 175 light and dark theme. Until we have a non-symetrical token for it, let's keep 176 it hardcoded to the following value */ 177 $presence-offline: #e3e8f0; 178 $presence-busy: $alert; 179 /* ******************** */ 180 181 /* Inputs */ 182 /* ******************** */ 183 $input-border-color: $menu-border-color; 184 $input-darker-bg-color: $quinary-content; 185 $input-darker-fg-color: #9fa9ba; 186 $input-lighter-bg-color: $secondary-accent-color; 187 $input-underline-color: rgba(151, 151, 151, 0.5); 188 $input-fg-color: rgba(74, 74, 74, 0.9); 189 $input-placeholder: var(--cpd-color-text-secondary); 190 /* ******************** */ 191 192 /* Dialog */ 193 /* ******************** */ 194 $dialog-title-fg-color: var(--cpd-color-text-primary); 195 $dialog-backdrop-color: #030c1b4d; 196 $dialog-close-fg-color: $icon-button-color; 197 $dialog-close-external-color: $background; 198 /* ******************** */ 199 200 /* ImageBody */ 201 /* ******************** */ 202 $imagebody-giflabel: rgba(0, 0, 0, 0.7); 203 $imagebody-giflabel-border: rgba(0, 0, 0, 0.2); 204 $imagebody-giflabel-color: $accent-fg-color; 205 /* ******************** */ 206 207 /* e2e */ 208 /* ******************** */ 209 $e2e-verified-color: var(--cpd-color-icon-success-primary); 210 $e2e-warning-color: var(--cpd-color-icon-critical-primary); 211 $e2e-verified-color-light: var(--cpd-color-green-300); 212 $e2e-warning-color-light: var(--cpd-color-red-300); 213 /* ******************** */ 214 215 /* Tabbed views */ 216 /* ******************** */ 217 $tab-label-fg-color: $secondary-content; 218 $tab-label-active-fg-color: $primary-content; 219 /* ******************** */ 220 221 /* Buttons */ 222 /* ******************** */ 223 $button-primary-fg-color: $background; 224 $button-secondary-bg-color: $accent-fg-color; 225 $button-danger-fg-color: $background; 226 $button-danger-disabled-fg-color: $background; 227 $button-danger-disabled-bg-color: #f5b6bb; /* TODO: Verify color */ 228 /* ******************** */ 229 230 /* Toggle switch */ 231 /* ******************** */ 232 $togglesw-off-color: #c1c9d6; 233 $togglesw-ball-color: var(--cpd-color-bg-action-primary-rest); 234 /* ******************** */ 235 236 /* Authpage */ 237 /* ******************** */ 238 $authpage-primary-color: #232f32; 239 $authpage-bg-color: #2e3649; 240 $authpage-modal-bg-color: rgb(245, 245, 245, 0.9); 241 /* background colour of the modal, when the background is blurred */ 242 $authpage-modal-content-with-blur-bg-color: rgb(255, 255, 255, 0.59); 243 $authpage-focus-bg-color: $focus-bg-color; 244 $authpage-lang-color: $secondary-content; 245 $authpage-primary-color: $primary-content; 246 $authpage-secondary-color: $secondary-content; 247 /* ******************** */ 248 249 /* Message action bar */ 250 /* ******************** */ 251 $message-action-bar-bg-color: $background; 252 $message-action-bar-fg-color: $primary-content; 253 $message-action-bar-border-color: #e9edf1; 254 $message-action-bar-hover-border-color: $focus-bg-color; 255 /* ******************** */ 256 257 /* Reaction row */ 258 /* ******************** */ 259 $reaction-row-button-hover-border-color: $focus-bg-color; 260 $reaction-row-button-selected-bg-color: #e9fff9; 261 /* ******************** */ 262 263 /* Voice messages */ 264 /* ******************** */ 265 /* These two don't change between themes. They are the $alert, but we don't want */ 266 /* custom themes to affect them by accident. */ 267 $voice-record-stop-symbol-color: #ff5b55; 268 $voice-record-live-circle-color: #ff5b55; 269 $voice-record-stop-border-color: $quinary-content; 270 $voice-record-icon-color: $tertiary-content; 271 /* ******************** */ 272 273 /* Bubble tiles */ 274 /* ******************** */ 275 $eventbubble-self-bg: var(--cpd-color-green-300); 276 $eventbubble-others-bg: var(--cpd-color-gray-300); 277 $eventbubble-bg-hover: var(--cpd-color-bg-subtle-secondary); 278 /* ******************** */ 279 280 /* Lightbox */ 281 /* ******************** */ 282 /* not using a compound color here for now as we want to have the same color in 283 light and dark theme. Until we have a non-symetrical token for it, let's keep 284 it hardcoded to the following value */ 285 $lightbox-fg-color: #fff; 286 $lightbox-background-bg-color: #000; 287 $lightbox-background-bg-opacity: 0.95; 288 /* ******************** */ 289 290 /* VoIP */ 291 /* ******************** */ 292 $call-view-button-on-foreground: $secondary-content; 293 $call-view-button-on-background: $background; 294 $call-view-button-off-foreground: $background; 295 $call-view-button-off-background: $secondary-content; 296 $call-view-content-background: #21262c; 297 298 $video-feed-secondary-background: #394049; /* XXX: Color from dark theme */ 299 $voipcall-plinth-color: $system; 300 301 /* All of these are from dark theme */ 302 $call-system: #21262c; 303 $call-background: #15191e; 304 $call-primary-content: #ffffff; 305 /* This one is from light theme */ 306 $call-light-quaternary-content: #c1c6cd; 307 /* ******************** */ 308 309 /* One-off colors */ 310 /* ******************** */ 311 $progressbar-bg-color: var(--cpd-color-gray-200); 312 $kbd-border-color: $strong-input-border-color; 313 $visual-bell-bg-color: #faa; 314 $event-timestamp-color: var(--cpd-color-text-secondary); 315 $composer-shadow-color: rgba(0, 0, 0, 0.04); 316 $breadcrumb-placeholder-bg-color: #e8eef5; 317 $resend-button-divider-color: $input-darker-bg-color; 318 $inlinecode-border-color: $quinary-content; 319 $inlinecode-background-color: $system; 320 $codeblock-background-color: $header-panel-bg-color; 321 $scrollbar-thumb-color: rgba(0, 0, 0, 0.2); 322 $selected-color: $secondary-accent-color; 323 /* ******************** */ 324 325 /* One-off global colors - these apply to both themes */ 326 /* ******************** */ 327 $pinned-color: $tertiary-content; 328 $avatar-initial-color: $background; 329 $primary-hairline-color: transparent; 330 $secondary-hairline-color: var(--cpd-color-gray-300); 331 $focus-brightness: 105%; 332 /* ******************** */ 333 334 /* blur amounts for left left panel (only for element theme) */ 335 /* ******************** */ 336 :root { 337 --lp-background-blur: 40px; 338 } 339 340 /* ******************** */ 341 342 /* Location sharing */ 343 /* ******************** */ 344 $location-marker-color: var(--cpd-color-icon-on-solid-primary); 345 $location-live-color: var(--cpd-color-purple-900); 346 $location-live-secondary-color: var(--cpd-color-purple-600); 347 /* ******************** */ 348 349 body { 350 color-scheme: light; 351 } 352 353 /* ******************** */ 354 355 /* diff highlight colors */ 356 /* ******************** */ 357 .hljs-addition { 358 background: var(--cpd-color-green-500); 359 } 360 361 .hljs-deletion { 362 background: var(--cpd-color-red-500); 363 } 364 365 /* ******************** */