import {Meta} from '@storybook/addon-docs/blocks'

<Meta title='@dxtmisha/vi/styles/color/! Về Hệ thống Màu sắc'/>

# Về Hệ thống Màu sắc (Color System)

Thư viện `@dxtmisha/styles` cung cấp một cơ chế mạnh mẽ và linh hoạt để quản lý màu sắc trong các ứng dụng. Không giống như cách tiếp cận tiêu chuẩn là mã hóa cứng các màu HEX, hệ thống này được xây dựng hoàn toàn dựa trên các biến CSS động. Điều này đảm bảo việc chuyển đổi chủ đề (sáng/tối) tức thì và hiệu ứng chuyển tiếp mượt mà mà không bị trùng lặp mã CSS.

Nó giải quyết vấn đề cốt lõi của việc tạo kiểu dáng phức tạp: **làm thế nào để áp dụng độ mờ cho các màu sắc từ các biến mà không làm hỏng hiệu ứng CSS (animations)?**

## Khái niệm Cốt lõi: Tách biệt RGB và Độ mờ

Nếu bạn lưu giá trị màu dưới dạng biến thông thường (ví dụ: `--primary: #ff0000;`), bạn không thể áp dụng tính trong suốt cho nó "ngay lập tức" bằng các công cụ CSS (mà không sử dụng các hàm mới chưa được hỗ trợ hoàn toàn như `color-mix`). Cố gắng dùng `rgba(var(--primary), 0.5)` đơn giản là không hoạt động với các giá trị HEX.

Để giải quyết vấn đề này, hệ thống thiết kế tự động chuyển đổi tất cả các màu cơ bản thành danh sách các kênh RGB:

```scss
// Quá trình thực thi ngầm:
--sys-primary: 255, 0, 0; // Thay vì #ff0000
```

Điều này cho phép chúng ta "xây dựng" động màu sắc ngay khi nó được áp dụng:

```css
color: rgba(var(--sys-primary), 1);
background-color: rgba(var(--sys-primary), 0.5);
```

### Độ mờ Độc lập

Để cho phép kiểm soát tốt hơn và cung cấp các **hiệu ứng chuyển tiếp phản hồi** cho độ mờ (khi chỉ mức độ mờ thay đổi chứ không thay đổi màu gốc), một biến độ mờ hệ thống (System) cụ thể sẽ được tạo cho từng thuộc tính:

```scss
--sys-color: 255, 0, 0;
--sys-color-opacity: 1;

--sys-background: 0, 255, 0;
--sys-background-opacity: 0.5;
```

Khi hiển thị trên trình duyệt sẽ có dạng:
`color: rgba(var(--sys-color), var(--sys-color-opacity));`

Bạn **không cần** phải viết điều này theo cách thủ công — thư viện cung cấp các mixin tiện lợi để tự tạo mã cho bạn.

## Cấu trúc Thư viện

Về mặt khái niệm, thư viện `color.scss` được chia thành ba lớp trừu tượng:

### 1. Các Hàm Hệ thống (Tiện ích)
Các hàm như `getColor`, `toColorRbg`, hoặc `toCustomVarRgb`. Chúng hoạt động như một công cụ cấp thấp dịch các màu HEX thông thường thành định dạng RGB chuỗi và ngược lại. Bạn hiếm khi gọi chúng trực tiếp trong quá trình phát triển thông thường, nhưng chúng cần thiết để đăng ký màu mới ở cấp độ token thiết kế (`@dxtmisha/theme`).

### 2. Các Mixin Thuộc tính Cơ bản
Đây là các công cụ chính để áp dụng màu cho các thành phần UI: `@include color(...)`, `@include backgroundColor(...)`, `@include borderColor(...)`, `@include stroke(...)`, v.v.
Chúng nhận màu đầu vào, cập nhật biến hệ thống của thành phần và tự áp dụng thuộc tính CSS. Đây là công cụ tạo kiểu cho thành phần hàng ngày của bạn.

### 3. Mixin Bảng màu và Chủ đề (Palette Mixins)
Mức độ tạo kiểu nâng cao dành cho các thành phần cần nhanh chóng thích ứng với bối cảnh địa phương (ví dụ: nút sẽ chuyển sang màu đỏ nếu nằm trong khối "nguy hiểm"). Sử dụng các mixin như `@include paletteColor()` và hàm `getPaletteItem()`. Chúng xây dựng một "chuỗi tìm kiếm" các biến (tìm `--theme-primary`, nếu không có — tìm `--sys-primary`, nếu vẫn không có — dùng hệ thống màu HEX dự phòng).

## Tại sao không đơn giản dùng `color: #ff0000;`?

Bạn có thể làm vậy, nhưng điều đó sẽ phá vỡ tính toàn vẹn của hệ thống thiết kế:
1. **Ràng buộc cứng:** Khi chuyển đổi chủ đề (ví dụ: sang chế độ tối), màu quy định cứng của bạn sẽ vẫn như vậy.
2. **Thiếu tính linh hoạt:** Nếu bạn muốn văn bản trở nên trong suốt nhẹ khi di chuột, bạn sẽ phải định nghĩa lại `color: rgba(...)` một lần nữa thay vì chỉ thay đổi biến độ mờ.
3. **Lỗi Animation:** Việc chuyển đổi từ màu đặc sang nửa trong suốt sẽ mượt mà hơn nếu trình duyệt tạo hiệu ứng cho biến độc lập `--sys-color-opacity`, thay vì cố gắng nội suy các giá trị `rgba` hoặc HEX phức tạp.

Sử dụng các mixin được mô tả trong phần **Sử dụng Thuộc tính Cơ bản** và **Làm việc với Bảng màu** để giữ cho giao diện luôn có khả năng mở rộng và dễ duy trì.
