jasmincss 1.0.0

package/src/core/utilities/background.js

@@ -0,0 +1,109 @@
+// Background utilities for JasminCSS
+
+export function generateBackgroundUtilities(config) {
+  const classes = [];
+
+  // Background Attachment
+  const attachments = ['fixed', 'local', 'scroll'];
+  attachments.forEach(value => {
+    classes.push({
+      name: `bg-${value}`,
+      css: `.bg-${value} { background-attachment: ${value}; }`
+    });
+  });
+
+  // Background Clip
+  const clips = {
+    'border': 'border-box',
+    'padding': 'padding-box',
+    'content': 'content-box',
+    'text': 'text'
+  };
+  Object.entries(clips).forEach(([name, value]) => {
+    classes.push({
+      name: `bg-clip-${name}`,
+      css: `.bg-clip-${name} { background-clip: ${value};${value === 'text' ? ' -webkit-background-clip: text;' : ''} }`
+    });
+  });
+
+  // Background Origin
+  const origins = {
+    'border': 'border-box',
+    'padding': 'padding-box',
+    'content': 'content-box'
+  };
+  Object.entries(origins).forEach(([name, value]) => {
+    classes.push({
+      name: `bg-origin-${name}`,
+      css: `.bg-origin-${name} { background-origin: ${value}; }`
+    });
+  });
+
+  // Background Position
+  const positions = {
+    'bottom': 'bottom',
+    'center': 'center',
+    'left': 'left',
+    'left-bottom': 'left bottom',
+    'left-top': 'left top',
+    'right': 'right',
+    'right-bottom': 'right bottom',
+    'right-top': 'right top',
+    'top': 'top'
+  };
+  Object.entries(positions).forEach(([name, value]) => {
+    classes.push({
+      name: `bg-${name}`,
+      css: `.bg-${name} { background-position: ${value}; }`
+    });
+  });
+
+  // Background Repeat
+  const repeats = {
+    'repeat': 'repeat',
+    'no-repeat': 'no-repeat',
+    'repeat-x': 'repeat-x',
+    'repeat-y': 'repeat-y',
+    'repeat-round': 'round',
+    'repeat-space': 'space'
+  };
+  Object.entries(repeats).forEach(([name, value]) => {
+    classes.push({
+      name: `bg-${name}`,
+      css: `.bg-${name} { background-repeat: ${value}; }`
+    });
+  });
+
+  // Background Size
+  const sizes = {
+    'auto': 'auto',
+    'cover': 'cover',
+    'contain': 'contain'
+  };
+  Object.entries(sizes).forEach(([name, value]) => {
+    classes.push({
+      name: `bg-${name}`,
+      css: `.bg-${name} { background-size: ${value}; }`
+    });
+  });
+
+  // Background Image None
+  classes.push({
+    name: 'bg-none',
+    css: '.bg-none { background-image: none; }'
+  });
+
+  // Background Blend Mode
+  const blendModes = ['normal', 'multiply', 'screen', 'overlay', 'darken', 'lighten', 'color-dodge', 'color-burn', 'hard-light', 'soft-light', 'difference', 'exclusion', 'hue', 'saturation', 'color', 'luminosity'];
+  blendModes.forEach(mode => {
+    classes.push({
+      name: `bg-blend-${mode}`,
+      css: `.bg-blend-${mode} { background-blend-mode: ${mode}; }`
+    });
+  });
+
+  return {
+    css: classes.map(c => c.css).join('\n'),
+    classes
+  };
+}

package/src/core/utilities/colors.js

