@bookklik/senangstart-css 0.1.4 → 0.1.8

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

@@ -0,0 +1,30 @@
+# Field Sizing
+
+Control form field sizing
+
+## Syntax
+```
+visual="field-sizing:[value]"
+```
+
+## Values
+
+| Value | CSS Output | Description |
+|-------|------------|-------------|
+| `fixed` | `field-sizing: fixed` | Fixed size |
+| `content` | `field-sizing: content` | Size to content |
+
+## Examples
+
+```html
+<textarea visual="field-sizing:content">Auto-grow textarea</textarea>
+```
+
+## Responsive
+
+```html
+<!-- Responsive example -->
+<div visual="mob:... tab:... lap:...">
+  Responsive content
+</div>
+```

package/docs/reference/visual/fill.md

@@ -0,0 +1,38 @@
+# Fill
+
+Set SVG fill color
+
+## Syntax
+```
+visual="fill:[color]"
+```
+
+## Values
+
+| Value | CSS Output | Description |
+|-------|------------|-------------|
+| `none` | `fill: none` | No fill |
+| `current` | `fill: currentColor` | Current color |
+
+## Examples
+
+```html
+<svg visual="fill:primary">...</svg>
+```
+
+## Arbitrary Values
+
+Supports custom values using bracket syntax:
+
+```html
+<div visual="fill:[custom-value]">Custom</div>
+```
+
+## Responsive
+
+```html
+<!-- Responsive example -->
+<div visual="mob:... tab:... lap:...">
+  Responsive content
+</div>
+```

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

@@ -0,0 +1,43 @@
+# Filter Blur
+
+Apply blur filter
+
+## Syntax
+```
+visual="blur:[value]"
+```
+
+## Values
+
+| Value | CSS Output | Description |
+|-------|------------|-------------|
+| `none` | `filter: blur(0)` | No blur |
+| `tiny` | `filter: blur(2px)` | Tiny blur |
+| `small` | `filter: blur(4px)` | Small blur |
+| `medium` | `filter: blur(8px)` | Medium blur |
+| `big` | `filter: blur(12px)` | Large blur |
+| `giant` | `filter: blur(24px)` | Giant blur |
+| `vast` | `filter: blur(48px)` | Vast blur |
+
+## Examples
+
+```html
+<div visual="blur:medium">Blurred element</div>
+```
+
+## Arbitrary Values
+
+Supports custom values using bracket syntax:
+
+```html
+<div visual="filter:[custom-value]">Custom</div>
+```
+
+## Responsive
+
+```html
+<!-- Responsive example -->
+<div visual="mob:... tab:... lap:...">
+  Responsive content
+</div>
+```

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

@@ -0,0 +1,41 @@
+# Filter Brightness
+
+Adjust brightness
+
+## Syntax
+```
+visual="brightness:[value]"
+```
+
+## Values
+
+| Value | CSS Output | Description |
+|-------|------------|-------------|
+| `dim` | `filter: brightness(0.5)` | 50% brightness |
+| `dark` | `filter: brightness(0.75)` | 75% brightness |
+| `normal` | `filter: brightness(1)` | Normal brightness |
+| `bright` | `filter: brightness(1.25)` | 125% brightness |
+| `vivid` | `filter: brightness(1.5)` | 150% brightness |
+
+## Examples
+
+```html
+<img visual="brightness:bright">Brighter image</img>
+```
+
+## Arbitrary Values
+
+Supports custom values using bracket syntax:
+
+```html
+<div visual="filter:[custom-value]">Custom</div>
+```
+
+## Responsive
+
+```html
+<!-- Responsive example -->
+<div visual="mob:... tab:... lap:...">
+  Responsive content
+</div>
+```

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

