Merge pull request #48 from mussonindustrial/feat/color-inversion-pro…

…pogation docs(changeset): Fixed: Propogation of undefinited color inversion pr…
mussonindustrial · Feb 10, 2024 · 4a3c73e · 4a3c73e
2 parents 0721fd5 + 8ab02e0
commit 4a3c73e
Showing 4 changed files with 64 additions and 11 deletions.
diff --git a/.changeset/cyan-walls-boil.md b/.changeset/cyan-walls-boil.md
@@ -0,0 +1,5 @@
+---
+'@mussonindustrial/pyro-mui-joy': patch
+---
+
+Fixed: Propogation of undefinited color inversion properties
diff --git a/packages/pyro-mui-joy/src/colors/dark.css b/packages/pyro-mui-joy/src/colors/dark.css
@@ -1,4 +1,8 @@
 $palettes: (primary, neutral, danger, info, success, warning);
+$variants: (plain, outlined, soft, solid);
+$states: (Hover, Active, Disabled);
+$attributes: (Color, Bg, Border);
+$steps: (50, 100, 200, 300, 400, 500, 600, 700, 800, 900);
 
 :root {
     /* Dark Theme */
@@ -291,10 +295,20 @@ $palettes: (primary, neutral, danger, info, success, warning);
 }
 
 /* prettier-ignore */
-[psc='Joy/Variant/color-inversion'][psc='Joy/Variant/soft']:not(
+[psc='Joy/Variant/soft'] [psc='Joy/Variant/color-inversion'][psc='Joy/Variant/color-inversion']:not(
         [psc='Joy/Variant/skip-inverted-colors'],
         [psc='Joy/Variant/skip-inverted-colors'] *
     ) {
+
+    @each $variant in $variants {
+        @each $attribute in $attributes {
+            @each $state in $states {
+                /* prettier-ignore */
+                --palette-$(variant)$(state)$(attribute): var(--palette-$(variant)$(attribute));
+            }
+        }
+    }
+
     --palette-focusVisible: var(--palette-300, #f3c896);
     --palette-background-body: rgba(
         var(--palette-mainChannel, 234 154 62) / 0.1
@@ -373,10 +387,20 @@ $palettes: (primary, neutral, danger, info, success, warning);
 }
 
 /* prettier-ignore */
-[psc='Joy/Variant/color-inversion'][psc='Joy/Variant/solid']:not(
+[psc='Joy/Variant/solid'] [psc='Joy/Variant/color-inversion'][psc='Joy/Variant/color-inversion']:not(
         [psc='Joy/Variant/skip-inverted-colors'],
         [psc='Joy/Variant/skip-inverted-colors'] *
     ) {
+
+    @each $variant in $variants {
+        @each $attribute in $attributes {
+            @each $state in $states {
+                /* prettier-ignore */
+                --palette-$(variant)$(state)$(attribute): var(--palette-$(variant)$(attribute));
+            }
+        }
+    }
+
     --palette-focusVisible: var(--palette-200, #dde7ee);
     --palette-background-body: rgba(0 0 0 / 0.1);
     --palette-background-surface: rgba(0 0 0 / 0.06);

diff --git a/packages/pyro-mui-joy/src/colors/light.css b/packages/pyro-mui-joy/src/colors/light.css
@@ -1,4 +1,8 @@
 $palettes: (primary, neutral, danger, info, success, warning);
+$variants: (plain, outlined, soft, solid);
+$states: (Hover, Active, Disabled);
+$attributes: (Color, Bg, Border);
+$steps: (50, 100, 200, 300, 400, 500, 600, 700, 800, 900);
 
 :root {
     /* Light Theme */
@@ -292,10 +296,20 @@ $palettes: (primary, neutral, danger, info, success, warning);
 }
 
 /* prettier-ignore */
-[psc='Joy/Variant/soft'] [psc='Joy/Variant/color-inversion']:not(
-        [psc='Joy/Variant/skip-inverted-colors'],
-        [psc='Joy/Variant/skip-inverted-colors'] *
-    ) {
+[psc='Joy/Variant/soft'] [psc='Joy/Variant/color-inversion'][psc='Joy/Variant/color-inversion']:not(
+    [psc='Joy/Variant/skip-inverted-colors'],
+    [psc='Joy/Variant/skip-inverted-colors'] *
+) {
+
+    @each $variant in $variants {
+        @each $attribute in $attributes {
+            @each $state in $states {
+                /* prettier-ignore */
+                --palette-$(variant)$(state)$(attribute): var(--palette-$(variant)$(attribute));
+            }
+        }
+    }
+
     --palette-focusVisible: var(--palette-500, #9a5b13);
     --palette-background-body: rgba(
         var(--palette-mainChannel, 154 91 19) / 0.1
@@ -365,10 +379,20 @@ $palettes: (primary, neutral, danger, info, success, warning);
 }
 
 /* prettier-ignore */
-[psc='Joy/Variant/color-inversion'] [psc='Joy/Variant/solid']:not(
-        [psc='Joy/Variant/skip-inverted-colors'],
-        [psc='Joy/Variant/skip-inverted-colors'] *
-    ) {
+[psc='Joy/Variant/solid'] [psc='Joy/Variant/color-inversion'][psc='Joy/Variant/color-inversion']:not(
+    [psc='Joy/Variant/skip-inverted-colors'],
+    [psc='Joy/Variant/skip-inverted-colors'] *
+) {
+
+    @each $variant in $variants {
+        @each $attribute in $attributes {
+            @each $state in $states {
+                /* prettier-ignore */
+                --palette-$(variant)$(state)$(attribute): var(--palette-$(variant)$(attribute));
+            }
+        }
+    }
+
     --palette-focusVisible: var(--palette-200, #dde7ee);
     --palette-background-body: rgba(0 0 0 / 0.1);
     --palette-background-surface: rgba(0 0 0 / 0.06);

diff --git a/packages/pyro-mui-joy/src/common/palettes.css b/packages/pyro-mui-joy/src/common/palettes.css
@@ -27,7 +27,7 @@ $steps: (50, 100, 200, 300, 400, 500, 600, 700, 800, 900);
                     /* prettier-ignore */
                     --palette-$(variant)$(state)$(attribute): var(
                         --palette-$(palette)-$(variant)$(state)$(attribute),
-                        var(--palette-$(palette)-$(variant)$(attribute))
+                        var(--palette-$(variant)$(attribute))
                     );
                 }
             }