I don't really remember the changes I've made :(

README.md

@@ -1,5 +1,5 @@
-Qt-Material
-===========
+# Qt-Material
+
 This is another stylesheet for **PySide6**, **PySide2**, **PyQt5** and **PyQt6**, which looks like Material Design (close enough).
 
 ![GitHub top language](https://img.shields.io/github/languages/top/un-gcpds/qt-material)
@@ -32,6 +32,7 @@ And light:
   * [Change theme in runtime](#change-theme-in-runtime)
   * [Export theme](#export-theme)
   * [Density scale](#density-scale)
+  * [Troubleshoots](#troubleshoots)
 
 ## Install
 
@@ -200,8 +201,13 @@ Then, the current stylesheet can be extended just with:
 
 
 ```python
-apply_stylesheet(app, theme='light_blue.xml')
+apply_stylesheet(app, theme='light_blue.xml', css_file='custom.css')
+```
 
+The stylesheet can also be changed on runtime by:
+
+
+```python
 stylesheet = app.styleSheet()
 with open('custom.css') as file:
     app.setStyleSheet(stylesheet + file.read().format(**os.environ))
@@ -382,7 +388,7 @@ apply_stylesheet(app, 'default', invert_secondary=False, extra=extra)
 
 ### QMenu
 
-`QMenu` has multiple rendering for each Qt backend, and for each operating system. Even can be related with the style, like [fusion](https://doc.qt.io/qt-5/qtquickcontrols2-fusion.html). Then, the `extra` argument also supports`QMenu` parameters to configure this widgest for specific combinations. 
+`QMenu` has multiple rendering for each Qt backend, and for each operating system. Even can be related with the style, like [fusion](https://doc.qt.io/qt-5/qtquickcontrols2-fusion.html). Then, the `extra` argument also supports`QMenu` parameters to configure this widgest for specific combinations. This options are not affected by **density scale**.
 
 
 ```python

docs/source/notebooks/readme.ipynb

@@ -4,8 +4,8 @@
    "cell_type": "markdown",
    "metadata": {},
    "source": [
-    "Qt-Material\n",
-    "===========\n",
+    "# Qt-Material\n",
+    "\n",
     "This is another stylesheet for **PySide6**, **PySide2**, **PyQt5** and **PyQt6**, which looks like Material Design (close enough).\n",
     "\n",
     "![GitHub top language](https://img.shields.io/github/languages/top/un-gcpds/qt-material)\n",

docs/source/notebooks/readme.rst

@@ -41,6 +41,7 @@ Navigation
 -  `Change theme in runtime <#change-theme-in-runtime>`__
 -  `Export theme <#export-theme>`__
 -  `Density scale <#density-scale>`__
+-  `Troubleshoots <#troubleshoots>`__
 
 Install
 -------
@@ -238,7 +239,11 @@ Then, the current stylesheet can be extended just with:
 
 .. code:: ipython3
 
-    apply_stylesheet(app, theme='light_blue.xml')
+    apply_stylesheet(app, theme='light_blue.xml', css_file='custom.css')
+
+The stylesheet can also be changed on runtime by:
+
+.. code:: ipython3
 
     stylesheet = app.styleSheet()
     with open('custom.css') as file:
@@ -456,7 +461,8 @@ QMenu
 operating system. Even can be related with the style, like
 `fusion <https://doc.qt.io/qt-5/qtquickcontrols2-fusion.html>`__. Then,
 the ``extra`` argument also supports\ ``QMenu`` parameters to configure
-this widgest for specific combinations.
+this widgest for specific combinations. This options are not affected by
+**density scale**.
 
 .. code:: ipython3
 

examples/full_features/main.py

@@ -69,6 +69,7 @@ extra = {
 # 'padding': '50px 50px 50px 50px',  # top, right, bottom, left
 # }
 
+
 ########################################################################
 class RuntimeStylesheets(QMainWindow, QtStyleTools):
     # ----------------------------------------------------------------------

examples/full_features/main_window.ui

@@ -21,7 +21,7 @@
        <enum>QTabWidget::West</enum>
       </property>
       <property name="currentIndex">
-       <number>0</number>
+       <number>1</number>
       </property>
       <widget class="QWidget" name="tab_11">
        <attribute name="title">
@@ -2980,6 +2980,115 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor i
    <header location="global">QtWebEngineWidgets/QWebEngineView</header>
   </customwidget>
  </customwidgets>
+ <tabstops>
+  <tabstop>tabWidget_4</tabstop>
+  <tabstop>groupBox</tabstop>
+  <tabstop>pushButton</tabstop>
+  <tabstop>pushButton_3</tabstop>
+  <tabstop>pushButton_6</tabstop>
+  <tabstop>pushButton_7</tabstop>
+  <tabstop>pushButton_11</tabstop>
+  <tabstop>pushButton_5</tabstop>
+  <tabstop>pushButton_4</tabstop>
+  <tabstop>groupBox_2</tabstop>
+  <tabstop>groupBox_3</tabstop>
+  <tabstop>radioButton</tabstop>
+  <tabstop>radioButton_4</tabstop>
+  <tabstop>radioButton_2</tabstop>
+  <tabstop>radioButton_3</tabstop>
+  <tabstop>checkBox</tabstop>
+  <tabstop>checkBox_3</tabstop>
+  <tabstop>checkBox_4</tabstop>
+  <tabstop>checkBox_2</tabstop>
+  <tabstop>pushButton_file_dialog</tabstop>
+  <tabstop>pushButton_folder_dialog</tabstop>
+  <tabstop>tabWidget_3</tabstop>
+  <tabstop>tabWidget</tabstop>
+  <tabstop>horizontalSlider_2</tabstop>
+  <tabstop>verticalSlider_2</tabstop>
+  <tabstop>treeWidget</tabstop>
+  <tabstop>listWidget_2</tabstop>
+  <tabstop>tableWidget</tabstop>
+  <tabstop>tabWidget_2</tabstop>
+  <tabstop>pushButton_18</tabstop>
+  <tabstop>pushButton_20</tabstop>
+  <tabstop>pushButton_19</tabstop>
+  <tabstop>pushButton_23</tabstop>
+  <tabstop>pushButton_22</tabstop>
+  <tabstop>pushButton_21</tabstop>
+  <tabstop>comboBox</tabstop>
+  <tabstop>comboBox_7</tabstop>
+  <tabstop>comboBox_5</tabstop>
+  <tabstop>comboBox_2</tabstop>
+  <tabstop>spinBox</tabstop>
+  <tabstop>doubleSpinBox</tabstop>
+  <tabstop>lineEdit</tabstop>
+  <tabstop>lineEdit_3</tabstop>
+  <tabstop>comboBox_3</tabstop>
+  <tabstop>comboBox_6</tabstop>
+  <tabstop>comboBox_4</tabstop>
+  <tabstop>spinBox_2</tabstop>
+  <tabstop>doubleSpinBox_2</tabstop>
+  <tabstop>lineEdit_2</tabstop>
+  <tabstop>dateEdit_2</tabstop>
+  <tabstop>listWidget</tabstop>
+  <tabstop>textEdit</tabstop>
+  <tabstop>plainTextEdit</tabstop>
+  <tabstop>pushButton_2</tabstop>
+  <tabstop>pushButton_12</tabstop>
+  <tabstop>pushButton_13</tabstop>
+  <tabstop>pushButton_14</tabstop>
+  <tabstop>pushButton_15</tabstop>
+  <tabstop>pushButton_16</tabstop>
+  <tabstop>pushButton_17</tabstop>
+  <tabstop>radioButton_7</tabstop>
+  <tabstop>radioButton_5</tabstop>
+  <tabstop>radioButton_6</tabstop>
+  <tabstop>radioButton_8</tabstop>
+  <tabstop>checkBox_5</tabstop>
+  <tabstop>checkBox_6</tabstop>
+  <tabstop>checkBox_7</tabstop>
+  <tabstop>checkBox_8</tabstop>
+  <tabstop>pushButton_8</tabstop>
+  <tabstop>pushButton_9</tabstop>
+  <tabstop>pushButton_10</tabstop>
+  <tabstop>pushButton_24</tabstop>
+  <tabstop>pushButton_25</tabstop>
+  <tabstop>pushButton_26</tabstop>
+  <tabstop>pushButton_27</tabstop>
+  <tabstop>radioButton_12</tabstop>
+  <tabstop>radioButton_10</tabstop>
+  <tabstop>radioButton_11</tabstop>
+  <tabstop>radioButton_9</tabstop>
+  <tabstop>checkBox_10</tabstop>
+  <tabstop>checkBox_11</tabstop>
+  <tabstop>checkBox_12</tabstop>
+  <tabstop>checkBox_9</tabstop>
+  <tabstop>timeEdit</tabstop>
+  <tabstop>dateEdit</tabstop>
+  <tabstop>dateTimeEdit</tabstop>
+  <tabstop>keySequenceEdit</tabstop>
+  <tabstop>calendarWidget</tabstop>
+  <tabstop>groupBox_7</tabstop>
+  <tabstop>pushButton_28</tabstop>
+  <tabstop>pushButton_32</tabstop>
+  <tabstop>lineEdit_4</tabstop>
+  <tabstop>pushButton_30</tabstop>
+  <tabstop>pushButton_33</tabstop>
+  <tabstop>pushButton_29</tabstop>
+  <tabstop>pushButton_31</tabstop>
+  <tabstop>doubleSpinBox_3</tabstop>
+  <tabstop>timeEdit_2</tabstop>
+  <tabstop>dateTimeEdit_2</tabstop>
+  <tabstop>comboBox_8</tabstop>
+  <tabstop>tabWidget_6</tabstop>
+  <tabstop>fontComboBox</tabstop>
+  <tabstop>tabWidget_5</tabstop>
+  <tabstop>tabWidget_7</tabstop>
+  <tabstop>spinBox_3</tabstop>
+  <tabstop>tableWidget_2</tabstop>
+  <tabstop>lineEdit_5</tabstop>
+ </tabstops>
  <resources/>
  <connections/>
 </ui>

examples/full_features/my_theme.xml

@@ -1,9 +1,9 @@
 <resources>
-    <color name="primaryColor">#ff4081</color>
-    <color name="primaryLightColor">#ff79b0</color>
+    <color name="primaryColor">#00bcd4</color>
+    <color name="primaryLightColor">#62efff</color>
     <color name="secondaryColor">#f5f5f5</color>
-    <color name="secondaryLightColor">#ffffff</color>
-    <color name="secondaryDarkColor">#e6e6e6</color>
+    <color name="secondaryLightColor">#e6e6e6</color>
+    <color name="secondaryDarkColor">#ffffff</color>
     <color name="primaryTextColor">#3c3c3c</color>
     <color name="secondaryTextColor">#555555</color>
   </resources>

qt_material/__init__.py

@@ -344,7 +344,9 @@ def opacity(theme, value=0.5):
 
 
 # ----------------------------------------------------------------------
-def density(value, density_scale, border=0, scale=1, density_interval=4):
+def density(
+    value, density_scale, border=0, scale=1, density_interval=4, min_=4
+):
     """"""
     # https://material.io/develop/web/supporting/density
     if isinstance(value, str) and value.startswith('@'):
@@ -360,8 +362,8 @@ def density(value, density_scale, border=0, scale=1, density_interval=4):
         value + (density_interval * int(density_scale)) - (border * 2)
     ) * scale
 
-    if density < 0:
-        density = 0
+    if density <= 0:
+        density = min_
     return density
 
 

qt_material/material.css.template

@@ -140,14 +140,16 @@ QTreeView,
 QListView,
 QLineEdit,
 QComboBox {
+  color: {{primaryTextColor}};
   padding-left: {{16|density(density_scale)}}px;
   border-radius: 0px;
-  background-color: {{secondaryColor}};
-  border-width: 0 0 2px 0;
   border-radius: 0px;
   border-top-left-radius: 4px;
   border-top-right-radius: 4px;
   height: {{36|density(density_scale, border=2)}}px;
+  background-color: {{secondaryColor|opacity(0.75)}};
+  border: 2px solid {{secondaryTextColor|opacity(0.2)}};
+  border-width: 0 0 2px 0;
 }
 
 QPlainTextEdit {
@@ -168,9 +170,9 @@ QSpinBox:disabled,
 QDoubleSpinBox:disabled,
 QTextEdit:disabled,
 QLineEdit:disabled {
-  color: {{primaryColor|opacity(0.2)}};
-  background-color: {{secondaryColor|opacity(0.75)}};
-  border: 2px solid {{primaryColor|opacity(0.2)}};
+  color: {{secondaryTextColor|opacity(0.2)}};
+  background-color: {{secondaryColor|opacity(0.3)}};
+  border: 2px solid {{secondaryColor}};
   border-width: 0 0 2px 0;
   padding: 0px {{16|density(density_scale)}}px;
   border-radius: 0px;
@@ -183,20 +185,21 @@ QLineEdit:disabled {
 /*  QComboBox  */
 
 QComboBox {
-  color: {{primaryColor}};
-  border: 1px solid {{primaryColor}};
-  border-width: 0 0 2px 0;
-  background-color: {{secondaryColor}};
+  color: {{primaryTextColor}};
+  border: 2px solid {{primaryColor}};
   border-radius: 0px;
   border-top-left-radius: 4px;
   border-top-right-radius: 4px;
   height: {{36|density(density_scale, border=2)}}px;
+  background-color: {{secondaryColor|opacity(0.75)}};
+  border: 2px solid {{secondaryTextColor|opacity(0.2)}};
+  border-width: 0 0 2px 0;
 }
 
 QComboBox:disabled {
-  color: {{primaryColor|opacity(0.2)}};
-  background-color: {{secondaryColor|opacity(0.75)}};
-  border-bottom: 2px solid {{primaryColor|opacity(0.2)}};
+  color: {{secondaryTextColor|opacity(0.2)}};
+  background-color: {{secondaryColor|opacity(0.3)}};
+  border-bottom: 2px solid {{secondaryColor}};
 }
 
 QComboBox::drop-down {
@@ -206,6 +209,10 @@ QComboBox::drop-down {
 }
 
 QComboBox::down-arrow {
+  image: url(icon:/active/downarrow.svg);
+  margin-right: {{12|density(density_scale)}}px;
+}
+QComboBox::down-arrow:focus {
   image: url(icon:/primary/downarrow.svg);
   margin-right: {{12|density(density_scale)}}px;
 }
@@ -222,12 +229,12 @@ QComboBox QAbstractItemView {
 }
 
 QComboBox[frame='false'] {
-  color: {{primaryColor}};
+  color: {{secondaryTextColor}};
   background-color: transparent;
   border: 1px solid transparent;
 }
 QComboBox[frame='false']:disabled {
-  color: {{primaryColor|opacity(0.2)}};
+  color: {{secondaryTextColor|opacity(0.2)}};
 }
 
 /*  ------------------------------------------------------------------------  */
@@ -239,7 +246,7 @@ QSpinBox::up-button {
   subcontrol-origin: border;
   subcontrol-position: top right;
   width: 20px;
-  image: url(icon:/primary/uparrow.svg);
+  image: url(icon:/active/uparrow.svg);
   border-width: 0px;
   margin-right: 5px;
 }
@@ -256,7 +263,7 @@ QSpinBox::down-button {
   subcontrol-origin: border;
   subcontrol-position: bottom right;
   width: 20px;
-  image: url(icon:/primary/downarrow.svg);
+  image: url(icon:/active/downarrow.svg);
   border-width: 0px;
   border-top-width: 0;
   margin-right: 5px;
@@ -283,8 +290,6 @@ QPushButton {
   {% elif button_shape=='rounded' %}
     border-radius: {{36|density(density_scale, border=2, scale=0.5)}}px;
   {% endif %}
-
-
 }
 
 QPushButton:checked,
@@ -301,7 +306,7 @@ QPushButton:flat {
 }
 
 QPushButton:flat:hover {
-  background-color: {{primaryColor|opacity(0.2)}};
+  background-color: {{primaryColor|opacity(0.1)}};
 }
 
 QPushButton:flat:pressed,
@@ -331,6 +336,22 @@ QPushButton:checked:disabled {
   border-color:  {{secondaryLightColor}};
 }
 
+QToolButton:focus,
+QPushButton:focus {
+  background-color: {{primaryColor|opacity(0.2)}};
+}
+
+QPushButton:checked:focus,
+QPushButton:pressed:focus {
+  background-color: {{primaryColor|opacity(0.8)}};
+}
+
+QPushButton:flat:focus {
+  border: none;
+  background-color: {{primaryColor|opacity(0.2)}};
+}
+
+
 /*  ------------------------------------------------------------------------  */
 /*  QTabBar  */
 
@@ -1327,3 +1348,41 @@ QMenuBar QToolButton {
   border-image: url(icon:/primary/rightarrow2.svg);
   background-color: transparent;
 }
+
+/*  ------------------------------------------------------------------------  */
+/*  Focus  */
+
+QDateTimeEdit:focus,
+QSpinBox:focus,
+QDoubleSpinBox:focus,
+QLineEdit:focus,
+QComboBox:focus {
+  color: {{primaryColor}};
+  border: 2px solid {{primaryColor}};
+  border-width: 0 0 2px 0;
+
+}
+
+QDateTimeEdit::up-button:focus,
+QDoubleSpinBox::up-button:focus,
+QSpinBox::up-button:focus {
+  image: url(icon:/primary/uparrow.svg);
+}
+
+QDateTimeEdit::down-button:focus,
+QDoubleSpinBox::down-button:focus,
+QSpinBox::down-button:focus {
+  image: url(icon:/primary/downarrow.svg);
+}
+
+QMenu::indicator:focus,
+QListView::indicator:focus,
+QTableWidget::indicator:focus,
+QRadioButton::indicator:focus {
+  background-color: {{primaryColor|opacity(0.2)}};
+  border-radius: {{14|density(density_scale)}}px;
+ }
+
+QCheckBox::indicator:focus {
+  background-color: {{primaryColor|opacity(0.2)}};
+ }

qt_material/resources/generate.py

@@ -11,7 +11,14 @@ class ResourseGenerator:
     """"""
 
     # ----------------------------------------------------------------------
-    def __init__(self, primary, secondary, disabled, source, parent='theme'):
+    def __init__(
+        self,
+        primary,
+        secondary,
+        disabled,
+        source,
+        parent='theme',
+    ):
         """Constructor"""
 
         if parent.startswith('/'):
@@ -21,9 +28,12 @@ class ResourseGenerator:
         else:
             self.index = os.path.join(RESOURCES_PATH, parent)
 
+        active = '#707070'
+
         self.contex = [
             (os.path.join(self.index, 'disabled'), disabled),
             (os.path.join(self.index, 'primary'), primary),
+            (os.path.join(self.index, 'active'), active),
         ]
 
         self.source = source
@@ -47,7 +57,8 @@ class ResourseGenerator:
                 for folder, color in self.contex:
                     new_content = self.replace_color(content_original, color)
                     new_content = self.replace_color(
-                        new_content, self.secondary, '#ff0000')
+                        new_content, self.secondary, '#ff0000'
+                    )
 
                     file_to_write = os.path.join(folder, icon)
                     with open(file_to_write, 'w') as file_output:
@@ -56,15 +67,19 @@ class ResourseGenerator:
     # ----------------------------------------------------------------------
     def replace_color(self, content, replace, color='#0000ff'):
         """"""
-        colors = [color] + [''.join(list(color)[:i] +
-                                    ['\\\n'] + list(color)[i:]) for i in range(1, 7)]
+        colors = [color] + [
+            ''.join(list(color)[:i] + ['\\\n'] + list(color)[i:])
+            for i in range(1, 7)
+        ]
         for c in colors:
             content = content.replace(c, replace)
 
         replace = '#ffffff00'
         color = '#000000'
-        colors = [color] + [''.join(list(color)[:i] +
-                                    ['\\\n'] + list(color)[i:]) for i in range(1, 7)]
+        colors = [color] + [
+            ''.join(list(color)[:i] + ['\\\n'] + list(color)[i:])
+            for i in range(1, 7)
+        ]
         for c in colors:
             content = content.replace(c, replace)