gavl-ui 1.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +153 -0
  3. package/demo/index.html +1090 -0
  4. package/dist/gavl-ui.css +1 -0
  5. package/dist/gavl-ui.css.map +1 -0
  6. package/package.json +46 -0
  7. package/src/gavl-ui.scss +1472 -0
package/LICENSE ADDED
@@ -0,0 +1,21 @@
1
+ MIT License
2
+
3
+ Copyright (c) 2024 GAVL.IO.VN
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy
6
+ of this software and associated documentation files (the "Software"), to deal
7
+ in the Software without restriction, including without limitation the rights
8
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
+ copies of the Software, and to permit persons to whom the Software is
10
+ furnished to do so, subject to the following conditions:
11
+
12
+ The above copyright notice and this permission notice shall be included in all
13
+ copies or substantial portions of the Software.
14
+
15
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
+ SOFTWARE.
package/README.md ADDED
@@ -0,0 +1,153 @@
1
+ # GAVL UI
2
+
3
+ > **Pixel RPG CSS Library** — Inspired by [GAVL.IO.VN](https://gavl.io.vn), Game News for Vietnamese Gen Z
4
+
5
+ [![npm version](https://img.shields.io/npm/v/gavl-ui.svg)](https://www.npmjs.com/package/gavl-ui)
6
+ [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
7
+
8
+ GAVL UI là thư viện CSS theo phong cách **Pixel RPG**, được thiết kế để tạo ra những giao diện độc đáo, mang hơi hướng game retro cho các dự án web hiện đại.
9
+
10
+ ---
11
+
12
+ ## Tính năng
13
+
14
+ - 🎨 **Design Tokens** — Hệ thống màu sắc, shadow, border nhất quán theo phong cách pixel
15
+ - 🔤 **Typography** — Hỗ trợ font pixel (`Press Start 2P`) và tiếng Việt đầy đủ (`Be Vietnam Pro`)
16
+ - 🧩 **Components** — Button, Badge, Tag, Card, Alert, Modal, Tab, Form, Progress, v.v.
17
+ - 🌙 **Dark Mode** — Hỗ trợ qua class `.gv-dark`
18
+ - 🇻🇳 **Vietnamese-first** — Tối ưu hiển thị dấu thanh tiếng Việt với `gv-vi-*` utilities
19
+ - 📦 **Không dependencies** — Chỉ cần import CSS là dùng được ngay
20
+
21
+ ---
22
+
23
+ ## Cài đặt
24
+
25
+ ```bash
26
+ npm install gavl-ui
27
+ ```
28
+
29
+ ---
30
+
31
+ ## Sử dụng
32
+
33
+ ### HTML thuần
34
+
35
+ ```html
36
+ <link rel="stylesheet" href="node_modules/gavl-ui/dist/gavl-ui.css" />
37
+ ```
38
+
39
+ ### Webpack / Vite / bundler
40
+
41
+ ```js
42
+ import "gavl-ui/dist/gavl-ui.css";
43
+ ```
44
+
45
+ ### SCSS / Sass project
46
+
47
+ ```scss
48
+ @import "gavl-ui/src/gavl-ui.scss";
49
+ ```
50
+
51
+ ### CDN (jsDelivr)
52
+
53
+ ```html
54
+ <link
55
+ rel="stylesheet"
56
+ href="https://cdn.jsdelivr.net/npm/gavl-ui/dist/gavl-ui.css"
57
+ />
58
+ ```
59
+
60
+ ---
61
+
62
+ ## Components
63
+
64
+ | Component | Class prefix | Ví dụ |
65
+ | --------- | -------------- | --------------------------------- |
66
+ | Button | `.gv-btn` | `.gv-btn-primary`, `.gv-btn-gold` |
67
+ | Badge | `.gv-badge` | `.gv-badge-red`, `.gv-badge-blue` |
68
+ | Tag | `.gv-tag` | `.gv-tag-green` |
69
+ | Card | `.gv-card` | `.gv-card-pixel` |
70
+ | Alert | `.gv-alert` | `.gv-alert-warning` |
71
+ | Modal | `.gv-modal` | `.gv-modal-open` |
72
+ | Tab | `.gv-tab` | `.gv-tab-item.active` |
73
+ | Form | `.gv-input` | `.gv-form-label` |
74
+ | Progress | `.gv-progress` | `.gv-progress-animated` |
75
+ | Heading | `.gv-heading` | `.gv-heading-pixel` |
76
+
77
+ ---
78
+
79
+ ## Design Tokens
80
+
81
+ ```css
82
+ /* Màu chủ đạo */
83
+ --gv-gold: #e6b44c;
84
+ --gv-brown-dark: #2a1f14;
85
+ --gv-cream: #f5e9d3;
86
+
87
+ /* Shadow pixel */
88
+ --gv-shadow-sm: 2px 2px 0;
89
+ --gv-shadow-md: 3px 3px 0;
90
+ --gv-shadow-lg: 4px 4px 0;
91
+ ```
92
+
93
+ ---
94
+
95
+ ## Dark Mode
96
+
97
+ Thêm class `.gv-dark` vào thẻ `<body>` hoặc container:
98
+
99
+ ```html
100
+ <body class="gv-dark">
101
+ ...
102
+ </body>
103
+ ```
104
+
105
+ ---
106
+
107
+ ## Demo
108
+
109
+ Mở file `demo/index.html` để xem toàn bộ component, hoặc xem online tại [gavl.io.vn](https://docs.gavl.io.vn).
110
+
111
+ ---
112
+
113
+ ## Development
114
+
115
+ ```bash
116
+ # Clone repo
117
+ git clone https://github.com/mrk4tsu/gavl-ui.git
118
+ cd gavl-ui
119
+
120
+ # Cài dependencies
121
+ npm install
122
+
123
+ # Build CSS từ SCSS
124
+ npm run build
125
+
126
+ # Watch mode (tự động build khi chỉnh sửa)
127
+ npm run watch
128
+ ```
129
+
130
+ ---
131
+
132
+ ## Changelog
133
+
134
+ ### v1.1.0
135
+
136
+ - ✅ Thêm font `Be Vietnam Pro` hỗ trợ đầy đủ tiếng Việt
137
+ - ✅ Tăng `line-height` cho text tiếng Việt (dấu thanh không bị cắt)
138
+ - ✅ Thêm `gv-heading` cho heading tiếng Việt dùng body font
139
+ - ✅ Thêm `gv-vi-*` utilities tối ưu tiếng Việt
140
+ - ✅ Thêm `gv-purple-dark` vào design tokens
141
+ - ✅ Thêm `gv-btn-purple` variant
142
+ - ✅ Dark mode support via `.gv-dark`
143
+ - 🐛 Fix nhiều lỗi CSS specificity và animation
144
+
145
+ ### v1.0.0
146
+
147
+ - 🎉 Release đầu tiên
148
+
149
+ ---
150
+
151
+ ## 📝 License
152
+
153
+ [MIT](LICENSE) © [GAVL.IO.VN](https://gavl.io.vn)