Rebranding - Component Prepare Team Element for Team Page

DistributionPackages/Neos.Presentation/Resources/Private/Fusion/Main.pcss

@@ -4,6 +4,7 @@
 /* Add here the imports from subfolders */
 @import url("Atom/**/*.pcss");
 @import url("Molecule/**/*.pcss");
+@import url("Module/**/*.pcss");
 
 /* Modules should not contain any custom CSS or JS/TS and instead use inline Tailwind and Alpinejs */
 @import url("Organism/**/*.pcss");

DistributionPackages/Neos.Presentation/Resources/Private/Fusion/Module/PersonCards.Card.fusion → DistributionPackages/Neos.Presentation/Resources/Private/Fusion/Module/PersonCards/PersonCards.Card.fusion

@@ -4,15 +4,16 @@ prototype(Neos.Presentation:Module.PersonCards.Card) < prototype(Neos.Fusion:Com
     email = null
     image = null
     variant = null
+    pixelVariant = null
 
     renderer = afx`
-        <li class="flex flex-col">
+        <li class="c-person-card flex flex-col">
             <figure class="relative">
-                <Sitegeist.Kaleidoscope:Image {...props.image} attributes.class="aspect-portrait w-full object-cover"/>
+                <Sitegeist.Kaleidoscope:Image {...props.image} attributes.class="aspect-portrait w-full object-cover"></Sitegeist.Kaleidoscope:Image>
                 <!-- FIXME: Use actual pixel overlay instead of simple background -->
-                <Neos.Presentation:Background variant={"accent-" + props.variant} class="absolute bottom-0 w-full h-[160px] opacity-50"/>
+                <Neos.Presentation:Icon name={"pixel-grid-" + props.pixelVariant} class={props.variant + " c-pixel-grid absolute bottom-0 left-0 right-0 w-full"}/>
             </figure>
-            <Neos.Presentation:Background variant={"accent-" + props.variant} class="p-8 flex-1 flex flex-col">
+            <Neos.Presentation:Background variant={props.variant} class="p-8 flex-1 flex flex-col">
                 <Neos.Presentation:Headline text={props.name} tagName="h3" display="title-lg flex-1"/>
                 <a href={"mailto:" + props.email}>
                     <span class="sr-only">Email</span>

DistributionPackages/Neos.Presentation/Resources/Private/Fusion/Module/PersonCards.fusion → DistributionPackages/Neos.Presentation/Resources/Private/Fusion/Module/PersonCards/PersonCards.fusion

@@ -8,23 +8,26 @@ prototype(Neos.Presentation:Module.PersonCards) < prototype(Neos.Fusion:Componen
                 0 {
                     name = "Karsten Dambekalns"
                     email = "[email protected]"
-                    variant = "blue"
+                    variant = "brand"
+                    pixelVariant = 1
                     image.imageSource = Sitegeist.Kaleidoscope:UriImageSource {
                         uri = 'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?auto=format&fit=facearea&facepad=5&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D'
                     }
                 }
                 1 {
                     name = "Anke Häslich"
                     email = "[email protected]"
-                    variant = "purple"
+                    variant = "accent-green"
+                    pixelVariant = 2
                     image.imageSource = Sitegeist.Kaleidoscope:UriImageSource {
                         uri = 'https://images.unsplash.com/photo-1517841905240-472988babdf9?auto=format&crop=faces&fp-y=0.8&fp-z=2&w=1024&h=1024&q=80'
                     }
                 }
                 2 {
                     name = "Christian Müller"
                     email = "[email protected]"
-                    variant = "green"
+                    variant = "accent-yellow"
+                    pixelVariant = 3
                     image.imageSource = Sitegeist.Kaleidoscope:UriImageSource {
                         uri = 'https://images.unsplash.com/photo-1521119989659-a83eee488004?auto=format&crop=faces&fp-y=0.8&fp-z=2&w=1024&h=1024&q=80'
                     }

DistributionPackages/Neos.Presentation/Resources/Private/Fusion/Module/PersonCards/PersonCards.pcss

@@ -0,0 +1,33 @@
+.c-person-card {
+  .c-pixel-grid.brand path {
+    fill: theme('colors.darkblue') !important;
+  }
+
+  .c-pixel-grid.accent-purple path {
+    fill: theme('colors.accent.purple') !important;
+  }
+
+  .c-pixel-grid.accent-blue path {
+    fill: theme('colors.accent.blue') !important;
+  }
+
+  .c-pixel-grid.accent-lightblue path {
+    fill: theme('colors.accent.lightblue') !important;
+  }
+
+  .c-pixel-grid.accent-green path {
+    fill: theme('colors.accent.green') !important;
+  }
+
+  .c-pixel-grid.accent-yellow path {
+    fill: theme('colors.accent.yellow') !important;
+  }
+
+  .c-pixel-grid.accent-orange path {
+    fill: theme('colors.accent.orange') !important;
+  }
+
+  .c-pixel-grid.accent-red path {
+    fill: theme('colors.accent.red') !important;
+  }
+}