paulmataruso/zulip
1
0
Fork 0
mirror of https://github.com/zulip/zulip.git synced 2025-11-02 04:53:36 +00:00
Code Issues Packages Projects Releases Wiki Activity

help-beta: Use colors same as webapp banners for asides.

Browse Source 
Fixes #35122.
The existing colors were attracting too much attention.
Design discussion was done on
https://chat.zulip.org/#narrow/channel/19-documentation/topic/new.20help.20center.3A.20design.
This commit is contained in:
Shubham Padia
2025-07-28 19:26:13 +00:00
committed by Tim Abbott
parent bd8bd2c64a
commit b8d4ad8b47
3 changed files with 70 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
help-beta/src/components/KeyboardTip.astro
View File

@@ -40,7 +40,10 @@ first_element.children = [...prefix_element_list, ...first_element.children];
tree.children[0] = first_element;
---
<aside aria-label="Keyboard tip" class=`starlight-aside starlight-aside--tip`>
<aside
aria-label="Keyboard tip"
class=`starlight-aside starlight-aside--tip keyboard-tip`
>
<div class="starlight-aside__content">
<Fragment set:html={toHtml(tree)} />
</div>

62
help-beta/src/styles/main.css
View File

@@ -21,6 +21,50 @@
--color-user-circle-offline: light-dark(#c1c6d7, #454854);
--color-user-circle-deactivated: hsl(0deg 0% 50%);
/* stylelint-enable color-no-hex */
/* NOTE: These colors are also used in zulip web app for banner
colors. Do grep for these variables when changing them and
confirm on CZO on whether the colors there need to change as
well. */
/* Banners - Neutral Variant */
--color-text-neutral-banner: light-dark(
hsl(229deg 12% 25%),
hsl(231deg 11% 76%)
);
--color-border-neutral-banner: light-dark(
color-mix(in oklch, hsl(240deg 2% 30%) 40%, transparent),
color-mix(in oklch, hsl(240deg 7% 66%) 40%, transparent)
);
--color-background-neutral-banner: light-dark(
hsl(240deg 7% 93%),
hsl(240deg 7% 17%)
);
/* Banners - Brand Variant */
--color-text-brand-banner: light-dark(
hsl(264deg 95% 34%),
hsl(244deg 96% 82%)
);
--color-border-brand-banner: light-dark(
color-mix(in oklch, hsl(254deg 60% 50%) 40%, transparent),
color-mix(in oklch, hsl(253deg 70% 89%) 40%, transparent)
);
--color-background-brand-banner: light-dark(
hsl(254deg 42% 94%),
hsl(253deg 49% 16%)
);
/* Banners - Info Variant */
--color-text-info-banner: light-dark(
hsl(241deg 95% 25%),
hsl(221deg 93% 89%)
);
--color-border-info-banner: light-dark(
color-mix(in oklch, hsl(204deg 49% 29%) 40%, transparent),
color-mix(in oklch, hsl(205deg 58% 69%) 40%, transparent)
);
--color-background-info-banner: light-dark(
hsl(204deg 58% 92%),
hsl(204deg 100% 12%)
);
}
.non-clickable-sidebar-heading {
@@ -73,6 +117,24 @@
margin-right: 4px;
}
.starlight-aside--tip {
--sl-color-asides-text-accent: var(--color-text-brand-banner);
--sl-color-asides-border: var(--color-border-brand-banner);
background-color: var(--color-background-brand-banner);
}
.starlight-aside--note {
--sl-color-asides-text-accent: var(--color-text-neutral-banner);
--sl-color-asides-border: var(--color-border-neutral-banner);
background-color: var(--color-background-neutral-banner);
}
.keyboard-tip {
--sl-color-asides-text-accent: var(--color-text-info-banner);
--sl-color-asides-border: var(--color-border-info-banner);
background-color: var(--color-background-info-banner);
}
.aside-icon-lightbulb {
/* We need to make the fill transparent for the bulb to look hollow
and the default vertical-align of text-bottom was not looking

4
web/styles/app_variables.css
View File

@@ -2550,6 +2550,10 @@
);
/* Banners */
/* NOTE: These colors are also used in starlight help center for
aside colors. Do grep for these variable when changing them
and confirm on CZO on whether the colors there need to change
as well. */
--color-text-link-banner: hsl(210deg 94% 42%);
/* Banners - Neutral Variant */
--color-text-neutral-banner: light-dark(