Merge pull request #47 from mussonindustrial/feat/showcase

Feat/showcase
mussonindustrial · Jan 31, 2024 · 0721fd5 · 0721fd5
2 parents 8948553 + c80a0ea
commit 0721fd5
Show file tree

Hide file tree

Showing 11 changed files with 99 additions and 49 deletions.
diff --git a/.changeset/clever-files-sin.md b/.changeset/clever-files-sin.md
@@ -0,0 +1,5 @@
+---
+'@mussonindustrial/pyro-mui-joy': patch
+---
+
+Fix: Button now prioritizes its own size, over its parent
diff --git a/.changeset/cuddly-files-deny.md b/.changeset/cuddly-files-deny.md
@@ -0,0 +1,5 @@
+---
+'@mussonindustrial/pyro-mui-joy': patch
+---
+
+Fix: Resolved linting related color-inversion issue
diff --git a/.changeset/late-hairs-sparkle.md b/.changeset/late-hairs-sparkle.md
@@ -0,0 +1,5 @@
+---
+'@mussonindustrial/pyro-mui-joy': patch
+---
+
+Fix: Divider is properly sized in card-overflow contexts
diff --git a/.changeset/sixty-seals-turn.md b/.changeset/sixty-seals-turn.md
@@ -0,0 +1,5 @@
+---
+'@mussonindustrial/pyro-mui-joy': patch
+---
+
+Fix: Major card rework. Removed default shadow, adjusted sizing priority, added card-overflow support to middle elements.
diff --git a/packages/pyro-mui-joy/README.md b/packages/pyro-mui-joy/README.md
@@ -29,6 +29,34 @@ This project generates several files required for installation:
 -   Color Inversion Support
 -   Variant/Palette Support
 
+## Building
+
+```sh
+git clone https://github.com/mussonindustrial/pyro
+cd pyro
+npm install
+cd packages/pyro-mui-joy
+npm run build
+```
+
+## Testing
+
+This project provides a docker-based development server for rapid iteration.
+
+> [!IMPORTANT]
+> You must have a container environment (i.e. Docker) installed on your system to use the development server.
+> After the docker container starts, this projects themes, fonts, and Perspective style classes are automatically loaded into the Ignition gateway.
+> When changes are detected to the project's source files, the theme is rebuilt and re-uploaded to the development server.
+
+```sh
+git clone https://github.com/mussonindustrial/pyro
+cd pyro
+npm install
+cd packages/pyro-mui-joy
+npm run build
+npm run dev
+```
+
 ## Changelog
 
 The [changelog](https://github.com/mussonindustrial/pyro/releases) is regularly updated to reflect what's changed in each new release.

diff --git a/packages/pyro-mui-joy/dev/backup.gwbk b/packages/pyro-mui-joy/dev/backup.gwbk
diff --git a/packages/pyro-mui-joy/src/classes/card.css b/packages/pyro-mui-joy/src/classes/card.css
@@ -33,7 +33,7 @@
 
     padding: var(--Card-padding);
     border-radius: var(--Card-radius);
-    box-shadow: var(--shadow-sm);
+    /* box-shadow: var(--shadow-sm); */
     font-family: var(--fontFamily-body);
     position: relative;
 
@@ -46,46 +46,37 @@
     border-color: var(--Card-Border);
     border-width: var(--Card-borderWidth);
     border-style: var(--Card-borderStyle);
+}
 
