allow customizing border around buttons and textboxes

[libRh]

Is it possible to change the border around buttons, header buttons and textboxes independently of the text color for gtk2/gkt3 apps?

arrows pointing to the border: As seen in the examples above, currently, the border around those elements is set by "BTN_FG=" (in gui: "Button Text"), "HDR_BTN_FG=" (in gui: "Header Button Background") and "TXT_FG=" (in gui: "Textbox Text"). This also changes the text inside the buttons. Any idea how I can make this border translucent, so that is only get the selection color on hover (currently: "SEL_BG="), if not hovered the border around the buttons should not be there at all and should default to the "BTN_BG=", "HDR_BTN_BG=" and "TXT_BG=".

like in this example (modified with bitmap editor to remove the borders):

[actionless]

you can choose Arc base theme

[libRh]

I looked into the *.scss files for gtk 3.20+. I came really far for what I wanted to accomplish. A nord based gtk theme, matching the vscode nord theme, which implement some gui styles in addition to the syntax highlighting style.

changes:

_global.scss
//Match border of window with borders arround views
    $borders_color: #%WM_BORDER_FOCUS%;

//Border arround sliders
    $button_border: $button_bg_color;

_toggle.scss
//Border around radios and checkboxes
    $checkradio_border: $base_color;
    $disabled_checkradio_border: rgba($base_color, .25)

_buttons.scss
    $button_border_width: 0;

_entry.scss
    changing all borders from 1px to 0

outcome:

But there are still some elements I want to change, but I could find the right line in the .scss files. I marked the elements with image with read arrows:

For me as an theming hobbyist with next to nothing gtk theming knowledge or experience, whatsoever it is hard to find the right lines in the source code, if only someone could point me to the right identifier for those elements in the .scss files.

[actionless]

hello @libXq , thanks for your practical interest in theme development

next possible steps would be: 0) instead of modifying border_width modify border_color of the elements

1. move all new border color values to _global.scss
2. defining a fallback value for them in change_color.sh (so the old themes which doesn't have it set would still work as previously): smth like this;
3. adding those new config options to the oomox plugin itself: see how it's already done for the Arc theme plugin

[actionless]

But there are still some elements I want to change, but I could find the right line in the .scss files. I marked the elements with image with read arrows

the top thing is headerbar (src/gtk-3.20/scss/widgets/_toolbar.scss) and the rest is notebook (src/gtk-3.20/scss/widgets/_notebook.scss)

[actionless]

also grep is quite helpful to understand how some things are done on a live example:

$ grep ARC_WIDGET_BORDER_COLOR * -R
arc-theme/common/gtk-3.0/3.18/sass/_colors.scss.thpl:$entry_border: if($variant == 'light', %ARC_WIDGET_BORDER_COLOR%, darken($borders_color, 0%));
arc-theme/common/gtk-3.0/3.20/sass/_colors.scss.thpl:$entry_border: if($variant == 'light', %ARC_WIDGET_BORDER_COLOR%, darken($borders_color, 0%));
arc-theme/common/gtk-3.0/_colors.scss.thpl:$entry_border: if($variant == 'light', %ARC_WIDGET_BORDER_COLOR%, darken($borders_color, 0%));
arc-theme/change_color.sh:ARC_WIDGET_BORDER_COLOR=${ARC_WIDGET_BORDER_COLOR-$(mix ${BG} ${FG} 0.75)}
arc-theme/change_color.sh:                      -e 's/#cfd6e6/%ARC_WIDGET_BORDER_COLOR%/gI' \
arc-theme/change_color.sh:                      -e 's/#cbd2e3/%ARC_WIDGET_BORDER_COLOR%/gI' \
arc-theme/change_color.sh:              -e 's/%ARC_WIDGET_BORDER_COLOR%/#'"$ARC_WIDGET_BORDER_COLOR"'/g' \
oomox_plugin.py:                        colorscheme['ARC_WIDGET_BORDER_COLOR'],
oomox_plugin.py:                        colorscheme['ARC_WIDGET_BORDER_COLOR'],
oomox_plugin.py:            'key': 'ARC_WIDGET_BORDER_COLOR',