@bookklik/senangstart-css 0.1.3 → 0.1.7

package/docs/ms/reference/visual/border-style.md

@@ -0,0 +1,33 @@
+# Border Style
+
+Tetapkan gaya sempadan
+
+## Sintaks
+```
+visual="border-style:[value]"
+```
+
+## Nilai
+
+| Nilai | CSS Output | Huraian |
+|-------|------------|-------------|
+| `solid` | `border-style: solid` | Sempadan pepejal |
+| `dashed` | `border-style: dashed` | Sempadan putus-putus |
+| `dotted` | `border-style: dotted` | Sempadan bertitik |
+| `double` | `border-style: double` | Sempadan berganda |
+| `none` | `border-style: none` | Tiada sempadan |
+
+## Contoh
+
+```html
+<div visual="border:gray-300 border-style:dashed">Dashed border</div>
+```
+
+## Responsif
+
+```html
+<!-- Contoh responsif -->
+<div visual="mob:... tab:... lap:...">
+  Kandungan responsif
+</div>
+```

package/docs/ms/reference/visual/border-width.md

@@ -0,0 +1,44 @@
+# Border Width
+
+Tetapkan lebar sempadan untuk semua sisi atau sisi tertentu
+
+## Sintaks
+```
+visual="border-w:[value]" | visual="border-{t|b|l|r|x|y}-w:[value]"
+```
+
+## Nilai
+
+| Nilai | CSS Output | Huraian |
+|-------|------------|-------------|
+| `none` | `border-width: var(--s-none)` | Tiada sempadan (0px) |
+| `thin` | `border-width: var(--s-thin)` | Sempadan nipis (1px) |
+| `regular` | `border-width: var(--s-regular)` | Sempadan standard (2px) |
+| `thick` | `border-width: var(--s-thick)` | Sempadan tebal (3px) |
+
+## Contoh
+
+```html
+<div visual="border:gray-300 border-w:thin">Thin 1px border</div>
+<div visual="border:gray-300 border-w:regular">Standard 2px border</div>
+<div visual="border:gray-300 border-w:thick">Thick 3px border</div>
+<div visual="border-b:primary border-b-w:regular">Bottom border only</div>
+<div visual="border-x:primary border-x-w:thin">Horizontal borders</div>
+```
+
+## Nilai Arbitrari
+
+Sokong nilai tersuai menggunakan sintaks kurungan segi empat:
+
+```html
+<div visual="border:[custom-value]">Custom</div>
+```
+
+## Responsif
+
+```html
+<!-- Contoh responsif -->
+<div visual="mob:... tab:... lap:...">
+  Kandungan responsif
+</div>
+```

package/docs/ms/reference/visual/border.md

@@ -0,0 +1,43 @@
+# Border
+
+Tetapkan warna sempadan untuk semua sisi atau sisi tertentu
+
+## Sintaks
+```
+visual="border:[color]" | visual="border-{t|b|l|r|x|y}:[color]"
+```
+
+## Nilai
+
+| Nilai | CSS Output | Huraian |
+|-------|------------|-------------|
+| `primary` | `border-color: var(--c-primary); border-style: solid` | Sempadan warna utama |
+| `gray-300` | `border-color: var(--c-gray-300); border-style: solid` | Sempadan kelabu cerah |
+| `danger` | `border-color: var(--c-danger); border-style: solid` | Sempadan bahaya/ralat |
+
+## Contoh
+
+```html
+<div visual="border:primary border-w:thin">Primary border</div>
+<div visual="border-t:primary border-t-w:regular">Top only</div>
+<div visual="border-b:gray-300 border-b-w:thin">Bottom only</div>
+<div visual="border-x:primary border-x-w:regular">Left & right</div>
+<div visual="border-y:gray-300 border-y-w:thin">Top & bottom</div>
+```
+
+## Nilai Arbitrari
+
+Sokong nilai tersuai menggunakan sintaks kurungan segi empat:
+
+```html
+<div visual="border:[custom-value]">Custom</div>
+```
+
+## Responsif
+
+```html
+<!-- Contoh responsif -->
+<div visual="mob:... tab:... lap:...">
+  Kandungan responsif
+</div>
+```

