add notification-border(-color) to config option

[Mariusthvdb]

https://elchininet.github.io/custom-sidebar/configuration/themeable-configuration-options#root-configuration-options

would be sweet if we could set a border color for our notification badges

see how subtle that can work out in this screen, where I set the border of the buttons to current color

instead of the full notification to get the desired status color, only set the border, and make it more light weight

maybe even just the -border, so we can do

border: 1px solid green

fwiw, I did test currentColor in the main Styles config

  :host([expanded]) ha-list-item-button > .badge {
    transform: translateX(50%);
    max-width: 36px;
    min-width: 36px; /* required to align uix buttons in the sidebar */
    margin: 0 14px 0 -14px; /* -16px position uix button close to the notification badge */
    box-shadow: var(--ha-box-shadow-m);
    border: 1px solid currentColor;
  }

because that would have been a sweet option, but it doesnt apply the right color, or at all, and makes all border the same white

better visible in a darker theme

[elchininet]

because that would have been a sweet option, but it doesnt apply the right color, or at all, and makes all border the same white

I see that it is applying the right color. What currentColor does is to apply the same value as the color property and those badges have white text color, so the currentColor property will get white too. If you want to get the color of the background, try to set the custom sidebar background color for the badges, something like this:

:host([expanded]) ha-list-item-button > .badge {
    border: 1px solid var(--custom-sidebar-notification-color);
}

If you want to set the variable with a fallback (for the cases in which you don't set the background color of the notification), you can do something like this:

:host([expanded]) ha-list-item-button > .badge {
    border: 1px solid var(--custom-sidebar-notification-color, var(--accent-color));
}

[Mariusthvdb]

btw I set the main option to

# override the default HA notification color
notification_color: transparent
# set a subtle hover with the items notification text color
notification_color_hover: rgba( from var(--custom-sidebar-notification-text-color) r g b / 0.1)

wth that the UIX-broker buttons, and the custom-sidebar badges feel like one family ;)

updated in the gist to share

[elchininet]

I will rebuild for now, but do hope you would / could consider adding that generic item color, or, of not possible, add the notification-border-color as direct option, so we can set in styles, but also directly on item to overrider that style

What do you mean with "generic item color"? If it is some kind of invisible option (an option that do not have any visual effect) that does't match with the themeable options. For the border color, that matches with other similar options and it is something that could be added.

[Mariusthvdb]

consider this

notification_color: rgba( from var(--custom-sidebar-notification-text-color) r g b / 0.05) 
notification_color_hover: rgba( from var(--custom-sidebar-notification-text-color) r g b / 0.2)

which now uses the explicit item styles for notification_text_color:

    notification_text_color: >
      [[[ @partial data
          return lek ? 'blue'
          : gevaar ? 'var(--alert-color)' : 'var(--success-color)'; ]]]

I could imagine having a new item color option, which we could use in those templates and vars, and make eg the current notification_color and icon_color default to that.
of course other options could also be considered. but I think those might be the most widespread used elements for a 'default' color?

anyways, it would allow for cleaner templates, independent from other elements, like I now (have to ) do

[elchininet]

I could imagine having a new item color option, which we could use in those templates and vars, and make eg the current notification_color and icon_color default to that.

Every option should have a clear visual effect, like the notification_color and the notification_color_hover do. Having an obscure option that randomly sets the default color of specific elements just because it matches your custom setup is something that doesn't belong to a public API, but more to a custom setup. For those cases, you can keep using the internals.

of course other options could also be considered. but I think those might be the most widespread used elements for a 'default' color?

An option to set clearly the border of an element is a valid option and it matches the rest of the options. But the other thing is just something that should be achieved with custom methods.

[Mariusthvdb]

An option to set clearly the border of an element is a valid option and it matches the rest of the options.

Ultimately that would be my FR...
And I'd very much welcome that