Fix styles for triangular QTabBars.

Added padding to properly pad text on the tab bar. Added negative
padding to avoid clipping the close button, without it overlapping with
the border. Added highlighting for the selected tav. Added
documentation for known bugs with padding south tabs, and color/outline
for selected tabs.

Closes #48.
Closes #50.

README.md

@@ -426,6 +426,9 @@ Some issues cannot be fixed with stylesheets alone, or there are bugs in Qt itse
 
 - Placeholder Text color: for the widgets `QTextEdit`, `QPlainTextEdit`, and `QLineEdit`, you can set placeholder text for when no text is present. In Qt5, this is correctly grayed out when the placeholder text is present, which is not respected in Qt6 (as of Qt version 6.3.0). An example of a workaround [placeholder_text.py](/example/placeholder_text.py), which only works currently for Qt5. Using the native stylesheet shows it uses hard-coded colors for Qt6, so this is almost certainly a Qt bug. This is likely referenced in [QTBUG-92947](https://bugreports.qt.io/browse/QTBUG-92947) and [QTCREATORBUG-25444](https://bugreports.qt.io/browse/QTCREATORBUG-25444).
 - `QSlider` ticks disappear when using stylesheets, which is a known bug referenced in [QTBUG-3304](https://bugreports.qt.io/browse/QTBUG-3304) and [QTBUG-3564](https://bugreports.qt.io/browse/QTBUG-3564). An example of how to style a `QSlider` is available here [slider.py](/example/slider.py), however, this does not work with a stylesheet applied to a `QSlider`.
+- Triangular QTabBar text and border colors must be the same.
+- Triangular QTabBars do not have hover events for non-selected widgets.
+- Custom padding for triangular QTabBars on the bottom is ignored. All other tab positions work.
 
 # Debugging
 

dist/pyqt6/dark/stylesheet.qss

@@ -1390,6 +1390,112 @@ QTabBar QToolButton::left-arrow:disabled
     height: 0.8em;
 }
 
+/**
+ *  Special styles for triangular QTabWidgets.
+ *  These ignore the border attributes, and the border and
+ *  text color seems to be set via the `QTabBar::tab` color
+ *  property. This seemingly cannot be changed.
+ *
+ *  The rounded shapes are 0-3, and the triangular ones are 4-7.
+ *
+ *  The QTabBar outline doesn't respect on QTabBar::tab:
+ *      border-color
+ *      outline-color
+ */
+QTabBar[shape="4"]::tab,
+QTabBar[shape="5"]::tab,
+QTabBar[shape="6"]::tab,
+QTabBar[shape="7"]::tab,
+QTabBar[shape="4"]::tab:last,
+QTabBar[shape="5"]::tab:last,
+QTabBar[shape="6"]::tab:last,
+QTabBar[shape="7"]::tab:last,
+QTabBar[shape="4"]::tab:only-one,
+QTabBar[shape="5"]::tab:only-one,
+QTabBar[shape="6"]::tab:only-one,
+QTabBar[shape="7"]::tab:only-one
+{
+    /* Need a dark color without alpha channel since it affects the text. */
+    color: #3daee9;
+    background-color: #31363b;
+    padding: 0.23em;
+}
+
+QTabBar[shape="4"]::tab,
+QTabBar[shape="5"]::tab,
+QTabBar[shape="4"]::tab:last,
+QTabBar[shape="5"]::tab:last,
+QTabBar[shape="4"]::tab:only-one,
+QTabBar[shape="5"]::tab:only-one
+{
+    min-width: 50px;
+}
+
+QTabBar[shape="6"]::tab,
+QTabBar[shape="7"]::tab,
+QTabBar[shape="6"]::tab:last,
+QTabBar[shape="7"]::tab:last,
+QTabBar[shape="6"]::tab:only-one,
+QTabBar[shape="7"]::tab:only-one
+{
+    min-height: 50px;
+}
+
+QTabBar[shape="4"]::tab:!selected,
+QTabBar[shape="5"]::tab:!selected,
+QTabBar[shape="6"]::tab:!selected,
+QTabBar[shape="7"]::tab:!selected
+{
+    color: #eff0f1;
+    background-color: #2c3034;
+}
+
+/**
+ *  Increase padding on the opposite side of the icon to avoid text clipping.
+ *
+ *  BUG: The padding works for North in Qt5, South does not work.
+ *  Both work in Qt6.
+ */
+QTabBar[shape="4"][tabsClosable="true"]::tab,
+QTabBar[shape="5"][tabsClosable="true"]::tab
+{
+    padding-left: 0.5em;
+}
+
+QTabBar[shape="6"][tabsClosable="true"]::tab
+{
+    padding-bottom: 0.5em;
+}
+
+QTabBar[shape="7"][tabsClosable="true"]::tab
+{
+    padding-top: 0.5em;
+}
+
+/**
+*   Undo the padding for the tab.
+*
+*   Enumerated values are North, South, West, East in that order,
+*   from 4-7.
+*
+*   NOTE: Any higher padding will clip the icon.
+*/
+QTabBar[shape="4"]::close-button,
+QTabBar[shape="5"]::close-button
+{
+    padding-left: -0.12em;
+}
+
+QTabBar[shape="6"]::close-button
+{
+    padding-bottom: -0.18em;
+}
+
+QTabBar[shape="7"]::close-button
+{
+    padding-top: -0.18em;
+}
+
 QDockWidget
 {
     background: #31363b;

dist/pyqt6/light/stylesheet.qss

@@ -1390,6 +1390,112 @@ QTabBar QToolButton::left-arrow:disabled
     height: 0.8em;
 }
 
+/**
+ *  Special styles for triangular QTabWidgets.
+ *  These ignore the border attributes, and the border and
+ *  text color seems to be set via the `QTabBar::tab` color
+ *  property. This seemingly cannot be changed.
+ *
+ *  The rounded shapes are 0-3, and the triangular ones are 4-7.
+ *
+ *  The QTabBar outline doesn't respect on QTabBar::tab:
+ *      border-color
+ *      outline-color
+ */
+QTabBar[shape="4"]::tab,
+QTabBar[shape="5"]::tab,
+QTabBar[shape="6"]::tab,
+QTabBar[shape="7"]::tab,
+QTabBar[shape="4"]::tab:last,
+QTabBar[shape="5"]::tab:last,
+QTabBar[shape="6"]::tab:last,
+QTabBar[shape="7"]::tab:last,
+QTabBar[shape="4"]::tab:only-one,
+QTabBar[shape="5"]::tab:only-one,
+QTabBar[shape="6"]::tab:only-one,
+QTabBar[shape="7"]::tab:only-one
+{
+    /* Need a dark color without alpha channel since it affects the text. */
+    color: #3daef3;
+    background-color: #eff0f1;
+    padding: 0.23em;
+}
+
+QTabBar[shape="4"]::tab,
+QTabBar[shape="5"]::tab,
+QTabBar[shape="4"]::tab:last,
+QTabBar[shape="5"]::tab:last,
+QTabBar[shape="4"]::tab:only-one,
+QTabBar[shape="5"]::tab:only-one
+{
+    min-width: 50px;
+}
+
+QTabBar[shape="6"]::tab,
+QTabBar[shape="7"]::tab,
+QTabBar[shape="6"]::tab:last,
+QTabBar[shape="7"]::tab:last,
+QTabBar[shape="6"]::tab:only-one,
+QTabBar[shape="7"]::tab:only-one
+{
+    min-height: 50px;
+}
+
+QTabBar[shape="4"]::tab:!selected,
+QTabBar[shape="5"]::tab:!selected,
+QTabBar[shape="6"]::tab:!selected,
+QTabBar[shape="7"]::tab:!selected
+{
+    color: #31363b;
+    background-color: #d9d8d7;
+}
+
+/**
+ *  Increase padding on the opposite side of the icon to avoid text clipping.
+ *
+ *  BUG: The padding works for North in Qt5, South does not work.
+ *  Both work in Qt6.
+ */
+QTabBar[shape="4"][tabsClosable="true"]::tab,
+QTabBar[shape="5"][tabsClosable="true"]::tab
+{
+    padding-left: 0.5em;
+}
+
+QTabBar[shape="6"][tabsClosable="true"]::tab
+{
+    padding-bottom: 0.5em;
+}
+
+QTabBar[shape="7"][tabsClosable="true"]::tab
+{
+    padding-top: 0.5em;
+}
+
+/**
+*   Undo the padding for the tab.
+*
+*   Enumerated values are North, South, West, East in that order,
+*   from 4-7.
+*
+*   NOTE: Any higher padding will clip the icon.
+*/
+QTabBar[shape="4"]::close-button,
+QTabBar[shape="5"]::close-button
+{
+    padding-left: -0.12em;
+}
+
+QTabBar[shape="6"]::close-button
+{
+    padding-bottom: -0.18em;
+}
+
+QTabBar[shape="7"]::close-button
+{
+    padding-top: -0.18em;
+}
+
 QDockWidget
 {
     background: #eaebec;

dist/qrc/dark/stylesheet.qss

@@ -1390,6 +1390,112 @@ QTabBar QToolButton::left-arrow:disabled
     height: 0.8em;
 }
 
+/**
+ *  Special styles for triangular QTabWidgets.
+ *  These ignore the border attributes, and the border and
+ *  text color seems to be set via the `QTabBar::tab` color
+ *  property. This seemingly cannot be changed.
+ *
+ *  The rounded shapes are 0-3, and the triangular ones are 4-7.
+ *
+ *  The QTabBar outline doesn't respect on QTabBar::tab:
+ *      border-color
+ *      outline-color
+ */
+QTabBar[shape="4"]::tab,
+QTabBar[shape="5"]::tab,
+QTabBar[shape="6"]::tab,
+QTabBar[shape="7"]::tab,
+QTabBar[shape="4"]::tab:last,
+QTabBar[shape="5"]::tab:last,
+QTabBar[shape="6"]::tab:last,
+QTabBar[shape="7"]::tab:last,
+QTabBar[shape="4"]::tab:only-one,
+QTabBar[shape="5"]::tab:only-one,
+QTabBar[shape="6"]::tab:only-one,
+QTabBar[shape="7"]::tab:only-one
+{
+    /* Need a dark color without alpha channel since it affects the text. */
+    color: #3daee9;
+    background-color: #31363b;
+    padding: 0.23em;
+}
+
+QTabBar[shape="4"]::tab,
+QTabBar[shape="5"]::tab,
+QTabBar[shape="4"]::tab:last,
+QTabBar[shape="5"]::tab:last,
+QTabBar[shape="4"]::tab:only-one,
+QTabBar[shape="5"]::tab:only-one
+{
+    min-width: 50px;
+}
+
+QTabBar[shape="6"]::tab,
+QTabBar[shape="7"]::tab,
+QTabBar[shape="6"]::tab:last,
+QTabBar[shape="7"]::tab:last,
+QTabBar[shape="6"]::tab:only-one,
+QTabBar[shape="7"]::tab:only-one
+{
+    min-height: 50px;
+}
+
+QTabBar[shape="4"]::tab:!selected,
+QTabBar[shape="5"]::tab:!selected,
+QTabBar[shape="6"]::tab:!selected,
+QTabBar[shape="7"]::tab:!selected
+{
+    color: #eff0f1;
+    background-color: #2c3034;
+}
+
+/**
+ *  Increase padding on the opposite side of the icon to avoid text clipping.
+ *
+ *  BUG: The padding works for North in Qt5, South does not work.
+ *  Both work in Qt6.
+ */
+QTabBar[shape="4"][tabsClosable="true"]::tab,
+QTabBar[shape="5"][tabsClosable="true"]::tab
+{
+    padding-left: 0.5em;
+}
+
+QTabBar[shape="6"][tabsClosable="true"]::tab
+{
+    padding-bottom: 0.5em;
+}
+
+QTabBar[shape="7"][tabsClosable="true"]::tab
+{
+    padding-top: 0.5em;
+}
+
+/**
+*   Undo the padding for the tab.
+*
+*   Enumerated values are North, South, West, East in that order,
+*   from 4-7.
+*
+*   NOTE: Any higher padding will clip the icon.
+*/
+QTabBar[shape="4"]::close-button,
+QTabBar[shape="5"]::close-button
+{
+    padding-left: -0.12em;
+}
+
+QTabBar[shape="6"]::close-button
+{
+    padding-bottom: -0.18em;
+}
+
+QTabBar[shape="7"]::close-button
+{
+    padding-top: -0.18em;
+}
+
 QDockWidget
 {
     background: #31363b;

dist/qrc/light/stylesheet.qss

@@ -1390,6 +1390,112 @@ QTabBar QToolButton::left-arrow:disabled
     height: 0.8em;
 }
 
+/**
+ *  Special styles for triangular QTabWidgets.
+ *  These ignore the border attributes, and the border and
+ *  text color seems to be set via the `QTabBar::tab` color
+ *  property. This seemingly cannot be changed.
+ *
+ *  The rounded shapes are 0-3, and the triangular ones are 4-7.
+ *
+ *  The QTabBar outline doesn't respect on QTabBar::tab:
+ *      border-color
+ *      outline-color
+ */
+QTabBar[shape="4"]::tab,
+QTabBar[shape="5"]::tab,
+QTabBar[shape="6"]::tab,
+QTabBar[shape="7"]::tab,
+QTabBar[shape="4"]::tab:last,
+QTabBar[shape="5"]::tab:last,
+QTabBar[shape="6"]::tab:last,
+QTabBar[shape="7"]::tab:last,
+QTabBar[shape="4"]::tab:only-one,
+QTabBar[shape="5"]::tab:only-one,
+QTabBar[shape="6"]::tab:only-one,
+QTabBar[shape="7"]::tab:only-one
+{
+    /* Need a dark color without alpha channel since it affects the text. */
+    color: #3daef3;
+    background-color: #eff0f1;
+    padding: 0.23em;
+}
+
+QTabBar[shape="4"]::tab,
+QTabBar[shape="5"]::tab,
+QTabBar[shape="4"]::tab:last,
+QTabBar[shape="5"]::tab:last,
+QTabBar[shape="4"]::tab:only-one,
+QTabBar[shape="5"]::tab:only-one
+{
+    min-width: 50px;
+}
+
+QTabBar[shape="6"]::tab,
+QTabBar[shape="7"]::tab,
+QTabBar[shape="6"]::tab:last,
+QTabBar[shape="7"]::tab:last,
+QTabBar[shape="6"]::tab:only-one,
+QTabBar[shape="7"]::tab:only-one
+{
+    min-height: 50px;
+}
+
+QTabBar[shape="4"]::tab:!selected,
+QTabBar[shape="5"]::tab:!selected,
+QTabBar[shape="6"]::tab:!selected,
+QTabBar[shape="7"]::tab:!selected
+{
+    color: #31363b;
+    background-color: #d9d8d7;
+}
+
+/**
+ *  Increase padding on the opposite side of the icon to avoid text clipping.
+ *
+ *  BUG: The padding works for North in Qt5, South does not work.
+ *  Both work in Qt6.
+ */
+QTabBar[shape="4"][tabsClosable="true"]::tab,
+QTabBar[shape="5"][tabsClosable="true"]::tab
+{
+    padding-left: 0.5em;
+}
+
+QTabBar[shape="6"][tabsClosable="true"]::tab
+{
+    padding-bottom: 0.5em;
+}
+
+QTabBar[shape="7"][tabsClosable="true"]::tab
+{
+    padding-top: 0.5em;
+}
+
+/**
+*   Undo the padding for the tab.
+*
+*   Enumerated values are North, South, West, East in that order,
+*   from 4-7.
+*
+*   NOTE: Any higher padding will clip the icon.
+*/
+QTabBar[shape="4"]::close-button,
+QTabBar[shape="5"]::close-button
+{
+    padding-left: -0.12em;
+}
+
+QTabBar[shape="6"]::close-button
+{
+    padding-bottom: -0.18em;
+}
+
+QTabBar[shape="7"]::close-button
+{
+    padding-top: -0.18em;
+}
+
 QDockWidget
 {
     background: #eaebec;

template/stylesheet.qss.in

@@ -1390,6 +1390,112 @@ QTabBar QToolButton::left-arrow:disabled
     height: 0.8em;
 }
 
+/**
+ *  Special styles for triangular QTabWidgets.
+ *  These ignore the border attributes, and the border and
+ *  text color seems to be set via the `QTabBar::tab` color
+ *  property. This seemingly cannot be changed.
+ *
+ *  The rounded shapes are 0-3, and the triangular ones are 4-7.
+ *
+ *  The QTabBar outline doesn't respect on QTabBar::tab:
+ *      border-color
+ *      outline-color
+ */
+QTabBar[shape="4"]::tab,
+QTabBar[shape="5"]::tab,
+QTabBar[shape="6"]::tab,
+QTabBar[shape="7"]::tab,
+QTabBar[shape="4"]::tab:last,
+QTabBar[shape="5"]::tab:last,
+QTabBar[shape="6"]::tab:last,
+QTabBar[shape="7"]::tab:last,
+QTabBar[shape="4"]::tab:only-one,
+QTabBar[shape="5"]::tab:only-one,
+QTabBar[shape="6"]::tab:only-one,
+QTabBar[shape="7"]::tab:only-one
+{
+    /* Need a dark color without alpha channel since it affects the text. */
+    color: ^slider:foreground^;
+    background-color: ^tab:background:selected^;
+    padding: 0.23em;
+}
+
+QTabBar[shape="4"]::tab,
+QTabBar[shape="5"]::tab,
+QTabBar[shape="4"]::tab:last,
+QTabBar[shape="5"]::tab:last,
+QTabBar[shape="4"]::tab:only-one,
+QTabBar[shape="5"]::tab:only-one
+{
+    min-width: 50px;
+}
+
+QTabBar[shape="6"]::tab,
+QTabBar[shape="7"]::tab,
+QTabBar[shape="6"]::tab:last,
+QTabBar[shape="7"]::tab:last,
+QTabBar[shape="6"]::tab:only-one,
+QTabBar[shape="7"]::tab:only-one
+{
+    min-height: 50px;
+}
+
+QTabBar[shape="4"]::tab:!selected,
+QTabBar[shape="5"]::tab:!selected,
+QTabBar[shape="6"]::tab:!selected,
+QTabBar[shape="7"]::tab:!selected
+{
+    color: ^foreground^;
+    background-color: ^tab:background^;
+}
+
+/**
+ *  Increase padding on the opposite side of the icon to avoid text clipping.
+ *
+ *  BUG: The padding works for North, West, and East in Qt5, South does not
+ *  work. All tab positions work for triangular tabs in Qt6.
+ */
+QTabBar[shape="4"][tabsClosable="true"]::tab,
+QTabBar[shape="5"][tabsClosable="true"]::tab
+{
+    padding-left: 0.5em;
+}
+
+QTabBar[shape="6"][tabsClosable="true"]::tab
+{
+    padding-bottom: 0.5em;
+}
+
+QTabBar[shape="7"][tabsClosable="true"]::tab
+{
+    padding-top: 0.5em;
+}
+
+/**
+*   Undo the padding for the tab.
+*
+*   Enumerated values are North, South, West, East in that order,
+*   from 4-7.
+*
+*   NOTE: Any higher padding will clip the icon.
+*/
+QTabBar[shape="4"]::close-button,
+QTabBar[shape="5"]::close-button
+{
+    padding-left: -0.12em;
+}
+
+QTabBar[shape="6"]::close-button
+{
+    padding-bottom: -0.18em;
+}
+
+QTabBar[shape="7"]::close-button
+{
+    padding-top: -0.18em;
+}
+
 QDockWidget
 {
     background: ^dock:background^;

test/ui.py

@@ -1092,6 +1092,34 @@ def test_triangle_tabwidget_south(widget, *_):
 
     return child
 
+def test_closable_triangle_tabwidget_north(widget, *_):
+    child = _test_tabwidget(widget, North)
+    child.setTabShape(Triangular)
+    child.setTabsClosable(True)
+
+    return child
+
+def test_closable_triangle_tabwidget_south(widget, *_):
+    child = _test_tabwidget(widget, South)
+    child.setTabShape(Triangular)
+    child.setTabsClosable(True)
+
+    return child
+
+def test_closable_triangle_tabwidget_east(widget, *_):
+    child = _test_tabwidget(widget, East)
+    child.setTabShape(Triangular)
+    child.setTabsClosable(True)
+
+    return child
+
+def test_closable_triangle_tabwidget_west(widget, *_):
+    child = _test_tabwidget(widget, West)
+    child.setTabShape(Triangular)
+    child.setTabsClosable(True)
+
+    return child
+
 def test_button_position_tabwidget(widget, *_):
     child = QtWidgets.QTabWidget(widget)
     child.setTabPosition(North)