package/docs/ms/reference/visual/box-shadow.md

@@ -0,0 +1,33 @@
+# Box Shadow
+
+Tambah bayang kotak
+
+## Sintaks
+```
+visual="shadow:[value]"
+```
+
+## Nilai
+
+| Nilai | CSS Output | Huraian |
+|-------|------------|-------------|
+| `none` | `box-shadow: var(--shadow-none)` | Tiada bayang |
+| `small` | `box-shadow: var(--shadow-small)` | Bayang kecil |
+| `medium` | `box-shadow: var(--shadow-medium)` | Bayang sederhana |
+| `big` | `box-shadow: var(--shadow-big)` | Bayang besar |
+| `giant` | `box-shadow: var(--shadow-giant)` | Bayang gergasi |
+
+## Contoh
+
+```html
+<div visual="shadow:medium">Card with shadow</div>
+```
+
+## Responsif
+
+```html
+<!-- Contoh responsif -->
+<div visual="mob:... tab:... lap:...">
+  Kandungan responsif
+</div>
+```

package/docs/ms/reference/visual/caret-color.md

@@ -0,0 +1,31 @@
+# Caret Color
+
+Tetapkan warna karet input teks
+
+## Sintaks
+```
+visual="caret:[color]"
+```
+
+## Contoh
+
+```html
+<input visual="caret:primary">
+```
+
+## Nilai Arbitrari
+
+Sokong nilai tersuai menggunakan sintaks kurungan segi empat:
+
+```html
+<div visual="caret:[custom-value]">Custom</div>
+```
+
+## Responsif
+
+```html
+<!-- Contoh responsif -->
+<div visual="mob:... tab:... lap:...">
+  Kandungan responsif
+</div>
+```

package/docs/ms/reference/visual/color-scheme.md

@@ -0,0 +1,31 @@
+# Color Scheme
+
+Tetapkan skema warna pilihan
+
+## Sintaks
+```
+visual="color-scheme:[value]"
+```
+
+## Nilai
+
+| Nilai | CSS Output | Huraian |
+|-------|------------|-------------|
+| `light` | `color-scheme: light` | Mod cerah |
+| `dark` | `color-scheme: dark` | Mod gelap |
+| `normal` | `color-scheme: normal` | Lalai sistem |
+
+## Contoh
+
+```html
+<html visual="color-scheme:dark">Dark mode</html>
+```
+
+## Responsif
+
+```html
+<!-- Contoh responsif -->
+<div visual="mob:... tab:... lap:...">
+  Kandungan responsif
+</div>
+```

package/docs/ms/reference/visual/cursor.md

@@ -0,0 +1,37 @@
+# Cursor
+
+Tetapkan gaya kursor
+
+## Sintaks
+```
+visual="cursor:[value]"
+```
+
+## Nilai
+
+| Nilai | CSS Output | Huraian |
+|-------|------------|-------------|
+| `auto` | `cursor: auto` | Kursor automatik |
+| `default` | `cursor: default` | Kursor lalai |
+| `pointer` | `cursor: pointer` | Kursor penunjuk |
+| `wait` | `cursor: wait` | Kursor tunggu |
+| `text` | `cursor: text` | Kursor teks |
+| `move` | `cursor: move` | Kursor alih |
+| `not-allowed` | `cursor: not-allowed` | Tidak dibenarkan |
+| `grab` | `cursor: grab` | Kursor genggam |
+| `grabbing` | `cursor: grabbing` | Kursor menggenggam |
+
+## Contoh
+
+```html
+<button visual="cursor:pointer">Clickable</button>
+```
+
+## Responsif
+
+```html
+<!-- Contoh responsif -->
+<div visual="mob:... tab:... lap:...">
+  Kandungan responsif
+</div>
+```

package/docs/ms/reference/visual/field-sizing.md

