TASK: Update to tailwind 4

.postcssrc.mjs

@@ -4,24 +4,7 @@ export default function (ctx) {
             "postcss-import": {
                 resolve: ctx.resolve,
             },
-            "tailwindcss/nesting": true,
-            tailwindcss: ctx.tailwindcss,
-            "postcss-assets": {
-                cachebuster: false,
-                basePath: `${ctx.basePath}/`,
-                baseUrl: "/_Resources/Static/Packages",
-                loadPaths: ["**/Resources/Public/**/*"],
-            },
-            "postcss-clip-path-polyfill": true,
-            autoprefixer: true,
-            cssnano: ctx.minify
-                ? {
-                      preset: ["default", { discardComments: { removeAll: true }, svgo: false, calc: false }],
-                  }
-                : false,
-            "postcss-reporter": {
-                clearReportedMessages: true,
-            },
+            "@tailwindcss/postcss": {},
         },
     };
 }

.stylelintrc

@@ -1,24 +1,9 @@
 {
-  "extends": "stylelint-config-standard",
+  "extends": "stylelint-config-tailwindcss",
   "ignoreFiles": [
     "**/Public/**",
     "**/Private/Templates/**",
     "node_modules/**",
     "**/*.noLinter.*"
-  ],
-  "rules": {
-    "selector-class-pattern": "[a-z-_0-9]+",
-    "value-keyword-case": [
-      "lower",
-      { "camelCaseSvgKeywords": true, "ignoreFunctions": ["theme"] }
-    ],
-    "function-no-unknown": [true, { "ignoreFunctions": ["theme", "resolve"] }],
-    "declaration-property-value-no-unknown": [true, { "ignoreProperties": {
-      "/.+/": "/theme([^)]+)/"
-    }}],
-    "at-rule-no-unknown": [
-      true,
-      { "ignoreAtRules": ["tailwind", "apply", "layer", "screen"] }
-    ]
-  }
+  ]
 }

DistributionPackages/Neos.Presentation/Readme.md

@@ -2,34 +2,14 @@
 
 This package contains presentational components for neos.io sites.
 
-## Structure
-
-The package is structured in the following way:
-
-- `Resources/Private/Fusion`
-  - [Atoms](Resources/Private/Fusion/Atom) are basic elements that can be used to build more complex components. They should be styled with custom CSS classes by `@apply` and sometimes can contain custom JS/TS files.
-  - [Molecules](Resources/Private/Fusion/Molecule) are wrapper/container components that modify an existing content. They should be styled with inline Tailwind classes and can contain custom CSS classes and custom JS/TS files.
-  - [Organisms](Resources/Private/Fusion/Organism) are complex components that need custom CSS, JS/TS and are composed of multiple components.
-  - [Modules](Resources/Private/Fusion/Module) are components built from multiple atoms and molecules and **must not** contain custom CSS and JS/TS files.
-  If it does not make sense to use inline Tailwind and AlpineJS, then it probably makes sense to either extract a common used functionality to Atoms/Molecules or move the whole Module to Organisms.
-  - [Templates](Resources/Private/Fusion/Template) should be used to define the structure of a page. They should not contain any custom CSS and JS/TS files.
-  - [Styles](Resources/Private/Fusion/Styles) are used to define global styles. In [Typography.pcss](Resources/Private/Fusion/Styles/Typography.pcss) we define the global typography styles.
-  These are named `.display-STYLENAME` and have the same name as defined in Figma. 
-  - [Scripts](Resources/Private/Fusion/Scripts) are used to define global scripts.
-
 ## Guidelines
 
-### Fusion
-Neos Fusion prototypes of Atoms, Molecules and Organisms should be named without prefix:  
-e.g **Button** = `Neos.Presentation:Button`
-
-Modules & Templates should be named with prefix:  
-e.g **Teaser** = `Neos.Presentation:Module.Teaser`
-
 ### CSS
