@bookklik/senangstart-css 0.2.3 → 0.2.4

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,7 +159,7 @@ 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'
     }

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'
     }

package/src/definitions/visual-svg.js

@@ -66,8 +66,8 @@ export const svgStroke = {
       description: 'Stroke SVG elements with color',
       descriptionMs: 'Guris elemen SVG dengan warna',
       html: `<div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
-  <svg visual="stroke:primary fill:none" width="40" height="40" viewBox="0 0 24 24" style="stroke-width: 2px;"><circle cx="12" cy="12" r="10"/></svg>
-  <svg visual="stroke:danger fill:none" width="40" height="40" viewBox="0 0 24 24" style="stroke-width: 2px;"><circle cx="12" cy="12" r="10"/></svg>
+  <svg visual="stroke:primary fill:none stroke-w:2" width="40" height="40" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/></svg>
+  <svg visual="stroke:danger fill:none stroke-w:2" width="40" height="40" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/></svg>
 </div>`,
       highlightValue: 'stroke:primary'
     }
@@ -102,9 +102,9 @@ export const svgStrokeWidth = {
       description: 'Control SVG stroke thickness',
       descriptionMs: 'Kawal ketebalan gurisan SVG',
       html: `<div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
-  <svg visual="stroke:primary fill:none" width="40" height="40" viewBox="0 0 24 24" style="stroke-width: 1px;"><circle cx="12" cy="12" r="10"/></svg>
-  <svg visual="stroke:primary fill:none" width="40" height="40" viewBox="0 0 24 24" style="stroke-width: 2px;"><circle cx="12" cy="12" r="10"/></svg>
-  <svg visual="stroke:primary fill:none" width="40" height="40" viewBox="0 0 24 24" style="stroke-width: 3px;"><circle cx="12" cy="12" r="10"/></svg>
+  <svg visual="stroke:primary fill:none stroke-w:1" width="40" height="40" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/></svg>
+  <svg visual="stroke:primary fill:none stroke-w:2" width="40" height="40" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/></svg>
+  <svg visual="stroke:primary fill:none stroke-w:3" width="40" height="40" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/></svg>
 </div>`,
       highlightValue: 'stroke-w:2'
     }

package/tests/unit/convert-tailwind.test.js

@@ -129,6 +129,14 @@ describe('convertClass', () => {
       assert.deepStrictEqual(convertClass('cursor-pointer'), { category: 'visual', value: 'cursor:pointer' });
       assert.deepStrictEqual(convertClass('cursor-not-allowed'), { category: 'visual', value: 'cursor:not-allowed' });
     });
+
+    it('should convert gradient classes', () => {
+      assert.deepStrictEqual(convertClass('bg-gradient-to-r'), { category: 'visual', value: 'bg-image:gradient-to-r' });
+      assert.deepStrictEqual(convertClass('bg-gradient-to-br'), { category: 'visual', value: 'bg-image:gradient-to-br' });
+      assert.deepStrictEqual(convertClass('from-blue-500'), { category: 'visual', value: 'from:blue-500' });
+      assert.deepStrictEqual(convertClass('via-purple-500'), { category: 'visual', value: 'via:purple-500' });
+      assert.deepStrictEqual(convertClass('to-pink-500'), { category: 'visual', value: 'to:pink-500' });
+    });
   });
 
   describe('Prefixed classes', () => {