@@ -0,0 +1,30 @@
+# Field Sizing
+
+Kawal saiz medan borang
+
+## Sintaks
+```
+visual="field-sizing:[value]"
+```
+
+## Nilai
+
+| Nilai | CSS Output | Huraian |
+|-------|------------|-------------|
+| `fixed` | `field-sizing: fixed` | Saiz tetap |
+| `content` | `field-sizing: content` | Saiz mengikut kandungan |
+
+## Contoh
+
+```html
+<textarea visual="field-sizing:content">Auto-grow textarea</textarea>
+```
+
+## Responsif
+
+```html
+<!-- Contoh responsif -->
+<div visual="mob:... tab:... lap:...">
+  Kandungan responsif
+</div>
+```

package/docs/ms/reference/visual/fill.md

@@ -0,0 +1,38 @@
+# Fill
+
+Tetapkan warna pengisian SVG
+
+## Sintaks
+```
+visual="fill:[color]"
+```
+
+## Nilai
+
+| Nilai | CSS Output | Huraian |
+|-------|------------|-------------|
+| `none` | `fill: none` | Tiada pengisian |
+| `current` | `fill: currentColor` | Warna semasa |
+
+## Contoh
+
+```html
+<svg visual="fill:primary">...</svg>
+```
+
+## Nilai Arbitrari
+
+Sokong nilai tersuai menggunakan sintaks kurungan segi empat:
+
+```html
+<div visual="fill:[custom-value]">Custom</div>
+```
+
+## Responsif
+
+```html
+<!-- Contoh responsif -->
+<div visual="mob:... tab:... lap:...">
+  Kandungan responsif
+</div>
+```

package/docs/ms/reference/visual/filter-blur.md

@@ -0,0 +1,43 @@
+# Filter Blur
+
+Terapkan penapis kabur
+
+## Sintaks
+```
+visual="blur:[value]"
+```
+
+## Nilai
+
+| Nilai | CSS Output | Huraian |
+|-------|------------|-------------|
+| `none` | `filter: blur(0)` | Tiada kabur |
+| `tiny` | `filter: blur(2px)` | Kabur kecil |
+| `small` | `filter: blur(4px)` | Kabur kecil |
+| `medium` | `filter: blur(8px)` | Kabur sederhana |
+| `big` | `filter: blur(12px)` | Kabur besar |
+| `giant` | `filter: blur(24px)` | Kabur gergasi |
+| `vast` | `filter: blur(48px)` | Kabur luas |
+
+## Contoh
+
+```html
+<div visual="blur:medium">Blurred element</div>
+```
+
+## Nilai Arbitrari
+
+Sokong nilai tersuai menggunakan sintaks kurungan segi empat:
+
+```html
+<div visual="filter:[custom-value]">Custom</div>
+```
+
+## Responsif
+
+```html
+<!-- Contoh responsif -->
+<div visual="mob:... tab:... lap:...">
+  Kandungan responsif
+</div>
+```

package/docs/ms/reference/visual/filter-brightness.md

@@ -0,0 +1,41 @@
+# Filter Brightness
+
+Laraskan kecerahan
+
+## Sintaks
+```
+visual="brightness:[value]"
+```
+
+## Nilai
+
+| Nilai | CSS Output | Huraian |
+|-------|------------|-------------|
+| `dim` | `filter: brightness(0.5)` | 50% kecerahan |
+| `dark` | `filter: brightness(0.75)` | 75% kecerahan |
+| `normal` | `filter: brightness(1)` | Kecerahan normal |
+| `bright` | `filter: brightness(1.25)` | 125% kecerahan |
+| `vivid` | `filter: brightness(1.5)` | 150% kecerahan |
+
+## Contoh
+
+```html
+<img visual="brightness:bright">Brighter image</img>
+```
+
+## Nilai Arbitrari
+
+Sokong nilai tersuai menggunakan sintaks kurungan segi empat:
+
+```html
+<div visual="filter:[custom-value]">Custom</div>
+```
+
+## Responsif
+
+```html
+<!-- Contoh responsif -->
+<div visual="mob:... tab:... lap:...">
+  Kandungan responsif
+</div>
+```

package/docs/ms/reference/visual/filter-contrast.md