@@ -0,0 +1,234 @@
+export function generateColorUtilities(config) {
+  const classes = [];
+  const { branding, colors } = config;
+
+  // Brand colors (primary, secondary, accent, etc.)
+  const brandColors = branding?.colors || {};
+
+  // Generate text colors
+  Object.entries(brandColors).forEach(([name, value]) => {
+    classes.push({ name: `text-${name}`, css: `.text-${name} { color: var(--j-${name}); }` });
+  });
+
+  // Generate background colors
+  Object.entries(brandColors).forEach(([name, value]) => {
+    classes.push({ name: `bg-${name}`, css: `.bg-${name} { background-color: var(--j-${name}); }` });
+  });
+
+  // Generate border colors
+  Object.entries(brandColors).forEach(([name, value]) => {
+    classes.push({ name: `border-${name}`, css: `.border-${name} { border-color: var(--j-${name}); }` });
+  });
+
+  // Extended color palette
+  const extendedColors = colors || {};
+  Object.entries(extendedColors).forEach(([colorName, shades]) => {
+    if (typeof shades === 'object' && !Array.isArray(shades)) {
+      Object.entries(shades).forEach(([shade, value]) => {
+        // Text
+        classes.push({
+          name: `text-${colorName}-${shade}`,
+          css: `.text-${colorName}-${shade} { color: var(--j-${colorName}-${shade}); }`
+        });
+        // Background
+        classes.push({
+          name: `bg-${colorName}-${shade}`,
+          css: `.bg-${colorName}-${shade} { background-color: var(--j-${colorName}-${shade}); }`
+        });
+        // Border
+        classes.push({
+          name: `border-${colorName}-${shade}`,
+          css: `.border-${colorName}-${shade} { border-color: var(--j-${colorName}-${shade}); }`
+        });
+        // Ring
+        classes.push({
+          name: `ring-${colorName}-${shade}`,
+          css: `.ring-${colorName}-${shade} { --j-ring-color: var(--j-${colorName}-${shade}); }`
+        });
+        // Decoration
+        classes.push({
+          name: `decoration-${colorName}-${shade}`,
+          css: `.decoration-${colorName}-${shade} { text-decoration-color: var(--j-${colorName}-${shade}); }`
+        });
+        // Divide
+        classes.push({
+          name: `divide-${colorName}-${shade}`,
+          css: `.divide-${colorName}-${shade} > :not([hidden]) ~ :not([hidden]) { border-color: var(--j-${colorName}-${shade}); }`
+        });
+        // Outline
+        classes.push({
+          name: `outline-${colorName}-${shade}`,
+          css: `.outline-${colorName}-${shade} { outline-color: var(--j-${colorName}-${shade}); }`
+        });
+        // Shadow (colored)
+        classes.push({
+          name: `shadow-${colorName}-${shade}`,
+          css: `.shadow-${colorName}-${shade} { --j-shadow-color: var(--j-${colorName}-${shade}); }`
+        });
+        // Accent
+        classes.push({
+          name: `accent-${colorName}-${shade}`,
+          css: `.accent-${colorName}-${shade} { accent-color: var(--j-${colorName}-${shade}); }`
+        });
+        // Caret
+        classes.push({
+          name: `caret-${colorName}-${shade}`,
+          css: `.caret-${colorName}-${shade} { caret-color: var(--j-${colorName}-${shade}); }`
+        });
+        // Fill
+        classes.push({
+          name: `fill-${colorName}-${shade}`,
+          css: `.fill-${colorName}-${shade} { fill: var(--j-${colorName}-${shade}); }`
+        });
+        // Stroke
+        classes.push({
+          name: `stroke-${colorName}-${shade}`,
+          css: `.stroke-${colorName}-${shade} { stroke: var(--j-${colorName}-${shade}); }`
+        });
+      });
+    }
+  });
+
+  // Special colors
+  const specialColors = {
+    'transparent': 'transparent',
+    'current': 'currentColor',
+    'inherit': 'inherit',
+    'white': '#ffffff',
+    'black': '#000000'
+  };
+
+  Object.entries(specialColors).forEach(([name, value]) => {
+    classes.push({ name: `text-${name}`, css: `.text-${name} { color: ${value}; }` });
+    classes.push({ name: `bg-${name}`, css: `.bg-${name} { background-color: ${value}; }` });
+    classes.push({ name: `border-${name}`, css: `.border-${name} { border-color: ${value}; }` });
+  });
+
+  // Semantic colors
+  classes.push({ name: 'text-muted', css: '.text-muted { color: var(--j-text-muted); }' });
+  classes.push({ name: 'text-subtle', css: '.text-subtle { color: var(--j-text-subtle); }' });
+  classes.push({ name: 'bg-subtle', css: '.bg-subtle { background-color: var(--j-bg-subtle); }' });
+  classes.push({ name: 'bg-muted', css: '.bg-muted { background-color: var(--j-bg-muted); }' });
+  classes.push({ name: 'border-default', css: '.border-default { border-color: var(--j-border); }' });
+  classes.push({ name: 'border-subtle', css: '.border-subtle { border-color: var(--j-border-subtle); }' });
+
+  // Opacity
+  const opacities = [0, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60, 65, 70, 75, 80, 85, 90, 95, 100];
+  opacities.forEach(op => {
+    classes.push({ name: `opacity-${op}`, css: `.opacity-${op} { opacity: ${op / 100}; }` });
+  });
+
+  // Background Opacity (via CSS variables)
+  opacities.forEach(op => {
+    classes.push({
+      name: `bg-opacity-${op}`,
+      css: `.bg-opacity-${op} { --j-bg-opacity: ${op / 100}; }`
+    });
+  });
+
+  // Text Opacity (via CSS variables)
+  opacities.forEach(op => {
+    classes.push({
+      name: `text-opacity-${op}`,
+      css: `.text-opacity-${op} { --j-text-opacity: ${op / 100}; }`
+    });
+  });
+
+  // Border Opacity
+  opacities.forEach(op => {
+    classes.push({
+      name: `border-opacity-${op}`,
+      css: `.border-opacity-${op} { --j-border-opacity: ${op / 100}; }`
+    });
+  });
+
+  // Gradients
+  classes.push({ name: 'bg-none', css: '.bg-none { background-image: none; }' });
+  classes.push({
+    name: 'bg-gradient-to-t',
+    css: '.bg-gradient-to-t { background-image: linear-gradient(to top, var(--j-gradient-stops)); }'
+  });
+  classes.push({
+    name: 'bg-gradient-to-tr',
+    css: '.bg-gradient-to-tr { background-image: linear-gradient(to top right, var(--j-gradient-stops)); }'
+  });
+  classes.push({
+    name: 'bg-gradient-to-r',
+    css: '.bg-gradient-to-r { background-image: linear-gradient(to right, var(--j-gradient-stops)); }'
+  });
+  classes.push({
+    name: 'bg-gradient-to-br',
+    css: '.bg-gradient-to-br { background-image: linear-gradient(to bottom right, var(--j-gradient-stops)); }'
+  });
+  classes.push({
+    name: 'bg-gradient-to-b',
+    css: '.bg-gradient-to-b { background-image: linear-gradient(to bottom, var(--j-gradient-stops)); }'
+  });
+  classes.push({
+    name: 'bg-gradient-to-bl',
+    css: '.bg-gradient-to-bl { background-image: linear-gradient(to bottom left, var(--j-gradient-stops)); }'
+  });
+  classes.push({
+    name: 'bg-gradient-to-l',
+    css: '.bg-gradient-to-l { background-image: linear-gradient(to left, var(--j-gradient-stops)); }'
+  });
+  classes.push({
+    name: 'bg-gradient-to-tl',
+    css: '.bg-gradient-to-tl { background-image: linear-gradient(to top left, var(--j-gradient-stops)); }'
+  });
+
+  // Gradient stops (from, via, to)
+  Object.entries(extendedColors).forEach(([colorName, shades]) => {
+    if (typeof shades === 'object' && !Array.isArray(shades)) {
+      Object.entries(shades).forEach(([shade, value]) => {
+        classes.push({
+          name: `from-${colorName}-${shade}`,
+          css: `.from-${colorName}-${shade} { --j-gradient-from: var(--j-${colorName}-${shade}); --j-gradient-stops: var(--j-gradient-from), var(--j-gradient-via, transparent), var(--j-gradient-to, transparent); }`
+        });
+        classes.push({
+          name: `via-${colorName}-${shade}`,
+          css: `.via-${colorName}-${shade} { --j-gradient-via: var(--j-${colorName}-${shade}); --j-gradient-stops: var(--j-gradient-from, transparent), var(--j-gradient-via), var(--j-gradient-to, transparent); }`
+        });
+        classes.push({
+          name: `to-${colorName}-${shade}`,
+          css: `.to-${colorName}-${shade} { --j-gradient-to: var(--j-${colorName}-${shade}); }`
+        });
+      });
+    }
+  });
+
+  // Brand color gradients
+  Object.keys(brandColors).forEach(name => {
+    classes.push({
+      name: `from-${name}`,
+      css: `.from-${name} { --j-gradient-from: var(--j-${name}); --j-gradient-stops: var(--j-gradient-from), var(--j-gradient-via, transparent), var(--j-gradient-to, transparent); }`
+    });
+    classes.push({
+      name: `via-${name}`,
+      css: `.via-${name} { --j-gradient-via: var(--j-${name}); --j-gradient-stops: var(--j-gradient-from, transparent), var(--j-gradient-via), var(--j-gradient-to, transparent); }`
+    });
+    classes.push({
+      name: `to-${name}`,
+      css: `.to-${name} { --j-gradient-to: var(--j-${name}); }`
+    });
+  });
+
+  // Special gradient stops
+  classes.push({
+    name: 'from-transparent',
+    css: '.from-transparent { --j-gradient-from: transparent; --j-gradient-stops: var(--j-gradient-from), var(--j-gradient-via, transparent), var(--j-gradient-to, transparent); }'
+  });
+  classes.push({
+    name: 'via-transparent',
+    css: '.via-transparent { --j-gradient-via: transparent; --j-gradient-stops: var(--j-gradient-from, transparent), var(--j-gradient-via), var(--j-gradient-to, transparent); }'
+  });
+  classes.push({
+    name: 'to-transparent',
+    css: '.to-transparent { --j-gradient-to: transparent; }'
+  });
+
+  return {
+    css: classes.map(c => c.css).join('\n'),
+    classes
+  };
+}

