FAB color

[Feichtmeier]

So, please rethink this color again.

What is or should a FAB be used for? Material3 says:

Takeaways

* Use a FAB for the most common or important action on a screen
* Icons in a FAB must be clear and understandable since these buttons do not have a text label
* The FAB should persist on the screen when content is scrolling

When I look into the old issue @madsrh created #281 I only see small parts of the window. I think this is badly taken out of context. The FAB can have an important meaning on the screen, thus we should color it in a color that sticks out.

This looks disabled:

This does not:

CC @madsrh @jpnurmi @Jupi007

[Jupi007]

Grey is maybe not the best solution for that button. But it doesn't look disabled imo. I even must point out, that the window controls got a similar look 😉

But I still think that use white is the worst solution. This button should attract your attention, not jump and burn onto your eyes. I literally only see it, all the rest is evicted.

Maybe can we add it a border, and a background sightly darker than the background? Or reuse green 🤷

But please let's don't use white 😅

EDIT: I also would like to say that the importance of this button may not be as high as on mobile, where it is placed just against your thumb.

[Feichtmeier]

fine, anything but grey. I like the contrast but I understand that someone finds it too contrasty.

maybe just a tint of the primary color?

[Jupi007]

maybe just a tint of the primary color?

Like GS quick toggles?

[Feichtmeier]

yeah sure why not :) Anything that makes it look not disabled. And we talk here about the default look. It is super easy to change the colour The default look should look like a floating action button, which is used most of the time for "create new", "add stuff". Which is an important action, independent of the screen size

[Feichtmeier]

?

[Jupi007]

It doesn't look bad at all :)

But I finally think we should use the pure accent color as a default value (green for the default variant), AND take care to style it correctly depending on where we use it. The go to top fab in software should imo look like an outlined button (maybe with a darker bg), because it is not something highly important, and the simple fact it appears when you scroll makes you notice it.

Btw, would it be possible to provide some alternative style as exported variable/function? We could add an inverted look, an outline one, .... and so keep control on the visual consistency across apps, while give some flexibility.

[Feichtmeier]

or subtle green?

[madsrh]

This might come as a surprise, but I'm not a fan of this 😅

[Feichtmeier]

You don't like your FAB to be brown chocolate colored? :laughing:

FCA: floating chocolate action

[Jupi007]

This might come as a surprise, but I'm not a fan of this sweat_smile

Yeah, me too 😅 I would prefer salmon over this 🙈

FSA: floating salmon action 🐟

[Jupi007]

or subtle green?

Honestly this look disabled for me 🙈

[Feichtmeier]

?

[Jupi007]

Use pure accent is just the best solution imo :+1: Why do complicated when you can do simple 😅

[madsrh]

I still have this black/white in Software so I never actually tried the suggestion from https://github.com/ubuntu/yaru.dart/pull/283

Please, don't merge anything yet 🙏

[Jupi007]

Please, don't merge anything yet pray

Don't worry, this is just an issue :)

[Feichtmeier]

in software we could do something like this

[Jupi007]

Yes 🙏

For a go-to-up button, this is perfect (maybe a subtle shadow for the light one)!

@Feichtmeier You didn't answered me about the alternative exported look? This could be one of them.

[Feichtmeier]

exported look?

[madsrh]

I think if you use black as in 000000 for the icon and border, that would stick out just a bit more. WDYT?

[Feichtmeier]

now you are making jokes of me? :cry:

[Jupi007]

exported look?

Just like this:

FloatingActionButtonThemeData yaruOutlinedFABThemeData(
  Theme theme,
) {
  return FloatingActionButtonThemeData(
    // An outlined FAB theme
  );
}

And then we can export it.

[madsrh]

now you are making jokes of me? 😢

Sorry, no joke - just a quick idea 💩 Let me explain so you don't think I'm COMPLETELY insane.

We have this black below 👇 and you suggested this, so figured inverting the colors below, white with black icon and border. I hope you understand.

IMHO In Software I think the grey works fine in the dark theme, but I do agree that the light theme isn't working! I am serious leaning towards keeping the initial black/white, rather than ending up with brown or something 😅

[Feichtmeier]

We can have both versions as Paul pointed out. Outline button look for not important action like scroll up and default to primary

[Feichtmeier]

now you are making jokes of me? 😢

Sorry, no joke - just a quick idea 💩 Let me explain so you don't think I'm COMPLETELY insane.

We have this black below 👇 and you suggested this, so figured inverting the colors below, white with black icon and border. I hope you understand.

IMHO In Software I think the grey works fine in the dark theme, but I do agree that the light theme isn't working! I am serious leaning towards keeping the initial black/white, rather than ending up with brown or something 😅

Independent of how we'll style it for the software app, which is a much less important and also redundant action (since you can also use the mouse wheel, scroll bar or touchpad) let's fix the default case now. I brought the workshops app as an example because @jpnurmi seems to have chosen the FAB as a component because it fits for the action to create a new container. I think there is no other way to do it so this should be classified as a pretty important task. After he updated yaru,or pub updated it since I didn't honour the version system, the green very important action is suddenly grey. This is an example why we really shouldn't change the default colour to any shade of gray. Changing the colour is one line but this doesn't matter

[madsrh]

I'm sorry for the confusion. Having two versions would be a great solution. In the case of Workshops, I think green is a perfect choice for new 😊

[jpnurmi]

I don't mind customizing the color in Workshops. :)

The one we customized in the yaru_widgets example could do a little refresh, too?

[Feichtmeier]

Yes, let's have some kind of gnome-shell-OSD-style for @Jupi007 's idea of an exported second version theme for FABs, and let the default be what one would expect if she choses the FAB as a UI component for a common reason, like you did. Will do this later and we can see if we all can agree and the default + bonus version