Mirror
/
zulip
mirror of https://github.com/zulip/zulip.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

emoji_picker: Express colors as CSS variables. 

This also adds a previously missing dark-mode background color for
reacted emoji's :focus state in the picker.
This commit is contained in:
Karl Stolley 2024-03-05 14:22:05 -06:00 committed by Tim Abbott
parent 11fcd4091c
commit b20beda905
3 changed files with 42 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
web/styles/app_variables.css
View File

@ -426,6 +426,17 @@
/* Don't define light theme colors for modal here
since the modal is also used on billing pages and
this file is not imported on billing pages. */
/* Emoji-picker colors */
--color-background-emoji-picker-popover: hsl(0deg 0% 93%);
--color-background-emoji-picker-popover-tab-item-active: hsl(
0deg 0% 100% / 20%
);
--color-background-emoji-picker-emoji-focus: hsl(0deg 0% 93%);
--color-box-shadow-emoji-picker-emoji-focus: transparent;
--color-background-emoji-picker-emoji-reacted: hsl(195deg 50% 95%);
--color-border-emoji-picker-emoji-reacted: hsl(195deg 52% 79%);
--color-background-emoji-picker-emoji-reacted-focus: hsl(195deg 55% 88%);
}
%dark-theme {
@ -704,6 +715,17 @@
--color-exit-button-border: hsl(0deg 0% 0% / 60%);
--color-exit-button-background: hsl(211deg 29% 14%);
--color-exit-button-background-interactive: hsl(211deg 29% 17%);
/* Emoji-picker colors */
--color-background-emoji-picker-popover: hsl(0deg 0% 0% / 20%);
--color-background-emoji-picker-popover-tab-item-active: hsl(
0deg 0% 0% / 50%
);
--color-background-emoji-picker-emoji-focus: hsl(212deg 28% 8% / 75%);
--color-box-shadow-emoji-picker-emoji-focus: hsl(0deg 0% 98%);
--color-background-emoji-picker-emoji-reacted: hsl(0deg 0% 0% / 50%);
--color-border-emoji-picker-emoji-reacted: hsl(0deg 0% 0% / 90%);
--color-background-emoji-picker-emoji-reacted-focus: hsl(0deg 0% 20% / 70%);
}
@media screen {

25
web/styles/dark_theme.css
View File

@ -520,31 +520,6 @@
border-color: hsl(0deg 0% 0% / 60%);
}
.emoji-picker-popover .emoji-showcase-container,
.emoji-picker-popover .emoji-popover .emoji-popover-category-tabs,
.emoji-picker-popover .emoji-popover .emoji-popover-top {
background-color: hsl(0deg 0% 0% / 20%);
}
.emoji-picker-popover
.emoji-popover
.emoji-popover-category-tabs
.emoji-popover-tab-item.active {
background-color: hsl(0deg 0% 0% / 50%);
}
.emoji-popover-emoji {
&:focus {
background-color: hsl(212deg 28% 8% / 75%);
box-shadow: 0 0 1px hsl(0deg 0% 98%);
}
&.reacted {
background-color: hsl(0deg 0% 0% / 50%);
border-color: hsl(0deg 0% 0% / 90%);
}
}
.new-style .tab-switcher .ind-tab.selected,
div.message_content thead,
.table-striped thead th {

28
web/styles/reactions.css
View File

@ -191,7 +191,7 @@
padding: 8px 10px;
margin-bottom: 0;
background-color: hsl(0deg 0% 93%);
background-color: var(--color-background-emoji-picker-popover);
border-radius: 3px 3px 0 0;
@ -214,7 +214,7 @@
.emoji-popover-category-tabs {
/* Flex needed here to work around #7511 (90% zoom issues in firefox) */
display: flex;
background-color: hsl(0deg 0% 93%);
background-color: var(--color-background-emoji-picker-popover);
width: 100%;
box-sizing: border-box;
overflow: hidden;
@ -231,7 +231,9 @@
flex-grow: 1;
&.active {
background-color: hsl(0deg 0% 100% / 20%);
background-color: var(
--color-background-emoji-picker-popover-tab-item-active
);
}
}
}
@ -265,17 +267,27 @@
width: 25px;
&:focus {
background-color: hsl(0deg 0% 93%);
background-color: var(
--color-background-emoji-picker-emoji-focus
);
/* Only dark mode takes a box shadow on
the emoji-picker's focused emoji. */
box-shadow: 0 0 1px
var(--color-box-shadow-emoji-picker-emoji-focus);
outline: none;
}
&.reacted {
background-color: hsl(195deg 50% 95%);
border-color: hsl(195deg 52% 79%);
background-color: var(
--color-background-emoji-picker-emoji-reacted
);
border-color: var(--color-border-emoji-picker-emoji-reacted);
}
&.reacted:focus {
background-color: hsl(195deg 55% 88%);
background-color: var(
--color-background-emoji-picker-emoji-reacted-focus
);
}
&.hide {
@ -300,7 +312,7 @@
.emoji-showcase-container {
position: relative;
background-color: hsl(0deg 0% 93%);
background-color: var(--color-background-emoji-picker-popover);
min-height: 44px;
width: 250px;
border-radius: 0 0 3px 3px;