@@ -0,0 +1,41 @@
+# Filter Contrast
+
+Adjust contrast
+
+## Syntax
+```
+visual="contrast:[value]"
+```
+
+## Values
+
+| Value | CSS Output | Description |
+|-------|------------|-------------|
+| `low` | `filter: contrast(0.5)` | Low contrast |
+| `reduced` | `filter: contrast(0.75)` | Reduced contrast |
+| `normal` | `filter: contrast(1)` | Normal contrast |
+| `high` | `filter: contrast(1.25)` | High contrast |
+| `max` | `filter: contrast(1.5)` | Maximum contrast |
+
+## Examples
+
+```html
+<img visual="contrast:high">High contrast</img>
+```
+
+## Arbitrary Values
+
+Supports custom values using bracket syntax:
+
+```html
+<div visual="filter:[custom-value]">Custom</div>
+```
+
+## Responsive
+
+```html
+<!-- Responsive example -->
+<div visual="mob:... tab:... lap:...">
+  Responsive content
+</div>
+```

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

@@ -0,0 +1,42 @@
+# Filter Drop Shadow
+
+Add drop shadow
+
+## Syntax
+```
+visual="drop-shadow:[value]"
+```
+
+## Values
+
+| Value | CSS Output | Description |
+|-------|------------|-------------|
+| `none` | `filter: drop-shadow(none)` | No shadow |
+| `tiny` | `filter: drop-shadow(0 1px 1px rgba(0,0,0,0.05))` | Tiny shadow |
+| `small` | `filter: drop-shadow(0 1px 2px rgba(0,0,0,0.1))` | Small shadow |
+| `medium` | `filter: drop-shadow(0 4px 3px rgba(0,0,0,0.07))` | Medium shadow |
+| `big` | `filter: drop-shadow(0 10px 8px rgba(0,0,0,0.04))` | Large shadow |
+| `giant` | `filter: drop-shadow(0 20px 13px rgba(0,0,0,0.03))` | Giant shadow |
+
+## Examples
+
+```html
+<img visual="drop-shadow:medium">Shadow on image</img>
+```
+
+## Arbitrary Values
+
+Supports custom values using bracket syntax:
+
+```html
+<div visual="filter:[custom-value]">Custom</div>
+```
+
+## Responsive
+
+```html
+<!-- Responsive example -->
+<div visual="mob:... tab:... lap:...">
+  Responsive content
+</div>
+```

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

@@ -0,0 +1,39 @@
+# Filter Grayscale
+
+Apply grayscale filter
+
+## Syntax
+```
+visual="grayscale:[value]"
+```
+
+## Values
+
+| Value | CSS Output | Description |
+|-------|------------|-------------|
+| `none` | `filter: grayscale(0%)` | No grayscale |
+| `partial` | `filter: grayscale(50%)` | 50% grayscale |
+| `full` | `filter: grayscale(100%)` | Full grayscale |
+
+## Examples
+
+```html
+<img visual="grayscale:full">Black and white</img>
+```
+
+## Arbitrary Values
+
+Supports custom values using bracket syntax:
+
+```html
+<div visual="filter:[custom-value]">Custom</div>
+```
+
+## Responsive
+
+```html
+<!-- Responsive example -->
+<div visual="mob:... tab:... lap:...">
+  Responsive content
+</div>
+```

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

@@ -0,0 +1,39 @@
+# Filter Hue Rotate
+
+Rotate hue colors
+
+## Syntax
+```
+visual="hue-rotate:[degrees]"
+```
+
+## Values
+
+| Value | CSS Output | Description |
+|-------|------------|-------------|
+| `0` | `filter: hue-rotate(0deg)` | No rotation |
+| `90` | `filter: hue-rotate(90deg)` | 90° rotation |
+| `180` | `filter: hue-rotate(180deg)` | 180° rotation |
+
+## Examples
+
+```html
+<img visual="hue-rotate:90">Shifted hue</img>
+```
+
+## Arbitrary Values
+
+Supports custom values using bracket syntax:
+
+```html
+<div visual="filter:[custom-value]">Custom</div>
+```
+
+## Responsive
+
+```html
+<!-- Responsive example -->
+<div visual="mob:... tab:... lap:...">
+  Responsive content
+</div>
+```

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

