- Colors
-
- Sentry has a flexible, tiered color system that adapts to both light and dark
- mode. Our color palette consists of neutral grays and 6 accent colors.
-
-
- Grays
-
- There are 5 shades of gray, ranging from Gray 500 (darkest) to Gray 100
- (lightest).
-
-
- Gray 300 and above are accessible foreground colors that conform
- to{' '}
-
- WCAG standards
-
- . Use them as text and icon colors.
-
- Here are the recommended use cases:
-
- -
- Gray 500: headings, button labels, tags/badges, and alerts.
-
- -
- Gray 400: body text, input values & labels.
-
- -
- Gray 300: input placeholders, inactive/disabled inputs and
- buttons, chart labels, supplemental and non-essential text
-
- -
- Gray 200: borders around large elements (cards, panels,
- dialogs, tables).
-
- -
- Gray 100: dividers and borders around small elements (buttons,
- form inputs).
-
-
-
-
-
-
- Accent Colors
-
- Accent colors help shift the user's focus to certain interactive and high-priority
- elements, like links, buttons, and warning banners.
-
- Hues
- There are 6 hues to choose from. Each has specific connotations:
-
- -
- Purple: brand, current/active/focus state, or new information.
-
- -
- Blue: hyperlink.
-
- -
- Green: success, resolution, approval, availability, or
- creation.
-
- -
- Yellow: warning, missing, or impeded progress.
-
- -
- Red: fatal error, deletion, or removal.
-
- -
- Pink: new feature or promotion.
-
-
- Levels
-
- Each hue comes in 4 levels: 400 (dark), 300 (full opacity), 200 (medium opacity),
- and 100 (low opacity).
-
-
- -
- The 400 level is a darkened version of 300. It is useful for
- hover/active states in already accentuated elements. For example, a button could
- have a background of Purple 300 in normal state and Purple 400 on hover.
-
- -
- The 300 level has full opacity and serves well as text and icon
- colors (with the exception of Yellow 300, which does not meet{' '}
-
- WCAG's contrast standards
-
- ).
-
- -
- The 200 level has medium opacity, useful for borders and
- dividers.
-
- -
- The 100 level has very low opacity, useful as background fills.
-
-
-
-
-
-
- Accessibility
-
- When it comes to using color, there are two main accessibility concerns:
- readability and separation.
-
- Readability
-
- WCAG requires
- that normal text elements have a contrast ratio of at least 4.5:1 against the
- background. For large text (at least 16px in size AND in medium/bold weight), the
- required ratio is lower, at 3:1. This is to ensure a comfortable reading
- experience in different lighting conditions.{' '}
-
- Use this tool
- {' '}
- to confirm text contrast ratios.
-
-
- In Sentry's color palette, only Gray 300 and above satisfy the contrast
- requirement for normal text. This applies to both light and dark mode.
-
-
- Accent colors in the 300 series, except for Yellow 300, satisfy the contrast
- requirement for large text.
-
-
-
-
-
-
-
-
-
- Separation
-
- Color can be an effective way to visually separate elements in the user interface.
- However, not all users see color in the same way. Some are color-blind and cannot
- reliably differentiate one color from another. Some have color filters on their
- screens, like Night Shift in MacOS. Others are in bright environments with high
- levels of glare, reducing their ability to see color clearly.
-
-
- As such, color is an unreliable way to separate elements. Whenever possible,
- provide additional visual cues like icons, text labels, line type (solid, dashed,
- dotted),… to further reinforce the separation.
-
-
-
-
-
-
- );
-}
-
-const SideBySideList = styled('ul')`
- /* Reset */
- list-style-type: none;
- margin: 0;
- padding: 0;
- & > li {
- margin: 0;
- }
- & > li > div {
- margin-bottom: 0;
- }
-
- /* Side-by-side display */
- display: grid;
- grid-template-columns: 1fr 1fr;
- gap: ${space(2)};
-`;
-
-const PalettePanel = styled(Panel)`
- margin-bottom: 0;
-`;
-
-const PalettePanelItem = styled(PanelItem)<{
- color: ColorOrAlias;
- text: ColorOrAlias;
-}>`
- flex-direction: column;
- gap: ${space(0.5)};
-
- &:first-child {
- border-radius: ${p => p.theme.borderRadius} ${p => p.theme.borderRadius} 0 0;
- }
- &:last-child {
- border-radius: 0 0 ${p => p.theme.borderRadius} ${p => p.theme.borderRadius};
- }
- &:first-child:last-child {
- border-radius: ${p => p.theme.borderRadius};
- }
-
- background: ${p => p.theme[p.color]};
- color: ${p => p.theme[p.text]};
-`;
-
-function ColorPalette({name, palette}: {name: string; palette: Palette[][]}) {
- const theme = useTheme();
- return (
-