mirrors/element-web
1
0
Fork 0
mirror of https://github.com/element-hq/element-web.git synced 2024-12-23 02:50:48 +03:00
Code Issues Projects Releases Packages Wiki Activity
element-web/res/themes/light-custom/css/_custom.pcss

155 lines
6.4 KiB
Text
Raw Normal View History

add copyright headers
2019-10-02 12:05:57 +03:00
/*
Copyright 2019 The Matrix.org Foundation C.I.C.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
allow changing the font-family
2020-06-23 18:53:16 +03:00
$font-family: var(--font-family, $font-family);
$monospace-font-family: var(--font-family-monospace, $monospace-font-family);
Allow for customization of compound colors Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
2021-09-27 09:35:02 +03:00
Disallow invalid inline style comments in stylesheets (#9099)
2022-07-27 16:39:29 +03:00
/* Colors from Figma Compound https://www.figma.com/file/X4XTH9iS2KGJ2wFKDqkyed/Compound?node-id=559%3A741 */
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 17:43:01 +03:00
$accent: var(--accent, $accent);
$alert: var(--alert, $alert);
$links: var(--links, $links);
$primary-content: var(--primary-content, $primary-content);
$secondary-content: var(--secondary-content, $secondary-content);
$tertiary-content: var(--tertiary-content, $tertiary-content);
$quaternary-content: var(--quaternary-content, $quaternary-content);
$quinary-content: var(--quinary-content, $quinary-content);
$system: var(--system, $system);
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 20:46:49 +03:00
$system-transparent: var(--system-transparent, #e1e6ec00);
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 17:43:01 +03:00
$background: var(--background, $background);
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 20:46:49 +03:00
$panels: var(--panels, var(--cpd-color-gray-600));
$panel-actions: var(--panels-actions, var(--cpd-color-gray-300));
Allow for customization of compound colors Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
2021-09-27 09:35:02 +03:00
Disallow invalid inline style comments in stylesheets (#9099)
2022-07-27 16:39:29 +03:00
/* --timeline-background-color */
apply new pallete with 13 colors
2019-10-01 16:31:43 +03:00
$button-secondary-bg-color: var(--timeline-background-color);
$lightbox-border-color: var(--timeline-background-color);
$menu-bg-color: var(--timeline-background-color);
$message-action-bar-bg-color: var(--timeline-background-color);
$primary-bg-color -> $background Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
2021-08-12 12:10:47 +03:00
$background: var(--timeline-background-color);
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 20:46:49 +03:00
$togglesw-ball-color: var(--cpd-color-bg-action-primary-rest);
Make a few colors customizable (#7270)
2021-12-03 12:05:25 +03:00
$togglesw-off-color: var(--togglesw-off-color);
Disallow invalid inline style comments in stylesheets (#9099)
2022-07-27 16:39:29 +03:00
$droptarget-bg-color: var(--timeline-background-color-50pct); /* still needs alpha at .5 */
$authpage-modal-bg-color: var(--timeline-background-color-50pct); /* still needs alpha at .59 */
Make custom themes acceptable with recent changes for element theme Note that custom themes are still based on the old theme, now called legacy-light/dark
2020-07-14 19:20:28 +03:00
$roomheader-bg-color: var(--timeline-background-color);
Disallow invalid inline style comments in stylesheets (#9099)
2022-07-27 16:39:29 +03:00
/* --roomlist-highlights-color */
Use correct color for a selected room in the Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
2021-08-25 10:17:22 +03:00
$panel-actions: var(--roomlist-highlights-color);
Disallow invalid inline style comments in stylesheets (#9099)
2022-07-27 16:39:29 +03:00
/* --sidebar-color */
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-23 02:07:37 +03:00
$spacePanel-bg-color: var(--sidebar-color);
apply new pallete with 13 colors
2019-10-01 16:31:43 +03:00
$tooltip-timeline-bg-color: var(--sidebar-color);
$dialog-backdrop-color: var(--sidebar-color-50pct);
Disallow invalid inline style comments in stylesheets (#9099)
2022-07-27 16:39:29 +03:00
/* --roomlist-background-color */
apply new pallete with 13 colors
2019-10-01 16:31:43 +03:00
$header-panel-bg-color: var(--roomlist-background-color);
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 17:43:01 +03:00
$header-panel-bg-hover: var(--cpd-color-gray-200);
apply new pallete with 13 colors
2019-10-01 16:31:43 +03:00
$panel-gradient: var(--roomlist-background-color-0pct), var(--roomlist-background-color);
Disallow invalid inline style comments in stylesheets (#9099)
2022-07-27 16:39:29 +03:00
/* these were #f2f5f8 instead of #f3f8fd, but close enough */
apply new pallete with 13 colors
2019-10-01 16:31:43 +03:00
$dark-panel-bg-color: var(--roomlist-background-color);
$input-lighter-bg-color: var(--roomlist-background-color);
$secondary-accent-color: var(--roomlist-background-color);
$selected-color: var(--roomlist-background-color);
$widget-menu-bar-bg-color: var(--roomlist-background-color);
Rename RoomList2 SCSS variables
2020-07-18 00:59:35 +03:00
$roomlist-bg-color: var(--roomlist-background-color);
Disallow invalid inline style comments in stylesheets (#9099)
2022-07-27 16:39:29 +03:00
/* --timeline-text-color */
apply new pallete with 13 colors
2019-10-01 16:31:43 +03:00
$message-action-bar-fg-color: var(--timeline-text-color);
$primary-fg-color -> $primary-content Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
2021-08-12 12:27:12 +03:00
$primary-content: var(--timeline-text-color);
apply new pallete with 13 colors
2019-10-01 16:31:43 +03:00
$roomtopic-color: var(--timeline-text-color-50pct);
$tab-label-fg-color: var(--timeline-text-color);
Disallow invalid inline style comments in stylesheets (#9099)
2022-07-27 16:39:29 +03:00
/* was #212121 */
apply new pallete with 13 colors
2019-10-01 16:31:43 +03:00
$topleftmenu-color: var(--timeline-text-color);
Disallow invalid inline style comments in stylesheets (#9099)
2022-07-27 16:39:29 +03:00
/* was #45474a */
apply new pallete with 13 colors
2019-10-01 16:31:43 +03:00
$dialog-title-fg-color: var(--timeline-text-color);
$tab-label-fg-color: var(--timeline-text-color);
Disallow invalid inline style comments in stylesheets (#9099)
2022-07-27 16:39:29 +03:00
/* was #4e5054 */
apply new pallete with 13 colors
2019-10-01 16:31:43 +03:00
$authpage-lang-color: var(--timeline-text-color);
Disallow invalid inline style comments in stylesheets (#9099)
2022-07-27 16:39:29 +03:00
/* was #232f32 */
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 09:11:47 +03:00
$authpage-primary-color: var(--timeline-text-color);
Disallow invalid inline style comments in stylesheets (#9099)
2022-07-27 16:39:29 +03:00
/* --roomlist-text-secondary-color */
Rename remaining SCSS variables to remove 2 suffix
2020-07-18 01:18:15 +03:00
$roomtile-default-badge-bg-color: var(--roomlist-text-secondary-color);
Make custom themes acceptable with recent changes for element theme Note that custom themes are still based on the old theme, now called legacy-light/dark
2020-07-14 19:20:28 +03:00
Disallow invalid inline style comments in stylesheets (#9099)
2022-07-27 16:39:29 +03:00
/* --roomlist-separator-color */
apply new pallete with 13 colors
2019-10-01 16:31:43 +03:00
$input-darker-bg-color: var(--roomlist-separator-color);
Apply prettier formatting
2022-12-12 14:24:14 +03:00
$primary-hairline-color: var(--roomlist-separator-color); /* originally #e5e5e5, but close enough */
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 20:46:49 +03:00
$secondary-hairline-color: var(--secondary-hairline-color);
Disallow invalid inline style comments in stylesheets (#9099)
2022-07-27 16:39:29 +03:00
/* --timeline-text-secondary-color */
apply new pallete with 13 colors
2019-10-01 16:31:43 +03:00
$authpage-secondary-color: var(--timeline-text-secondary-color);
$pinned-color: var(--timeline-text-secondary-color);
$settings-subsection-fg-color: var(--timeline-text-secondary-color);
$roomheader-addroom-bg-color: var(--timeline-text-secondary-color);
Disallow invalid inline style comments in stylesheets (#9099)
2022-07-27 16:39:29 +03:00
/* was #747474 */
apply new pallete with 13 colors
2019-10-01 16:31:43 +03:00
$light-fg-color: var(--timeline-text-secondary-color);
Make a few colors customizable (#7270)
2021-12-03 12:05:25 +03:00
$focus-bg-color: var(--focus-bg-color, $focus-bg-color);
$room-highlight-color: var(--room-highlight-color);
$rte-room-pill-color: $room-highlight-color;
Disallow invalid inline style comments in stylesheets (#9099)
2022-07-27 16:39:29 +03:00
/* was #888888 */
apply new pallete with 13 colors
2019-10-01 16:31:43 +03:00
$info-plinth-fg-color: var(--timeline-text-secondary-color);
Disallow invalid inline style comments in stylesheets (#9099)
2022-07-27 16:39:29 +03:00
/* --primary-color */
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 16:37:29 +03:00
$accent-alt: var(--primary-color);
Disallow invalid inline style comments in stylesheets (#9099)
2022-07-27 16:39:29 +03:00
/* --warning-color */
$button-danger-disabled-bg-color: var(--warning-color-50pct); /* still needs alpha at 0.5 */
/* --timeline-highlights-color */
actually use timeline highlight color
2020-04-28 17:49:25 +03:00
$event-selected-color: var(--timeline-highlights-color);
$event-highlight-bg-color: var(--timeline-highlights-color);
Disallow invalid inline style comments in stylesheets (#9099)
2022-07-27 16:39:29 +03:00
/* redirect some variables away from their hardcoded values in the light theme */
$primary-fg-color -> $primary-content Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
2021-08-12 12:27:12 +03:00
$settings-grey-fg-color: $primary-content;
allow customizing the bubble layout colors - correct fallback values in the _legacy_dark.scss files - read variables to override default values
2021-08-06 14:07:09 +03:00
Disallow invalid inline style comments in stylesheets (#9099)
2022-07-27 16:39:29 +03:00
/* --eventbubble colors */
allow customizing the bubble layout colors - correct fallback values in the _legacy_dark.scss files - read variables to override default values
2021-08-06 14:07:09 +03:00
$eventbubble-self-bg: var(--eventbubble-self-bg, $eventbubble-self-bg);
$eventbubble-others-bg: var(--eventbubble-others-bg, $eventbubble-others-bg);
$eventbubble-bg-hover: var(--eventbubble-bg-hover, $eventbubble-bg-hover);
$eventbubble-reply-color: var(--eventbubble-reply-color, $eventbubble-reply-color);
Make a few colors customizable (#7270)
2021-12-03 12:05:25 +03:00
Apply prettier formatting
2022-12-12 14:24:14 +03:00
$reaction-row-button-selected-bg-color: var(
--reaction-row-button-selected-bg-color,
$reaction-row-button-selected-bg-color
);
Make a few colors customizable (#7270)
2021-12-03 12:05:25 +03:00
$menu-selected-color: var(--menu-selected-color, $menu-selected-color);
Improve pills (#6398)
2022-05-05 12:13:09 +03:00
$pill-bg-color: var(--other-user-pill-bg-color, $pill-bg-color);
$pill-hover-bg-color: var(--other-user-pill-bg-color, $pill-hover-bg-color);
set icon-button-color to be configurable (#7725)
2022-02-17 12:40:23 +03:00
$icon-button-color: var(--icon-button-color, $icon-button-color);
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 20:46:49 +03:00
$strong-input-border-color: var(--strong-input-border-color, $strong-input-border-color);
$inverted-bg-color: var(--strong-input-border-color, $inverted-bg-color);
/**
* Variation of the accent color.
* Generate this colour scale using LeonardoColor
* TODO: Add link
*/
$accent-100: var(--accent-color-100);
$accent-200: var(--accent-color-200);
$accent-300: var(--accent-color-300);
$accent-400: var(--accent-color-400);
$accent-500: var(--accent-color-500);
$accent-600: var(--accent-color-600);
$accent-700: var(--accent-color-700);
$accent-800: var(--accent-color-800);
$accent-900: var(--accent-color-900);
$accent-1000: var(--accent-color-1000);
$accent-1100: var(--accent-color-1100);
$accent-1200: var(--accent-color-1200);
$accent-1300: var(--accent-color-1300);
$accent-1400: var(--accent-color-1400);
Reference in a new issue Copy permalink