@@ -0,0 +1,39 @@
+# Filter Invert
+
+Invert colors
+
+## Syntax
+```
+visual="invert:[value]"
+```
+
+## Values
+
+| Value | CSS Output | Description |
+|-------|------------|-------------|
+| `none` | `filter: invert(0%)` | No inversion |
+| `partial` | `filter: invert(50%)` | 50% inversion |
+| `full` | `filter: invert(100%)` | Full inversion |
+
+## Examples
+
+```html
+<img visual="invert:full">Inverted colors</img>
+```
+
+## Arbitrary Values
+
+Supports custom values using bracket syntax:
+
+```html
+<div visual="filter:[custom-value]">Custom</div>
+```
+
+## Responsive
+
+```html
+<!-- Responsive example -->
+<div visual="mob:... tab:... lap:...">
+  Responsive content
+</div>
+```

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

@@ -0,0 +1,41 @@
+# Filter Saturate
+
+Adjust saturation
+
+## Syntax
+```
+visual="saturate:[value]"
+```
+
+## Values
+
+| Value | CSS Output | Description |
+|-------|------------|-------------|
+| `none` | `filter: saturate(0)` | Desaturated |
+| `low` | `filter: saturate(0.5)` | Low saturation |
+| `normal` | `filter: saturate(1)` | Normal saturation |
+| `high` | `filter: saturate(1.5)` | High saturation |
+| `vivid` | `filter: saturate(2)` | Very saturated |
+
+## Examples
+
+```html
+<img visual="saturate:vivid">Vivid colors</img>
+```
+
+## Arbitrary Values
+
+Supports custom values using bracket syntax:
+
+```html
+<div visual="filter:[custom-value]">Custom</div>
+```
+
+## Responsive
+
+```html
+<!-- Responsive example -->
+<div visual="mob:... tab:... lap:...">
+  Responsive content
+</div>
+```

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

@@ -0,0 +1,39 @@
+# Filter Sepia
+
+Apply sepia filter
+
+## Syntax
+```
+visual="sepia:[value]"
+```
+
+## Values
+
+| Value | CSS Output | Description |
+|-------|------------|-------------|
+| `none` | `filter: sepia(0%)` | No sepia |
+| `partial` | `filter: sepia(50%)` | 50% sepia |
+| `full` | `filter: sepia(100%)` | Full sepia |
+
+## Examples
+
+```html
+<img visual="sepia:full">Vintage look</img>
+```
+
+## Arbitrary Values
+
+Supports custom values using bracket syntax:
+
+```html
+<div visual="filter:[custom-value]">Custom</div>
+```
+
+## Responsive
+
+```html
+<!-- Responsive example -->
+<div visual="mob:... tab:... lap:...">
+  Responsive content
+</div>
+```

package/docs/reference/visual/font-family.md

@@ -0,0 +1,31 @@
+# Font Family
+
+Set font family
+
+## Syntax
+```
+visual="font:[family]"
+```
+
+## Values
+
+| Value | CSS Output | Description |
+|-------|------------|-------------|
+| `sans` | `font-family: ui-sans-serif, system-ui, sans-serif` | Sans-serif |
+| `serif` | `font-family: ui-serif, Georgia, serif` | Serif |
+| `mono` | `font-family: ui-monospace, monospace` | Monospace |
+
+## Examples
+
+```html
+<div visual="font:mono">Monospace text</div>
+```
+
+## Responsive
+
+```html
+<!-- Responsive example -->
+<div visual="mob:... tab:... lap:...">
+  Responsive content
+</div>
+```

package/docs/reference/visual/font-smoothing.md

@@ -0,0 +1,30 @@
+# Font Smoothing
+
+Control font smoothing
+
+## Syntax
+```
+visual="[smoothing-value]"
+```
+
+## Values
+
+| Value | CSS Output | Description |
+|-------|------------|-------------|
+| `antialiased` | `-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale` | Antialiased |
+| `subpixel-antialiased` | `-webkit-font-smoothing: auto; -moz-osx-font-smoothing: auto` | Subpixel antialiased |
+
+## Examples
+
+```html
+<body visual="antialiased">Smooth fonts</body>
+```
+
+## Responsive
+
+```html
+<!-- Responsive example -->
+<div visual="mob:... tab:... lap:...">
+  Responsive content
+</div>
+```

package/docs/reference/visual/font-style.md

