@bookklik/senangstart-css 0.1.4 → 0.1.8

package/docs/ms/reference/visual.md

@@ -1,160 +1,157 @@
-# Rujukan visual
+# Rujukan Visual
 
-Atribusi `visual` mengawal warna, tekstur, dan penampilan.
+Atribut `visual` mengawal warna, tekstur, tipografi, dan penampilan.
 
 ## Latar Belakang
 
-| Property | Output CSS |
-|----------|------------|
-| `bg:white` | `background-color: var(--c-white)` |
-| `bg:primary` | `background-color: var(--c-primary)` |
-| `bg:[#hex]` | `background-color: #hex` |
-
-```html
-<div visual="bg:white">Latar belakang putih</div>
-<div visual="bg:primary">Warna primary</div>
-<div visual="bg:[#FF5733]">Hex tersuai</div>
-<div visual="bg:[rgba(0,0,0,0.5)]">Separa lutsinar</div>
-```
-
-## Warna Teks
-
-| Property | Output CSS |
-|----------|------------|
-| `text:dark` | `color: var(--c-dark)` |
-| `text:grey` | `color: var(--c-grey)` |
-| `text:primary` | `color: var(--c-primary)` |
-
-```html
-<span visual="text:dark">Teks gelap</span>
-<span visual="text:grey">Teks kelabu</span>
-<span visual="text:primary">Teks primary</span>
-```
-
-## Saiz Teks
-
-| Property | Output CSS |
-|----------|------------|
-| `text-size:tiny` | `font-size: 12px` |
-| `text-size:small` | `font-size: 14px` |
-| `text-size:medium` | `font-size: 16px` |
-| `text-size:big` | `font-size: 20px` |
-| `text-size:giant` | `font-size: 32px` |
-| `text-size:vast` | `font-size: 48px` |
-
-```html
-<span visual="text-size:small">Teks kecil</span>
-<h1 visual="text-size:giant">Tajuk giant</h1>
-```
-
-## Berat Fon
-
-| Property | Output CSS |
-|----------|------------|
-| `font:normal` | `font-weight: 400` |
-| `font:medium` | `font-weight: 500` |
-| `font:bold` | `font-weight: 700` |
-
-```html
-<span visual="font:normal">Berat normal</span>
-<span visual="font:bold">Teks tebal</span>
-```
-
-## Penjajaran Teks
-
-| Property | Output CSS |
-|----------|------------|
-| `text:left` | `text-align: left` |
-| `text:center` | `text-align: center` |
-| `text:right` | `text-align: right` |
-
-```html
-<p visual="text:center">Teks di tengah</p>
-```
-
-## Radius Sempadan
-
-| Property | Output CSS |
-|----------|------------|
-| `rounded:none` | `border-radius: 0` |
-| `rounded:small` | `border-radius: 4px` |
-| `rounded:medium` | `border-radius: 8px` |
-| `rounded:big` | `border-radius: 16px` |
-| `rounded:round` | `border-radius: 9999px` |
-
-```html
-<div visual="rounded:small">Pembulatan halus</div>
-<div visual="rounded:big">Pembulatan jelas</div>
-<button visual="rounded:round">Butang pill</button>
-```
-
-## Bayang Kotak
-
-| Property | Output CSS |
-|----------|------------|
-| `shadow:none` | `box-shadow: none` |
-| `shadow:small` | `box-shadow: 0 1px 2px rgba(0,0,0,0.05)` |
-| `shadow:medium` | `box-shadow: 0 4px 6px rgba(0,0,0,0.1)` |
-| `shadow:big` | `box-shadow: 0 10px 15px rgba(0,0,0,0.15)` |
-| `shadow:giant` | `box-shadow: 0 25px 50px rgba(0,0,0,0.25)` |
-
-```html
-<div visual="shadow:small">Bayang halus</div>
-<div visual="shadow:big">Bayang ketara</div>
-```
+- [Warna Latar Belakang](./visual/background-color) - `bg:white`, `bg:primary`, `bg:[#hex]`
+- [Imej Latar Belakang](./visual/background-image) - `bg-image:[url]`
+- [Lampiran Latar Belakang](./visual/background-attachment) - `bg-attachment:fixed`, `bg-attachment:scroll`
+- [Klip Latar Belakang](./visual/background-clip) - `bg-clip:border`, `bg-clip:text`
+- [Asal Latar Belakang](./visual/background-origin) - `bg-origin:border`, `bg-origin:padding`
+- [Kedudukan Latar Belakang](./visual/background-position) - `bg-pos:center`, `bg-pos:top`
+- [Ulangan Latar Belakang](./visual/background-repeat) - `bg-repeat`, `bg-no-repeat`
+- [Saiz Latar Belakang](./visual/background-size) - `bg-size:cover`, `bg-size:contain`
+- [Mod Campuran Latar Belakang](./visual/background-blend-mode) - `bg-blend:multiply`, `bg-blend:overlay`
+
+## Tipografi
+
+- [Saiz Teks](./visual/text-size) - `text-size:small`, `text-size:big`, `text-size:giant`
+- [Keluarga Fon](./visual/font-family) - `font:sans`, `font:serif`, `font:mono`
+- [Berat Fon](./visual/font-weight) - `font:normal`, `font:medium`, `font:bold`
+- [Gaya Fon](./visual/font-style) - `italic`, `not-italic`
+- [Smoothing Fon](./visual/font-smoothing) - `antialiased`, `subpixel-antialiased`
+- [Jarak Huruf](./visual/letter-spacing) - `tracking:tight`, `tracking:wide`
+- [Ketinggian Baris](./visual/line-height) - `leading:tight`, `leading:relaxed`
+- [Line Clamp](./visual/line-clamp) - `line-clamp:1`, `line-clamp:2`, `line-clamp:3`
+- [Kata Kunci Tipografi](./visual/typography-keywords) - `prose`, `heading`, `body`
+
+## Pemformatan Teks
+
+- [Warna Teks](./visual/text-color) - `text:dark`, `text:grey`, `text:primary`
+- [Penjajaran Teks](./visual/text-alignment) - `text:left`, `text:center`, `text:right`
+- [Transformasi Teks](./visual/text-transform) - `uppercase`, `lowercase`, `capitalize`
+- [Hiasan Teks](./visual/text-decoration) - `underline`, `line-through`, `no-underline`
+- [Limpahan Teks](./visual/text-overflow) - `truncate`, `text-ellipsis`
+- [Pembalutan Teks](./visual/text-wrap) - `text-wrap:wrap`, `text-wrap:nowrap`, `text-wrap:balance`
+- [Whitespace](./visual/whitespace) - `white-space:pre`, `white-space:nowrap`
+- [Word Break](./visual/word-break) - `word-break:normal`, `break-words`, `break-all`
+- [Hyphens](./visual/hyphens) - `hyphens:auto`, `hyphens:none`
+- [Inden Teks](./visual/text-indent) - `indent:small`, `indent:medium`
+- [Penjajaran Menegak](./visual/vertical-align) - `align:middle`, `align:top`
+
+## Senarai
+
+- [Gaya Senarai](./visual/list-style) - `list-none`, `list-disc`, `list-decimal`
+- [Varian Nombor Fon](./visual/font-variant-numeric) - `tabular-nums`, `ordinal`
 
 ## Sempadan
 