-    &[psc='Joy/Size/sm'] {
-        --Card-radius: var(--radius-sm);
-        --Card-padding: 0.5rem;
-    }
-
-    &[psc='Joy/Size/md'] {
-        --Card-radius: var(--radius-md);
-        --Card-padding: 1rem;
-    }
-
-    &[psc='Joy/Size/lg'] {
-        --Card-radius: var(--radius-lg);
-        --Card-padding: 1.5rem;
-        font-size: var(--fontSize-md);
-    }
-
-    &[psc='Joy/Variant/plain'],
-    &[psc='Joy/Variant/outlined'] {
-        --Card-Bg: var(--palette-background-surface);
-    }
-
-    /* [psc='Joy/Container/card-overflow'] {
-        margin-inline: var(--CardOverflow-offset);
-        padding: 0px var(--Card-padding);
-    } */
+[psc='Joy/Size/sm'] [psc='Joy/Container/card'],
+[psc='Joy/Size/sm'][psc='Joy/Container/card'][psc='Joy/Container/card'],
+[psc='Joy/Size/sm'] [psc='Joy/Container/card-horizontal'],
+[psc='Joy/Size/sm'][psc='Joy/Container/card-horizontal'][psc='Joy/Container/card-horizontal'],
+[psc='Joy/Size/sm'] [psc='Joy/Container/card-vertical'],
+[psc='Joy/Size/sm'][psc='Joy/Container/card-vertical'][psc='Joy/Container/card-vertical'] {
+    --Card-radius: var(--radius-sm);
+    --Card-padding: 0.5rem;
+}
 
-    /* :first-child[psc='Joy/Container/card-overflow'] {
-        margin-block: var(--CardOverflow-offset) 0px;
-        border-top: 0px;
-        border-left: 0px;
-        border-right: 0px;
-    }
+[psc='Joy/Size/md'] [psc='Joy/Container/card'],
+[psc='Joy/Size/md'][psc='Joy/Container/card'][psc='Joy/Container/card'],
+[psc='Joy/Size/md'] [psc='Joy/Container/card-horizontal'],
+[psc='Joy/Size/md'][psc='Joy/Container/card-horizontal'][psc='Joy/Container/card-horizontal'],
+[psc='Joy/Size/md'] [psc='Joy/Container/card-vertical'],
+[psc='Joy/Size/md'][psc='Joy/Container/card-vertical'][psc='Joy/Container/card-vertical'] {
+    --Card-radius: var(--radius-md);
+    --Card-padding: 1rem;
+}
 
-    :last-child[psc='Joy/Container/card-overflow'] {
-        margin-block: 0px var(--CardOverflow-offset);
-        border-bottom: 0px;
-        border-left: 0px;
-        border-right: 0px;
-    } */
+[psc='Joy/Size/lg'] [psc='Joy/Container/card'],
+[psc='Joy/Size/lg'][psc='Joy/Container/card'][psc='Joy/Container/card'],
+[psc='Joy/Size/lg'] [psc='Joy/Container/card-horizontal'],
+[psc='Joy/Size/lg'][psc='Joy/Container/card-horizontal'][psc='Joy/Container/card-horizontal'],
+[psc='Joy/Size/lg'] [psc='Joy/Container/card-vertical'],
+[psc='Joy/Size/lg'][psc='Joy/Container/card-vertical'][psc='Joy/Container/card-vertical'] {
+    --Card-radius: var(--radius-lg);
+    --Card-padding: 1.5rem;
+    font-size: var(--fontSize-md);
 }
 
 [psc='Joy/Container/card-overflow'] {
@@ -134,6 +125,11 @@
             var(--CardOverflow-offset) 0;
     }
 
+    > [psc='Joy/Container/card-overflow'] {
+        --_CardOverflow-margin: var(--CardOverflow-offset)
+            var(--CardOverflow-offset) 0 0;
+    }
+
     > [psc='Joy/Container/card-overflow']:last-child {
         --AspectRatio-radius: 0 0
             calc(var(--CardOverflow-radius) - var(--variant-borderWidth, 0px))
@@ -165,6 +161,11 @@
             var(--CardOverflow-offset) var(--CardOverflow-offset);
     }
 
