@bookklik/senangstart-css 0.2.4 → 0.2.6

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,142 @@ 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] };
+  }
+  
+  // Divide color - directional (check divide-x and divide-y BEFORE generic divide)
+  const divideXMatch = baseClass.match(/^divide-x-((?: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 (divideXMatch) {
+    return {
+      cat: "visual",
+      val: prefix + "divide-x:" + divideXMatch[1],
+    };
+  }
+  
+  const divideYMatch = baseClass.match(/^divide-y-((?: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 (divideYMatch) {
+    return {
+      cat: "visual",
+      val: prefix + "divide-y:" + divideYMatch[1],
+    };
+  }
+  
+  // Divide color - all directions (check divide-x and divide-y AFTER generic divide)
+  const divideColorMatch = baseClass.match(/^divide-((?: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 (divideColorMatch) {
+    return {
+      cat: "visual",
+      val: prefix + "divide:" + divideColorMatch[1],
+    };
+  }
+  
+  // Divide width - all directions
+  const divideWidthMatch = baseClass.match(/^divide-(\d+)$/);
+  if (divideWidthMatch) {
+    return {
+      cat: "visual",
+      val: prefix + "divide-w:" + getBorderWidth(divideWidthMatch[1], exact),
+    };
+  }
+  
+  // Divide reverse (check these FIRST as they are specific)
+  if (baseClass === 'divide-x-reverse') {
+    return { cat: "visual", val: prefix + "divide-x:reverse" };
+  }
+  if (baseClass === 'divide-y-reverse') {
+    return { cat: "visual", val: prefix + "divide-y:reverse" };
+  }
+  
+  // Divide width - directional
+  const divideXWidthMatch = baseClass.match(/^divide-x-(\d+)$/);
+  if (divideXWidthMatch) {
+    return {
+      cat: "visual",
+      val: prefix + "divide-x-w:" + getBorderWidth(divideXWidthMatch[1], exact),
+    };
+  }
+  
+  // Divide width (implicit x/y from Tailwind divide-x/y without number is usually 1px)
+  // Tailwind: divide-x = border-right-width: 1px (or left if reverse).
+  // SenangStart: divide-x-w:thin
+  if (baseClass === 'divide-x') {
+    return { cat: "visual", val: prefix + "divide-x-w:thin" };
+  }
+  if (baseClass === 'divide-y') {
+    return { cat: "visual", val: prefix + "divide-y-w:thin" };
+  }
+  
+  const divideYWidthMatch = baseClass.match(/^divide-y-(\d+)$/);
+  if (divideYWidthMatch) {
+    return {
+      cat: "visual",
+      val: prefix + "divide-y-w:" + getBorderWidth(divideYWidthMatch[1], exact),
+    };
+  }
+  
+  // Divide style
+  const divideStyleMatch = baseClass.match(/^divide-(solid|dashed|dotted|double|none)$/);
+  if (divideStyleMatch) {
+    return {
+      cat: "visual",
+      val: prefix + "divide-style:" + divideStyleMatch[1], // Fixed category from 'color' to 'visual'
+    };
+  }
+  
   return null;
 }
 

package/src/compiler/generators/css.js

@@ -564,6 +564,28 @@ function generateLayoutRule(token, config) {
 function generateSpaceRule(token, config) {
   const { property, value, isArbitrary } = token;
   
+  // Handle special sizing values for width/height utilities
+  const sizingSpecialValues = {
+    'min': 'min-content',
+    'max': 'max-content',
+    'fit': 'fit-content'
+  };
+  
+  // Check if this is a sizing utility with a special value
+  const sizingProps = ['w', 'h', 'min-w', 'max-w', 'min-h', 'max-h'];
+  if (sizingProps.includes(property) && sizingSpecialValues[value]) {
+    const cssVal = sizingSpecialValues[value];
+    const propMap = {
+      'w': `width: ${cssVal};`,
+      'h': `height: ${cssVal};`,
+      'min-w': `min-width: ${cssVal};`,
+      'max-w': `max-width: ${cssVal};`,
+      'min-h': `min-height: ${cssVal};`,
+      'max-h': `max-height: ${cssVal};`
+    };
+    return propMap[property] || '';
+  }
+  
   // Determine the CSS value
   const cssValue = isArbitrary ? value : `var(--s-${value})`;
   
@@ -1007,6 +1029,55 @@ function generateVisualRule(token, config) {
       return `border-radius: var(--r-${value});`;
     },
     
+    // =====================
+    // DIVIDE UTILITIES
+    // =====================
+    
+    // Divide color - all sides
+    'divide': () => {
+      const cssValue = isArbitrary ? value : `var(--c-${value})`;
+      return `border-color: ${cssValue}; border-style: solid;`;
+    },
+    
+    // Divide color - directional
+    'divide-x': () => {
+      // Handle divide-x:reverse specially
+      if (value === 'reverse') {
+        return '--ss-divide-x-reverse: 1;';
+      }
+      const cssValue = isArbitrary ? value : `var(--c-${value})`;
+      return `border-left-color: ${cssValue}; border-right-color: ${cssValue}; border-left-style: solid; border-right-style: solid;`;
+    },
+    'divide-y': () => {
+      // Handle divide-y:reverse specially
+      if (value === 'reverse') {
+        return '--ss-divide-y-reverse: 1;';
+      }
+      const cssValue = isArbitrary ? value : `var(--c-${value})`;
+      return `border-top-color: ${cssValue}; border-bottom-color: ${cssValue}; border-top-style: solid; border-bottom-style: solid;`;
+    },
+    
+    // Divide width - all sides
+    'divide-w': () => {
+      const cssValue = isArbitrary ? value : `var(--s-${value})`;
+      return `border-width: ${cssValue}; border-style: solid;`;
+    },
+    
+    // Divide width - directional
+    'divide-x-w': () => {
+      const cssValue = isArbitrary ? value : `var(--s-${value})`;
+      return `border-left-width: ${cssValue}; border-right-width: ${cssValue}; border-left-style: solid; border-right-style: solid;`;
+    },
+    'divide-y-w': () => {
+      const cssValue = isArbitrary ? value : `var(--s-${value})`;
+      return `border-top-width: ${cssValue}; border-bottom-width: ${cssValue}; border-top-style: solid; border-bottom-style: solid;`;
+    },
+    
+    // Divide style
+    'divide-style': () => {
+      return `border-style: ${value};`;
+    },
+    
     // Outline Width
     'outline-w': () => {
       const cssValue = isArbitrary ? value : `var(--s-${value})`;
@@ -1577,6 +1648,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 = {
@@ -1887,12 +1985,27 @@ export function generateRule(token, config, skipDarkWrapper = false) {
   
   if (!cssDeclaration) return '';
   
+  // Check if this is a divide utility (needs special selector)
+  const isDivide = raw.startsWith('divide');
+  
   // Build selector
-  let selector = `[${attrType}~="${raw}"]`;
+  let selector = '';
+  
+  if (isDivide) {
+    // Divide utilities use special child selector pattern
+    selector = `[${attrType}~="${raw}"] > :not([hidden]) ~ :not([hidden])`;
+  } else {
+    selector = `[${attrType}~="${raw}"]`;
+  }
   
   // Add state pseudo-class (but not for 'dark' - it's handled separately)
   if (state && state !== 'dark') {
-    selector += `:${state}`;
+    if (isDivide) {
+      // For divide utilities, add state to the element after tilde
+      selector = `[${attrType}~="${raw}"] > :not([hidden]) ~ :not([hidden]):${state}`;
+    } else {
+      selector += `:${state}`;
+    }
   }
   
   return `${selector} { ${cssDeclaration} }\n`;

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