@@ -0,0 +1,41 @@
+# Filter Contrast
+
+Laraskan kontras
+
+## Sintaks
+```
+visual="contrast:[value]"
+```
+
+## Nilai
+
+| Nilai | CSS Output | Huraian |
+|-------|------------|-------------|
+| `low` | `filter: contrast(0.5)` | Kontras rendah |
+| `reduced` | `filter: contrast(0.75)` | Kontras dikurangkan |
+| `normal` | `filter: contrast(1)` | Kontras normal |
+| `high` | `filter: contrast(1.25)` | Kontras tinggi |
+| `max` | `filter: contrast(1.5)` | Kontras maksimum |
+
+## Contoh
+
+```html
+<img visual="contrast:high">High contrast</img>
+```
+
+## Nilai Arbitrari
+
+Sokong nilai tersuai menggunakan sintaks kurungan segi empat:
+
+```html
+<div visual="filter:[custom-value]">Custom</div>
+```
+
+## Responsif
+
+```html
+<!-- Contoh responsif -->
+<div visual="mob:... tab:... lap:...">
+  Kandungan responsif
+</div>
+```

package/docs/ms/reference/visual/filter-drop-shadow.md

@@ -0,0 +1,42 @@
+# Filter Drop Shadow
+
+Tambah bayang jatuh
+
+## Sintaks
+```
+visual="drop-shadow:[value]"
+```
+
+## Nilai
+
+| Nilai | CSS Output | Huraian |
+|-------|------------|-------------|
+| `none` | `filter: drop-shadow(none)` | Tiada bayang |
+| `tiny` | `filter: drop-shadow(0 1px 1px rgba(0,0,0,0.05))` | Bayang kecil |
+| `small` | `filter: drop-shadow(0 1px 2px rgba(0,0,0,0.1))` | Bayang kecil |
+| `medium` | `filter: drop-shadow(0 4px 3px rgba(0,0,0,0.07))` | Bayang sederhana |
+| `big` | `filter: drop-shadow(0 10px 8px rgba(0,0,0,0.04))` | Bayang besar |
+| `giant` | `filter: drop-shadow(0 20px 13px rgba(0,0,0,0.03))` | Bayang gergasi |
+
+## Contoh
+
+```html
+<img visual="drop-shadow:medium">Shadow on image</img>
+```
+
+## Nilai Arbitrari
+
+Sokong nilai tersuai menggunakan sintaks kurungan segi empat:
+
+```html
+<div visual="filter:[custom-value]">Custom</div>
+```
+
+## Responsif
+
+```html
+<!-- Contoh responsif -->
+<div visual="mob:... tab:... lap:...">
+  Kandungan responsif
+</div>
+```

package/docs/ms/reference/visual/filter-grayscale.md

@@ -0,0 +1,39 @@
+# Filter Grayscale
+
+Terapkan penapis skala kelabu
+
+## Sintaks
+```
+visual="grayscale:[value]"
+```
+
+## Nilai
+
+| Nilai | CSS Output | Huraian |
+|-------|------------|-------------|
+| `none` | `filter: grayscale(0%)` | Tiada skala kelabu |
+| `partial` | `filter: grayscale(50%)` | 50% skala kelabu |
+| `full` | `filter: grayscale(100%)` | Skala kelabu penuh |
+
+## Contoh
+
+```html
+<img visual="grayscale:full">Black and white</img>
+```
+
+## Nilai Arbitrari
+
+Sokong nilai tersuai menggunakan sintaks kurungan segi empat:
+
+```html
+<div visual="filter:[custom-value]">Custom</div>
+```
+
+## Responsif
+
+```html
+<!-- Contoh responsif -->
+<div visual="mob:... tab:... lap:...">
+  Kandungan responsif
+</div>
+```

package/docs/ms/reference/visual/filter-hue-rotate.md

