♻️ change css previx mui -> sd

executablebooks · Jul 22, 2021 · 8b489f6 · 8b489f6
1 parent 5d3b45a
commit 8b489f6
Show file tree

Hide file tree

Showing 12 changed files with 171 additions and 169 deletions.
diff --git a/README.md b/README.md
@@ -28,22 +28,22 @@ defaults:
 - padding, margin
 
 - directives:
-  - mui-grid (optional), mui-grid-item
-  - mui-dropdowns (optional), mui-dropdown
-  - mui-tabs (optional), mui-tab
-  - mui-link-button
+  - sd-grid (optional), sd-grid-item
+  - sd-dropdowns (optional), sd-dropdown
+  - sd-tabs (optional), sd-tab
+  - sd-link-button
 
 - roles:
-  - badges: mui-badge, mui-link-badge
-  - icons: mui-opticon, mui-fa
+  - badges: sd-badge, sd-link-badge
+  - icons: sd-opticon, sd-fa
 
 `````markdown
 
-````{mui-grid}
+````{sd-grid}
 :padding: <left> <right> <top> <bottom> | <all>
 :margin: <left> <right> <top> <bottom> | <all>
 
-````{mui-grid-item}
+````{sd-grid-item}
 :layout: <sm> <md> <lg> <xl> | <all>
 :padding: <left> <right> <top> <bottom> | <all>
 :margin: <left> <right> <top> <bottom> | <all>
@@ -64,3 +64,5 @@ handle latex
 is grid/grid-item both having `columns`, with different meanings, confusing?
 
 card header/footer syntax?
+
+card title/subtitle (card tite could be argument?, but ideally would also be ~h5 tag)
diff --git a/sphinx_design/card.py b/sphinx_design/card.py
@@ -53,11 +53,11 @@ def run(self) -> List[nodes.Node]:
     @classmethod
     def create_card(cls, inst: SphinxDirective, options: dict) -> nodes.Node:
         """Run the directive."""
-        card_classes = ["mui-card", "mui-sphinx-override"]
+        card_classes = ["sd-card", "sd-sphinx-override"]
         if "width" in options:
-            card_classes += [f'mui-w-{options["width"]}']
+            card_classes += [f'sd-w-{options["width"]}']
         if "no-shadow" in options:
-            card_classes += ["mui-shadow"]
+            card_classes += ["sd-shadow"]
         card = create_component(
             "card",
             card_classes
@@ -71,7 +71,7 @@ def create_card(cls, inst: SphinxDirective, options: dict) -> nodes.Node:
                 "",
                 uri=options["img-top"],
                 alt="card-img-top",
-                classes=["mui-card-img-top"],
+                classes=["sd-card-img-top"],
             )
             card.append(image_top)
 
@@ -102,7 +102,7 @@ def create_card(cls, inst: SphinxDirective, options: dict) -> nodes.Node:
                 "",
                 uri=options["img-bottom"],
                 alt="card-img-bottom",
-                classes=["mui-card-img-bottom"],
+                classes=["sd-card-img-bottom"],
             )
             card.append(image_bottom)
 
@@ -144,7 +144,7 @@ def _create_component(
     ) -> nodes.container:
         """Create the header, body, or footer."""
         component = create_component(
-            f"card-{name}", [f"mui-card-{name}"] + options.get(f"class-{name}", [])
+            f"card-{name}", [f"sd-card-{name}"] + options.get(f"class-{name}", [])
         )
         inst.set_source_info(component)  # TODO set proper lines
         inst.state.nested_parse(content, offset, component)
@@ -156,9 +156,9 @@ def add_card_child_classes(node):
         """Add classes to specific child nodes."""
         for para in node.traverse(nodes.paragraph):
             para["classes"] = ([] if "classes" not in para else para["classes"]) + [
-                "mui-card-text"
+                "sd-card-text"
             ]
         for title in node.traverse(nodes.title):
             title["classes"] = ([] if "classes" not in title else title["classes"]) + [
-                "mui-card-title"
+                "sd-card-title"
             ]
diff --git a/sphinx_design/compiled/style.min.css b/sphinx_design/compiled/style.min.css
diff --git a/sphinx_design/grid.py b/sphinx_design/grid.py
@@ -76,23 +76,23 @@ def row_columns_option(argument: Optional[str]) -> List[str]:
 
     One or four integers (for "xs sm md lg") between 1 and 12.
     """
-    return _media_option(argument, "mui-row-cols-")
+    return _media_option(argument, "sd-row-cols-")
 
 
 def item_columns_option(argument: Optional[str]) -> List[str]:
     """Validate the number of columns (out of 12) a grid-item will take up.
 
     One or four integers (for "xs sm md lg") between 1 and 12.
     """
-    return _media_option(argument, "mui-col-", allow_auto=True)
+    return _media_option(argument, "sd-col-", allow_auto=True)
 
 
 def gutter_option(argument: Optional[str]) -> List[str]:
     """Validate the gutter size between grid items.
 
     One or four integers (for "xs sm md lg") between 0 and 5.
     """
-    return _media_option(argument, "mui-g-", min_num=0, max_num=5)
+    return _media_option(argument, "sd-g-", min_num=0, max_num=5)
 
 
 class GridDirective(SphinxDirective):
@@ -112,19 +112,19 @@ class GridDirective(SphinxDirective):
     def run(self) -> List[nodes.Node]:
         """Run the directive."""
         self.assert_has_content()
-        grid_classes = ["mui-container", "mui-sphinx-override"]
+        grid_classes = ["sd-container", "sd-sphinx-override"]
         container = create_component(
             "grid",
             grid_classes
             + self.options.get("margin", [])
-            + self.options.get("padding", ["mui-pb-4"])
+            + self.options.get("padding", ["sd-pb-4"])
             + self.options.get("text-align", [])
             + self.options.get("class-grid", []),
         )
         self.set_source_info(container)
         row = create_component(
             "grid-row",
-            ["mui-row"]
+            ["sd-row"]
             + self.options.get("columns", [])
             + self.options.get("gutter", [])
             + self.options.get("class-row", []),
@@ -167,8 +167,8 @@ def run(self) -> List[nodes.Node]:
         column = create_component(
             "grid-column",
             [
-                "mui-col",
-                "mui-d-flex",  # TODO is this necessary or should be configurable?
+                "sd-col",
+                "sd-d-flex",  # TODO is this necessary or should be configurable?
             ]
             + self.options.get("columns", [])
             + self.options.get("margin", [])
@@ -206,8 +206,8 @@ def run(self) -> List[nodes.Node]:
         column = create_component(
             "grid-column",
             [
-                "mui-col",
-                "mui-d-flex",  # TODO is this necessary or should be configurable?
+                "sd-col",
+                "sd-d-flex",  # TODO is this necessary or should be configurable?
             ]
             + self.options.get("columns", [])
             + self.options.get("margin", [])

diff --git a/sphinx_design/shared.py b/sphinx_design/shared.py
@@ -53,17 +53,17 @@ def margin_option(argument: Optional[str]) -> List[str]:
     """Validate the margin is one (all) or four (top bottom left right) integers,
     between 0 and 5.
     """
-    return _margin_or_padding_option(argument, "mui-m")
+    return _margin_or_padding_option(argument, "sd-m")
 
 
 def padding_option(argument: Optional[str]) -> List[str]:
     """Validate the padding is one (all) or four (top bottom left right) integers,
     between 0 and 5.
     """
-    return _margin_or_padding_option(argument, "mui-p")
+    return _margin_or_padding_option(argument, "sd-p")
 
 
 def text_align(argument: Optional[str]) -> List[str]:
     """Validate the text align is left, right, center or justify."""
     value = directives.choice(argument, ["left", "right", "center", "justify"])
-    return [f"mui-text-{value}"]
+    return [f"sd-text-{value}"]
diff --git a/style/_cards.scss b/style/_cards.scss
@@ -3,10 +3,10 @@
 // Copyright 2011-2019 Twitter, Inc.
 // Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 
-.mui-card {
+.sd-card {
   background-clip: border-box;
-  background-color: var(--mui-color-card-background);
-  border: 1px solid var(--mui-color-card-border);
+  background-color: var(--sd-color-card-background);
+  border: 1px solid var(--sd-color-card-border);
   border-radius: 0.25rem;
   display: -ms-flexbox;
   display: flex;
@@ -22,67 +22,67 @@
   }
 }
 
-.mui-card-body {
+.sd-card-body {
   -ms-flex: 1 1 auto;
   flex: 1 1 auto;
   padding: 1rem 1rem;
 }
 
-.mui-card-title {
+.sd-card-title {
   margin-bottom: 0.5rem;
 }
 
-.mui-card-subtitle {
+.sd-card-subtitle {
   margin-top: -0.25rem;
   margin-bottom: 0;
 }
 
-.mui-card-text:last-child {
+.sd-card-text:last-child {
   margin-bottom: 0;
 }
 
-.mui-card-link:hover {
+.sd-card-link:hover {
   text-decoration: none;
 }
 
-.mui-card-link + .card-link {
+.sd-card-link + .card-link {
   margin-left: 1rem;
 }
 
-.mui-card-header {
+.sd-card-header {
   padding: 0.5rem 1rem;
   margin-bottom: 0;
-  background-color: var(--mui-color-card-header);
-  border-bottom: 1px solid var(--mui-color-card-border);
+  background-color: var(--sd-color-card-header);
+  border-bottom: 1px solid var(--sd-color-card-border);
 }
 
-.mui-card-header:first-child {
+.sd-card-header:first-child {
   border-radius: calc(0.25rem - 1px) calc(0.25rem - 1px) 0 0;
 }
 
-.mui-card-footer {
+.sd-card-footer {
   padding: 0.5rem 1rem;
-  background-color: var(--mui-color-card-footer);
-  border-top: 1px solid var(--mui-color-card-border);
+  background-color: var(--sd-color-card-footer);
+  border-top: 1px solid var(--sd-color-card-border);
 }
 
-.mui-card-footer:last-child {
+.sd-card-footer:last-child {
   border-radius: 0 0 calc(0.25rem - 1px) calc(0.25rem - 1px);
 }
 
-.mui-card-header-tabs {
+.sd-card-header-tabs {
   margin-right: -0.5rem;
   margin-bottom: -0.5rem;
   margin-left: -0.5rem;
   border-bottom: 0;
 }
 
-.mui-card-header-pills {
+.sd-card-header-pills {
   margin-right: -0.5rem;
   margin-left: -0.5rem;
 }
 
-.mui-card-img-overlay {
+.sd-card-img-overlay {
   position: absolute;
   top: 0;
   right: 0;
@@ -92,20 +92,20 @@
   border-radius: calc(0.25rem - 1px);
 }
 
-.mui-card-img,
-.mui-card-img-bottom,
-.mui-card-img-top {
+.sd-card-img,
+.sd-card-img-bottom,
+.sd-card-img-top {
   width: 100%;
 }
 
-.mui-card-img,
-.mui-card-img-top {
+.sd-card-img,
+.sd-card-img-top {
   border-top-left-radius: calc(0.25rem - 1px);
   border-top-right-radius: calc(0.25rem - 1px);
 }
 
-.mui-card-img,
-.mui-card-img-bottom {
+.sd-card-img,
+.sd-card-img-bottom {
   border-bottom-left-radius: calc(0.25rem - 1px);
   border-bottom-right-radius: calc(0.25rem - 1px);
 }
diff --git a/style/_colors.scss b/style/_colors.scss
@@ -47,62 +47,62 @@ $semantic-colors: (
 :root {
   // semantic colors
   @each $color, $value in $semantic-colors {
-    --mui-color-#{$color}: #{$value};
+    --sd-color-#{$color}: #{$value};
   }
   // semantic colors for highlighting (e.g. focus/hover)
   @each $color, $value in $semantic-colors {
-    --mui-color-#{$color}-highlight: #{darken($value, 15%)};
+    --sd-color-#{$color}-highlight: #{darken($value, 15%)};
   }
   // colors for text on top of a semantic color background
   @each $color, $value in $semantic-colors {
-    --mui-color-#{$color}-text: #{text-color($value)};
+    --sd-color-#{$color}-text: #{text-color($value)};
   }
   // shadow
-  --mui-color-shadow: rgba(0, 0, 0, .15);
+  --sd-color-shadow: rgba(0, 0, 0, .15);
   // cards
-  --mui-color-card-border: #{$black-12-5};
-  --mui-color-card-background: #{$white};
-  --mui-color-card-header: #{$black-3};
-  --mui-color-card-footer: #{$black-3};
+  --sd-color-card-border: #{$black-12-5};
+  --sd-color-card-background: #{$white};
+  --sd-color-card-header: #{$black-3};
+  --sd-color-card-footer: #{$black-3};
 }
 
-.mui-bg-transparent {
+.sd-bg-transparent {
   background-color: transparent !important;
 }
 
 @each $color, $value in $semantic-colors {
-  .mui-bg-#{$color} {
-    color: var(--mui-color-#{$color}) !important;
+  .sd-bg-#{$color} {
+    color: var(--sd-color-#{$color}) !important;
   }
-  .mui-bg-text-#{$color} {
-    color: var(--mui-color-#{$color}-text) !important;
+  .sd-bg-text-#{$color} {
+    color: var(--sd-color-#{$color}-text) !important;
   }
   button {
-    &.mui-bg-#{$color}:focus,
-    &.mui-bg-#{$color}:hover {
-      background-color: var(--mui-color-#{$color}-highlight) !important;
+    &.sd-bg-#{$color}:focus,
+    &.sd-bg-#{$color}:hover {
+      background-color: var(--sd-color-#{$color}-highlight) !important;
     }
   }
   a {
-    &.mui-bg-#{$color}:focus,
-    &.mui-bg-#{$color}:hover {
-      background-color: var(--mui-color-#{$color}-highlight) !important;
+    &.sd-bg-#{$color}:focus,
+    &.sd-bg-#{$color}:hover {
+      background-color: var(--sd-color-#{$color}-highlight) !important;
     }
   }
 }
 
 @each $color, $value in $semantic-colors {
-  .mui-text-#{$color} {
-    color: var(--mui-color-#{$color}) !important;
+  .sd-text-#{$color} {
+    color: var(--sd-color-#{$color}) !important;
   }
   a {
-    &.mui-text-#{$color}:focus,
-    &.mui-text-#{$color}:hover {
-      color: var(--mui-color-#{$color}-highlight) !important;
+    &.sd-text-#{$color}:focus,
+    &.sd-text-#{$color}:hover {
+      color: var(--sd-color-#{$color}-highlight) !important;
     }
   }
 }
 
-.mui-shadow {
-  box-shadow: 0 .5rem 1rem var(--mui-color-shadow) !important;
+.sd-shadow {
+  box-shadow: 0 .5rem 1rem var(--sd-color-shadow) !important;
 }