@bookklik/senangstart-css 0.2.4 → 0.2.5

package/src/cdn/tw-conversion-engine.js

@@ -7,83 +7,105 @@
 // MAPPING SCALES
 // ============================
 
+// Spacing scale mapping Tailwind values to SenangStart semantic values
+// Engine native values: 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)
+// Tailwind base: 4px per unit (1 = 0.25rem = 4px)
 const spacingScale = {
-  0: "none",
-  px: "[1px]",
-  0.5: "tiny",
-  1: "tiny",
-  1.5: "tiny",
-  2: "tiny",
-  2.5: "small",
-  3: "small",
-  3.5: "small",
-  4: "small",
-  5: "medium",
-  6: "medium",
-  7: "medium",
-  8: "big",
-  9: "big",
-  10: "big",
-  11: "big",
-  12: "giant",
-  14: "giant",
-  16: "giant",
-  20: "vast",
-  24: "vast",
-  28: "vast",
-  32: "vast",
-  36: "vast",
-  40: "vast",
-  44: "vast",
-  48: "vast",
-  52: "vast",
-  56: "vast",
-  60: "vast",
-  64: "vast",
-  72: "vast",
-  80: "vast",
-  96: "vast",
+  0: "none",           // 0px → none
+  px: "thin",          // 1px → thin
+  0.5: "regular",      // 2px → regular
+  1: "tiny",           // 4px → tiny
+  1.5: "tiny-2x",      // 6px → tiny-2x
+  2: "small",          // 8px → small
+  2.5: "small-2x",     // 10px → small-2x
+  3: "small-3x",       // 12px → small-3x
+  3.5: "small-4x",     // 14px → small-4x
+  4: "medium",         // 16px → medium
+  5: "medium-2x",      // 20px → medium-2x
+  6: "medium-3x",      // 24px → medium-3x
+  7: "medium-4x",      // 28px → medium-4x
+  8: "large",          // 32px → large
+  9: "large-2x",       // 36px → large-2x
+  10: "large-3x",      // 40px → large-3x
+  11: "large-4x",      // 44px → large-4x
+  12: "big",           // 48px → big
+  14: "big-2x",        // 56px → big-2x
+  16: "big-3x",        // 64px → big-3x
+  20: "big-4x",        // 80px → big-4x
+  24: "giant",         // 96px → giant
+  28: "giant-2x",      // 112px → giant-2x
+  32: "giant-3x",      // 128px → giant-3x
+  36: "giant-4x",      // 144px → giant-4x
+  40: "vast",          // 160px → vast
+  44: "vast-2x",       // 176px → vast-2x
+  48: "vast-3x",       // 192px → vast-3x
+  52: "vast-4x",       // 208px → vast-4x
+  56: "vast-5x",       // 224px → vast-5x
+  60: "vast-6x",       // 240px → vast-6x
+  64: "vast-7x",       // 256px → vast-7x
+  72: "vast-8x",       // 288px → vast-8x
+  80: "vast-9x",       // 320px → vast-9x
+  96: "vast-10x",      // 384px → vast-10x
   full: "[100%]",
   screen: "[100vw]",
   auto: "auto",
 };
 
+// Radius scale mapping Tailwind values to SenangStart semantic values
+// Engine native values: none(0px), small(4px), medium(8px), big(16px), round(9999px)
+// Tailwind: none(0), sm(0.125rem=2px), DEFAULT(0.25rem=4px), md(0.375rem=6px), 
+//           lg(0.5rem=8px), xl(0.75rem=12px), 2xl(1rem=16px), 3xl(1.5rem=24px), full(9999px)
 const radiusScale = {
-  none: "none",
-  sm: "small",
-  "": "small",
-  md: "medium",
-  lg: "medium",
-  xl: "big",
-  "2xl": "big",
-  "3xl": "big",
-  full: "round",
+  none: "none",        // 0px → none
+  sm: "small",         // 2px → small (closest to 4px)
+  "": "small",         // 4px → small (Tailwind DEFAULT)
+  md: "small",         // 6px → small (closest to 4px)
+  lg: "medium",        // 8px → medium
+  xl: "medium",        // 12px → medium (closest to 8px)
+  "2xl": "big",        // 16px → big
+  "3xl": "big",        // 24px → big (closest to 16px)
+  full: "round",       // 9999px → round
 };
 
+// Shadow scale mapping Tailwind values to SenangStart semantic values
+// Engine native values: none, small, medium, big, giant
 const shadowScale = {
-  sm: "small",
-  "": "small",
-  md: "medium",
-  lg: "big",
-  xl: "giant",
-  "2xl": "giant",
-  none: "none",
+  none: "none",        // none → none
+  sm: "small",         // small shadow → small
+  "": "small",         // DEFAULT shadow → small
+  md: "medium",        // medium shadow → medium
+  lg: "big",           // large shadow → big
+  xl: "giant",         // xl shadow → giant
+  "2xl": "giant",      // 2xl shadow → giant
+  inner: "none",       // inner shadow not directly supported
 };
 
