Thành viên:Plantaest/Fern

Fern là một design system được dự kiến triển khai theo các ý tưởng của dự án VIWP.UI. Nó sẽ được áp dụng cho những khu vực đặc trưng của viwiki, và những cách dùng liên quan đến sắp xếp bố cục (layout).

Nền tảng của Fern là dự án Fern Base, dựa trên việc kế thừa một design system khác là Mantine.

Từ Fern Base, kết hợp 2 yếu tố là mở rộng các bộ màu (color scheme) và thu nhận các yếu tố thẩm mỹ đặc trưng (từ quan điểm cá nhân và từ cộng đồng), tạo ra dự án Fern với 2 phiên bản:

Phiên bản chuẩn – Standard – được áp dụng cho các dự án của Viettech, chia làm 2 nhóm:
- Áp dụng cho những dự án dùng Mantine trực tiếp, thường là những dự án React như Zinnia, lúc này bộ màu là Open Color hoặc Radix Colors.
- Áp dụng cho những dự án dùng Mantine gián tiếp (chỉ dùng kiểu cách, không dùng chức năng), thường là những dự án phía server hỗ trợ SSR kinh điển như Feverfew, Citron; lúc này bộ màu là Radix Colors (bộ màu mặc định của Fern).
Phiên bản hạn chế – Minimum – được áp dụng một cách giới hạn trên viwiki, nhằm hỗ trợ các kỹ thuật sắp xếp bố cục phức tạp như chia cột, phối cột, và cung cấp một số component như Paper, Flex, Grid. Mục tiêu chính của Fern Minimum là cung cấp khả năng định kiểu tốt hơn cho các thành phần giao diện hiện hữu tại viwiki, nhưng không có ý định thay thế những thứ đã có, vì vậy nó sẽ không có đầy đủ các component như phiên bản chuẩn, mà chỉ có những gì cần thiết, đủ dùng cho nhu cầu của cộng đồng viwiki. Bộ màu là Radix Colors (mặc định) và Codex Colors (mở rộng, để tạo cảm giác thân thiện và hòa nhập với Codex, vì 2 design system này được dùng song hành).
- (23-12-2024) Có một quan điểm khác, có lẽ vẫn nên ưu tiên Codex trong khả năng để dễ bảo trì về sau.

Các bộ màu

Radix Colors (mặc định, ưu tiên sử dụng)
Codex Colors (triển khai chủ yếu cho phiên bản Minimum)
Open Color (triển khai chủ yếu cho phiên bản Standard), dùng phiên bản Open Color mở rộng của Mantine (thêm một dải màu dark)
Colar (phiên bản mở rộng của Open Color)
Tailwind Colors
Fern Colors (bộ màu nội bộ dựa trên hàm màu OKLCH, nhằm sử dụng cho các trường hợp muốn theming nhanh gọn)