+    > [psc='Joy/Container/card-overflow'] {
+        --_CardOverflow-margin: 0px 0px var(--CardOverflow-offset)
+            var(--CardOverflow-offset);
+    }
+
     > [psc='Joy/Container/card-overflow']:last-child {
         --AspectRatio-radius: 0
             calc(var(--CardOverflow-radius) - var(--variant-borderWidth, 0px))

diff --git a/packages/pyro-mui-joy/src/classes/divider.css b/packages/pyro-mui-joy/src/classes/divider.css
@@ -9,6 +9,7 @@
     border: 0px;
     font-family: var(--joy-fontFamily-body);
     font-size: var(--joy-fontSize-sm);
+    padding: 0px !important;
 
     &:empty {
         background-color: var(--Divider-lineColor);

diff --git a/packages/pyro-mui-joy/src/colors/dark.css b/packages/pyro-mui-joy/src/colors/dark.css
@@ -290,8 +290,8 @@ $palettes: (primary, neutral, danger, info, success, warning);
     outline: none;
 }
 
-[psc='Joy/Variant/color-inversion'][psc='Joy/Variant/soft']
-    :not(
+/* prettier-ignore */
+[psc='Joy/Variant/color-inversion'][psc='Joy/Variant/soft']:not(
         [psc='Joy/Variant/skip-inverted-colors'],
         [psc='Joy/Variant/skip-inverted-colors'] *
     ) {
@@ -372,8 +372,8 @@ $palettes: (primary, neutral, danger, info, success, warning);
     );
 }
 
-[psc='Joy/Variant/color-inversion'][psc='Joy/Variant/solid']
-    :not(
+/* prettier-ignore */
+[psc='Joy/Variant/color-inversion'][psc='Joy/Variant/solid']:not(
         [psc='Joy/Variant/skip-inverted-colors'],
         [psc='Joy/Variant/skip-inverted-colors'] *
     ) {

diff --git a/packages/pyro-mui-joy/src/colors/light.css b/packages/pyro-mui-joy/src/colors/light.css
@@ -291,8 +291,8 @@ $palettes: (primary, neutral, danger, info, success, warning);
     outline: none;
 }
 
-[psc='Joy/Variant/soft'][psc='Joy/Variant/color-inversion']
-    :not(
+/* prettier-ignore */
+[psc='Joy/Variant/soft'] [psc='Joy/Variant/color-inversion']:not(
         [psc='Joy/Variant/skip-inverted-colors'],
         [psc='Joy/Variant/skip-inverted-colors'] *
     ) {
@@ -364,8 +364,8 @@ $palettes: (primary, neutral, danger, info, success, warning);
     );
 }
 
-[psc='Joy/Variant/color-inversion'][psc='Joy/Variant/solid']
-    :not(
+/* prettier-ignore */
+[psc='Joy/Variant/color-inversion'] [psc='Joy/Variant/solid']:not(
         [psc='Joy/Variant/skip-inverted-colors'],
         [psc='Joy/Variant/skip-inverted-colors'] *
     ) {

diff --git a/packages/pyro-mui-joy/src/components/buttons.css b/packages/pyro-mui-joy/src/components/buttons.css
@@ -58,7 +58,7 @@
 }
 
 [psc='Joy/Size/sm'] [data-component='ia.input.button'],
-[psc='Joy/Size/sm'][data-component='ia.input.button'],
+[psc='Joy/Size/sm'][data-component='ia.input.button'][data-component='ia.input.button'],
 [psc='Joy/Size/sm'] ~ .ia_passwordFieldComponent__visibilityLink {
     --IconButton-size: 2rem;
     --Icon-fontSize: calc(var(--IconButton-size) / 1.6);
@@ -71,7 +71,7 @@
 }
 
 [psc='Joy/Size/md'] [data-component='ia.input.button'],
-[psc='Joy/Size/md'][data-component='ia.input.button'],
+[psc='Joy/Size/md'][data-component='ia.input.button'][data-component='ia.input.button'],
 [psc='Joy/Size/md'] ~ .ia_passwordFieldComponent__visibilityLink {
     --IconButton-size: 2.25rem;
     --Icon-fontSize: calc(var(--IconButton-size) / 1.5);
@@ -84,7 +84,7 @@
 }
 
 [psc='Joy/Size/lg'] [data-component='ia.input.button'],
-[psc='Joy/Size/lg'][data-component='ia.input.button'],
+[psc='Joy/Size/lg'][data-component='ia.input.button'][data-component='ia.input.button'],
 [psc='Joy/Size/lg'] ~ .ia_passwordFieldComponent__visibilityLink {
     --IconButton-size: 2.75rem;
     --Icon-fontSize: calc(var(--IconButton-size) / 1.571);