+// Font size scale mapping Tailwind values to SenangStart semantic values
+// Engine native values: mini(0.75rem), small(0.875rem), base(1rem), large(1.125rem),
+//                       big(1.25rem), huge(1.5rem), grand(1.875rem), giant(2.25rem),
+//                       mount(3rem), mega(3.75rem), giga(4.5rem), tera(6rem), hero(8rem)
 const fontSizeScale = {
-  xs: "mini",      // 0.75rem
-  sm: "small",     // 0.875rem
-  base: "base",    // 1rem
-  lg: "large",     // 1.125rem
-  xl: "big",       // 1.25rem
-  "2xl": "huge",   // 1.5rem
-  "3xl": "grand",  // 1.875rem
-  "4xl": "giant",  // 2.25rem
-  "5xl": "mount",  // 3rem
-  "6xl": "mega",   // 3.75rem
-  "7xl": "giga",   // 4.5rem
-  "8xl": "tera",   // 6rem
-  "9xl": "hero",   // 8rem
+  xs: "mini",          // 0.75rem → mini
+  sm: "small",         // 0.875rem → small
+  base: "base",        // 1rem → base
+  lg: "large",         // 1.125rem → large
+  xl: "big",           // 1.25rem → big
+  "2xl": "huge",       // 1.5rem → huge
+  "3xl": "grand",      // 1.875rem → grand
+  "4xl": "giant",      // 2.25rem → giant
+  "5xl": "mount",      // 3rem → mount
+  "6xl": "mega",       // 3.75rem → mega
+  "7xl": "giga",       // 4.5rem → giga
+  "8xl": "tera",       // 6rem → tera
+  "9xl": "hero",       // 8rem → hero
 };
 
 const layoutMappings = {
@@ -171,6 +193,10 @@ const visualKeywords = {
 // ============================
 
 function getSpacing(value, exact) {
+  // Check if it's already an arbitrary value with brackets
+  if (value.startsWith('[') && value.endsWith(']')) {
+    return value; // Return as-is, don't double-wrap
+  }
   if (exact) {
     if (["full", "screen", "auto"].includes(value))
       return spacingScale[value] || `[${value}]`;
@@ -179,6 +205,24 @@ function getSpacing(value, exact) {
   return spacingScale[value] || `[${value}]`;
 }
 
+// Border width scale mapping Tailwind values to SenangStart semantic values
+// Engine native values: none(0), thin(1px), regular(2px), thick(3px)
+const borderWidthScale = {
+  0: "none",
+  1: "thin",           // 1px → thin (was [1px])
+  2: "regular",        // 2px → regular
+  3: "thick",          // 3px → thick
+  4: "tiny",           // 4px → tiny
+  8: "small",          // 8px → small
+};
+
+function getBorderWidth(value, exact) {
+  if (exact) {
+    return `tw-${value}`;
+  }
+  return borderWidthScale[value] || `[${value}px]`;
+}
+
 // ============================
 // CONVERSION FUNCTIONS
 // ============================
@@ -186,7 +230,7 @@ function getSpacing(value, exact) {
 function convertClass(twClass, exact) {
   // Handle prefixes (hover:, sm:, md:, etc.)
   const prefixMatch = twClass.match(
-    /^(sm:|md:|lg:|xl:|2xl:|hover:|focus:|active:|disabled:|dark:)(.+)$/
+    /^(sm:|md:|lg:|xl:|2xl:|hover:|focus:|focus-visible:|active:|disabled:|dark:)(.+)$/
   );
   let prefix = "",
     baseClass = twClass;
@@ -239,9 +283,22 @@ function convertClass(twClass, exact) {
 
   // Background color
   const bgMatch = baseClass.match(
-    /^bg-((?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose|white|black)(?:-\d+)?)$/
+    /^bg-((?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose|white|black)(?:-\d+)?|transparent|current|inherit)$/
   );
-  if (bgMatch) return { cat: "visual", val: prefix + "bg:" + bgMatch[1] };
+  if (bgMatch) {
+    const colorVal = bgMatch[1];
+    // Handle special values
+    if (colorVal === 'transparent') {
+      return { cat: "visual", val: prefix + "bg:[transparent]" };
+    }
+    if (colorVal === 'current') {
+      return { cat: "visual", val: prefix + "bg:[currentColor]" };
+    }
+    if (colorVal === 'inherit') {
+      return { cat: "visual", val: prefix + "bg:[inherit]" };
+    }
+    return { cat: "visual", val: prefix + "bg:" + colorVal };
+  }
 
   // Border color
   const borderColorMatch = baseClass.match(
@@ -350,10 +407,31 @@ function convertClass(twClass, exact) {
     const width = borderWidthMatch[2] || "1";
     return {
       cat: "visual",
-      val: prefix + "border" + side + ":[" + width + "px]",
+      val: prefix + "border" + side + ":" + getBorderWidth(width, exact),
     };
   }
 
+  // Positional properties (top-0, right-0, bottom-0, left-0, inset-0, etc.)
+  const positionMatch = baseClass.match(/^(top|right|bottom|left|inset|inset-x|inset-y)-(\d+|px|auto|full|\[.+\])$/);
+  if (positionMatch) {
+    const prop = positionMatch[1];
+    let val = positionMatch[2];
+    // Handle 0 specially
+    if (val === '0') {
+      val = 'none';
+    } else if (val.startsWith('[') && val.endsWith(']')) {
+      // Keep arbitrary values as-is
+    } else {
+      val = getSpacing(val, exact);
+    }
+    return { cat: "layout", val: prefix + prop + ":" + val };
+  }
+
+  // Outline none
+  if (baseClass === 'outline-none') {
+    return { cat: "visual", val: prefix + "outline:none" };
+  }
+
   // Order
   const orderMatch = baseClass.match(/^order-(\d+|first|last|none)$/);
   if (orderMatch) {
@@ -414,6 +492,63 @@ function convertClass(twClass, exact) {
     return { cat: "visual", val: prefix + "to:" + toMatch[1] };
   }
 
+  // Transition utilities
+  const transitionMatch = baseClass.match(/^transition(?:-(all|colors|opacity|shadow|transform|none))?$/);
+  if (transitionMatch) {
+    const type = transitionMatch[1] || 'all';
+    return { cat: "visual", val: prefix + "transition:" + type };
+  }
+
+  // Duration utilities
+  const durationMatch = baseClass.match(/^duration-(\d+)$/);
+  if (durationMatch) {
+    // Map Tailwind duration (ms) to SenangStart semantic values
+    const ms = parseInt(durationMatch[1]);
+    let durationVal;
+    if (ms <= 75) durationVal = 'instant';
+    else if (ms <= 100) durationVal = 'quick';
+    else if (ms <= 150) durationVal = 'fast';
+    else if (ms <= 200) durationVal = 'normal';
+    else if (ms <= 300) durationVal = 'slow';
+    else if (ms <= 500) durationVal = 'slower';
+    else durationVal = 'lazy';
+    return { cat: "visual", val: prefix + "duration:" + durationVal };
+  }
+
+  // Ease utilities
+  const easeMatch = baseClass.match(/^ease-(linear|in|out|in-out)$/);
+  if (easeMatch) {
+    return { cat: "visual", val: prefix + "ease:" + easeMatch[1] };
+  }
+
+  // Ring utilities - Convert to native ring utilities
+  // Tailwind ring-4 generates: box-shadow: 0 0 0 4px var(--tw-ring-color)
+  const ringMatch = baseClass.match(/^ring(?:-(\d+))?$/);
+  if (ringMatch) {
+    const width = ringMatch[1] || '3';
+    if (width === '0') {
+      return { cat: "visual", val: prefix + "ring:none" };
+    }
+    // Map Tailwind ring widths to SenangStart semantic values
+    const ringScale = {
+      '1': 'thin', '2': 'regular', '3': 'small', '4': 'medium', '8': 'big'
+    };
+    const scale = ringScale[width] || `[${width}px]`;
+    return { cat: "visual", val: prefix + "ring:" + scale };
+  }
+
+  // Ring offset - converts to native ring-offset utility
+  const ringOffsetMatch = baseClass.match(/^ring-offset-(\d+)$/);
+  if (ringOffsetMatch) {
+    return { cat: "visual", val: prefix + "ring-offset:" + ringOffsetMatch[1] };
+  }
+
+  // Ring color - converts to native ring-color utility
+  const ringColorMatch = baseClass.match(/^ring-((?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose|white|black)(?:-\d+)?)$/);
+  if (ringColorMatch) {
+    return { cat: "visual", val: prefix + "ring-color:" + ringColorMatch[1] };
+  }
+
   return null;
 }
 

package/src/compiler/generators/css.js

@@ -1577,6 +1577,33 @@ function generateVisualRule(token, config) {
       return `transform: skewY(${cssValue});`;
     },
     
+    // 3D Rotation (Rotate X/Y/Z)
+    'rotate-x': () => {
+      const cssValue = isArbitrary ? value : `${value}deg`;
+      return `transform: rotateX(${cssValue});`;
+    },
+    
+    'rotate-y': () => {
+      const cssValue = isArbitrary ? value : `${value}deg`;
+      return `transform: rotateY(${cssValue});`;
+    },
+    
+    'rotate-z': () => {
+      const cssValue = isArbitrary ? value : `${value}deg`;
+      return `transform: rotateZ(${cssValue});`;
+    },
+    
+    // 3D Translation (Translate Z)
+    'translate-z': () => {
+      const translatePresets = {
+        'near': '50px',
+        'far': '-50px',
+        '0': '0'
+      };
+      const cssValue = isArbitrary ? value : (translatePresets[value] || `var(--s-${value})`);
+      return `transform: translateZ(${cssValue});`;
+    },
+    
     // Transform Origin
     'origin': () => {
       const originMap = {

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