@@ -0,0 +1,30 @@
+# Font Style
+
+Set font style
+
+## Syntax
+```
+visual="[style-value]"
+```
+
+## Values
+
+| Value | CSS Output | Description |
+|-------|------------|-------------|
+| `italic` | `font-style: italic` | Italic text |
+| `not-italic` | `font-style: normal` | Normal style |
+
+## Examples
+
+```html
+<em visual="not-italic">Normal style emphasis</em>
+```
+
+## Responsive
+
+```html
+<!-- Responsive example -->
+<div visual="mob:... tab:... lap:...">
+  Responsive content
+</div>
+```

package/docs/reference/visual/font-variant-numeric.md

@@ -0,0 +1,35 @@
+# Font Variant Numeric
+
+Control numeric font variants
+
+## Syntax
+```
+visual="[variant-value]"
+```
+
+## Values
+
+| Value | CSS Output | Description |
+|-------|------------|-------------|
+| `normal-nums` | `font-variant-numeric: normal` | Normal numbers |
+| `ordinal` | `font-variant-numeric: ordinal` | Ordinal markers |
+| `slashed-zero` | `font-variant-numeric: slashed-zero` | Slashed zero |
+| `lining-nums` | `font-variant-numeric: lining-nums` | Lining numbers |
+| `oldstyle-nums` | `font-variant-numeric: oldstyle-nums` | Oldstyle numbers |
+| `proportional-nums` | `font-variant-numeric: proportional-nums` | Proportional numbers |
+| `tabular-nums` | `font-variant-numeric: tabular-nums` | Tabular numbers |
+
+## Examples
+
+```html
+<span visual="tabular-nums">123,456.00</span>
+```
+
+## Responsive
+
+```html
+<!-- Responsive example -->
+<div visual="mob:... tab:... lap:...">
+  Responsive content
+</div>
+```

package/docs/reference/visual/font-weight.md

@@ -0,0 +1,31 @@
+# Font Weight
+
+Set font weight
+
+## Syntax
+```
+visual="font:[weight]"
+```
+
+## Values
+
+| Value | CSS Output | Description |
+|-------|------------|-------------|
+| `normal` | `font-weight: var(--fw-normal)` | Normal weight |
+| `medium` | `font-weight: var(--fw-medium)` | Medium weight |
+| `bold` | `font-weight: var(--fw-bold)` | Bold weight |
+
+## Examples
+
+```html
+<div visual="font:bold">Bold text</div>
+```
+
+## Responsive
+
+```html
+<!-- Responsive example -->
+<div visual="mob:... tab:... lap:...">
+  Responsive content
+</div>
+```

package/docs/reference/visual/forced-color-adjust.md

@@ -0,0 +1,30 @@
+# Forced Color Adjust
+
+Control forced colors mode behavior
+
+## Syntax
+```
+visual="forced-color:[value]"
+```
+
+## Values
+
+| Value | CSS Output | Description |
+|-------|------------|-------------|
+| `auto` | `forced-color-adjust: auto` | Auto adjust |
+| `none` | `forced-color-adjust: none` | No adjustment |
+
+## Examples
+
+```html
+<div visual="forced-color:none">Preserve colors in high contrast</div>
+```
+
+## Responsive
+
+```html
+<!-- Responsive example -->
+<div visual="mob:... tab:... lap:...">
+  Responsive content
+</div>
+```

package/docs/reference/visual/hyphens.md

@@ -0,0 +1,31 @@
+# Hyphens
+
+Control hyphenation
+
+## Syntax
+```
+visual="hyphens:[value]"
+```
+
+## Values
+
+| Value | CSS Output | Description |
+|-------|------------|-------------|
+| `none` | `hyphens: none` | No hyphens |
+| `manual` | `hyphens: manual` | Manual hyphens |
+| `auto` | `hyphens: auto` | Auto hyphens |
+
+## Examples
+
+```html
+<p visual="hyphens:auto">Automatic hyphenation</p>
+```
+
+## Responsive
+
+```html
+<!-- Responsive example -->
+<div visual="mob:... tab:... lap:...">
+  Responsive content
+</div>
+```