Dialog Discussion

[danirabbit]

Exploring some dialog design stuff for Greenfield.

A huge consideration with Greenfield is contrast. So you'll notice that buttons stand out a lot more here. Overall, superfluous details are made much more subtle, but I don't feel like overall things are "flatter". I think we're using depth a lot more here actually.

Here's a comparison:

BEFORE

AFTER

ACCENT COLORS

One of the considerations we're working with is customizable accent colors. This is something that developers can set to reinforce their own branding, but we also want users to be able to set their own default accent color. The idea here is that offering some customization options can satisfy the need that drives user to change their stylesheet, but in a way that doesn't lead to application breakage.

You'll notice the following screenshots don't have a shadow in that action box. That's just because I did this before messing with that style. Consider these all just sketches. I haven't checked anything for contrast and everything is subject to change.

This obviously leaves us in a place where we need to differentiate between red accent color and destructive action. Using a lighter button style leans well into this:

But it brings up questions about if this works as well in the dark style:

I made this branch: elementary/granite#374

And here's the CSS I've been playing with in Inspector:

dialog {
    background: @base_color;
    border-radius: 0 0 7px 7px;
    box-shadow:
        inset 1px 0 0 0 alpha (@bg_highlight_color, 0.2),
        inset -1px 0 0 0 alpha (@bg_highlight_color, 0.2),
        inset 0 -1px 0 0 alpha (@bg_highlight_color, 0.3);
}

dialog headerbar.default-decoration {
    background: @base_color;
    border-radius: 7px 7px 0 0;
}

dialog decoration {
    border-radius: 6px;
    box-shadow:
        0 0 0 1px alpha (#000, 0.1),
        0 8px 10px 1px alpha (#000, 0.14),
        0 3px 14px 2px alpha (#000, 0.12),
        0 5px 5px -3px alpha (#000, 0.4),
        0 14px 28px transparent;
}

dialog .dialog-action-area {
    margin: 7px;
}

dialog .dialog-action-box {
    background-color: alpha(#000, 0.03);
    background-image:
        linear-gradient(
            to bottom,
            alpha (
                #000,
                0.15
            ) 1px,
            alpha (
                #000,
                0.08
            ) 1px,
            alpha (
                #000,
                0
            ) 3px
        );
    border-top: 1px solid alpha (@bg_highlight_color, 0.3);
    margin-top: 24px;
}

dialog .dialog-vbox {
    margin: -2px;
}

dialog .primary {
    //color: @accent_color_900;
    font-size: 1.22em;
    font-weight: 500;
}

dialog button {
    border: none;
    border-radius: 3px;
    background-color: @base_color;
    background-image:
        linear-gradient(
            to bottom,
            alpha(@bg_highlight_color, 0.2),
            alpha(@bg_highlight_color, 0.0)
        );
    box-shadow:
        inset 1px 0 0 0 alpha (@bg_highlight_color, 0.2),
        inset -1px 0 0 0 alpha (@bg_highlight_color, 0.2),
        inset 0 -1px 0 0 alpha (@bg_highlight_color, 0.3),
        0 0 0 1px alpha (#000, 0.05),
        0 1px 2px alpha (#000, 0.2);
}

dialog button label {
    text-shadow: none;
    font-weight: 500;
}

dialog button.suggested-action {
    background-color: @accent_color_100;
    color: @accent_color_900;
    box-shadow:
        inset 0 1px 0 0 alpha (@bg_highlight_color, 0.08),
        inset 1px 0 0 0 alpha (@bg_highlight_color, 0.02),
        inset -1px 0 0 0 alpha (@bg_highlight_color, 0.02),
        inset 0 -1px 0 0 alpha (@bg_highlight_color, 0.05),
        0 0 0 1px alpha (@accent_color_300, 0.4),
        0 1px 2px alpha (#000, 0.3);
}

dialog.destructive-action button.suggested-action {
    background-color: @error_color;
    color: #fff;
    box-shadow:
        inset 0 1px 0 0 alpha (@bg_highlight_color, 0.08),
        inset 1px 0 0 0 alpha (@bg_highlight_color, 0.02),
        inset -1px 0 0 0 alpha (@bg_highlight_color, 0.02),
        inset 0 -1px 0 0 alpha (@bg_highlight_color, 0.05),
        0 0 0 1px alpha (@STRAWBERRY_500, 0.8),
        0 1px 2px alpha (@STRAWBERRY_900, 0.8);
}

dialog.destructive-action .primary {
    color: @error_color;
}

dialog.destructive-action .dialog-action-box {
   // background: alpha (@STRAWBERRY_100, 0.2);
}

[micahilbery]

Ideas for dark suggested action buttons:


Destructive action vs Red suggested action

[cassidyjames]

@micahilbery It looks like the darkest accent color for suggested actions is darker than the normal button here, which almost makes the suggested button look like it's insensitive. I wonder if we can tint the normal button color toward the accent color for suggested actions, and if that would mean we'd need to either still use white text for contrast, or mix the accent text color with white to lighten it up?

[danirabbit]

Yeah I haven’t color checked those, but I agree they look low contrast and much darker than the regular button color.

Maybe we could consider a different approach for destructive actions altogether like a regular button with a red border or with a warning icon or some kind of other distinctive marker

[lainsce]

Maybe we could always pair a destructive action dialog with a warning icon, and never use a warning icon on a dialog that isn't leading to some destructive action, that way we could keep the soft red on a red accent system, because people would then get used to seeing warning paired with destructive actions.

[micahilbery]

@cassidyjames Here's it using the mix of the base color and the accent color for the background and a mix of the accent color and white for the text:

[jtrees]

Is it just me or does anybody else get bugged by that text alignment? Maybe something more like this?

[danirabbit]

@jtrees this is unfortunately not possible because of the way the widgets are constructed. I've filed this issue to at least try to align checkbuttons and expanders. But, in Gtk this is actually a single widget that includes the checkbox itself and its label. So the best we can do is:

[jtrees]

@danrabbit Huh, that's a shame.

[hanaral]

@danrabbit Would it be possible to have a more prominent outline and sheen to the buttons? They look a little too soft compared to the more flat and contrasty style of the popup panel.

[hanaral]

I've been trying out the CSS on password popups, the bottom half of the dialogue looks much better when we copy the contrast of the text box

(I haven't tried it on a HiDPI screen, but it looks good on my non-retina macbook)

[CainCosta]

I really like the one with white text labels on the original post by Daniel.

Material design achieves a nice balance with this by setting in-box text levels at 85-90% opacity. You still get high contrast while not looking completely out of place.

[hanaral]

@CainCosta Totally agree that the white text looks great, and it's akin to the already existing buttons too. I think the reason Daniel only gave the destructive buttons white text is so they can be distinguished from the user accented ones.