Mentionsy

Dzisiaj pogadamy trochę o Design Systemach w Angularze, czyli o materialu.

Dzisiaj opowiemy Wam o materialu, dwójce i trójce.

Między innymi jest to też Angular Material, czyli jest to googlowy design system.

No i dobra, był taki design system, który większość z nas zna, taki bardzo nudny i to był Material 2.

Więc Google jakiś czas temu, a nawet już parę lat temu, wypuścił Material 3, ale zapomniał go zaimplementować.

No i jakiś czas temu w osiemnastce już trochę nadrobił zaległości, no bo tam różne zespoły w Google pracują, jeden od web komponentów w materialu, drugi w ogóle od samych designów, od Figma, od... Figma?

Ale ogółem jakby Angular trochę nadgonił i pojawił się Material 3.

No ale Material 3 ma być... Wizualnie było super.

No, Material 3 ma być wizualnie taką trochę upgrade'em, ma być fajnie, trochę bardziej ekspresyjnie, ma być więcej emocji, więcej interakcji.

Jakieś tam rzeczy w materiale free streaming API.

Jak wejdziecie sobie na stronę Angulara i tych materialowych tematów, to tutaj możecie natknąć się na taką fajną rzecz, że jest taki...

Mała poprawka, to jest dopiero nowy Angular, nowy material.

Mówimy o scenariuszu, w którym chciałbyś się w swoim aktualnym projekcie zmigrować do Material Trójeczki?

Zasetupować tak, jak w zasadzie Material radzi, a Angular tego nie mówi, bo zrobił to po swojemu.

Więc mamy już ten nasz theming, a to jak to zasetupować, to jest w zasadzie trochę efekt moich poszukiwań gdzieś tam z błędami, bo oczywiście nie mogłem tego zasetupować, bo przy migracji to nie jest takie trywialne, żeby zmigrować z materiala dwójki na trójkę, więc po prostu przechodziłem przez github issues, no bo nie działa, no to poszukam, nie?

Więc próbowałem tam zapiąć te palety, no bo wcześniej material dwójka był oparty na paletach, czyli każdy kolor miał swoje

No ale dalej, Material 3 mówi o tych paletach, tylko oczywiście zmienili teraz nazwy tych palet, więc one nie są strasznie kompatybilne.

No ale znalazłem taki fajny komentarz, że jest po prostu taki pan, Konstantin, który trochę ogarnął temat, trochę się dogrzebał do szczegółów i zrobił nawet artykuł o tym, mogę go podlinkować, o tym jak używać tych właśnie design tokenów w materialu.

Więc, żeby skorzystać z tych design tokenów, to trzeba zrobić taki mały myk, że pozbywamy się tych palet i mówimy materialowi, ej, teraz korzystaj, use system variables.

Wspomniałeś o migracji z materiala dwójki na material trójkę i nie mam dobrych wieści.

Bo okazuje się, że jest bardzo trudno znaleźć osobę, która umie zasetupować materialowy filming z Angularem.