Spacing System

/**
 * Base mini-unit value (8px)
 */
const miniUnit: number; // 8

/**
 * Calculate spacing based on mini-unit scale
 * @param count - Multiplier for mini-unit (can be fractional)
 * @returns String with rem unit
 */
function miniUnits(count: number): string;

import { miniUnit, miniUnits } from '@carbon/layout';

// Direct access to mini-unit
const baseUnit = miniUnit; // 8

// Programmatic spacing
const tinySpacing = miniUnits(0.25); // "0.125rem" (2px)
const smallSpacing = miniUnits(1); // "0.5rem" (8px)
const mediumSpacing = miniUnits(2); // "1rem" (16px)
const largeSpacing = miniUnits(4); // "2rem" (32px)
const customSpacing = miniUnits(2.5); // "1.25rem" (20px)

const spacing01: string; // "0.125rem" (2px)
const spacing02: string; // "0.25rem" (4px)
const spacing03: string; // "0.5rem" (8px)
const spacing04: string; // "0.75rem" (12px)
const spacing05: string; // "1rem" (16px)
const spacing06: string; // "1.5rem" (24px)
const spacing07: string; // "2rem" (32px)
const spacing08: string; // "2.5rem" (40px)
const spacing09: string; // "3rem" (48px)
const spacing10: string; // "4rem" (64px)
const spacing11: string; // "5rem" (80px)
const spacing12: string; // "6rem" (96px)
const spacing13: string; // "10rem" (160px)

import { 
  spacing01, spacing03, spacing05, spacing07, spacing10 
} from '@carbon/layout';

const buttonStyles = {
  padding: `${spacing03} ${spacing05}`, // "0.5rem 1rem"
  margin: spacing07, // "2rem"
  borderWidth: spacing01, // "0.125rem"
};

const cardStyles = {
  padding: spacing06, // "1.5rem"
  marginBottom: spacing10, // "4rem"
};

/**
 * Array containing all spacing values in order
 */
const spacing: string[];

import { spacing } from '@carbon/layout';

// Access by index (0-based)
const firstSpacing = spacing[0]; // "0.125rem" (spacing01)
const fifthSpacing = spacing[4]; // "1rem" (spacing05)

// Iterate through spacing scale
spacing.forEach((value, index) => {
  console.log(`spacing${index + 1}: ${value}`);
});

// Use in loops or maps
const spacingOptions = spacing.map((value, index) => ({
  label: `Spacing ${index + 1}`,
  value: value,
}));

@use '@carbon/layout' as layout;

.component {
  padding: layout.$spacing-05; // 1rem
  margin: layout.$spacing-07; // 2rem
  gap: layout.$spacing-03; // 0.5rem
}

.card {
  padding: layout.$spacing-06 layout.$spacing-05; // 1.5rem 1rem
  margin-bottom: layout.$spacing-10; // 4rem
}

// Access spacing map
.dynamic-spacing {
  @each $key, $value in layout.$spacing {
    &.spacing-#{$key} {
      margin: $value;
    }
  }
}

import { spacing01, spacing03, spacing05, spacing06, spacing07 } from '@carbon/layout';

// Button spacing
const buttonSpacing = {
  small: `${spacing02} ${spacing04}`, // "0.25rem 0.75rem"
  medium: `${spacing03} ${spacing05}`, // "0.5rem 1rem"
  large: `${spacing04} ${spacing06}`, // "0.75rem 1.5rem"
};

// Card spacing
const cardSpacing = {
  padding: spacing06, // "1.5rem"
  gap: spacing05, // "1rem"
  marginBottom: spacing07, // "2rem"
};

// Form spacing
const formSpacing = {
  fieldGap: spacing05, // "1rem"
  labelMargin: spacing02, // "0.25rem"
  sectionGap: spacing07, // "2rem"
};

import { spacing08, spacing10, spacing12, spacing13 } from '@carbon/layout';

const layoutSpacing = {
  sectionGap: spacing10, // "4rem"
  pageMargin: spacing08, // "2.5rem"
  heroSpacing: spacing12, // "6rem"
  footerMargin: spacing13, // "10rem"
};

import { spacing05, spacing07, spacing10, breakpointUp } from '@carbon/layout';

const responsiveSpacing = {
  padding: spacing05, // "1rem" (mobile)
  
  [breakpointUp('md')]: {
    padding: spacing07, // "2rem" (tablet+)
  },
  
  [breakpointUp('lg')]: {
    padding: spacing10, // "4rem" (desktop+)
  },
};

import { miniUnits, spacing05 } from '@carbon/layout';

// Custom fractional spacing
const microSpacing = miniUnits(0.125); // "0.0625rem" (1px)
const halfUnit = miniUnits(0.5); // "0.25rem" (4px)

// Additive spacing
const parseRem = (remValue) => parseFloat(remValue);
const doubleSpacing = `${parseRem(spacing05) * 2}rem`; // "2rem"

// Negative spacing (for overlapping elements)
const negativeSpacing = `-${spacing03}`; // "-0.5rem"

import { spacing, miniUnits } from '@carbon/layout';

// Check if value is in spacing scale
const isValidSpacing = (value) => spacing.includes(value);

// Get closest spacing value
const getClosestSpacing = (targetRem) => {
  const target = parseFloat(targetRem);
  return spacing.reduce((closest, current) => {
    const currentValue = parseFloat(current);
    const closestValue = parseFloat(closest);
    return Math.abs(currentValue - target) < Math.abs(closestValue - target) 
      ? current : closest;
  });
};

// Example usage
const isValid = isValidSpacing('1rem'); // true
const closest = getClosestSpacing('1.2rem'); // "1rem" (spacing05)