fix: in react ui, soften light colors, update dark to use same hues

starpit · starpit · commit c7374a3c9cb3 · 2025-02-14T13:22:31.000-05:00
Signed-off-by: Nick Mitchell &lt;nickm@us.ibm.com&gt;
diff --git a/pdl-live-react/src/view/masonry/Masonry.css b/pdl-live-react/src/view/masonry/Masonry.css
@@ -28,24 +28,27 @@
 .pf-v6-theme-dark {
   .pdl-masonry-tile {
     &[data-kind="model"] {
-      background: var(--pf-t--global--color--status--custom--default);
+      background: #63bdbd;
+    }
+    &[data-kind="read"] {
+      background: #f5921b;
     }
     &[data-kind="code"] {
-      background: var(--pf-t--global--color--status--success--default);
+      background: #876fd4;
     }
   }
 }
 
 .pdl-masonry-tile {
   background: var(--pf-t--global--background--color--secondary--default);
   &[data-kind="model"] {
-    background: var(--pf-t--global--color--nonstatus--teal--default);
+    background: #daf2f2;
   }
   &[data-kind="read"] {
-    background: var(--pf-t--global--color--nonstatus--orange--default);
+    background: #ffe8cc;
   }
   &[data-kind="code"] {
-    background: var(--pf-t--global--color--nonstatus--purple--default);
+    background: #ece6ff;
   }
 }
 

Original file line number	Diff line number	Diff line change
`@@ -28,24 +28,27 @@`
`28`	`28`	`.pf-v6-theme-dark {`
`29`	`29`	`.pdl-masonry-tile {`
`30`	`30`	`&[data-kind="model"] {`
`31`		`- background: var(--pf-t--global--color--status--custom--default);`
	`31`	`+ background: #63bdbd;`
	`32`	`+ }`
	`33`	`+ &[data-kind="read"] {`
	`34`	`+ background: #f5921b;`
`32`	`35`	`}`
`33`	`36`	`&[data-kind="code"] {`
`34`		`- background: var(--pf-t--global--color--status--success--default);`
	`37`	`+ background: #876fd4;`
`35`	`38`	`}`
`36`	`39`	`}`
`37`	`40`	`}`
`38`	`41`
`39`	`42`	`.pdl-masonry-tile {`
`40`	`43`	`background: var(--pf-t--global--background--color--secondary--default);`
`41`	`44`	`&[data-kind="model"] {`
`42`		`- background: var(--pf-t--global--color--nonstatus--teal--default);`
	`45`	`+ background: #daf2f2;`
`43`	`46`	`}`
`44`	`47`	`&[data-kind="read"] {`
`45`		`- background: var(--pf-t--global--color--nonstatus--orange--default);`
	`48`	`+ background: #ffe8cc;`
`46`	`49`	`}`
`47`	`50`	`&[data-kind="code"] {`
`48`		`- background: var(--pf-t--global--color--nonstatus--purple--default);`
	`51`	`+ background: #ece6ff;`
`49`	`52`	`}`
`50`	`53`	`}`
`51`	`54`