santycss 1.6.0 → 1.8.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 (4) hide show
  1. package/README.md +98 -1
  2. package/dist/santy-core.css +1 -1
  3. package/dist/santy.css +1 -1
  4. package/package.json +1 -1
package/README.md CHANGED
@@ -3,7 +3,7 @@
3
3
  [![npm version](https://img.shields.io/npm/v/santycss.svg?style=flat-square)](https://www.npmjs.com/package/santycss)
4
4
  [![npm downloads](https://img.shields.io/npm/dm/santycss.svg?style=flat-square)](https://www.npmjs.com/package/santycss)
5
5
  [![license](https://img.shields.io/npm/l/santycss.svg?style=flat-square)](https://github.com/ChintuSanty/santyCSS/blob/main/LICENSE)
6
- [![bundle size](https://img.shields.io/badge/full_bundle-701KB-blue?style=flat-square)](https://www.npmjs.com/package/santycss)
6
+ [![bundle size](https://img.shields.io/badge/full_bundle-744KB-blue?style=flat-square)](https://www.npmjs.com/package/santycss)
7
7
 
8
8
  **Plain-English utility-first CSS framework.**
9
9
  Class names read like sentences. No build step. No configuration. Just link and use.
@@ -20,6 +20,103 @@ Class names read like sentences. No build step. No configuration. Just link and
20
20
 
21
21
  ---
22
22
 
23
+ ## What's New in v1.8
24
+
25
+ ### 🎨 SantyCSS Inspector — Figma Plugin
26
+
27
+ Inspect any Figma layer and get the exact SantyCSS classes in one click.
28
+
29
+ **Install (local development):**
30
+ 1. Clone this repo — the plugin lives in `figma-plugin-santycss/`
31
+ 2. Open **Figma Desktop** → Plugins → Development → **Import plugin from manifest**
32
+ 3. Select `figma-plugin-santycss/manifest.json`
33
+ 4. Select any frame/text layer → run **SantyCSS Inspector**
34
+
35
+ **What it detects:**
36
+
37
+ | Figma property | SantyCSS output |
38
+ |---|---|
39
+ | Auto-layout (horizontal) | `make-flex flex-row` |
40
+ | Auto-layout (vertical) | `make-flex flex-column` |
41
+ | Alignment | `justify-center`, `align-center`, `justify-between` |
42
+ | Gap | `gap-16`, `gap-24` |
43
+ | Padding | `add-padding-24`, `add-padding-x-16 add-padding-y-8` |
44
+ | Width / Height | `set-width-320`, `set-width-full`, `set-height-fit` |
45
+ | Corner radius | `round-corners-8`, `make-pill` |
46
+ | Stroke | `add-border-1`, `border-color-blue-500` |
47
+ | Fill / background | `background-blue-500` (nearest of 200 palette colors) |
48
+ | Text color | `color-gray-900` |
49
+ | Font size | `set-text-16` |
50
+ | Font weight | `text-bold`, `text-semibold` |
51
+ | Text align | `text-center`, `text-right` |
52
+ | Drop shadow | `add-shadow-sm` / `add-shadow-lg` |
53
+ | Opacity | `opacity-50` |
54
+ | Clips content | `overflow-hidden` |
55
+
56
+ **Plugin UI:**
57
+ - Grouped classes (Layout / Spacing / Size / Typography / Color / Border / Effects)
58
+ - Click any chip to copy that class
59
+ - **Copy All** button — copies all classes as one string
60
+ - Dark mode — follows Figma's theme automatically
61
+
62
+ ---
63
+
64
+ ## What's New in v1.7
65
+
66
+ ### ♿ Accessibility Utilities
67
+
68
+ | Class | What it does |
69
+ |---|---|
70
+ | `.skip-to-content` | Skip-nav link — visible on focus, hidden otherwise |
71
+ | `.focus-trap` | Container for modal/drawer focus trapping |
72
+ | `.aria-live-polite` / `.aria-live-assertive` | Visually hidden ARIA live regions |
73
+ | `.screen-reader-only` | Visually hide but keep accessible |
74
+ | `.focus-ring` / `.focus-ring-white` | Consistent focus outline utilities |
75
+ | `.focus-visible-ring` | Focus ring only on keyboard navigation |
76
+ | `.motion-safe-animate` | Disables animation when OS reduces motion |
77
+ | `.high-contrast-border/bg/outline` | `forced-colors` media query support |
78
+
79
+ ### 🌐 Internationalisation (i18n)
80
+
81
+ | Class | What it does |
82
+ |---|---|
83
+ | `.add-padding-block-{n}` / `.add-padding-inline-{n}` | Logical padding (direction-aware) |
84
+ | `.add-margin-block-{n}` / `.add-margin-inline-{n}` | Logical margin |
85
+ | `.pin-block-start-0` / `.pin-inline-start-0` | Logical positioning |
86
+ | `.border-block-start` / `.border-inline-start` | Logical borders |
87
+ | `.make-text-vertical` | `writing-mode: vertical-rl` — for CJK/Japanese |
88
+ | `.make-text-vertical-up` | `writing-mode: vertical-lr` |
89
+ | `.text-orientation-mixed` / `.text-orientation-upright` | Text orientation control |
90
+ | `.text-direction-ltr` / `.text-direction-rtl` | Explicit `direction` control |
91
+
92
+ ### 📱 Mobile-First Components
93
+
94
+ | Class | What it does |
95
+ |---|---|
96
+ | `.bottom-sheet` + `.open` | Slide-up panel from bottom (with safe-area support) |
97
+ | `.bottom-sheet-handle` / `.bottom-sheet-body` / `.bottom-sheet-footer` | Bottom sheet parts |
98
+ | `.bottom-sheet-overlay` + `.visible` | Semi-transparent backdrop |
99
+ | `.swipe-carousel` + `.swipe-carousel-item` | Touch-friendly horizontal scroll carousel |
100
+ | `.swipe-carousel-full` / `.peek` / `.multi` | Carousel layout variants |
101
+ | `.swipe-carousel-dot` + `.active` | Progress dots |
102
+ | `.pull-to-refresh` + `.pulling` / `.refreshing` | Pull-to-refresh indicator |
103
+ | `.padding-safe-top/bottom/left/right/all` | `env(safe-area-inset-*)` padding |
104
+
105
+ ### 🗓 New Components
106
+
107
+ | Class | What it does |
108
+ |---|---|
109
+ | `.command-palette-wrap` + `.open` | VS Code-style Ctrl+K command palette overlay |
110
+ | `.command-palette-input` / `.command-palette-item` | Command palette parts |
111
+ | `.date-picker` / `.date-picker-grid` / `.date-picker-day` | Full calendar date picker |
112
+ | `.date-picker-day.today` / `.selected` / `.in-range` | Day state modifiers |
113
+
114
+ ### 🎨 Figma Plugin _(coming soon)_
115
+
116
+ A **SantyCSS Figma Plugin** is in development — inspect Figma designs and get the exact SantyCSS classes that match. Inspired by the Tailwind CSS Figma plugin workflow.
117
+
118
+ ---
119
+
23
120
  ## What's New in v1.4
24
121
 
25
122
  ### 🧩 VS Code IntelliSense Extension
package/dist/santy-core.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /* ============================================================
2
- SantyCSS v1.6.0 — Plain-English Utility CSS Framework
2
+ SantyCSS v1.8.0 — Plain-English Utility CSS Framework
3
3
  https://github.com/santybad/santy_css
4
4
  ============================================================ */
5
5
 
package/dist/santy.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /* ============================================================
2
- SantyCSS v1.6.0 — Plain-English Utility CSS Framework
2
+ SantyCSS v1.8.0 — Plain-English Utility CSS Framework
3
3
  https://github.com/santybad/santy_css
4
4
  ============================================================ */
5
5
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "santycss",
3
- "version": "1.6.0",
3
+ "version": "1.8.0",
4
4
  "description": "Plain-English utility-first CSS framework — no build step, just classes",
5
5
  "main": "index.js",
6
6
  "style": "dist/santy.css",