+
 We primarily use [TailwindCSS](https://tailwindcss.com/) and [PostCSS](https://postcss.org/) for styling.
 It should cover at least 80% of the styling needs.
-Only use custom CSS for advanced/complex stylings where you can `@apply` Tailwind classes to your custom CSS.
+Only use custom CSS for advanced/complex stylings.
 
 ### JS/TS
-We use inline [AlpineJS](https://alpinejs.dev/) for simple interactions and Alpine.data() for more complex interactions. 
+
+We use inline [AlpineJS](https://alpinejs.dev/) for simple interactions and Alpine.data() for more complex interactions.

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

@@ -0,0 +1,5 @@
+@import "tailwindcss" source(none);
+@import url("./Styles/*.pcss");
+@import url("../Fusion/**/*.pcss");
+@plugin "tailwindcss-hocus";
+@source "../**/*.{fusion,js,ts,html}";

DistributionPackages/Neos.Presentation/Resources/Private/Assets/Scripts/index.ts

@@ -0,0 +1,38 @@
+import Alpine from 'alpinejs';
+import anchor from './anchor';
+import './magics';
+import './directives';
+import focus from '@alpinejs/focus';
+import intersect from '@alpinejs/intersect';
+import collapse from '@alpinejs/collapse';
+import clipboard from '@ryangjchandler/alpine-clipboard';
+import typewriter from '@marcreichel/alpine-typewriter';
+import disclosure from './ui/disclosure';
+import '../../Fusion/Presentation/LogoBar';
+import '../../Fusion/Organism/ImageCollage';
+import '../../Fusion/Organism/Navigation/Navigation.js';
+
+Alpine.data('exclusiveDisclosure', function (id: string | number) {
+    return {
+        id,
+        get expanded() {
+            return this.active === this.id;
+        },
+        set expanded(id) {
+            this.active = id ? this.id : null;
+        },
+        init() {
+            Alpine.bind(this.$root, this.root);
+        },
+        root: {
+            ['x-model']: 'expanded',
+        },
+    };
+});
+
+Alpine.plugin([anchor, clipboard, collapse, focus, intersect, typewriter, disclosure]);
+
+// @ts-ignore: Set Alpine as a global variable
+window.Alpine = Alpine;
+
+export { Alpine };

DistributionPackages/Neos.Presentation/Resources/Private/Assets/Scripts/ui/disclosure.ts

@@ -0,0 +1,89 @@
+export default function (Alpine) {
+    Alpine.directive('disclosure', (el, directive) => {
+        if (!directive.value) handleRoot(el, Alpine);
+        else if (directive.value === 'panel') handlePanel(el, Alpine);
+        else if (directive.value === 'button') handleButton(el, Alpine);
+    }).before('bind');
+
+    Alpine.magic('disclosure', (el) => {
+        let $data = Alpine.$data(el);
+
+        return {
+            get isOpen() {
+                return $data.__isOpen;
+            },
+            close() {
+                $data.__close();
+            },
+        };
+    });
+}
+
+function handleRoot(el, Alpine) {
+    Alpine.bind(el, {
+        'x-modelable': '__isOpen',
+        'x-data'() {
+            return {
+                // The panel will call this...
+                // We can't do this inside a microtask in x-init because, when default-open is set to "true",
+                // It will cause the panel to transition in for the first time, instead of showing instantly...
+                __determineDefaultOpenState() {
+                    let defaultIsOpen = Boolean(Alpine.bound(this.$el, 'default-open', false));
+
+                    if (defaultIsOpen) this.__isOpen = defaultIsOpen;
+                },
+                __isOpen: false,
+                __close() {
+                    this.__isOpen = false;
+                },
+                __toggle() {
+                    this.__isOpen = !this.__isOpen;
+                },
+            };
+        },
+        'x-id'() {
+            return ['alpine-disclosure-panel'];
+        },
+    });
+}
+
+function handleButton(el, Alpine) {
+    Alpine.bind(el, {
+        'x-init'() {
+            if (this.$el.tagName.toLowerCase() === 'button' && !this.$el.hasAttribute('type')) this.$el.type = 'button';
+        },
+        '@click'() {
+            this.$data.__isOpen = !this.$data.__isOpen;
+        },
+        ':aria-expanded'() {
+            return this.$data.__isOpen;
+        },
+        ':aria-controls'() {
+            return this.$data.$id('alpine-disclosure-panel');
+        },
+        '@keydown.space.prevent.stop'() {
+            this.$data.__toggle();
+        },
+        '@keydown.enter.prevent.stop'() {
+            this.$data.__toggle();
+        },
+        // Required for firefox, event.preventDefault() in handleKeyDown for
+        // the Space key doesn't cancel the handleKeyUp, which in turn
+        // triggers a *click*.
+        '@keyup.space.prevent'() {},
+    });
+}
+
+function handlePanel(el, Alpine) {
+    Alpine.bind(el, {
+        'x-init'() {
+            this.$data.__determineDefaultOpenState();
+        },
+        'x-show'() {
+            return this.$data.__isOpen;
+        },
+        ':id'() {
+            return this.$data.$id('alpine-disclosure-panel');
+        },
+    });
+}

DistributionPackages/Neos.Presentation/Resources/Private/Fusion/Styles/Animations.pcss → DistributionPackages/Neos.Presentation/Resources/Private/Assets/Styles/Animations.pcss

@@ -1,3 +1,29 @@
+@theme {
+  --animate-infinite-scroll: infinite-scroll 20s linear infinite;
+
+  @keyframes infinite-scroll {
+    from {
+      transform: translateX(0);
+    }
+    to {
+      transform: translateX(-100%);
+    }
+  }
+}
+
+@utility animation-pause {
+  animation-play-state: paused;
+}
+
+@utility animation-play {
+  animation-play-state: running;
+}
+
+@utility animation-state-finish {
+  animation-play-state: paused;
+  animation-direction: reverse;
+}
+
 @media (prefers-reduced-motion: no-preference) {
   :root {
     --anim-opacity: none;

DistributionPackages/Neos.Presentation/Resources/Private/Assets/Styles/Base.pcss

@@ -0,0 +1,11 @@
+@theme {
+  --breakpoint-xxs: 23.5rem; /* 376px */
+  --breakpoint-xs: 30rem; /* 480px */
+}
+
+@layer base {
+  [x-cloak] {
+    pointer-events: none !important;
+    visibility: hidden !important;
+  }
+}

DistributionPackages/Neos.Presentation/Resources/Private/Assets/Styles/Colors.pcss

@@ -0,0 +1,33 @@
+@theme {
+  --color-*: initial;
+
+  --color-blue: #0114C2;
+  --color-blue-dark: #26224C;
+  --color-blue-light: #00CFFD;
+  --color-green: #35BA34;
+  --color-green-dark: #1D751D;
+  --color-purple: #8A3FFC;
+  --color-purple-dark: #602CB0;
+  --color-yellow: #F1C21B;
+  --color-yellow-dark: #B08C0E;
+
+  --color-orange: #FF832B;
+  --color-red: #FA4D56;
+
+  --color-black: #000;
+  --color-white: #fff;
+
+  --color-transparent: transparent;
+  --color-current: currentColor;
+
+  --color-neutral-90: #161616;
+  --color-neutral-80: #363636;
+  --color-neutral-70: #545454;
+  --color-neutral-60: #676767;
+  --color-neutral-50: #8F8F8F;
+  --color-neutral-40: #AFAFAF;
+  --color-neutral-30: #D4D4D4;
+  --color-neutral-20: #E5E5E5;
+  --color-neutral-10: #F0F0F0;
+  --color-neutral-05: #F8F8F8;
+}

DistributionPackages/Neos.Presentation/Resources/Private/Assets/Styles/Font.pcss

@@ -0,0 +1,58 @@
+@layer base {
+  @font-face {
+    font-family: "Bricolage Grotesque";
+    font-style: normal;
+    font-weight: 200 800;
+    font-stretch: 75% 100%;
+    font-display: swap;
+    src: url("../Assets/Fonts/v8_latin-ext_200-800_normal_75-100.woff2") format("woff2");
+    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+  }
+
+  @font-face {
+    font-family: "Bricolage Grotesque";
+    font-style: normal;
+    font-weight: 200 800;
+    font-stretch: 75% 100%;
+    font-display: swap;
+    src: url("../Assets/Fonts/v8_latin_200-800_normal_75-100.woff2") format("woff2");
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+  }
+}
+
+@theme {
+  --font-sans: "Bricolage Grotesque";
+
+  --text-xxs: 0.625rem; /* 10px */
+  --text-xxs--line-height: calc(1 / 0.625);
+  --text-xs: 0.75rem; /* 12px */
+  --text-xs--line-height: calc(1 / 0.75);
+  --text-sm: 0.875rem; /* 14px */
+  --text-sm--line-height: calc(1.25 / 0.875);
+  --text-base: 1rem; /* 16px */
+  --text-base--line-height: calc(1.5 / 1);
+  --text-md: 1.125rem; /* 18px */
+  --text-md--line-height: calc(1.75 / 1.125);
+  --text-lg: 1.25rem; /* 20px */
+  --text-lg--line-height: calc(1.75 / 1.25);
+  --text-xl: 1.375rem; /* 22px */
+  --text-xl--line-height: calc(1.75 / 1.375);
+  --text-2xl: 1.5rem; /* 24px */
+  --text-2xl--line-height: calc(2 / 1.5);
+  --text-3xl: 1.75rem; /* 28px */
+  --text-3xl--line-height: calc(2.25 / 1.75);
+  --text-4xl: 2rem; /* 32px */
+  --text-4xl--line-height: calc(2.5 / 2);
+  --text-5xl: 2.25rem; /* 36px */
+  --text-5xl--line-height: calc(2.5 / 2.25);
+  --text-6xl: 2.5rem; /* 40px */
+  --text-6xl--line-height: 1;
+  --text-7xl: 2.8125rem; /* 45px */
+  --text-7xl--line-height: 1;
+  --text-8xl: 3.5625rem; /* 57px */
+  --text-8xl--line-height: 1;
+  --text-9xl: 4rem; /* 64px */
+  --text-9xl--line-height: 1;
+  --text-10xl: 4.5rem; /* 57px */
+  --text-10xl--line-height: 1;
+}