@bookklik/senangstart-css 0.2.3 → 0.2.5

package/src/cdn/{jit.js → senangstart-engine.js}

@@ -24,13 +24,42 @@ import { tokenize, parseToken } from '../core/tokenizer-core.js';
   const defaultConfig = {
     theme: {
       spacing: {
-        'none':   '0px',
-        'tiny':   '4px',
-        'small':  '8px',
-        'medium': '16px',
-        'big':    '32px',
-        'giant':  '64px',
-        'vast':   '128px'
+      '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',
+        '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',
@@ -202,6 +231,15 @@ import { tokenize, parseToken } from '../core/tokenizer-core.js';
         'mid':    '50',
         'high':   '100',
         'top':    '9999'
+      },
+      ring: {
+        'none':    '0px',
+        'thin':    '1px',
+        'regular': '2px',
+        'thick':   '3px',
+        'small':   '4px',
+        'medium':  '6px',
+        'big':     '8px'
       }
     },
     // Dark mode configuration
@@ -229,7 +267,8 @@ import { tokenize, parseToken } from '../core/tokenizer-core.js';
         fontWeight: { type: 'object' },
         screens: { type: 'object' },
         colors: { type: 'object' },
-        zIndex: { type: 'object' }
+        zIndex: { type: 'object' },
+        ring: { type: 'object' }
       }
     },
     darkMode: { type: 'string', enum: ['media', 'selector'] },
@@ -355,6 +394,17 @@ import { tokenize, parseToken } from '../core/tokenizer-core.js';
       css += `  --z-${key}: ${value};\n`;
     }
     
+    // Ring (focus ring utilities)
+    if (theme.ring) {
+      for (const [key, value] of Object.entries(theme.ring)) {
+        css += `  --ring-${key}: ${value};\n`;
+      }
+    }
+    // Ring default values
+    css += `  --ring-color: var(--c-primary);\n`;
+    css += `  --ring-offset: 0px;\n`;
+    css += `  --ring-offset-color: #fff;\n`;
+    
     // ============================================
     // TAILWIND SCALE COMPATIBILITY (tw-* prefix)
     // ============================================
@@ -1658,6 +1708,22 @@ img, video {
         return `background-image: ${cssValue};`;
       },
       
+      // ============================================
+      // GRADIENT COLOR STOPS
+      // ============================================
+      'from': () => {
+        const color = isArbitrary ? value : `var(--c-${value})`;
+        return `--tw-gradient-from: ${color}; --tw-gradient-to: transparent; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);`;
+      },
+      'via': () => {
+        const color = isArbitrary ? value : `var(--c-${value})`;
+        return `--tw-gradient-via: ${color}; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-via), var(--tw-gradient-to);`;
+      },
+      'to': () => {
+        const color = isArbitrary ? value : `var(--c-${value})`;
+        return `--tw-gradient-to: ${color};`;
+      },
+      
       // ============================================
       // BACKDROP FILTER UTILITIES
       // ============================================
@@ -1875,6 +1941,29 @@ img, video {
         return `outline-offset: ${cssValue};`;
       },
       
+      // ============================================
+      // RING UTILITIES (Focus Ring)
+      // ============================================
+      'ring': () => {
+        if (value === 'none') {
+          return `box-shadow: 0 0 0 0 transparent;`;
+        }
+        const cssValue = isArbitrary ? value : `var(--ring-${value})`;
+        return `box-shadow: 0 0 0 var(--ring-offset) var(--ring-offset-color), 0 0 0 calc(${cssValue} + var(--ring-offset)) var(--ring-color);`;
+      },
+      'ring-color': () => {
+        const cssValue = isArbitrary ? value : `var(--c-${value})`;
+        return `--ring-color: ${cssValue};`;
+      },
+      'ring-offset': () => {
+        const cssValue = isArbitrary ? value : `${value}px`;
+        return `--ring-offset: ${cssValue};`;
+      },
+      'ring-offset-color': () => {
+        const cssValue = isArbitrary ? value : `var(--c-${value})`;
+        return `--ring-offset-color: ${cssValue};`;
+      },
+      
       // ============================================
       // SVG UTILITIES
       // ============================================