@bookklik/senangstart-css 0.2.3 → 0.2.5

package/src/config/defaults.js

@@ -32,19 +32,45 @@ export const defaultConfig = {
   preflight: true,
 
   theme: {
-    // 1. SPACING: The "Natural Object" Scale
+    // 1. SPACING: The "Natural Object" Scale with multiplier variants
     // Logic: How big is the object/gap physically?
     spacing: {
-      'none':   '0px',      // No space
-      'thin':   '1px',      // Hairline (for borders)
-      'regular': '2px',     // Standard border
-      'thick':  '3px',      // Bold border
-      'tiny':   '4px',      // Pebble (Small offsets)
-      'small':  '8px',      // Matchbox (Grouping inside components)
-      'medium': '16px',     // Smartphone (Standard default)
-      'big':    '32px',     // Laptop (Separation between groups)
-      'giant':  '64px',     // Door (Layout sections)
-      'vast':   '128px'     // House (Hero sections)
+      'none':      '0px',       // No space
+      'thin':      '1px',       // Hairline (for borders)
+      'regular':   '2px',       // Standard border
+      'thick':     '3px',       // Bold border
+      'tiny':      '4px',       // Small offsets
+      'tiny-2x':   '6px',       // Tiny multiplied
+      'small':     '8px',       // Grouping inside components
+      'small-2x':  '10px',      // 
+      'small-3x':  '12px',      // 
+      'small-4x':  '14px',      // 
+      'medium':    '16px',      // Standard default
+      'medium-2x': '20px',      // 
+      'medium-3x': '24px',      // 
+      'medium-4x': '28px',      // 
+      'large':     '32px',      // Separation between groups
+      'large-2x':  '36px',      // 
+      'large-3x':  '40px',      // 
+      'large-4x':  '44px',      // 
+      'big':       '48px',      // Layout sections
+      'big-2x':    '56px',      // 
+      'big-3x':    '64px',      // 
+      'big-4x':    '80px',      // 
+      'giant':     '96px',      // Hero sections
+      'giant-2x':  '112px',     // 
+      'giant-3x':  '128px',     // 
+      'giant-4x':  '144px',     // 
+      'vast':      '160px',     // Page-level spacing
+      'vast-2x':   '176px',     // 
+      'vast-3x':   '192px',     // 
+      'vast-4x':   '208px',     // 
+      'vast-5x':   '224px',     // 
+      'vast-6x':   '240px',     // 
+      'vast-7x':   '256px',     // 
+      'vast-8x':   '288px',     // 
+      'vast-9x':   '320px',     // 
+      'vast-10x':  '384px',     // 
     },
 
     // 2. RADIUS: Tactile Feel

package/src/core/constants.js

@@ -7,7 +7,7 @@
 export const BREAKPOINTS = ['mob', 'tab', 'lap', 'desk', 'tw-sm', 'tw-md', 'tw-lg', 'tw-xl', 'tw-2xl'];
 
 // State prefixes
-export const STATES = ['hover', 'focus', 'active', 'disabled', 'dark'];
+export const STATES = ['hover', 'focus', 'focus-visible', 'active', 'disabled', 'dark'];
 
 // Layout keywords (no colon syntax)
 export const LAYOUT_KEYWORDS = [
@@ -204,13 +204,42 @@ export const TYPOGRAPHY_KEYWORDS = {
 // Default theme configuration
 export const DEFAULT_THEME = {
   spacing: {
-    'none':   '0px',
-    'tiny':   '4px',
-    'small':  '8px',
-    'medium': '16px',
-    'big':    '32px',
-    'giant':  '64px',
-    'vast':   '128px'
+    'none':      '0px',
+    'thin':      '1px',
+    'regular':   '2px',
+    'thick':     '3px',
+    'tiny':      '4px',
+    'tiny-2x':   '6px',
+    'small':     '8px',
+    'small-2x':  '10px',
+    'small-3x':  '12px',
+    'small-4x':  '14px',
+    'medium':    '16px',
+    'medium-2x': '20px',
+    'medium-3x': '24px',
+    'medium-4x': '28px',
+    'large':     '32px',
+    'large-2x':  '36px',
+    'large-3x':  '40px',
+    'large-4x':  '44px',
+    'big':       '48px',
+    'big-2x':    '56px',
+    'big-3x':    '64px',
+    'big-4x':    '80px',
+    'giant':     '96px',
+    'giant-2x':  '112px',
+    'giant-3x':  '128px',
+    'giant-4x':  '144px',
+    'vast':      '160px',
+    'vast-2x':   '176px',
+    'vast-3x':   '192px',
+    'vast-4x':   '208px',
+    'vast-5x':   '224px',
+    'vast-6x':   '240px',
+    'vast-7x':   '256px',
+    'vast-8x':   '288px',
+    'vast-9x':   '320px',
+    'vast-10x':  '384px'
   },
   radius: {
     'none':   '0px',

package/src/definitions/layout-positioning.js

@@ -33,7 +33,7 @@ export const position = {
       descriptionMs: 'Elemen diletakkan relatif kepada aliran normal',
       html: `<div layout="relative" space="p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
   <span space="p:small" visual="bg:primary text:white rounded:small">Relative Container</span>
-  <span layout="absolute" style="top: 0; right: 0;" space="p:tiny" visual="bg:danger text:white rounded:small">Abs</span>
+  <span layout="absolute top:0 right:0" space="p:tiny" visual="bg:danger text:white rounded:small">Abs</span>
 </div>`,
       highlightValue: 'relative'
     },
@@ -43,7 +43,7 @@ export const position = {
       description: 'Element sticks when scrolling past it',
       descriptionMs: 'Elemen melekat apabila skrol melepasi',
       html: `<div space="p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
-  <span layout="sticky" style="top: 0;" space="p:small" visual="bg:primary text:white rounded:small">Sticky Header</span>
+  <span layout="sticky top:0" space="p:small" visual="bg:primary text:white rounded:small">Sticky Header</span>
 </div>`,
       highlightValue: 'sticky'
     }
@@ -133,10 +133,10 @@ export const zIndex = {
       description: 'Control stacking order of positioned elements',
       descriptionMs: 'Kawal susunan tindanan elemen yang diletakkan',
       html: `<div layout="relative" space="p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium" style="height: 80px;">
-  <span layout="absolute z:base" style="left: 0; top: 10px;" space="p:small" visual="bg:neutral-400 text:white rounded:small">z:base</span>
-  <span layout="absolute z:low" style="left: 30px; top: 20px;" space="p:small" visual="bg:neutral-500 text:white rounded:small">z:low</span>
-  <span layout="absolute z:mid" style="left: 60px; top: 30px;" space="p:small" visual="bg:neutral-600 text:white rounded:small">z:mid</span>
-  <span layout="absolute z:high" style="left: 90px; top: 40px;" space="p:small" visual="bg:primary text:white rounded:small">z:high</span>
+  <span layout="absolute z:base left:0 top:10px" space="p:small" visual="bg:neutral-400 text:white rounded:small">z:base</span>
+  <span layout="absolute z:low left:30px top:20px" space="p:small" visual="bg:neutral-500 text:white rounded:small">z:low</span>
+  <span layout="absolute z:mid left:60px top:30px" space="p:small" visual="bg:neutral-600 text:white rounded:small">z:mid</span>
+  <span layout="absolute z:high left:90px top:40px" space="p:small" visual="bg:primary text:white rounded:small">z:high</span>
 </div>`,
       highlightValue: 'z:high'
     }

package/src/definitions/space.js

@@ -24,7 +24,15 @@ export const padding = {
     { property: 'p-x', css: 'padding-left: var(--s-{value}); padding-right: var(--s-{value});', description: 'Horizontal', descriptionMs: 'Mendatar' },
     { property: 'p-y', css: 'padding-top: var(--s-{value}); padding-bottom: var(--s-{value});', description: 'Vertical', descriptionMs: 'Menegak' }
   ],
-  scaleValues: ['none', 'tiny', 'small', 'medium', 'big', 'giant', 'vast'],
+  scaleValues: [
+    'none', 'thin', 'regular', 'thick', 'tiny', 'tiny-2x', 
+    'small', 'small-2x', 'small-3x', 'small-4x',
+    'medium', 'medium-2x', 'medium-3x', 'medium-4x',
+    'large', 'large-2x', 'large-3x', 'large-4x',
+    'big', 'big-2x', 'big-3x', 'big-4x',
+    'giant', 'giant-2x', 'giant-3x', 'giant-4x',
+    'vast', 'vast-2x', 'vast-3x', 'vast-4x', 'vast-5x', 'vast-6x', 'vast-7x', 'vast-8x', 'vast-9x', 'vast-10x'
+  ],
   supportsArbitrary: true,
   examples: [
     { code: '<div space="p:medium">Padding all sides</div>', description: 'Medium padding' },
@@ -89,7 +97,16 @@ export const margin = {
     { property: 'm-x', css: 'margin-left: var(--s-{value}); margin-right: var(--s-{value});', description: 'Horizontal', descriptionMs: 'Mendatar' },
     { property: 'm-y', css: 'margin-top: var(--s-{value}); margin-bottom: var(--s-{value});', description: 'Vertical', descriptionMs: 'Menegak' }
   ],
-  scaleValues: ['none', 'tiny', 'small', 'medium', 'big', 'giant', 'vast', 'auto'],
+  scaleValues: [
+    'none', 'thin', 'regular', 'thick', 'tiny', 'tiny-2x', 
+    'small', 'small-2x', 'small-3x', 'small-4x',
+    'medium', 'medium-2x', 'medium-3x', 'medium-4x',
+    'large', 'large-2x', 'large-3x', 'large-4x',
+    'big', 'big-2x', 'big-3x', 'big-4x',
+    'giant', 'giant-2x', 'giant-3x', 'giant-4x',
+    'vast', 'vast-2x', 'vast-3x', 'vast-4x', 'vast-5x', 'vast-6x', 'vast-7x', 'vast-8x', 'vast-9x', 'vast-10x',
+    'auto'
+  ],
   supportsArbitrary: true,
   examples: [
     { code: '<div space="m:medium">Margin all sides</div>', description: 'Medium margin' },
@@ -148,7 +165,15 @@ export const gap = {
     { property: 'g-x', css: 'column-gap: var(--s-{value});', description: 'Column gap', descriptionMs: 'Ruang lajur' },
     { property: 'g-y', css: 'row-gap: var(--s-{value});', description: 'Row gap', descriptionMs: 'Ruang baris' }
   ],
-  scaleValues: ['none', 'tiny', 'small', 'medium', 'big', 'giant', 'vast'],
+  scaleValues: [
+    'none', 'thin', 'regular', 'thick', 'tiny', 'tiny-2x', 
+    'small', 'small-2x', 'small-3x', 'small-4x',
+    'medium', 'medium-2x', 'medium-3x', 'medium-4x',
+    'large', 'large-2x', 'large-3x', 'large-4x',
+    'big', 'big-2x', 'big-3x', 'big-4x',
+    'giant', 'giant-2x', 'giant-3x', 'giant-4x',
+    'vast', 'vast-2x', 'vast-3x', 'vast-4x', 'vast-5x', 'vast-6x', 'vast-7x', 'vast-8x', 'vast-9x', 'vast-10x'
+  ],
   supportsArbitrary: true,
   examples: [
     { code: '<div layout="flex" space="g:medium">Gap between items</div>', description: 'Flex gap' },
@@ -211,7 +236,15 @@ export const width = {
     { property: 'min-w', css: 'min-width: var(--s-{value});', description: 'Minimum width', descriptionMs: 'Lebar minimum' },
     { property: 'max-w', css: 'max-width: var(--s-{value});', description: 'Maximum width', descriptionMs: 'Lebar maksimum' }
   ],
-  scaleValues: ['none', 'tiny', 'small', 'medium', 'big', 'giant', 'vast'],
+  scaleValues: [
+    'none', 'thin', 'regular', 'thick', 'tiny', 'tiny-2x', 
+    'small', 'small-2x', 'small-3x', 'small-4x',
+    'medium', 'medium-2x', 'medium-3x', 'medium-4x',
+    'large', 'large-2x', 'large-3x', 'large-4x',
+    'big', 'big-2x', 'big-3x', 'big-4x',
+    'giant', 'giant-2x', 'giant-3x', 'giant-4x',
+    'vast', 'vast-2x', 'vast-3x', 'vast-4x', 'vast-5x', 'vast-6x', 'vast-7x', 'vast-8x', 'vast-9x', 'vast-10x'
+  ],
   supportsArbitrary: true,
   examples: [
     { code: '<div space="w:[100%]">Full width</div>', description: 'Full width' },
@@ -270,7 +303,15 @@ export const height = {
     { property: 'min-h', css: 'min-height: var(--s-{value});', description: 'Minimum height', descriptionMs: 'Tinggi minimum' },
     { property: 'max-h', css: 'max-height: var(--s-{value});', description: 'Maximum height', descriptionMs: 'Tinggi maksimum' }
   ],
-  scaleValues: ['none', 'tiny', 'small', 'medium', 'big', 'giant', 'vast'],
+  scaleValues: [
+    'none', 'thin', 'regular', 'thick', 'tiny', 'tiny-2x', 
+    'small', 'small-2x', 'small-3x', 'small-4x',
+    'medium', 'medium-2x', 'medium-3x', 'medium-4x',
+    'large', 'large-2x', 'large-3x', 'large-4x',
+    'big', 'big-2x', 'big-3x', 'big-4x',
+    'giant', 'giant-2x', 'giant-3x', 'giant-4x',
+    'vast', 'vast-2x', 'vast-3x', 'vast-4x', 'vast-5x', 'vast-6x', 'vast-7x', 'vast-8x', 'vast-9x', 'vast-10x'
+  ],
   supportsArbitrary: true,
   examples: [
     { code: '<div space="h:[100vh]">Full viewport height</div>', description: 'Full height' },

package/src/definitions/visual-backgrounds.js

@@ -32,8 +32,8 @@ export const backgroundImage = {
       description: 'Apply gradient backgrounds',
       descriptionMs: 'Terapkan latar gradien',
       html: `<div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
-  <div space="p:medium" visual="text:white rounded:small" style="background-image: linear-gradient(to right, #3b82f6, #8b5cf6);">gradient-to-r</div>
-  <div space="p:medium" visual="text:white rounded:small" style="background-image: linear-gradient(to bottom, #10b981, #3b82f6);">gradient-to-b</div>
+  <div space="p:medium" visual="bg-image:gradient-to-r from:blue-500 to:violet-500 text:white rounded:small">gradient-to-r</div>
+  <div space="p:medium" visual="bg-image:gradient-to-b from:emerald-500 to:blue-500 text:white rounded:small">gradient-to-b</div>
 </div>`,
       highlightValue: 'bg-image:gradient-to-r'
     }
@@ -101,7 +101,7 @@ export const backgroundClip = {
       description: 'Clip background to text for gradient text effect',
       descriptionMs: 'Keratan latar kepada teks untuk kesan teks gradien',
       html: `<div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
-  <span style="font-size: 1.5rem; font-weight: bold; background: linear-gradient(to right, #3b82f6, #8b5cf6); -webkit-background-clip: text; background-clip: text; color: transparent;">Gradient Text</span>
+  <span text="size:large weight:bold" visual="bg-image:gradient-to-r from:blue-500 to:violet-500 bg-clip:text text:transparent">Gradient Text</span>
 </div>`,
       highlightValue: 'bg-clip:text'
     }
@@ -327,8 +327,8 @@ export const backdropBlur = {
       titleMs: 'Kabur Latar Belakang',
       description: 'Creates a frosted glass effect on content behind the element',
       descriptionMs: 'Mencipta kesan kaca beku pada kandungan di belakang elemen',
-      html: `<div layout="relative" space="p:medium" visual="rounded:medium" style="background: linear-gradient(135deg, #3b82f6, #8b5cf6); min-height: 100px;">
-  <div layout="absolute" style="top: 50%; left: 50%; transform: translate(-50%, -50%); backdrop-filter: blur(8px); background: rgba(255,255,255,0.2); padding: 1rem; border-radius: 0.5rem;">
+      html: `<div layout="flex:center" space="p:large" visual="bg-image:gradient-to-br from:blue-500 to:violet-500 rounded:medium">
+  <div space="p:medium" visual="backdrop-blur:medium bg:[rgba(255,255,255,0.2)] rounded:small">
     <span visual="text:white">Frosted Glass</span>
   </div>
 </div>`,
@@ -365,10 +365,10 @@ export const backdropBrightness = {
       titleMs: 'Kecerahan Latar Belakang',
       description: 'Dim or brighten the backdrop behind an overlay',
       descriptionMs: 'Redupkan atau cerahkan latar belakang di sebalik tindanan',
-      html: `<div layout="flex" space="g:medium p:medium" visual="rounded:medium" style="background: linear-gradient(135deg, #f97316, #ef4444);">
-  <div space="p:small" visual="rounded:small text:white" style="backdrop-filter: brightness(0.5);">dim (50%)</div>
-  <div space="p:small" visual="rounded:small text:white" style="backdrop-filter: brightness(1);">normal</div>
-  <div space="p:small" visual="rounded:small text:white" style="backdrop-filter: brightness(1.5);">bright (150%)</div>
+      html: `<div layout="flex" space="g:medium p:medium" visual="bg-image:gradient-to-br from:orange-500 to:red-500 rounded:medium">
+  <div space="p:small" visual="backdrop-brightness:dim rounded:small text:white">dim (50%)</div>
+  <div space="p:small" visual="backdrop-brightness:normal rounded:small text:white">normal</div>
+  <div space="p:small" visual="backdrop-brightness:vivid rounded:small text:white">bright (150%)</div>
 </div>`,
       highlightValue: 'backdrop-brightness:dark'
     }
@@ -439,9 +439,9 @@ export const backdropGrayscale = {
       titleMs: 'Skala Kelabu Latar Belakang',
       description: 'Remove color from backdrop, creating a desaturated effect',
       descriptionMs: 'Alih keluar warna dari latar belakang, mencipta kesan tidak tepu',
-      html: `<div layout="flex" space="g:medium" visual="rounded:medium">
-  <div space="p:small" visual="rounded:small text:white" style="background: linear-gradient(135deg, #3b82f6, #10b981);">Original</div>
-  <div space="p:small" visual="rounded:small text:white" style="background: linear-gradient(135deg, #3b82f6, #10b981); filter: grayscale(100%);">Grayscale</div>
+      html: `<div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <div space="p:small" visual="bg-image:gradient-to-br from:blue-500 to:emerald-500 rounded:small text:white">Original</div>
+  <div space="p:small" visual="bg-image:gradient-to-br from:blue-500 to:emerald-500 filter-grayscale:full rounded:small text:white">Grayscale</div>
 </div>`,
       highlightValue: 'backdrop-grayscale:full'
     }
@@ -621,15 +621,110 @@ export const backdropSepia = {
       titleMs: 'Sepia Latar Belakang',
       description: 'Apply vintage sepia tone to the backdrop',
       descriptionMs: 'Terapkan ton sepia vintaj pada latar belakang',
-      html: `<div layout="flex" space="g:medium" visual="rounded:medium">
-  <div space="p:small" visual="rounded:small text:white" style="background: linear-gradient(135deg, #3b82f6, #10b981);">Original</div>
-  <div space="p:small" visual="rounded:small text:white" style="background: linear-gradient(135deg, #3b82f6, #10b981); filter: sepia(100%);">Sepia</div>
+      html: `<div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <div space="p:small" visual="bg-image:gradient-to-br from:blue-500 to:emerald-500 rounded:small text:white">Original</div>
+  <div space="p:small" visual="bg-image:gradient-to-br from:blue-500 to:emerald-500 filter-sepia:full rounded:small text:white">Sepia</div>
 </div>`,
       highlightValue: 'backdrop-sepia:full'
     }
   ]
 };
 
+// ======================
+// GRADIENT COLOR STOPS
+// ======================
+
+export const gradientFrom = {
+  name: 'gradient-from',
+  property: 'visual',
+  syntax: 'visual="from:[color]"',
+  description: 'Set gradient start color',
+  descriptionMs: 'Tetapkan warna mula gradien',
+  category: 'visual',
+  usesScale: 'colors',
+  supportsArbitrary: true,
+  values: [
+    { value: 'primary', css: '--tw-gradient-from: var(--c-primary); --tw-gradient-to: transparent; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);', description: 'Start from primary', descriptionMs: 'Mula dari utama' },
+    { value: 'blue-500', css: '--tw-gradient-from: var(--c-blue-500); --tw-gradient-to: transparent; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);', description: 'Start from blue', descriptionMs: 'Mula dari biru' }
+  ],
+  examples: [
+    { code: '<div visual="bg-image:gradient-to-r from:blue-500 to:purple-500">Gradient</div>', description: 'Blue to purple gradient' }
+  ],
+  preview: [
+    {
+      title: 'Gradient From',
+      titleMs: 'Mula Gradien',
+      description: 'Set the starting color of a gradient',
+      descriptionMs: 'Tetapkan warna permulaan gradien',
+      html: `<div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <div space="p:medium" visual="bg-image:gradient-to-r from:blue-500 to:purple-500 text:white rounded:small">from:blue-500 to:purple-500</div>
+  <div space="p:medium" visual="bg-image:gradient-to-r from:emerald-500 to:blue-500 text:white rounded:small">from:emerald-500 to:blue-500</div>
+</div>`,
+      highlightValue: 'from:blue-500'
+    }
+  ]
+};
+
+export const gradientVia = {
+  name: 'gradient-via',
+  property: 'visual',
+  syntax: 'visual="via:[color]"',
+  description: 'Set gradient middle color',
+  descriptionMs: 'Tetapkan warna tengah gradien',
+  category: 'visual',
+  usesScale: 'colors',
+  supportsArbitrary: true,
+  values: [
+    { value: 'purple-500', css: '--tw-gradient-via: var(--c-purple-500); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-via), var(--tw-gradient-to);', description: 'Via purple', descriptionMs: 'Melalui ungu' }
+  ],
+  examples: [
+    { code: '<div visual="bg-image:gradient-to-r from:blue-500 via:purple-500 to:pink-500">Three-color gradient</div>', description: 'Three-color gradient' }
+  ],
+  preview: [
+    {
+      title: 'Gradient Via',
+      titleMs: 'Pertengahan Gradien',
+      description: 'Add a middle color stop to gradients',
+      descriptionMs: 'Tambah hentian warna tengah pada gradien',
+      html: `<div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <div space="p:medium" visual="bg-image:gradient-to-r from:blue-500 via:purple-500 to:pink-500 text:white rounded:small">from:blue via:purple to:pink</div>
+</div>`,
+      highlightValue: 'via:purple-500'
+    }
+  ]
+};
+
+export const gradientTo = {
+  name: 'gradient-to',
+  property: 'visual',
+  syntax: 'visual="to:[color]"',
+  description: 'Set gradient end color',
+  descriptionMs: 'Tetapkan warna akhir gradien',
+  category: 'visual',
+  usesScale: 'colors',
+  supportsArbitrary: true,
+  values: [
+    { value: 'purple-500', css: '--tw-gradient-to: var(--c-purple-500);', description: 'End at purple', descriptionMs: 'Akhir di ungu' },
+    { value: 'pink-500', css: '--tw-gradient-to: var(--c-pink-500);', description: 'End at pink', descriptionMs: 'Akhir di merah jambu' }
+  ],
+  examples: [
+    { code: '<div visual="bg-image:gradient-to-r from:blue-500 to:purple-500">Blue to purple</div>', description: 'End color' }
+  ],
+  preview: [
+    {
+      title: 'Gradient To',
+      titleMs: 'Akhir Gradien',
+      description: 'Set the ending color of a gradient',
+      descriptionMs: 'Tetapkan warna pengakhiran gradien',
+      html: `<div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <div space="p:medium" visual="bg-image:gradient-to-r from:blue-500 to:purple-500 text:white rounded:small">to:purple-500</div>
+  <div space="p:medium" visual="bg-image:gradient-to-r from:blue-500 to:pink-500 text:white rounded:small">to:pink-500</div>
+</div>`,
+      highlightValue: 'to:purple-500'
+    }
+  ]
+};
+
 // Export all background/backdrop definitions
 export const backgroundDefinitions = {
   backgroundImage,
@@ -640,6 +735,9 @@ export const backgroundDefinitions = {
   backgroundRepeat,
   backgroundSize,
   backgroundBlendMode,
+  gradientFrom,
+  gradientVia,
+  gradientTo,
   backdropBlur,
   backdropBrightness,
   backdropContrast,

package/src/definitions/visual-borders.js

@@ -159,19 +159,98 @@ export const outlineColor = {
       description: 'Outline does not affect layout',
       descriptionMs: 'Garis luar tidak mempengaruhi susun atur',
       html: `<div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
-  <button space="p:small" visual="outline:primary bg:white dark:bg:neutral-800 rounded:small" style="outline-width: 2px; outline-style: solid;">outline:primary</button>
+  <button space="p:small" visual="outline:primary bg:white dark:bg:neutral-800 rounded:small">outline:primary</button>
 </div>`,
       highlightValue: 'outline:primary'
     }
   ]
 };
 
+// ======================
+// RING (Focus Ring)
+// ======================
+
+export const ring = {
+  name: 'ring',
+  property: 'visual',
+  syntax: 'visual="ring:[size]"',
+  description: 'Add focus ring around element using box-shadow',
+  descriptionMs: 'Tambah cincin fokus pada elemen menggunakan box-shadow',
+  category: 'visual',
+  usesScale: 'ring',
+  supportsArbitrary: true,
+  values: [
+    { value: 'none', css: 'box-shadow: 0 0 0 0 transparent;', description: 'No ring', descriptionMs: 'Tiada cincin' },
+    { value: 'thin', css: 'box-shadow: 0 0 0 1px var(--ring-color);', description: 'Thin ring (1px)', descriptionMs: 'Cincin nipis (1px)' },
+    { value: 'regular', css: 'box-shadow: 0 0 0 2px var(--ring-color);', description: 'Regular ring (2px)', descriptionMs: 'Cincin biasa (2px)' },
+    { value: 'small', css: 'box-shadow: 0 0 0 4px var(--ring-color);', description: 'Small ring (4px)', descriptionMs: 'Cincin kecil (4px)' },
+    { value: 'medium', css: 'box-shadow: 0 0 0 6px var(--ring-color);', description: 'Medium ring (6px)', descriptionMs: 'Cincin sederhana (6px)' },
+    { value: 'big', css: 'box-shadow: 0 0 0 8px var(--ring-color);', description: 'Big ring (8px)', descriptionMs: 'Cincin besar (8px)' }
+  ],
+  examples: [
+    { code: '<button visual="focus-visible:ring:small ring-color:primary">Focus me</button>', description: 'Focus ring on keyboard focus' },
+    { code: '<input visual="focus:ring:regular ring-color:blue-500">', description: 'Input with focus ring' }
+  ],
+  preview: [
+    {
+      title: 'Focus Ring',
+      titleMs: 'Cincin Fokus',
+      description: 'Ring appears on keyboard focus (try Tab key)',
+      descriptionMs: 'Cincin muncul pada fokus papan kekunci (cuba kekunci Tab)',
+      html: `<div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <button space="p:small p-x:medium" visual="bg:primary text:white rounded:small focus-visible:ring:small ring-color:blue-300">Tab to me</button>
+  <button space="p:small p-x:medium" visual="bg:white dark:bg:neutral-800 border:neutral-300 border-w:thin rounded:small focus-visible:ring:small ring-color:primary">Or me</button>
+</div>`,
+      highlightValue: 'focus-visible:ring:small'
+    }
+  ]
+};
+
+export const ringColor = {
+  name: 'ring-color',
+  property: 'visual',
+  syntax: 'visual="ring-color:[color]"',
+  description: 'Set ring color',
+  descriptionMs: 'Tetapkan warna cincin',
+  category: 'visual',
+  usesScale: 'colors',
+  supportsArbitrary: true,
+  values: [
+    { value: 'primary', css: '--ring-color: var(--c-primary);', description: 'Primary ring color', descriptionMs: 'Warna cincin utama' },
+    { value: 'blue-500', css: '--ring-color: var(--c-blue-500);', description: 'Blue ring color', descriptionMs: 'Warna cincin biru' }
+  ],
+  examples: [
+    { code: '<button visual="ring:small ring-color:primary">Colored ring</button>', description: 'Ring with custom color' }
+  ]
+};
+
+export const ringOffset = {
+  name: 'ring-offset',
+  property: 'visual',
+  syntax: 'visual="ring-offset:[size]"',
+  description: 'Add gap between ring and element',
+  descriptionMs: 'Tambah ruang antara cincin dan elemen',
+  category: 'visual',
+  supportsArbitrary: true,
+  values: [
+    { value: '0', css: '--ring-offset: 0px;', description: 'No offset', descriptionMs: 'Tiada ruang' },
+    { value: '2', css: '--ring-offset: 2px;', description: '2px offset', descriptionMs: 'Ruang 2px' },
+    { value: '4', css: '--ring-offset: 4px;', description: '4px offset', descriptionMs: 'Ruang 4px' }
+  ],
+  examples: [
+    { code: '<button visual="ring:small ring-offset:2 ring-color:primary">With offset</button>', description: 'Ring with offset' }
+  ]
+};
+
 // Export all border definitions
 export const borderDefinitions = {
   borderColor,
   borderWidth,
   borderStyle,
-  outlineColor
+  outlineColor,
+  ring,
+  ringColor,
+  ringOffset
 };
 
 export default borderDefinitions;

package/src/definitions/visual-filters.js

@@ -32,9 +32,9 @@ export const filterBrightness = {
       description: 'Adjust element brightness',
       descriptionMs: 'Laraskan kecerahan elemen',
       html: `<div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
-  <div space="p:small" visual="bg:primary text:white rounded:small" style="filter: brightness(0.5);">dim</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small brightness:dim">dim</div>
   <div space="p:small" visual="bg:primary text:white rounded:small">normal</div>
-  <div space="p:small" visual="bg:primary text:white rounded:small" style="filter: brightness(1.5);">vivid</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small brightness:vivid">vivid</div>
 </div>`,
       highlightValue: 'brightness:bright'
     }
@@ -70,9 +70,9 @@ export const filterContrast = {
       description: 'Adjust element contrast',
       descriptionMs: 'Laraskan kontras elemen',
       html: `<div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
-  <div space="p:small" visual="bg:primary text:white rounded:small" style="filter: contrast(0.5);">low</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small contrast:low">low</div>
   <div space="p:small" visual="bg:primary text:white rounded:small">normal</div>
-  <div space="p:small" visual="bg:primary text:white rounded:small" style="filter: contrast(1.5);">high</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small contrast:max">high</div>
 </div>`,
       highlightValue: 'contrast:high'
     }
@@ -107,8 +107,8 @@ export const filterGrayscale = {
       descriptionMs: 'Tukar ke skala kelabu',
       html: `<div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
   <div space="p:small" visual="bg:primary text:white rounded:small">none</div>
-  <div space="p:small" visual="bg:primary text:white rounded:small" style="filter: grayscale(50%);">partial</div>
-  <div space="p:small" visual="bg:primary text:white rounded:small" style="filter: grayscale(100%);">full</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small grayscale:partial">partial</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small grayscale:full">full</div>
 </div>`,
       highlightValue: 'grayscale:full'
     }
@@ -144,8 +144,8 @@ export const filterHueRotate = {
       descriptionMs: 'Putar rona warna',
       html: `<div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
   <div space="p:small" visual="bg:primary text:white rounded:small">0°</div>
-  <div space="p:small" visual="bg:primary text:white rounded:small" style="filter: hue-rotate(90deg);">90°</div>
-  <div space="p:small" visual="bg:primary text:white rounded:small" style="filter: hue-rotate(180deg);">180°</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small hue-rotate:90">90°</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small hue-rotate:180">180°</div>
 </div>`,
       highlightValue: 'hue-rotate:90'
     }
@@ -180,7 +180,7 @@ export const filterInvert = {
       descriptionMs: 'Songsangkan warna elemen',
       html: `<div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
   <div space="p:small" visual="bg:primary text:white rounded:small">none</div>
-  <div space="p:small" visual="bg:primary text:white rounded:small" style="filter: invert(100%);">full</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small invert:full">full</div>
 </div>`,
       highlightValue: 'invert:full'
     }
@@ -216,9 +216,9 @@ export const filterSaturate = {
       description: 'Adjust color saturation',
       descriptionMs: 'Laraskan ketepuan warna',
       html: `<div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
-  <div space="p:small" visual="bg:primary text:white rounded:small" style="filter: saturate(0);">none</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small saturate:none">none</div>
   <div space="p:small" visual="bg:primary text:white rounded:small">normal</div>
-  <div space="p:small" visual="bg:primary text:white rounded:small" style="filter: saturate(2);">vivid</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small saturate:vivid">vivid</div>
 </div>`,
       highlightValue: 'saturate:vivid'
     }
@@ -253,8 +253,8 @@ export const filterSepia = {
       descriptionMs: 'Terapkan ton sepia vintaj',
       html: `<div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
   <div space="p:small" visual="bg:primary text:white rounded:small">none</div>
-  <div space="p:small" visual="bg:primary text:white rounded:small" style="filter: sepia(50%);">partial</div>
-  <div space="p:small" visual="bg:primary text:white rounded:small" style="filter: sepia(100%);">full</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small sepia:partial">partial</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small sepia:full">full</div>
 </div>`,
       highlightValue: 'sepia:full'
     }
@@ -291,9 +291,9 @@ export const filterDropShadow = {
       description: 'Add shadow to elements',
       descriptionMs: 'Tambah bayang pada elemen',
       html: `<div layout="flex" space="g:medium p:big" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
-  <div space="p:small" visual="bg:primary text:white rounded:small" style="filter: drop-shadow(0 1px 2px rgba(0,0,0,0.3));">small</div>
-  <div space="p:small" visual="bg:primary text:white rounded:small" style="filter: drop-shadow(0 4px 6px rgba(0,0,0,0.3));">medium</div>
-  <div space="p:small" visual="bg:primary text:white rounded:small" style="filter: drop-shadow(0 10px 15px rgba(0,0,0,0.3));">big</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small drop-shadow:small">small</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small drop-shadow:medium">medium</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small drop-shadow:big">big</div>
 </div>`,
       highlightValue: 'drop-shadow:medium'
     }