Merge pull request #20 from srambach/opacity-not-mix-blend-mode

patternfly · Feb 27, 2024 · 90e6973 · 90e6973
2 parents 6422540 + ebe1704
commit 90e6973
Show file tree

Hide file tree

Showing 12 changed files with 1,495 additions and 815 deletions.
diff --git a/packages/module/build.js b/packages/module/build.js
@@ -12,6 +12,7 @@ StyleDictionary.registerTransform({
     token.attributes.type === 'spacer' ||
     token.attributes.type === 'border' ||
     token.attributes.type === 'icon' ||
+    token.attributes.type === 'box-shadow' ||
     token.attributes.type === 'font',
   transformer: (token) => `${token.value}px`
 });

diff --git a/packages/module/build/css/_tokens-charts.scss b/packages/module/build/css/_tokens-charts.scss
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 14 Feb 2024 00:59:20 GMT
+ * Generated on Tue, 20 Feb 2024 01:08:05 GMT
  */
 
 :root {
@@ -95,31 +95,31 @@
   --pf-t--chart--theme--colorscales--Multi-colored-unordered--colorscale--300: var(--pf-t--chart--color--green--300);
   --pf-t--chart--theme--colorscales--Multi-colored-unordered--colorscale--200: var(--pf-t--chart--color--yellow--300);
   --pf-t--chart--theme--colorscales--Multi-colored-unordered--colorscale--100: var(--pf-t--chart--color--blue--300);
-  --pf-t--chart--theme--colorscales--Multi-colored-ordered--colorscale--2500: var(--pf-t--chart--color--orange--200);
-  --pf-t--chart--theme--colorscales--Multi-colored-ordered--colorscale--2400: var(--pf-t--chart--color--yellow--400);
-  --pf-t--chart--theme--colorscales--Multi-colored-ordered--colorscale--2300: var(--pf-t--chart--color--teal--400);
-  --pf-t--chart--theme--colorscales--Multi-colored-ordered--colorscale--2200: var(--pf-t--chart--color--green--200);
-  --pf-t--chart--theme--colorscales--Multi-colored-ordered--colorscale--2100: var(--pf-t--chart--color--blue--400);
-  --pf-t--chart--theme--colorscales--Multi-colored-ordered--colorscale--2000: var(--pf-t--chart--color--orange--400);
-  --pf-t--chart--theme--colorscales--Multi-colored-ordered--colorscale--1900: var(--pf-t--chart--color--yellow--200);
-  --pf-t--chart--theme--colorscales--Multi-colored-ordered--colorscale--1800: var(--pf-t--chart--color--teal--200);
-  --pf-t--chart--theme--colorscales--Multi-colored-ordered--colorscale--1700: var(--pf-t--chart--color--green--400);
-  --pf-t--chart--theme--colorscales--Multi-colored-ordered--colorscale--1600: var(--pf-t--chart--color--blue--200);
-  --pf-t--chart--theme--colorscales--Multi-colored-ordered--colorscale--1500: var(--pf-t--chart--color--orange--100);
-  --pf-t--chart--theme--colorscales--Multi-colored-ordered--colorscale--1400: var(--pf-t--chart--color--yellow--500);
-  --pf-t--chart--theme--colorscales--Multi-colored-ordered--colorscale--1300: var(--pf-t--chart--color--teal--500);
-  --pf-t--chart--theme--colorscales--Multi-colored-ordered--colorscale--1200: var(--pf-t--chart--color--green--100);
-  --pf-t--chart--theme--colorscales--Multi-colored-ordered--colorscale--1100: var(--pf-t--chart--color--blue--500);
-  --pf-t--chart--theme--colorscales--Multi-colored-ordered--colorscale--1000: var(--pf-t--chart--color--orange--500);
-  --pf-t--chart--theme--colorscales--Multi-colored-ordered--colorscale--900: var(--pf-t--chart--color--yellow--100);
-  --pf-t--chart--theme--colorscales--Multi-colored-ordered--colorscale--800: var(--pf-t--chart--color--teal--100);
-  --pf-t--chart--theme--colorscales--Multi-colored-ordered--colorscale--700: var(--pf-t--chart--color--green--500);
-  --pf-t--chart--theme--colorscales--Multi-colored-ordered--colorscale--600: var(--pf-t--chart--color--blue--100);
-  --pf-t--chart--theme--colorscales--Multi-colored-ordered--colorscale--500: var(--pf-t--chart--color--orange--300);
-  --pf-t--chart--theme--colorscales--Multi-colored-ordered--colorscale--400: var(--pf-t--chart--color--yellow--300);
-  --pf-t--chart--theme--colorscales--Multi-colored-ordered--colorscale--300: var(--pf-t--chart--color--teal--300);
-  --pf-t--chart--theme--colorscales--Multi-colored-ordered--colorscale--200: var(--pf-t--chart--color--green--300);
-  --pf-t--chart--theme--colorscales--Multi-colored-ordered--colorscale--100: var(--pf-t--chart--color--blue--300);
+  --pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--2500: var(--pf-t--chart--color--orange--200);
+  --pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--2400: var(--pf-t--chart--color--yellow--400);
+  --pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--2300: var(--pf-t--chart--color--teal--400);
+  --pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--2200: var(--pf-t--chart--color--green--200);
+  --pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--2100: var(--pf-t--chart--color--blue--400);
+  --pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--2000: var(--pf-t--chart--color--orange--400);
+  --pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--1900: var(--pf-t--chart--color--yellow--200);
+  --pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--1800: var(--pf-t--chart--color--teal--200);
+  --pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--1700: var(--pf-t--chart--color--green--400);
+  --pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--1600: var(--pf-t--chart--color--blue--200);
+  --pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--1500: var(--pf-t--chart--color--orange--100);
+  --pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--1400: var(--pf-t--chart--color--yellow--500);
+  --pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--1300: var(--pf-t--chart--color--teal--500);
+  --pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--1200: var(--pf-t--chart--color--green--100);
+  --pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--1100: var(--pf-t--chart--color--blue--500);
+  --pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--1000: var(--pf-t--chart--color--orange--500);
+  --pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--900: var(--pf-t--chart--color--yellow--100);
+  --pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--800: var(--pf-t--chart--color--teal--100);
+  --pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--700: var(--pf-t--chart--color--green--500);
+  --pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--600: var(--pf-t--chart--color--blue--100);
+  --pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--500: var(--pf-t--chart--color--orange--300);
+  --pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--400: var(--pf-t--chart--color--yellow--300);
+  --pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--300: var(--pf-t--chart--color--teal--300);
+  --pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--200: var(--pf-t--chart--color--green--300);
+  --pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--100: var(--pf-t--chart--color--blue--300);
   --pf-t--chart--theme--colorscales--orange--colorscale--500: var(--pf-t--chart--color--orange--400);
   --pf-t--chart--theme--colorscales--orange--colorscale--400: var(--pf-t--chart--color--orange--200);
   --pf-t--chart--theme--colorscales--orange--colorscale--300: var(--pf-t--chart--color--orange--500);

diff --git a/packages/module/build/css/_tokens-dark.scss b/packages/module/build/css/_tokens-dark.scss
@@ -1,12 +1,19 @@
 /**
  * Do not edit directly
- * Generated on Wed, 14 Feb 2024 00:59:20 GMT
+ * Generated on Tue, 20 Feb 2024 01:08:05 GMT
  */
 
 :root {
   --pf-t--global--background--color--action--plain--default: rgba(0, 0, 0, 0.0000);
+  --pf-t--global--dark--box-shadow--color--100: rgba(0, 0, 0, 0.5000);
+  --pf-t--global--dark--background--color--600: rgba(199, 199, 199, 0.1500);
   --pf-t--global--dark--background--color--500: rgba(21, 21, 21, 0.8000);
+  --pf-t--global--box-shadow--color--lg: var(--pf-t--global--dark--box-shadow--color--100);
+  --pf-t--global--box-shadow--color--md: var(--pf-t--global--dark--box-shadow--color--100);
+  --pf-t--global--box-shadow--color--sm: var(--pf-t--global--dark--box-shadow--color--100);
   --pf-t--global--background--color--backdrop--default: var(--pf-t--global--dark--background--color--500);
+  --pf-t--global--background--color--action--plain--clicked: var(--pf-t--global--dark--background--color--600);
+  --pf-t--global--background--color--action--plain--hover: var(--pf-t--global--dark--background--color--600);
   --pf-t--global--dark--icon--color--300: var(--pf-t--color--gray--90);
   --pf-t--global--dark--icon--color--200: var(--pf-t--color--gray--40);
   --pf-t--global--dark--icon--color--100: var(--pf-t--color--gray--10);
@@ -15,7 +22,7 @@
   --pf-t--global--dark--text--color--link--100: var(--pf-t--color--blue--20);
   --pf-t--global--dark--text--color--400: var(--pf-t--color--red-orange--30);
   --pf-t--global--dark--text--color--300: var(--pf-t--color--gray--90);
-  --pf-t--global--dark--text--color--200: var(--pf-t--color--gray--40);
+  --pf-t--global--dark--text--color--200: var(--pf-t--color--gray--30);
   --pf-t--global--dark--text--color--100: var(--pf-t--color--gray--10);
   --pf-t--global--dark--border--color--200: var(--pf-t--color--gray--40);
   --pf-t--global--dark--border--color--100: var(--pf-t--color--gray--50);
@@ -71,7 +78,7 @@
   --pf-t--global--dark--background--color--400: var(--pf-t--color--gray--10);
   --pf-t--global--dark--background--color--300: var(--pf-t--color--gray--70);
   --pf-t--global--dark--background--color--200: var(--pf-t--color--gray--80);
-  --pf-t--global--dark--background--color--100: var(--pf-t--color--black);
+  --pf-t--global--dark--background--color--100: var(--pf-t--color--gray--95);
   --pf-t--global--text--color--status--danger--clicked: var(--pf-t--global--dark--color--status--danger--300);
   --pf-t--global--text--color--status--danger--hover: var(--pf-t--global--dark--color--status--danger--300);
   --pf-t--global--text--color--status--danger--default: var(--pf-t--global--dark--color--status--danger--250);
@@ -180,8 +187,8 @@
   --pf-t--global--background--color--control--default: var(--pf-t--global--dark--background--color--300);
   --pf-t--global--background--color--action--plain--alt--clicked: var(--pf-t--global--dark--background--color--200);
   --pf-t--global--background--color--action--plain--alt--hover: var(--pf-t--global--dark--background--color--200);
-  --pf-t--global--background--color--action--plain--clicked: var(--pf-t--global--dark--background--color--200);
-  --pf-t--global--background--color--action--plain--hover: var(--pf-t--global--dark--background--color--200);
+  --pf-t--global--background--color--floating--clicked: var(--pf-t--global--dark--background--color--200);
+  --pf-t--global--background--color--floating--hover: var(--pf-t--global--dark--background--color--200);
   --pf-t--global--background--color--floating--default: var(--pf-t--global--dark--background--color--300);
   --pf-t--global--background--color--secondary--clicked: var(--pf-t--global--dark--background--color--200);
   --pf-t--global--background--color--secondary--hover: var(--pf-t--global--dark--background--color--200);
@@ -344,12 +351,10 @@
   --pf-t--global--icon--color--on-brand--default: var(--pf-t--global--icon--color--inverse);
   --pf-t--global--color--status--read--on-primary: var(--pf-t--global--background--color--secondary--default);
   --pf-t--global--color--status--read--on-secondary: var(--pf-t--global--background--color--control--default);
-  --pf-t--global--color--status--unread--attention--hover: var(--pf-t--global--color--status--danger--hover);
   --pf-t--global--color--status--unread--attention--clicked: var(--pf-t--global--color--status--danger--clicked);
+  --pf-t--global--color--status--unread--attention--hover: var(--pf-t--global--color--status--danger--hover);
   --pf-t--global--color--status--unread--attention--default: var(--pf-t--global--color--status--danger--default);
   --pf-t--global--color--status--unread--default--clicked: var(--pf-t--global--color--brand--clicked);
   --pf-t--global--color--status--unread--default--hover: var(--pf-t--global--color--brand--hover);
   --pf-t--global--color--status--unread--default--default: var(--pf-t--global--color--brand--default);
-  --pf-t--global--background--color--floating--clicked: var(--pf-t--global--background--color--action--plain--hover);
-  --pf-t--global--background--color--floating--hover: var(--pf-t--global--background--color--action--plain--hover);
 }