-| Property | Output CSS |
-|----------|------------|
-| `border:grey` | `border-color: var(--c-grey); border-style: solid` |
-| `border-w:[2px]` | `border-width: 2px; border-style: solid` |
-
-```html
-<div visual="border:grey border-w:[1px]">Elemen bersempadan</div>
-```
-
-## Kelegapan
-
-```html
-<div visual="opacity:[0.5]">50% kelegapan</div>
-<div visual="opacity:[0.8]">80% kelegapan</div>
-```
-
-## Palet Warna
-
-| Kunci | Nilai Lalai |
-|-------|-------------|
-| `white` | #FFFFFF |
-| `black` | #000000 |
-| `grey` | #6B7280 |
-| `dark` | #1F2937 |
-| `light` | #F3F4F6 |
-| `primary` | #3B82F6 |
-| `success` | #10B981 |
-| `warning` | #F59E0B |
-| `danger` | #EF4444 |
-
-## Prefiks Keadaan
-
-Gabungkan dengan `hover:`, `focus:`, `active:`, `disabled:`:
-
-```html
-<button visual="bg:primary hover:bg:[#2563EB]">
-  Kesan hover
-</button>
-
-<a visual="text:grey hover:text:primary">
-  Hover pautan
-</a>
-
-<input visual="border:grey focus:border:primary" />
-```
-
-## Menggabungkan Sari Diri
+- [Warna Sempadan](./visual/border) - `border:grey`, `border:primary`
+- [Lebar Sempadan](./visual/border-width) - `border-w:thin`, `border-w:thick`
+- [Radius Sempadan](./visual/border-radius) - `rounded:small`, `rounded:big`, `rounded:round`
+- [Gaya Sempadan](./visual/border-style) - `border-solid`, `border-dashed`, `border-dotted`
+
+## Kesan
+
+- [Bayang Kotak](./visual/box-shadow) - `shadow:small`, `shadow:medium`, `shadow:big`
+- [Garis Luar](./visual/outline) - `outline:none`, `outline:primary`
+- [Bayang Teks](./visual/text-shadow) - `text-shadow:small`, `text-shadow:medium`
+- [Kelegapan](./visual/opacity) - `opacity:[0.5]`, `opacity:[0]`
+- [Mod Campuran](./visual/blend-modes) - `mix-blend:multiply`, `mix-blend:overlay`
+- [Topeng](./visual/mask) - `mask-image:[url]`
+
+## Penapis
+
+- [Kabur](./visual/filter-blur) - `blur:small`, `blur:medium`
+- [Kecerahan](./visual/filter-brightness) - `brightness:[0.5]`, `brightness:[1.5]`
+- [Kontras](./visual/filter-contrast) - `contrast:[0.5]`, `contrast:[1.5]`
+- [Bayang Jatuh](./visual/filter-drop-shadow) - `drop-shadow:small`, `drop-shadow:medium`
+- [Skala Kelabu](./visual/filter-grayscale) - `grayscale`, `grayscale:[0.5]`
+- [Putar Hue](./visual/filter-hue-rotate) - `hue-rotate:[90deg]`
+- [Songsang](./visual/filter-invert) - `invert`, `invert:[0.5]`
+- [Ketepuan](./visual/filter-saturate) - `saturate:[0.5]`, `saturate:[2]`
+- [Sepia](./visual/filter-sepia) - `sepia`, `sepia:[0.5]`
+
+## Penapis Latar Belakang
+
+- [Kabur Latar](./visual/backdrop-blur) - `backdrop-blur:small`, `backdrop-blur:medium`
+- [Kecerahan Latar](./visual/backdrop-brightness) - `backdrop-brightness:[0.5]`
+- [Kontras Latar](./visual/backdrop-contrast) - `backdrop-contrast:[0.5]`
+- [Skala Kelabu Latar](./visual/backdrop-grayscale) - `backdrop-grayscale`
+- [Putar Hue Latar](./visual/backdrop-hue-rotate) - `backdrop-hue-rotate:[90deg]`
+- [Songsang Latar](./visual/backdrop-invert) - `backdrop-invert`
+- [Kelegapan Latar](./visual/backdrop-opacity) - `backdrop-opacity:[0.5]`
+- [Ketepuan Latar](./visual/backdrop-saturate) - `backdrop-saturate:[2]`
+- [Sepia Latar](./visual/backdrop-sepia) - `backdrop-sepia`
+
+## Peralihan
+
+- [Sifat](./visual/transition-property) - `transition:all`, `transition:colors`
+- [Tempoh](./visual/transition-duration) - `duration:fast`, `duration:slow`
+- [Fungsi Masa](./visual/transition-timing) - `ease:linear`, `ease:in-out`
+- [Kelewatan](./visual/transition-delay) - `delay:short`, `delay:long`
+
+## Animasi
+
+- [Terbina Dalam](./visual/animation-builtin) - `animate:spin`, `animate:pulse`, `animate:bounce`
+- [Tempoh](./visual/animation-duration) - `anim-duration:fast`, `anim-duration:slow`
+- [Kelewatan](./visual/animation-delay) - `anim-delay:short`, `anim-delay:long`
+- [Iterasi](./visual/animation-iteration) - `anim-iteration:infinite`, `anim-iteration:2`
+- [Arah](./visual/animation-direction) - `anim-direction:reverse`, `anim-direction:alternate`
+- [Mod Isi](./visual/animation-fill) - `anim-fill:forwards`, `anim-fill:backwards`
+- [Status Main](./visual/animation-play) - `anim-play:paused`, `anim-play:running`
+
+## Transform
+
+- [Skala](./visual/transform-scale) - `scale:[1.1]`, `scale-x:[0.5]`
+- [Putar](./visual/transform-rotate) - `rotate:[45deg]`, `rotate:[90deg]`
+- [Terjemah](./visual/transform-translate) - `translate-x:[10px]`, `translate-y:[20px]`
+- [Senget](./visual/transform-skew) - `skew-x:[5deg]`, `skew-y:[10deg]`
+- [Asal](./visual/transform-origin) - `origin:center`, `origin:top-left`
+
+## Transform 3D
+
+- [Perspektif](./visual/transform-perspective) - `perspective:[500px]`
+- [Asal Perspektif](./visual/transform-perspective-origin) - `perspective-origin:center`
+- [Gaya Transform](./visual/transform-style) - `transform-style:preserve-3d`
+- [Keterlihatan Belakang](./visual/transform-backface) - `backface:hidden`, `backface:visible`
+
+## Interaktiviti
+
+- [Warna Aksen](./visual/accent-color) - `accent:primary`, `accent:secondary`
+- [Penampilan](./visual/appearance) - `appearance:none`
+- [Warna Karet](./visual/caret-color) - `caret:primary`, `caret:transparent`
+- [Skema Warna](./visual/color-scheme) - `color-scheme:light`, `color-scheme:dark`
+- [Kursor](./visual/cursor) - `cursor:pointer`, `cursor:wait`, `cursor:grab`
+- [Saiz Medan](./visual/field-sizing) - `field-sizing:content`
+- [Peristiwa Penunjuk](./visual/pointer-events) - `pointer-events:none`, `pointer-events:auto`
+- [Saiz Semula](./visual/resize) - `resize`, `resize:none`, `resize-x`, `resize-y`
+- [Kelakuan Skrol](./visual/scroll-behavior) - `scroll:smooth`, `scroll:auto`
+- [Margin Skrol](./visual/scroll-margin) - `scroll-m:small`, `scroll-m:medium`
+- [Padding Skrol](./visual/scroll-padding) - `scroll-p:small`, `scroll-p:medium`
+- [Penjajaran Snap](./visual/scroll-snap-align) - `snap:start`, `snap:center`
+- [Hentian Snap](./visual/scroll-snap-stop) - `snap-stop:normal`, `snap-stop:always`
+- [Jenis Snap](./visual/scroll-snap-type) - `snap:x`, `snap:y`, `snap:mandatory`
+- [Tindakan Sentuh](./visual/touch-action) - `touch:none`, `touch:pan-x`
+- [Pilihan Pengguna](./visual/user-select) - `select:none`, `select:all`
+- [Will Change](./visual/will-change) - `will-change:transform`, `will-change:opacity`
+- [Prefiks Keadaan](./visual/state-prefixes) - `hover:`, `focus:`, `active:`, `disabled:`
+
+## SVG
+
+- [Isi](./visual/fill) - `fill:current`, `fill:none`
+- [Garis](./visual/stroke) - `stroke:current`, `stroke:primary`
+- [Lebar Garis](./visual/stroke-width) - `stroke-w:1`, `stroke-w:2`
+
+## Kebolehcapaian
+
+- [Penyesuaian Warna Paksa](./visual/forced-color-adjust) - `forced-color-adjust:none`, `forced-color-adjust:auto`
+
+## Contoh Pantas
 
 ```html
 <div visual="bg:white rounded:big shadow:medium text:dark">
-  Kad dengan pelbagai visual properties
+  Kad dengan pelbagai sifat visual
 </div>
 ```