santycss 2.3.0 → 2.4.8

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 (10) hide show
  1. package/README.md +341 -3
  2. package/dist/santy-components.css +3 -0
  3. package/dist/santy-core.css +4 -2498
  4. package/dist/santy-start.css +7 -2498
  5. package/dist/santy-variants.css +600 -0
  6. package/dist/santy.css +15 -1902
  7. package/dist/santy.min.css +1 -1
  8. package/dist/sitemap.xml +46 -0
  9. package/migrate.js +446 -0
  10. package/package.json +77 -71
package/README.md CHANGED
@@ -5,8 +5,9 @@
5
5
  [![license](https://img.shields.io/npm/l/santycss.svg?style=flat-square)](https://github.com/ChintuSanty/santyCSS/blob/main/LICENSE)
6
6
  [![bundle size](https://img.shields.io/badge/core-310KB-blue?style=flat-square)](https://www.npmjs.com/package/santycss)
7
7
 
8
- **Plain-English utility-first CSS framework.**
9
- Class names read like sentences. No build step. No configuration. Just link and use.
8
+ 🇮🇳 **India's first utility-first CSS framework.**
9
+ **Plain-English class names. No build step. No configuration. Just link and use.**
10
+ Class names read like sentences — `add-padding-24` instead of `p-6`. AI tools understand them instantly, no lookup table needed.
10
11
 
11
12
  ```html
12
13
  <div class="make-flex align-center gap-16 background-blue-500 round-corners-12 add-padding-24">
@@ -20,6 +21,343 @@ Class names read like sentences. No build step. No configuration. Just link and
20
21
 
21
22
  ---
22
23
 
24
+ ## What's New in v2.4.8
25
+
26
+ ### 🚀 Homepage UX Improvements
27
+
28
+ Six homepage enhancements for better discoverability and developer experience:
29
+
30
+ 1. **Class search widget** — Live search with descriptions for 8,500+ classes. Type any class name and see what it does instantly.
31
+ 2. **"What's new" announcement banner** — Highlighted strip below the hero showing the latest release highlights.
32
+ 3. **npm weekly downloads badge** — Social proof badge next to the CDN snippet.
33
+ 4. **Dark mode playground toggle** — 🌙 Dark / ☀️ Light button in the live preview to demo dark mode variants.
34
+ 5. **Dismissible VS Code banner** — ✕ button to close the extension promo banner (persists per session).
35
+ 6. **Navbar & Table presets** — Two new playground tabs showing a Navbar and a data Table built with SantyCSS.
36
+
37
+ ---
38
+
39
+ ## What's New in v2.4.7
40
+
41
+ ### 🎨 2078 Essential UI Icons (+78 new — final batch)
42
+
43
+ 78 final icons completing the Essential UI library — USB drives, volume controls, wallet, webcam, wifi, windows, wrench, x/close variants, and zoom.
44
+
45
+ ```html
46
+ <span class="icon icon-volume-up-fill icon-size-xl" style="color:#3b82f6;"></span>
47
+ <span class="icon icon-wifi icon-size-xl" style="color:#10b981;"></span>
48
+ <span class="icon icon-wrench-adjustable-circle-fill icon-size-xl" style="color:#6366f1;"></span>
49
+ <span class="icon icon-zoom-in icon-size-xl" style="color:#f59e0b;"></span>
50
+ ```
51
+
52
+ **New icons (78):**
53
+
54
+ | Group | Icons |
55
+ |---|---|
56
+ | USB | `usb-drive` `usb-drive-fill` `usb-fill` `usb-micro` `usb-micro-fill` `usb-mini` `usb-mini-fill` `usb-plug` `usb-plug-fill` `usb-symbol` |
57
+ | Misc | `valentine` `valentine2` `vector-pen` `view-list` `view-stacked` `vignette` `vimeo` `vinyl` `vinyl-fill` `virus` `virus2` `voicemail` `vr` |
58
+ | Volume | `volume-down` `volume-down-fill` `volume-mute` `volume-mute-fill` `volume-off` `volume-off-fill` `volume-up` `volume-up-fill` |
59
+ | Wallet & Watch | `wallet` `wallet-fill` `wallet2` `watch` `water` |
60
+ | Camera & Comms | `webcam` `webcam-fill` `wechat` `whatsapp` |
61
+ | Wifi | `wifi` `wifi-1` `wifi-2` `wifi-off` |
62
+ | Misc | `wikipedia` `wind` `windows` `wordpress` `xbox` `yelp` `yin-yang` `youtube` |
63
+ | Window | `window` `window-dash` `window-desktop` `window-dock` `window-fullscreen` `window-plus` `window-sidebar` `window-split` `window-stack` `window-x` |
64
+ | Wrench | `wrench` `wrench-adjustable` `wrench-adjustable-circle` `wrench-adjustable-circle-fill` |
65
+ | Close / X | `x` `x-circle` `x-circle-fill` `x-diamond` `x-diamond-fill` `x-lg` `x-octagon` `x-octagon-fill` `x-square` `x-square-fill` |
66
+ | Zoom | `zoom-in` `zoom-out` |
67
+
68
+ ---
69
+
70
+ ## What's New in v2.4.6
71
+
72
+ ### 🎨 2000 Essential UI Icons (1000 new in this release)
73
+
74
+ 1000 new icons covering file types, folders, filters, gears, globes, hearts, houses, journals, media controls, people, phones, shields, signs, terminals, trash, and much more.
75
+
76
+ ```html
77
+ <span class="icon icon-heart-pulse-fill icon-size-xl" style="color:#ef4444;"></span>
78
+ <span class="icon icon-person-fill-check icon-size-xl" style="color:#10b981;"></span>
79
+ <span class="icon icon-shield-fill-check icon-size-xl" style="color:#3b82f6;"></span>
80
+ <span class="icon icon-rocket-takeoff-fill icon-size-xl" style="color:#8b5cf6;"></span>
81
+ ```
82
+
83
+ **New icons include:** file-ruled, file-slides, file-spreadsheet, file-text, file-word, file-x, file-zip, files, files-alt, filetype-aac, filetype-ai, filetype-bmp, filetype-cs, filetype-css, filetype-csv, filetype-doc, filetype-docx, filetype-exe, filetype-gif, filetype-heic, filetype-html, filetype-java, filetype-jpg, filetype-js, filetype-json, filetype-jsx, filetype-key, filetype-m4p, filetype-md, filetype-mdx, filetype-mov, filetype-mp3, filetype-mp4, filetype-otf, filetype-pdf, filetype-php, filetype-png, filetype-ppt, filetype-pptx, filetype-psd, filetype-py, filetype-raw, filetype-rb, filetype-sass, filetype-scss, filetype-sh, filetype-sql, filetype-svg, filetype-tiff, filetype-tsx, filetype-ttf, filetype-txt, filetype-wav, filetype-woff, filetype-xls, filetype-xlsx, filetype-xml, filetype-yml, film, filter, fingerprint, fire, flag, flask, flask-florence, floppy, floppy2, flower1, flower2, flower3, folder, folder-check, folder-fill, folder-minus, folder-plus, folder-symlink, folder-x, folder2, folder2-open, fonts, fork-knife, forward, fuel-pump, fullscreen, funnel, gear, gear-fill, gear-wide, gear-wide-connected, gem, gender-ambiguous, gender-female, gender-male, gender-neuter, gender-trans, geo, geo-alt, gift, git, github, gitlab, globe, globe-americas, globe-asia-australia, globe-central-south-asia, globe-europe-africa, globe2, google, google-play, gpu-card, graph-down, graph-up, grid, grip-horizontal, grip-vertical, h-circle, h-square, hammer, hand-index, hand-index-thumb, hand-thumbs-down, hand-thumbs-up, handbag, hash, hdd, hdd-network, hdd-rack, hdd-stack, hdmi, headphones, headset, headset-vr, heart, heart-arrow, heart-pulse, heartbreak, hearts, heptagon, hexagon, highlighter, highlights, hospital, hourglass, house (all variants), houses, hr, hurricane, hypnotize, image, images, inbox, inboxes, incognito, indent, infinity, info, input-cursor, instagram, javascript, journal (all variants), joystick, justify, kanban, key, keyboard, ladder, lamp, laptop, layer-backward, layer-forward, layers, layout-sidebar, layout-split, layout-text-sidebar, layout-text-window, layout-three-columns, layout-wtf, leaf, life-preserver, lightbulb, lightning, link, linkedin, list (all variants), lock, luggage, lungs, magic, magnet, mailbox, map, markdown, mask, mastodon, megaphone, memory, menu-app, menu-button, mic, microsoft, microsoft-teams, modem, moon, mortarboard, motherboard, mouse (all variants), music-note, newspaper, nintendo-switch, node-minus, node-plus, nut, nvidia, nvme, octagon, openai, palette, paperclip, pass, passport, patch-check, patch-exclamation, patch-minus, patch-plus, patch-question, pause, paypal, pc, pci-card, peace, pen, pencil, pentagon, people, person (all 50+ variants), phone, pie-chart, piggy-bank, pin, pip, play, plug, plus, postage, postcard, power, printer, projector, puzzle, qr-code, question, quote, r-circle, radar, radioactive, rainbow, receipt, reception (0-4), record, recycle, reddit, repeat, reply, rewind, robot, rocket, router, rss, rulers, safe, save, scissors, search, send (all variants), server, share, shield (all variants), sign (all road signs), sim, skip-backward, skip-end, skip-forward, skip-start, skype, slack, slash, sliders, smartwatch, snapchat, snow, sort-alpha, sort-down, sort-numeric, sort-up, soundwave, speaker, speedometer, spotify, square, star, stickies, sticky, stop, stopwatch, strava, stripe, suit (club/diamond/heart/spade), suitcase, sun, sunrise, sunset, table, tablet, tag, taxi-front, telegram, telephone (all variants), terminal, text-center, text-indent, textarea, thermometer, threads, three-dots, thunderbolt, ticket, tiktok, toggle, tools, tornado, train-freight-front, train-front, train-lightrail-front, translate, transparency, trash (all variants), tree, trello, triangle, trophy, truck, tv, twitch, twitter, twitter-x, type (all heading variants), typescript, ubuntu, ui-checks, ui-radios, umbrella, union, unity, universal-access, unlock, upc, upload, usb, usb-c, and 50+ more fill variants.
84
+
85
+ ---
86
+
87
+ ## What's New in v2.4.5
88
+
89
+ ### 🎨 1000 Essential UI Icons + Scrollable Grid + Sub-filters
90
+
91
+ 600 new icons added — calendars (all variants), camera & media, chat & messaging, cloud & weather, clipboard, checks & chevrons, database & devices, emoji, envelopes, files & documents, and more.
92
+
93
+ The icon browser now features:
94
+ - **Scrollable Essential UI grid** — browse 1000 icons in a fixed-height scrollable area
95
+ - **Sub-filters** — filter by category: Numbers, Arrows, Calendar, Camera, Chat, Cloud, Database, Emoji, Files, Shapes, Shopping
96
+
97
+ ```html
98
+ <span class="icon icon-chat-left-text-fill icon-size-xl" style="color:#6366f1;"></span>
99
+ <span class="icon icon-cloud-lightning-rain-fill icon-size-xl" style="color:#0ea5e9;"></span>
100
+ <span class="icon icon-file-earmark-pdf-fill icon-size-xl" style="color:#ef4444;"></span>
101
+ <span class="icon icon-emoji-laughing-fill icon-size-xl" style="color:#f59e0b;"></span>
102
+ ```
103
+
104
+ **New icons (600):**
105
+
106
+ | Group | Icons |
107
+ |---|---|
108
+ | Calendar variants | `calendar2-fill` `calendar2-heart` `calendar2-minus` `calendar2-month` `calendar2-plus` `calendar2-range` `calendar2-week` `calendar2-x` `calendar3` `calendar3-event` `calendar3-fill` `calendar3-range` `calendar3-week` `calendar4` `calendar4-event` `calendar4-range` `calendar4-week` (+ fill variants) |
109
+ | Camera & Media | `camera` `camera-fill` `camera-reels` `camera-video` `camera-video-off` `camera2` `cassette` `cast` |
110
+ | Cart & Shopping | `cart` `cart-check` `cart-dash` `cart-fill` `cart-plus` `cart-x` `cart2` `cart3` `cart4` |
111
+ | Chat & Messaging | `chat` `chat-dots` `chat-fill` `chat-heart` `chat-left` `chat-left-dots` `chat-left-fill` `chat-left-heart` `chat-left-quote` `chat-left-text` `chat-quote` `chat-right` `chat-right-dots` `chat-right-fill` `chat-right-heart` `chat-right-quote` `chat-right-text` `chat-square` `chat-square-dots` `chat-square-fill` `chat-square-heart` `chat-square-quote` `chat-square-text` `chat-text` (+ fill variants) |
112
+ | Check & Shapes | `check` `check-all` `check-circle` `check-lg` `check-square` `check2` `check2-all` `check2-circle` `check2-square` |
113
+ | Chevrons | `chevron-bar-contract` `chevron-bar-down` `chevron-bar-expand` `chevron-bar-left` `chevron-bar-right` `chevron-bar-up` `chevron-compact-down` `chevron-compact-left` `chevron-compact-right` `chevron-compact-up` `chevron-contract` `chevron-double-down` `chevron-double-left` `chevron-double-right` `chevron-double-up` `chevron-down` `chevron-expand` `chevron-left` `chevron-right` `chevron-up` |
114
+ | Clipboard | `clipboard` `clipboard-check` `clipboard-data` `clipboard-fill` `clipboard-heart` `clipboard-minus` `clipboard-plus` `clipboard-pulse` `clipboard-x` `clipboard2` (+ all clipboard2 variants, + fill variants) |
115
+ | Clock | `clock` `clock-fill` `clock-history` |
116
+ | Cloud & Weather | `cloud` `cloud-arrow-down` `cloud-arrow-up` `cloud-check` `cloud-download` `cloud-drizzle` `cloud-fill` `cloud-fog` `cloud-fog2` `cloud-hail` `cloud-haze` `cloud-haze2` `cloud-lightning` `cloud-lightning-rain` `cloud-minus` `cloud-moon` `cloud-plus` `cloud-rain` `cloud-rain-heavy` `cloud-slash` `cloud-sleet` `cloud-snow` `cloud-sun` `cloud-upload` `clouds` `cloudy` (+ fill variants) |
117
+ | Currency | `currency-bitcoin` `currency-dollar` `currency-euro` `currency-exchange` `currency-pound` `currency-rupee` `currency-yen` |
118
+ | Database & Device | `database` `database-add` `database-check` `database-dash` `database-down` `database-exclamation` `database-fill` (+ all database-fill-* variants) `device-hdd` `device-ssd` |
119
+ | Emoji | `emoji-angry` `emoji-astonished` `emoji-dizzy` `emoji-expressionless` `emoji-frown` `emoji-grimace` `emoji-grin` `emoji-heart-eyes` `emoji-kiss` `emoji-laughing` `emoji-neutral` `emoji-smile` `emoji-smile-upside-down` `emoji-sunglasses` `emoji-surprise` `emoji-tear` `emoji-wink` (+ fill variants) |
120
+ | Envelope | `envelope` `envelope-arrow-down` `envelope-arrow-up` `envelope-at` `envelope-check` `envelope-dash` `envelope-exclamation` `envelope-fill` `envelope-heart` `envelope-open` `envelope-open-heart` `envelope-paper` `envelope-paper-heart` `envelope-plus` `envelope-slash` `envelope-x` (+ fill variants) |
121
+ | File docs | `file` `file-arrow-down` `file-arrow-up` `file-bar-graph` `file-binary` `file-break` `file-check` `file-code` `file-diff` `file-earmark` (+ all earmark variants) `file-easel` `file-excel` `file-fill` `file-font` `file-image` `file-lock` `file-lock2` `file-medical` `file-minus` `file-music` `file-pdf` `file-person` `file-play` `file-plus` `file-post` `file-ppt` `file-richtext` (+ fill variants) |
122
+
123
+ ---
124
+
125
+ ## What's New in v2.4.4
126
+
127
+ ### 🎯 400 Essential UI Icons (+100 new)
128
+
129
+ 100 more icons — boxes, buildings, browsers, calendars, brightness controls and more.
130
+
131
+ ```html
132
+ <span class="icon icon-building-fill icon-size-2x" style="color:#6366f1;"></span>
133
+ <span class="icon icon-calendar-heart-fill icon-size-xl" style="color:#ec4899;"></span>
134
+ <span class="icon icon-briefcase-fill icon-size-xl" style="color:#3b82f6;"></span>
135
+ <span class="icon icon-brightness-high-fill icon-size-xl" style="color:#f59e0b;"></span>
136
+ <span class="icon icon-bug-fill icon-size-xl" style="color:#ef4444;"></span>
137
+ ```
138
+
139
+ **New icons (100):**
140
+
141
+ | Group | Icons |
142
+ |---|---|
143
+ | Boxes | `box2-fill` `box2-heart` `box2-heart-fill` `boxes` |
144
+ | Dev | `braces` `braces-asterisk` `bricks` `bug` `bug-fill` |
145
+ | Work | `briefcase` `briefcase-fill` `bullseye` |
146
+ | Display | `brightness-alt-high` `brightness-alt-high-fill` `brightness-alt-low` `brightness-alt-low-fill` `brightness-high` `brightness-high-fill` `brightness-low` `brightness-low-fill` `brilliance` |
147
+ | Media | `broadcast` `broadcast-pin` |
148
+ | Browsers | `browser-chrome` `browser-edge` `browser-firefox` `browser-safari` |
149
+ | Design | `brush` `brush-fill` `bucket` `bucket-fill` |
150
+ | Buildings | `building` `building-add` `building-check` `building-dash` `building-down` `building-exclamation` `building-fill` `building-fill-add` `building-fill-check` `building-fill-dash` `building-fill-down` `building-fill-exclamation` `building-fill-gear` `building-fill-lock` `building-fill-slash` `building-fill-up` `building-fill-x` `building-gear` `building-lock` `building-slash` `building-up` `building-x` `buildings` `buildings-fill` |
151
+ | Transport | `bus-front` `bus-front-fill` |
152
+ | Legal | `c-circle` `c-circle-fill` `c-square` `c-square-fill` |
153
+ | Food | `cake` `cake-fill` `cake2` `cake2-fill` |
154
+ | Tools | `calculator` `calculator-fill` |
155
+ | Calendars | `calendar` `calendar-check` `calendar-check-fill` `calendar-date` `calendar-date-fill` `calendar-day` `calendar-day-fill` `calendar-event` `calendar-event-fill` `calendar-fill` `calendar-heart` `calendar-heart-fill` `calendar-minus` `calendar-minus-fill` `calendar-month` `calendar-month-fill` `calendar-plus` `calendar-plus-fill` `calendar-range` `calendar-range-fill` `calendar-week` `calendar-week-fill` `calendar-x` `calendar-x-fill` `calendar2` `calendar2-check` `calendar2-check-fill` `calendar2-date` `calendar2-date-fill` `calendar2-day` `calendar2-day-fill` `calendar2-event` `calendar2-event-fill` |
156
+
157
+ ---
158
+
159
+ ## What's New in v2.4.3
160
+
161
+ ### 🎯 300 Essential UI Icons (+100 new)
162
+
163
+ 100 more icons added — ban/block, charts, baskets, battery, books, bookmarks, boxes, borders and more.
164
+
165
+ ```html
166
+ <span class="icon icon-ban-fill icon-size-xl" style="color:#ef4444;"></span>
167
+ <span class="icon icon-bar-chart-fill icon-size-2x" style="color:#3b82f6;"></span>
168
+ <span class="icon icon-bookmark-heart-fill icon-size-xl" style="color:#ec4899;"></span>
169
+ <span class="icon icon-box-arrow-up-right icon-size-lg"></span>
170
+ <span class="icon icon-battery-full icon-size-xl" style="color:#22c55e;"></span>
171
+ ```
172
+
173
+ **New icons (100):**
174
+
175
+ | Group | Icons |
176
+ |---|---|
177
+ | Block / Medical | `ban` `ban-fill` `bandaid` `bandaid-fill` |
178
+ | Finance | `bank` `bank2` `bar-chart` `bar-chart-fill` `bar-chart-line` `bar-chart-line-fill` `bar-chart-steps` |
179
+ | Shopping | `basket` `basket-fill` `basket2` `basket2-fill` `basket3` `basket3-fill` |
180
+ | Device | `battery` `battery-charging` `battery-full` `battery-half` `battery-low` |
181
+ | Science / Social | `beaker` `beaker-fill` `behance` `bing` `bluesky` `bluetooth` |
182
+ | Notifications | `bell` `bell-fill` `bell-slash` `bell-slash-fill` |
183
+ | Design | `bezier` `bezier2` `binoculars` `binoculars-fill` `bounding-box` `bounding-box-circles` |
184
+ | Transport | `bicycle` |
185
+ | Text | `blockquote-left` `blockquote-right` `body-text` |
186
+ | Books | `book` `book-fill` `book-half` `bookmarks` `bookmarks-fill` `bookshelf` |
187
+ | Bookmarks | `bookmark` `bookmark-check` `bookmark-check-fill` `bookmark-dash` `bookmark-dash-fill` `bookmark-fill` `bookmark-heart` `bookmark-heart-fill` `bookmark-plus` `bookmark-plus-fill` `bookmark-star` `bookmark-star-fill` `bookmark-x` `bookmark-x-fill` |
188
+ | Media | `boombox` `boombox-fill` |
189
+ | Framework | `bootstrap` `bootstrap-fill` `bootstrap-reboot` |
190
+ | Border | `border` `border-all` `border-bottom` `border-center` `border-inner` `border-left` `border-middle` `border-outer` `border-right` `border-style` `border-top` `border-width` |
191
+ | Boxes | `box` `box-arrow-down` `box-arrow-down-left` `box-arrow-down-right` `box-arrow-in-down` `box-arrow-in-down-left` `box-arrow-in-down-right` `box-arrow-in-left` `box-arrow-in-right` `box-arrow-in-up` `box-arrow-in-up-left` `box-arrow-in-up-right` `box-arrow-left` `box-arrow-right` `box-arrow-up` `box-arrow-up-left` `box-arrow-up-right` `box-fill` `box-seam` `box-seam-fill` `box2` |
192
+
193
+ ---
194
+
195
+ ## What's New in v2.4.2
196
+
197
+ ### 🎯 200 Essential UI Icons (+100 new)
198
+
199
+ Another 100 icons added to the **Essential UI** category — arrows (all directions, variants), aspect ratio, badges, bags, balloons, backpacks and more.
200
+
201
+ ```html
202
+ <span class="icon icon-arrow-repeat icon-size-xl" style="color:#3b82f6;"></span>
203
+ <span class="icon icon-arrows-fullscreen icon-size-lg"></span>
204
+ <span class="icon icon-bag-heart-fill icon-size-2x" style="color:#ef4444;"></span>
205
+ <span class="icon icon-award-fill icon-size-2x" style="color:#f59e0b;"></span>
206
+ <span class="icon icon-balloon-heart icon-size-xl" style="color:#ec4899;"></span>
207
+ ```
208
+
209
+ **New icons (100):**
210
+
211
+ | Group | Icons |
212
+ |---|---|
213
+ | Arrows (more) | `arrow-left-right` `arrow-left-short` `arrow-left-square` `arrow-left-square-fill` `arrow-repeat` `arrow-return-left` `arrow-return-right` `arrow-right` `arrow-right-circle` `arrow-right-circle-fill` `arrow-right-short` `arrow-right-square` `arrow-right-square-fill` `arrow-through-heart` `arrow-through-heart-fill` `arrow-up` `arrow-up-circle` `arrow-up-circle-fill` `arrow-up-left` `arrow-up-left-circle` `arrow-up-left-circle-fill` `arrow-up-left-square` `arrow-up-left-square-fill` `arrow-up-right` `arrow-up-right-circle` `arrow-up-right-circle-fill` `arrow-up-right-square` `arrow-up-right-square-fill` `arrow-up-short` `arrow-up-square` `arrow-up-square-fill` |
214
+ | Arrows (set) | `arrows` `arrows-angle-contract` `arrows-angle-expand` `arrows-collapse` `arrows-collapse-vertical` `arrows-expand` `arrows-expand-vertical` `arrows-fullscreen` `arrows-move` `arrows-vertical` |
215
+ | UI | `aspect-ratio` `aspect-ratio-fill` `asterisk` `at` `award` `award-fill` `back` `backspace` `backspace-fill` `backspace-reverse` `backspace-reverse-fill` |
216
+ | Bags & Packs | `backpack` `backpack-fill` `backpack2` `backpack2-fill` `backpack3` `backpack3-fill` `backpack4` `backpack4-fill` `bag` `bag-check` `bag-check-fill` `bag-dash` `bag-dash-fill` `bag-fill` `bag-heart` `bag-heart-fill` `bag-plus` `bag-plus-fill` `bag-x` `bag-x-fill` |
217
+ | Badges | `badge-3d` `badge-3d-fill` `badge-4k` `badge-4k-fill` `badge-8k` `badge-8k-fill` `badge-ad` `badge-ad-fill` `badge-ar` `badge-ar-fill` `badge-cc` `badge-cc-fill` `badge-hd` `badge-hd-fill` `badge-sd` `badge-sd-fill` `badge-tm` `badge-tm-fill` `badge-vo` `badge-vo-fill` `badge-vr` `badge-vr-fill` `badge-wc` `badge-wc-fill` |
218
+ | Fun | `balloon` `balloon-fill` `balloon-heart` `balloon-heart-fill` |
219
+
220
+ ---
221
+
222
+ ## What's New in v2.4.1
223
+
224
+ ### 🎯 100 Essential UI Icons
225
+
226
+ New category — **Essential UI** — adds 100 carefully selected icons to `santy-icons.css`. Use them with the same `.icon` system.
227
+
228
+ ```html
229
+ <link rel="stylesheet" href="santy-icons.css">
230
+
231
+ <!-- Number badges -->
232
+ <span class="icon icon-0-circle"></span>
233
+ <span class="icon icon-5-circle-fill icon-size-lg" style="color:#3b82f6;"></span>
234
+
235
+ <!-- Arrows -->
236
+ <span class="icon icon-arrow-down"></span>
237
+ <span class="icon icon-arrow-clockwise icon-size-xl" style="color:#22c55e;"></span>
238
+
239
+ <!-- UI chrome -->
240
+ <span class="icon icon-activity"></span>
241
+ <span class="icon icon-alarm icon-size-2x" style="color:#ef4444;"></span>
242
+ <span class="icon icon-archive-fill"></span>
243
+ ```
244
+
245
+ **Full icon list (100):**
246
+
247
+ | Group | Icons |
248
+ |---|---|
249
+ | Numbers | `0-circle` `0-circle-fill` `0-square` `0-square-fill` `1-circle` `1-circle-fill` `1-square` `1-square-fill` `123` `2-circle` `2-circle-fill` `2-square` `2-square-fill` `3-circle` `3-circle-fill` `3-square` `3-square-fill` `4-circle` `4-circle-fill` `4-square` `4-square-fill` `5-circle` `5-circle-fill` `5-square` `5-square-fill` `6-circle` `6-circle-fill` `6-square` `6-square-fill` `7-circle` `7-circle-fill` `7-square` `7-square-fill` `8-circle` `8-circle-fill` `8-square` `8-square-fill` `9-circle` `9-circle-fill` `9-square` `9-square-fill` |
250
+ | Activity & Travel | `activity` `airplane` `airplane-engines` `airplane-engines-fill` `airplane-fill` `alarm` `alarm-fill` |
251
+ | Brands | `alexa` `alipay` `amazon` `amd` `android` `android2` `anthropic` `apple` `apple-music` `app` `app-indicator` |
252
+ | Alignment | `align-bottom` `align-center` `align-end` `align-middle` `align-start` `align-top` |
253
+ | Text | `alphabet` `alphabet-uppercase` `alt` |
254
+ | Files | `archive` `archive-fill` |
255
+ | Arrows | `arrow-90deg-down` `arrow-90deg-left` `arrow-90deg-right` `arrow-90deg-up` `arrow-bar-down` `arrow-bar-left` `arrow-bar-right` `arrow-bar-up` `arrow-clockwise` `arrow-counterclockwise` `arrow-down` `arrow-down-circle` `arrow-down-circle-fill` `arrow-down-left` `arrow-down-left-circle` `arrow-down-left-circle-fill` `arrow-down-left-square` `arrow-down-left-square-fill` `arrow-down-right` `arrow-down-right-circle` `arrow-down-right-circle-fill` `arrow-down-right-square` `arrow-down-right-square-fill` `arrow-down-short` `arrow-down-square` `arrow-down-square-fill` `arrow-down-up` `arrow-left` `arrow-left-circle` `arrow-left-circle-fill` |
256
+
257
+ > 🎨 **[Icon Browser](https://santycss.santy.in/icons.html)** — filter by "Essential UI" to browse all 100
258
+
259
+ ---
260
+
261
+ ## What's New in v2.4.0
262
+
263
+ ### ⚡ Migrate from Tailwind in One Command
264
+
265
+ Already using Tailwind CSS? Switch your entire project — HTML, JSX, TSX, Vue, Svelte — without rewriting a single file:
266
+
267
+ ```bash
268
+ npx santycss migrate --input=src/
269
+ ```
270
+
271
+ **Options:**
272
+ ```bash
273
+ npx santycss migrate --input=src/ # convert all files in src/
274
+ npx santycss migrate --file=index.html # single file
275
+ npx santycss migrate --dry-run # preview only, no writes
276
+ npx santycss migrate --dry-run --report # also list unmapped classes
277
+ ```
278
+
279
+ **What gets converted:**
280
+
281
+ | Tailwind | SantyCSS |
282
+ |---|---|
283
+ | `flex items-center gap-4` | `make-flex align-center gap-16` |
284
+ | `p-6 mt-4 mb-8` | `add-padding-24 add-margin-top-16 add-margin-bottom-32` |
285
+ | `text-lg font-semibold` | `set-text-18 text-semibold` |
286
+ | `bg-blue-500 text-white rounded-lg shadow-md` | `background-blue-500 color-white make-rounded-lg add-shadow-md` |
287
+ | `hidden md:block` | `make-hidden tablet:make-block` |
288
+ | `grid grid-cols-3 gap-6` | `make-grid grid-cols-3 gap-24` |
289
+
290
+ Covers 150+ Tailwind class names across flex/grid, spacing, typography, colors, borders, shadows, overflow, position, z-index, transitions, and more.
291
+
292
+ ---
293
+
294
+ ### 🌙 Dark Mode Semantic Token System
295
+
296
+ New CSS-variable token layer — add `data-theme="dark"` to any element and every utility class adapts automatically. No duplicate classes, no `dark:` prefixes for common patterns:
297
+
298
+ ```html
299
+ <!-- Dark theme -->
300
+ <html data-theme="dark">
301
+
302
+ <!-- Follow OS preference -->
303
+ <html class="theme-auto">
304
+
305
+ <!-- Semantic utility classes — adapt in both themes -->
306
+ <div class="bg-surface text-base">
307
+ <p class="text-muted">Subtitle</p>
308
+ <span class="text-accent">Highlight</span>
309
+ <hr class="border-base">
310
+ </div>
311
+ ```
312
+
313
+ **New semantic token classes:**
314
+
315
+ | Class | Light | Dark |
316
+ |---|---|---|
317
+ | `bg-base` | `#ffffff` | `#0f172a` |
318
+ | `bg-subtle` | `#f9fafb` | `#1e293b` |
319
+ | `bg-surface` | `#ffffff` | `#1e293b` |
320
+ | `bg-elevated` | `#ffffff` | `#334155` |
321
+ | `text-base` | `#111827` | `#f1f5f9` |
322
+ | `text-muted` | `#6b7280` | `#94a3b8` |
323
+ | `text-subtle` | `#9ca3af` | `#64748b` |
324
+ | `text-accent` | `#3b82f6` | `#60a5fa` |
325
+ | `bg-accent` | `#3b82f6` | `#60a5fa` |
326
+ | `bg-accent-light` | `rgba(59,130,246,.12)` | `rgba(96,165,250,.15)` |
327
+ | `border-base` | `#e5e7eb` | `#334155` |
328
+ | `border-strong` | `#d1d5db` | `#475569` |
329
+
330
+ **Override tokens in your own CSS:**
331
+ ```css
332
+ :root {
333
+ --santy-accent: #7c3aed; /* brand purple */
334
+ --santy-accent-light: rgba(124,58,237,.12);
335
+ }
336
+ [data-theme="dark"] {
337
+ --santy-accent: #a78bfa;
338
+ }
339
+ ```
340
+
341
+ ---
342
+
343
+ ### 🤖 AI-First — Why SantyCSS is Better for AI
344
+
345
+ SantyCSS class names **are** the documentation. `add-bg-blue make-rounded` tells an LLM exactly what it's doing. `bg-blue-500 rounded-lg` requires a lookup table.
346
+
347
+ ```
348
+ Tailwind: bg-blue-500 rounded-lg shadow-md p-6 text-white font-semibold
349
+ SantyCSS: background-blue-500 make-rounded-lg add-shadow-md add-padding-24 color-white text-semibold
350
+ ```
351
+
352
+ The SantyCSS version is self-documenting — any developer (or AI) reading it knows exactly what CSS is applied. No docs needed.
353
+
354
+ **Use the context file** — paste `santycss.context.md` into Claude, GPT-4, or Cursor's system prompt:
355
+ ```
356
+ Paste santycss.context.md → AI writes SantyCSS instead of Tailwind, every time
357
+ ```
358
+
359
+ ---
360
+
23
361
  ## What's New in v2.0
24
362
 
25
363
  ### 🦇 Creature Animations — Premium Free
@@ -672,7 +1010,7 @@ The file `santycss.context.md` (in the GitHub repo) is a ready-made system promp
672
1010
  - 🎮 Live Demo: [santycss.santy.in/demo.html](https://santycss.santy.in/demo.html)
673
1011
  - 📦 npm Docs: [santycss.santy.in/docs.html](https://santycss.santy.in/docs.html)
674
1012
  - 🐛 Issues: [github.com/ChintuSanty/santyCSS/issues](https://github.com/ChintuSanty/santyCSS/issues)
675
- - 💬 Discussions: [GitHub Discussions](https://github.com/orgs/community/discussions/190269)
1013
+ - 💬 Discussions: [GitHub Discussions](https://github.com/ChintuSanty/santyCSS/discussions/1)
676
1014
 
677
1015
  ---
678
1016
 
package/dist/santy-components.css CHANGED
@@ -1849,6 +1849,8 @@
1849
1849
  .caret-stone-800 { caret-color: #292524; }
1850
1850
  .caret-stone-900 { caret-color: #1c1917; }
1851
1851
 
1852
+ /* ═══ VARIANTS_BLOCK_START ═══ */
1853
+
1852
1854
  /* ── Color-Mix Tints & Shades — background, text, border ── */
1853
1855
  .background-red-tint-10 { background-color: color-mix(in srgb, #ef4444 10%, #ffffff); }
1854
1856
  .color-red-tint-10 { color: color-mix(in srgb, #ef4444 10%, #ffffff); }
@@ -2264,6 +2266,7 @@
2264
2266
  .border-stone-tint-20 { border-color: color-mix(in srgb, #78716c 20%, #ffffff); }
2265
2267
  .border-stone-tint-40 { border-color: color-mix(in srgb, #78716c 40%, #ffffff); }
2266
2268
  .border-stone-shade-10 { border-color: color-mix(in srgb, #78716c 90%, #000000); }
2269
+ /* ═══ VARIANTS_BLOCK_END ═══ */
2267
2270
 
2268
2271
  /* ═══════════════════════════════════════════════════════════════════════════
2269
2272
  v1.7 — ACCESSIBILITY UTILITIES