Before 567e8f369e, the background-color
for .grey-box was --color-background-modal-bar, but the dark part out of
the light-dark() for that color was being overriden by
hsl(0deg 0% 0% / 20%) in dark_theme.css. Since that was a refactor PR,
we added a new color called --color-background-grey-box to keep the
behaviour same as before.
But discussion in
https://chat.zulip.org/#narrow/channel/101-design/topic/grey-box.20dark.20theme.20color.2E
confirmed that we want to have `--color-background-modal-bar` as the
background color for that class.
Fixes part of #35881.
We extract out relevant colors from dark_theme.css for .stream-row and
.group-row and place them in light-dark(). We also transform all these
colors for .group-row and .stream-row into variables.
We use the alpha value for hsl() colors as a stand-in for the opacity we
were defining in dark_theme.css.
Fixes part of #35881.
Instead of having all the rules in the dark_theme.css, we use the
existing variable which uses `light-dark()`.
We also create a new variable color-border-settings-radio-input-parent,
since the existing variable was not created for that radio input and
they should be allowed to change independently.
There is no longer any opacity in the
--color-background-hover-narrow-filter, so the opaque
variant just adds noise and the potential for drift
from the original color.
In the light theme, the user profile modal tables were using two
different border colors, both very similar to one another. This commit
consolidates them into a single border color for consistency.
As a follow-up to the previous commit, this commit improves the styling
of the custom user status picker input.
The changes in this commit adjust the styling of the input field towards
the new redesigned inputs while shying away from using the input
component to avoid the complexity involved in including the status
emoji selector in the input component.
This commit improves the responsiveness of normal banners by adopting a
flexbox layout for the label and action buttons. This change better
accommodates varying text lengths and button counts in the banners, due
to the natural flowy nature of flexboxes.
The key logic shift involves using `flex-basis` to manage layout
transitions: the label and the group of action buttons now wrap to
separate lines when the label's width is less than 60% of the banner
query container's width (60cqw).
This commit also updates the CSS for navbar banners to align with the
new flexbox layout between the label and the group of action buttons,
while also ensuring that the layout behavior of these banners remains
consistent with the previous implementation.
This commit replaces the `border` property with `outline` for input
elements, since the `outline` property is more suitable for focus
indicators. This change also removes the need for extra padding
adjustments due to the border's impact on layout.
This follow-up commit fixes the incorrect input color values that were
introduced in the initial commit. This change is most visible in the
'hover' state where the values were incorrectly set to the same values
as that of the normal state, leading to a lack of visual distinction.
This prep commit consolidates the input pill styles into
`app_variables.css` and uses the light-dark notation for the color
variables to avoid specificity issues that arose from `dark_theme.css`.
This commit serves as the base for the ongoing effort to standardize
redesigned input elements throughout the Zulip Web UI. It introduces a
new Handlebars partial block for inputs, located at
web/templates/components/input.hbs.
The partial can be used with the partial block syntax: {{#> input}},
allowing contributors to pass in the input element as a template. This
approach wraps the input with a consistent structure that includes
support for an icon and an action button. It also applies the necessary
styling to ensure visual and functional consistency across the web UI.
This commit also implements the filter input component at
/devtools/inputs/ showroom page for design discussions and prototyping.
This refactors a CSS variable for checkbox field margin for checkboxes
nested in another field. For example, the "integration events" options
in the "Generate integration URL" modal. Those nested checkboxes are
spaced out closer together.
This is a prep commit for #34524, that PR will add another nested
checkbox in the "Add a new bot" modal.
This commit sets the focus outline offset in action and icon buttons
to 0, following the discussions at CZO concerning the visuals and
jagged corners in some cases when the outline offset was applied.
This commit cleans up the data URIs for the custom
chevron icons, and sets the same color as used on
select text.
Additionally, the background-image size now scales as
expected, so that browser-native <select> elements
have chevrons that much more closely resemble those
of button-based selects for our custom widgets.
This commit contains the following changes:
- Updates the unmute stream icon in Personal settings
> Notifications to use the `icon-button-brand` CSS class.
- Adjusts the tooltip delay for the unmute icon.
- Removes unused CSS.
Prep commit for #19860.
