👌 IMPROVE: dropdown chevrons (#14)

Author: chrisjsewell

docs/_static/sd-furo.css

@@ -0,0 +1,12 @@
+@media (prefers-color-scheme: dark) {
+    :root {
+        --sd-color-dark: #f8f9fa;
+        --sd-color-light: #212529;
+        --sd-color-dark-highlight: #d3d4d5;
+        --sd-color-light-highlight: #1c1f23;
+        --sd-color-dark-text: #212529;
+        --sd-color-light-text: #fff;
+        --sd-color-shadow: rgba(255, 255, 255, 0.15);
+        --sd-color-card-border: rgba(255, 255, 255, 0.125);
+    }
+}

docs/conf.py

@@ -44,6 +44,9 @@
     html_theme_options = {
         "sidebar_hide_name": True,
     }
+    html_css_files = [
+        "sd-furo.css",
+    ]
 if html_theme == "sphinx_rtd_theme":
     html_theme_options = {
         "logo_only": True,
@@ -65,5 +68,3 @@
     "Nam sed arcu dignissim, ultrices quam sit amet, commodo ipsum. "
     "Etiam quis nunc at ligula tincidunt eleifend."
 }
-
-sd_hide_root_title = True

sphinx_design/compiled/style.min.css

@@ -125,19 +125,6 @@ def run(self):
         return [container]
 
 
-# Note the custom octicon here has thicker dots than:
-# get_octicon("kebab-horizontal", classes=["no-title"])
-KEBAB = """\
-<svg viewBox="0 0 36 24" width="36" height="16" xmlns="http://www.w3.org/2000/svg"
-    class="octicon no-title" aria-hidden="true">
-  <g xmlns="http://www.w3.org/2000/svg" class="jp-icon3">
-    <circle cx="0" cy="12" r="6"></circle>
-    <circle cx="18" cy="12" r="6"></circle>
-    <circle cx="36" cy="12" r="6"></circle>
-  </g>
-</svg>"""
-
-
 class DropdownHtmlTransform(SphinxPostTransform):
     """Transform dropdown containers into the HTML specific AST structures::
 
@@ -165,7 +152,7 @@ def run(self):
                 children=[
                     nodes.raw(
                         "",
-                        nodes.Text(get_octicon("chevron-up", height="24px")),
+                        nodes.Text(get_octicon("chevron-up", height="1.5em")),
                         format="html",
                     )
                 ],
@@ -176,7 +163,7 @@ def run(self):
                 children=[
                     nodes.raw(
                         "",
-                        nodes.Text(get_octicon("chevron-down", height="24px")),
+                        nodes.Text(get_octicon("chevron-down", height="1.5em")),
                         format="html",
                     )
                 ],
@@ -196,7 +183,7 @@ def run(self):
                 title_children = [
                     nodes.raw(
                         "...",
-                        nodes.Text(KEBAB),
+                        nodes.Text(get_octicon("kebab-horizontal", height="1.5em")),
                         format="html",
                     )
                 ]

sphinx_design/dropdown.py

@@ -56,7 +56,7 @@ def list_octicons() -> List[str]:
     return list(get_octicon_data().keys())
 
 
-HEIGHT_REGEX = re.compile(r"^(?P<value>\d+)(?P<unit>px|em|rem)$")
+HEIGHT_REGEX = re.compile(r"^(?P<value>\d+(\.\d+)?)(?P<unit>px|em|rem)$")
 
 
 def get_octicon(
@@ -79,7 +79,7 @@ def get_octicon(
         raise ValueError(
             f"Invalid height: '{height}', must be format <integer><px|em|rem>"
         )
-    height_value = int(match.group("value"))
+    height_value = round(float(match.group("value")), 3)
     height_unit = match.group("unit")
 
     original_height = 16
@@ -92,7 +92,7 @@ def get_octicon(
         elif height_value >= 1.5:
             original_height = 24
     original_width = data["heights"][str(original_height)]["width"]
-    width_value = round(original_width * height_value / original_height, 2)
+    width_value = round(original_width * height_value / original_height, 3)
     content = data["heights"][str(original_height)]["path"]
     options = {
         "version": "1.1",

sphinx_design/icons.py

@@ -55,6 +55,7 @@ details.sd-dropdown {
   summary:hover .sd-summary-up svg,
   summary:hover .sd-summary-down svg {
     opacity: 1;
+    transform: scale(1.1);
   }
 
   .sd-summary-up svg,
@@ -68,7 +69,7 @@ details.sd-dropdown {
     pointer-events: none;
     position: absolute;
     right: 1em;
-    top: 0.75em;
+    top: 1em;
   }
 
   &[open] > .sd-summary-title .sd-summary-down {

style/_dropdown.scss

@@ -16,10 +16,10 @@
                             <container classes="sd-col sd-col-auto sd-d-flex sd-align-items-center" design_component="grid-item" is_div="True">
                                 <paragraph classes="sd-p-0 sd-m-0">
                                     <raw classes="sd-pr-2" format="html" xml:space="preserve">
-                                        <svg version="1.1" width="16.0px" height="16px" class="sd-octicon sd-octicon-calendar" viewBox="0 0 16 16" aria-hidden="true"><path fill-rule="evenodd" d="M4.75 0a.75.75 0 01.75.75V2h5V.75a.75.75 0 011.5 0V2h1.25c.966 0 1.75.784 1.75 1.75v10.5A1.75 1.75 0 0113.25 16H2.75A1.75 1.75 0 011 14.25V3.75C1 2.784 1.784 2 2.75 2H4V.75A.75.75 0 014.75 0zm0 3.5h8.5a.25.25 0 01.25.25V6h-11V3.75a.25.25 0 01.25-.25h2zm-2.25 4v6.75c0 .138.112.25.25.25h10.5a.25.25 0 00.25-.25V7.5h-11z"></path></svg>
+                                        <svg version="1.1" width="16.0px" height="16.0px" class="sd-octicon sd-octicon-calendar" viewBox="0 0 16 16" aria-hidden="true"><path fill-rule="evenodd" d="M4.75 0a.75.75 0 01.75.75V2h5V.75a.75.75 0 011.5 0V2h1.25c.966 0 1.75.784 1.75 1.75v10.5A1.75 1.75 0 0113.25 16H2.75A1.75 1.75 0 011 14.25V3.75C1 2.784 1.784 2 2.75 2H4V.75A.75.75 0 014.75 0zm0 3.5h8.5a.25.25 0 01.25.25V6h-11V3.75a.25.25 0 01.25-.25h2zm-2.25 4v6.75c0 .138.112.25.25.25h10.5a.25.25 0 00.25-.25V7.5h-11z"></path></svg>
                                     Jul 24, 2021
                             <container classes="sd-col sd-col-auto sd-d-flex sd-align-items-center" design_component="grid-item" is_div="True">
                                 <paragraph classes="sd-p-0 sd-m-0">
                                     <raw classes="sd-pr-2" format="html" xml:space="preserve">
-                                        <svg version="1.1" width="16.0px" height="16px" class="sd-octicon sd-octicon-clock" viewBox="0 0 16 16" aria-hidden="true"><path fill-rule="evenodd" d="M1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0zM8 0a8 8 0 100 16A8 8 0 008 0zm.5 4.75a.75.75 0 00-1.5 0v3.5a.75.75 0 00.471.696l2.5 1a.75.75 0 00.557-1.392L8.5 7.742V4.75z"></path></svg>
+                                        <svg version="1.1" width="16.0px" height="16.0px" class="sd-octicon sd-octicon-clock" viewBox="0 0 16 16" aria-hidden="true"><path fill-rule="evenodd" d="M1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0zM8 0a8 8 0 100 16A8 8 0 008 0zm.5 4.75a.75.75 0 00-1.5 0v3.5a.75.75 0 00.471.696l2.5 1a.75.75 0 00.557-1.392L8.5 7.742V4.75z"></path></svg>
                                     5 min read

tests/test_snippets/snippet_post_article-info.xml

@@ -5,20 +5,13 @@
         <dropdown_main classes="sd-sphinx-override sd-dropdown sd-card sd-mb-3" opened="False">
             <dropdown_title classes="sd-summary-title sd-card-header">
                 <raw format="html" xml:space="preserve">
-                    <svg viewBox="0 0 36 24" width="36" height="16" xmlns="http://www.w3.org/2000/svg"
-                        class="octicon no-title" aria-hidden="true">
-                      <g xmlns="http://www.w3.org/2000/svg" class="jp-icon3">
-                        <circle cx="0" cy="12" r="6"></circle>
-                        <circle cx="18" cy="12" r="6"></circle>
-                        <circle cx="36" cy="12" r="6"></circle>
-                      </g>
-                    </svg>
+                    <svg version="1.1" width="1.5em" height="1.5em" class="sd-octicon sd-octicon-kebab-horizontal" viewBox="0 0 24 24" aria-hidden="true"><path fill-rule="evenodd" d="M6 12a2 2 0 11-4 0 2 2 0 014 0zm8 0a2 2 0 11-4 0 2 2 0 014 0zm6 2a2 2 0 100-4 2 2 0 000 4z"></path></svg>
                 <container classes="sd-summary-down" design_component="dropdown-closed-marker" is_div="True">
                     <raw format="html" xml:space="preserve">
-                        <svg version="1.1" width="24.0px" height="24px" class="sd-octicon sd-octicon-chevron-down" viewBox="0 0 24 24" aria-hidden="true"><path fill-rule="evenodd" d="M5.22 8.72a.75.75 0 000 1.06l6.25 6.25a.75.75 0 001.06 0l6.25-6.25a.75.75 0 00-1.06-1.06L12 14.44 6.28 8.72a.75.75 0 00-1.06 0z"></path></svg>
+                        <svg version="1.1" width="1.5em" height="1.5em" class="sd-octicon sd-octicon-chevron-down" viewBox="0 0 24 24" aria-hidden="true"><path fill-rule="evenodd" d="M5.22 8.72a.75.75 0 000 1.06l6.25 6.25a.75.75 0 001.06 0l6.25-6.25a.75.75 0 00-1.06-1.06L12 14.44 6.28 8.72a.75.75 0 00-1.06 0z"></path></svg>
                 <container classes="sd-summary-up" design_component="dropdown-open-marker" is_div="True">
                     <raw format="html" xml:space="preserve">
-                        <svg version="1.1" width="24.0px" height="24px" class="sd-octicon sd-octicon-chevron-up" viewBox="0 0 24 24" aria-hidden="true"><path fill-rule="evenodd" d="M18.78 15.28a.75.75 0 000-1.06l-6.25-6.25a.75.75 0 00-1.06 0l-6.25 6.25a.75.75 0 101.06 1.06L12 9.56l5.72 5.72a.75.75 0 001.06 0z"></path></svg>
+                        <svg version="1.1" width="1.5em" height="1.5em" class="sd-octicon sd-octicon-chevron-up" viewBox="0 0 24 24" aria-hidden="true"><path fill-rule="evenodd" d="M18.78 15.28a.75.75 0 000-1.06l-6.25-6.25a.75.75 0 00-1.06 0l-6.25 6.25a.75.75 0 101.06 1.06L12 9.56l5.72 5.72a.75.75 0 001.06 0z"></path></svg>
             <container classes="sd-summary-content sd-card-body" design_component="dropdown-body" is_div="True">
                 <paragraph classes="sd-card-text">
                     Dropdown content
@@ -27,10 +20,10 @@
                 Dropdown title
                 <container classes="sd-summary-down" design_component="dropdown-closed-marker" is_div="True">
                     <raw format="html" xml:space="preserve">
-                        <svg version="1.1" width="24.0px" height="24px" class="sd-octicon sd-octicon-chevron-down" viewBox="0 0 24 24" aria-hidden="true"><path fill-rule="evenodd" d="M5.22 8.72a.75.75 0 000 1.06l6.25 6.25a.75.75 0 001.06 0l6.25-6.25a.75.75 0 00-1.06-1.06L12 14.44 6.28 8.72a.75.75 0 00-1.06 0z"></path></svg>
+                        <svg version="1.1" width="1.5em" height="1.5em" class="sd-octicon sd-octicon-chevron-down" viewBox="0 0 24 24" aria-hidden="true"><path fill-rule="evenodd" d="M5.22 8.72a.75.75 0 000 1.06l6.25 6.25a.75.75 0 001.06 0l6.25-6.25a.75.75 0 00-1.06-1.06L12 14.44 6.28 8.72a.75.75 0 00-1.06 0z"></path></svg>
                 <container classes="sd-summary-up" design_component="dropdown-open-marker" is_div="True">
                     <raw format="html" xml:space="preserve">
-                        <svg version="1.1" width="24.0px" height="24px" class="sd-octicon sd-octicon-chevron-up" viewBox="0 0 24 24" aria-hidden="true"><path fill-rule="evenodd" d="M18.78 15.28a.75.75 0 000-1.06l-6.25-6.25a.75.75 0 00-1.06 0l-6.25 6.25a.75.75 0 101.06 1.06L12 9.56l5.72 5.72a.75.75 0 001.06 0z"></path></svg>
+                        <svg version="1.1" width="1.5em" height="1.5em" class="sd-octicon sd-octicon-chevron-up" viewBox="0 0 24 24" aria-hidden="true"><path fill-rule="evenodd" d="M18.78 15.28a.75.75 0 000-1.06l-6.25-6.25a.75.75 0 00-1.06 0l-6.25 6.25a.75.75 0 101.06 1.06L12 9.56l5.72 5.72a.75.75 0 001.06 0z"></path></svg>
             <container classes="sd-summary-content sd-card-body" design_component="dropdown-body" is_div="True">
                 <paragraph classes="sd-card-text">
                     Dropdown content
@@ -39,10 +32,10 @@
                 Open dropdown
                 <container classes="sd-summary-down" design_component="dropdown-closed-marker" is_div="True">
                     <raw format="html" xml:space="preserve">
-                        <svg version="1.1" width="24.0px" height="24px" class="sd-octicon sd-octicon-chevron-down" viewBox="0 0 24 24" aria-hidden="true"><path fill-rule="evenodd" d="M5.22 8.72a.75.75 0 000 1.06l6.25 6.25a.75.75 0 001.06 0l6.25-6.25a.75.75 0 00-1.06-1.06L12 14.44 6.28 8.72a.75.75 0 00-1.06 0z"></path></svg>
+                        <svg version="1.1" width="1.5em" height="1.5em" class="sd-octicon sd-octicon-chevron-down" viewBox="0 0 24 24" aria-hidden="true"><path fill-rule="evenodd" d="M5.22 8.72a.75.75 0 000 1.06l6.25 6.25a.75.75 0 001.06 0l6.25-6.25a.75.75 0 00-1.06-1.06L12 14.44 6.28 8.72a.75.75 0 00-1.06 0z"></path></svg>
                 <container classes="sd-summary-up" design_component="dropdown-open-marker" is_div="True">
                     <raw format="html" xml:space="preserve">
-                        <svg version="1.1" width="24.0px" height="24px" class="sd-octicon sd-octicon-chevron-up" viewBox="0 0 24 24" aria-hidden="true"><path fill-rule="evenodd" d="M18.78 15.28a.75.75 0 000-1.06l-6.25-6.25a.75.75 0 00-1.06 0l-6.25 6.25a.75.75 0 101.06 1.06L12 9.56l5.72 5.72a.75.75 0 001.06 0z"></path></svg>
+                        <svg version="1.1" width="1.5em" height="1.5em" class="sd-octicon sd-octicon-chevron-up" viewBox="0 0 24 24" aria-hidden="true"><path fill-rule="evenodd" d="M18.78 15.28a.75.75 0 000-1.06l-6.25-6.25a.75.75 0 00-1.06 0l-6.25 6.25a.75.75 0 101.06 1.06L12 9.56l5.72 5.72a.75.75 0 001.06 0z"></path></svg>
             <container classes="sd-summary-content sd-card-body" design_component="dropdown-body" is_div="True">
                 <paragraph classes="sd-card-text">
                     Dropdown content

tests/test_snippets/snippet_post_dropdown-basic.xml

@@ -5,5 +5,5 @@
         <paragraph>
             A coloured icon: 
             <raw format="html" xml:space="preserve">
-                <svg version="1.1" width="1.0em" height="1em" class="sd-octicon sd-octicon-report sd-text-info" viewBox="0 0 16 16" aria-hidden="true"><path fill-rule="evenodd" d="M1.75 1.5a.25.25 0 00-.25.25v9.5c0 .138.112.25.25.25h2a.75.75 0 01.75.75v2.19l2.72-2.72a.75.75 0 01.53-.22h6.5a.25.25 0 00.25-.25v-9.5a.25.25 0 00-.25-.25H1.75zM0 1.75C0 .784.784 0 1.75 0h12.5C15.216 0 16 .784 16 1.75v9.5A1.75 1.75 0 0114.25 13H8.06l-2.573 2.573A1.457 1.457 0 013 14.543V13H1.75A1.75 1.75 0 010 11.25v-9.5zM9 9a1 1 0 11-2 0 1 1 0 012 0zm-.25-5.25a.75.75 0 00-1.5 0v2.5a.75.75 0 001.5 0v-2.5z"></path></svg>
+                <svg version="1.1" width="1.0em" height="1.0em" class="sd-octicon sd-octicon-report sd-text-info" viewBox="0 0 16 16" aria-hidden="true"><path fill-rule="evenodd" d="M1.75 1.5a.25.25 0 00-.25.25v9.5c0 .138.112.25.25.25h2a.75.75 0 01.75.75v2.19l2.72-2.72a.75.75 0 01.53-.22h6.5a.25.25 0 00.25-.25v-9.5a.25.25 0 00-.25-.25H1.75zM0 1.75C0 .784.784 0 1.75 0h12.5C15.216 0 16 .784 16 1.75v9.5A1.75 1.75 0 0114.25 13H8.06l-2.573 2.573A1.457 1.457 0 013 14.543V13H1.75A1.75 1.75 0 010 11.25v-9.5zM9 9a1 1 0 11-2 0 1 1 0 012 0zm-.25-5.25a.75.75 0 00-1.5 0v2.5a.75.75 0 001.5 0v-2.5z"></path></svg>
             , some more text.

tests/test_snippets/snippet_post_icon-octicon.xml

@@ -16,10 +16,10 @@
                             <container classes="sd-col sd-col-auto sd-d-flex sd-align-items-center" design_component="grid-item" is_div="True">
                                 <paragraph classes="sd-p-0 sd-m-0">
                                     <raw classes="sd-pr-2" format="html" xml:space="preserve">
-                                        <svg version="1.1" width="16.0px" height="16px" class="sd-octicon sd-octicon-calendar" viewBox="0 0 16 16" aria-hidden="true"><path fill-rule="evenodd" d="M4.75 0a.75.75 0 01.75.75V2h5V.75a.75.75 0 011.5 0V2h1.25c.966 0 1.75.784 1.75 1.75v10.5A1.75 1.75 0 0113.25 16H2.75A1.75 1.75 0 011 14.25V3.75C1 2.784 1.784 2 2.75 2H4V.75A.75.75 0 014.75 0zm0 3.5h8.5a.25.25 0 01.25.25V6h-11V3.75a.25.25 0 01.25-.25h2zm-2.25 4v6.75c0 .138.112.25.25.25h10.5a.25.25 0 00.25-.25V7.5h-11z"></path></svg>
+                                        <svg version="1.1" width="16.0px" height="16.0px" class="sd-octicon sd-octicon-calendar" viewBox="0 0 16 16" aria-hidden="true"><path fill-rule="evenodd" d="M4.75 0a.75.75 0 01.75.75V2h5V.75a.75.75 0 011.5 0V2h1.25c.966 0 1.75.784 1.75 1.75v10.5A1.75 1.75 0 0113.25 16H2.75A1.75 1.75 0 011 14.25V3.75C1 2.784 1.784 2 2.75 2H4V.75A.75.75 0 014.75 0zm0 3.5h8.5a.25.25 0 01.25.25V6h-11V3.75a.25.25 0 01.25-.25h2zm-2.25 4v6.75c0 .138.112.25.25.25h10.5a.25.25 0 00.25-.25V7.5h-11z"></path></svg>
                                     Jul 24, 2021
                             <container classes="sd-col sd-col-auto sd-d-flex sd-align-items-center" design_component="grid-item" is_div="True">
                                 <paragraph classes="sd-p-0 sd-m-0">
                                     <raw classes="sd-pr-2" format="html" xml:space="preserve">
-                                        <svg version="1.1" width="16.0px" height="16px" class="sd-octicon sd-octicon-clock" viewBox="0 0 16 16" aria-hidden="true"><path fill-rule="evenodd" d="M1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0zM8 0a8 8 0 100 16A8 8 0 008 0zm.5 4.75a.75.75 0 00-1.5 0v3.5a.75.75 0 00.471.696l2.5 1a.75.75 0 00.557-1.392L8.5 7.742V4.75z"></path></svg>
+                                        <svg version="1.1" width="16.0px" height="16.0px" class="sd-octicon sd-octicon-clock" viewBox="0 0 16 16" aria-hidden="true"><path fill-rule="evenodd" d="M1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0zM8 0a8 8 0 100 16A8 8 0 008 0zm.5 4.75a.75.75 0 00-1.5 0v3.5a.75.75 0 00.471.696l2.5 1a.75.75 0 00.557-1.392L8.5 7.742V4.75z"></path></svg>
                                     5 min read