package/src/core/utilities/columns.js

@@ -0,0 +1,161 @@
+// CSS Multi-column layout utilities for JasminCSS
+
+export function generateColumnUtilities(config) {
+  const classes = [];
+
+  // Column Count
+  const counts = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', 'auto'];
+  counts.forEach(count => {
+    classes.push({
+      name: `columns-${count}`,
+      css: `.columns-${count} { column-count: ${count}; }`
+    });
+  });
+
+  // Column Width Presets
+  const widths = {
+    '3xs': '16rem',
+    '2xs': '18rem',
+    'xs': '20rem',
+    'sm': '24rem',
+    'md': '28rem',
+    'lg': '32rem',
+    'xl': '36rem',
+    '2xl': '42rem',
+    '3xl': '48rem',
+    '4xl': '56rem',
+    '5xl': '64rem',
+    '6xl': '72rem',
+    '7xl': '80rem'
+  };
+  Object.entries(widths).forEach(([name, value]) => {
+    classes.push({
+      name: `columns-${name}`,
+      css: `.columns-${name} { column-width: ${value}; }`
+    });
+  });
+
+  // Column Gap (using spacing scale)
+  const gaps = {
+    '0': '0px',
+    'px': '1px',
+    '0.5': '0.125rem',
+    '1': '0.25rem',
+    '1.5': '0.375rem',
+    '2': '0.5rem',
+    '2.5': '0.625rem',
+    '3': '0.75rem',
+    '3.5': '0.875rem',
+    '4': '1rem',
+    '5': '1.25rem',
+    '6': '1.5rem',
+    '7': '1.75rem',
+    '8': '2rem',
+    '9': '2.25rem',
+    '10': '2.5rem',
+    '11': '2.75rem',
+    '12': '3rem',
+    '14': '3.5rem',
+    '16': '4rem',
+    '20': '5rem',
+    '24': '6rem',
+    '28': '7rem',
+    '32': '8rem',
+    'normal': 'normal'
+  };
+  Object.entries(gaps).forEach(([name, value]) => {
+    const className = name.includes('.') ? name.replace('.', '\\.') : name;
+    classes.push({
+      name: `column-gap-${name}`,
+      css: `.column-gap-${className} { column-gap: ${value}; }`
+    });
+  });
+
+  // Column Rule Width
+  const ruleWidths = {
+    '0': '0px',
+    '1': '1px',
+    '2': '2px',
+    '4': '4px',
+    '8': '8px'
+  };
+  Object.entries(ruleWidths).forEach(([name, value]) => {
+    classes.push({
+      name: `column-rule-${name}`,
+      css: `.column-rule-${name} { column-rule-width: ${value}; }`
+    });
+  });
+
+  // Column Rule Style
+  const ruleStyles = ['none', 'hidden', 'dotted', 'dashed', 'solid', 'double', 'groove', 'ridge', 'inset', 'outset'];
+  ruleStyles.forEach(style => {
+    classes.push({
+      name: `column-rule-${style}`,
+      css: `.column-rule-${style} { column-rule-style: ${style}; }`
+    });
+  });
+
+  // Column Rule Color (semantic colors)
+  const colors = ['primary', 'secondary', 'accent', 'success', 'warning', 'error', 'info', 'neutral'];
+  colors.forEach(color => {
+    classes.push({
+      name: `column-rule-${color}`,
+      css: `.column-rule-${color} { column-rule-color: var(--j-${color}); }`
+    });
+  });
+  classes.push({
+    name: 'column-rule-current',
+    css: '.column-rule-current { column-rule-color: currentColor; }'
+  });
+  classes.push({
+    name: 'column-rule-transparent',
+    css: '.column-rule-transparent { column-rule-color: transparent; }'
+  });
+
+  // Column Span
+  classes.push({
+    name: 'column-span-all',
+    css: '.column-span-all { column-span: all; }'
+  });
+  classes.push({
+    name: 'column-span-none',
+    css: '.column-span-none { column-span: none; }'
+  });
+
+  // Column Fill
+  classes.push({
+    name: 'column-fill-auto',
+    css: '.column-fill-auto { column-fill: auto; }'
+  });
+  classes.push({
+    name: 'column-fill-balance',
+    css: '.column-fill-balance { column-fill: balance; }'
+  });
+
+  // Break Inside
+  const breakInside = ['auto', 'avoid', 'avoid-page', 'avoid-column'];
+  breakInside.forEach(value => {
+    classes.push({
+      name: `break-inside-${value}`,
+      css: `.break-inside-${value} { break-inside: ${value}; }`
+    });
+  });
+
+  // Break Before/After
+  const breakValues = ['auto', 'avoid', 'all', 'avoid-page', 'page', 'left', 'right', 'column'];
+  breakValues.forEach(value => {
+    classes.push({
+      name: `break-before-${value}`,
+      css: `.break-before-${value} { break-before: ${value}; }`
+    });
+    classes.push({
+      name: `break-after-${value}`,
+      css: `.break-after-${value} { break-after: ${value}; }`
+    });
+  });
+
+  return {
+    css: classes.map(c => c.css).join('\n'),
+    classes
+  };
+}