@@ -0,0 +1,39 @@
+# Filter Hue Rotate
+
+Putar warna rona
+
+## Sintaks
+```
+visual="hue-rotate:[degrees]"
+```
+
+## Nilai
+
+| Nilai | CSS Output | Huraian |
+|-------|------------|-------------|
+| `0` | `filter: hue-rotate(0deg)` | Tiada putaran |
+| `90` | `filter: hue-rotate(90deg)` | Putaran 90° |
+| `180` | `filter: hue-rotate(180deg)` | Putaran 180° |
+
+## Contoh
+
+```html
+<img visual="hue-rotate:90">Shifted hue</img>
+```
+
+## Nilai Arbitrari
+
+Sokong nilai tersuai menggunakan sintaks kurungan segi empat:
+
+```html
+<div visual="filter:[custom-value]">Custom</div>
+```
+
+## Responsif
+
+```html
+<!-- Contoh responsif -->
+<div visual="mob:... tab:... lap:...">
+  Kandungan responsif
+</div>
+```

package/docs/ms/reference/visual/filter-invert.md

@@ -0,0 +1,39 @@
+# Filter Invert
+
+Songsangkan warna
+
+## Sintaks
+```
+visual="invert:[value]"
+```
+
+## Nilai
+
+| Nilai | CSS Output | Huraian |
+|-------|------------|-------------|
+| `none` | `filter: invert(0%)` | Tiada penyongsangan |
+| `partial` | `filter: invert(50%)` | 50% penyongsangan |
+| `full` | `filter: invert(100%)` | Penyongsangan penuh |
+
+## Contoh
+
+```html
+<img visual="invert:full">Inverted colors</img>
+```
+
+## Nilai Arbitrari
+
+Sokong nilai tersuai menggunakan sintaks kurungan segi empat:
+
+```html
+<div visual="filter:[custom-value]">Custom</div>
+```
+
+## Responsif
+
+```html
+<!-- Contoh responsif -->
+<div visual="mob:... tab:... lap:...">
+  Kandungan responsif
+</div>
+```

package/docs/ms/reference/visual/filter-saturate.md

@@ -0,0 +1,41 @@
+# Filter Saturate
+
+Laraskan ketepuan
+
+## Sintaks
+```
+visual="saturate:[value]"
+```
+
+## Nilai
+
+| Nilai | CSS Output | Huraian |
+|-------|------------|-------------|
+| `none` | `filter: saturate(0)` | Tidak tepu |
+| `low` | `filter: saturate(0.5)` | Ketepuan rendah |
+| `normal` | `filter: saturate(1)` | Ketepuan normal |
+| `high` | `filter: saturate(1.5)` | Ketepuan tinggi |
+| `vivid` | `filter: saturate(2)` | Sangat tepu |
+
+## Contoh
+
+```html
+<img visual="saturate:vivid">Vivid colors</img>
+```
+
+## Nilai Arbitrari
+
+Sokong nilai tersuai menggunakan sintaks kurungan segi empat:
+
+```html
+<div visual="filter:[custom-value]">Custom</div>
+```
+
+## Responsif
+
+```html
+<!-- Contoh responsif -->
+<div visual="mob:... tab:... lap:...">
+  Kandungan responsif
+</div>
+```

package/docs/ms/reference/visual/filter-sepia.md

@@ -0,0 +1,39 @@
+# Filter Sepia
+
+Terapkan penapis sepia
+
+## Sintaks
+```
+visual="sepia:[value]"
+```
+
+## Nilai
+
+| Nilai | CSS Output | Huraian |
+|-------|------------|-------------|
+| `none` | `filter: sepia(0%)` | Tiada sepia |
+| `partial` | `filter: sepia(50%)` | 50% sepia |
+| `full` | `filter: sepia(100%)` | Sepia penuh |
+
+## Contoh
+
+```html
+<img visual="sepia:full">Vintage look</img>
+```
+
+## Nilai Arbitrari
+
+Sokong nilai tersuai menggunakan sintaks kurungan segi empat:
+
+```html
+<div visual="filter:[custom-value]">Custom</div>
+```
+
+## Responsif
+
+```html
+<!-- Contoh responsif -->
+<div visual="mob:... tab:... lap:...">
+  Kandungan responsif
+</div>
+```