jasmincss 1.0.0

package/src/core/utilities/effects.js

@@ -0,0 +1,261 @@
+export function generateEffectUtilities(config) {
+  const classes = [];
+  const { branding } = config;
+
+  // Box Shadow
+  const shadows = branding?.shadows || {
+    sm: '0 1px 2px 0 rgb(0 0 0 / 0.05)',
+    default: '0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)',
+    md: '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)',
+    lg: '0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)',
+    xl: '0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)',
+    '2xl': '0 25px 50px -12px rgb(0 0 0 / 0.25)',
+    inner: 'inset 0 2px 4px 0 rgb(0 0 0 / 0.05)',
+    none: 'none'
+  };
+
+  classes.push({ name: 'shadow', css: `.shadow { box-shadow: var(--j-shadow-default); }` });
+  Object.entries(shadows).forEach(([name, value]) => {
+    const className = name === 'default' ? 'shadow' : `shadow-${name}`;
+    if (name !== 'default') {
+      classes.push({ name: className, css: `.${className} { box-shadow: ${value}; }` });
+    }
+  });
+
+  // Glow shadows (futuristic)
+  classes.push({ name: 'shadow-glow', css: '.shadow-glow { box-shadow: 0 0 20px var(--j-primary); }' });
+  classes.push({ name: 'shadow-glow-sm', css: '.shadow-glow-sm { box-shadow: 0 0 10px var(--j-primary); }' });
+  classes.push({ name: 'shadow-glow-lg', css: '.shadow-glow-lg { box-shadow: 0 0 40px var(--j-primary); }' });
+
+  // Border Radius
+  const radiuses = branding?.borderRadius || {
+    none: '0',
+    sm: '0.125rem',
+    default: '0.25rem',
+    md: '0.375rem',
+    lg: '0.5rem',
+    xl: '0.75rem',
+    '2xl': '1rem',
+    '3xl': '1.5rem',
+    full: '9999px'
+  };
+
+  classes.push({ name: 'rounded', css: `.rounded { border-radius: var(--j-radius-default); }` });
+  Object.entries(radiuses).forEach(([name, value]) => {
+    const className = name === 'default' ? 'rounded' : `rounded-${name}`;
+    if (name !== 'default') {
+      classes.push({ name: className, css: `.${className} { border-radius: ${value}; }` });
+    }
+  });
+
+  // Directional border radius
+  const directions = {
+    't': ['border-top-left-radius', 'border-top-right-radius'],
+    'r': ['border-top-right-radius', 'border-bottom-right-radius'],
+    'b': ['border-bottom-left-radius', 'border-bottom-right-radius'],
+    'l': ['border-top-left-radius', 'border-bottom-left-radius'],
+    'tl': ['border-top-left-radius'],
+    'tr': ['border-top-right-radius'],
+    'br': ['border-bottom-right-radius'],
+    'bl': ['border-bottom-left-radius'],
+    's': ['border-start-start-radius', 'border-end-start-radius'],
+    'e': ['border-start-end-radius', 'border-end-end-radius'],
+    'ss': ['border-start-start-radius'],
+    'se': ['border-start-end-radius'],
+    'ee': ['border-end-end-radius'],
+    'es': ['border-end-start-radius']
+  };
+
+  Object.entries(radiuses).forEach(([sizeName, sizeValue]) => {
+    Object.entries(directions).forEach(([dirName, props]) => {
+      const className = sizeName === 'default' ? `rounded-${dirName}` : `rounded-${dirName}-${sizeName}`;
+      const cssProps = props.map(p => `${p}: ${sizeValue};`).join(' ');
+      classes.push({ name: className, css: `.${className} { ${cssProps} }` });
+    });
+  });
+
+  // Border Width
+  const borderWidths = ['0', '1', '2', '4', '8'];
+  borderWidths.forEach(w => {
+    const value = w === '1' ? '1px' : w === '0' ? '0px' : `${w}px`;
+    const className = w === '1' ? 'border' : `border-${w}`;
+    classes.push({ name: className, css: `.${className} { border-width: ${value}; }` });
+  });
+  classes.push({ name: 'border', css: '.border { border-width: 1px; }' });
+
+  // Directional border width
+  ['t', 'r', 'b', 'l', 'x', 'y', 's', 'e'].forEach(dir => {
+    borderWidths.forEach(w => {
+      const value = w === '1' ? '1px' : w === '0' ? '0px' : `${w}px`;
+      const className = w === '1' ? `border-${dir}` : `border-${dir}-${w}`;
+      let cssProps;
+      switch (dir) {
+        case 't': cssProps = `border-top-width: ${value};`; break;
+        case 'r': cssProps = `border-right-width: ${value};`; break;
+        case 'b': cssProps = `border-bottom-width: ${value};`; break;
+        case 'l': cssProps = `border-left-width: ${value};`; break;
+        case 'x': cssProps = `border-left-width: ${value}; border-right-width: ${value};`; break;
+        case 'y': cssProps = `border-top-width: ${value}; border-bottom-width: ${value};`; break;
+        case 's': cssProps = `border-inline-start-width: ${value};`; break;
+        case 'e': cssProps = `border-inline-end-width: ${value};`; break;
+      }
+      classes.push({ name: className, css: `.${className} { ${cssProps} }` });
+    });
+  });
+
+  // Border Style
+  ['solid', 'dashed', 'dotted', 'double', 'hidden', 'none'].forEach(style => {
+    classes.push({ name: `border-${style}`, css: `.border-${style} { border-style: ${style}; }` });
+  });
+
+  // Divide Width
+  borderWidths.forEach(w => {
+    const value = w === '1' ? '1px' : w === '0' ? '0px' : `${w}px`;
+    const classNameX = w === '1' ? 'divide-x' : `divide-x-${w}`;
+    const classNameY = w === '1' ? 'divide-y' : `divide-y-${w}`;
+
+    classes.push({
+      name: classNameX,
+      css: `.${classNameX} > :not([hidden]) ~ :not([hidden]) { border-left-width: ${value}; }`
+    });
+    classes.push({
+      name: classNameY,
+      css: `.${classNameY} > :not([hidden]) ~ :not([hidden]) { border-top-width: ${value}; }`
+    });
+  });
+
+  // Divide Style
+  ['solid', 'dashed', 'dotted', 'double', 'none'].forEach(style => {
+    classes.push({
+      name: `divide-${style}`,
+      css: `.divide-${style} > :not([hidden]) ~ :not([hidden]) { border-style: ${style}; }`
+    });
+  });
+
+  // Outline Width
+  ['0', '1', '2', '4', '8'].forEach(w => {
+    const value = `${w}px`;
+    classes.push({ name: `outline-${w}`, css: `.outline-${w} { outline-width: ${value}; }` });
+  });
+
+  // Outline Style
+  classes.push({ name: 'outline-none', css: '.outline-none { outline: 2px solid transparent; outline-offset: 2px; }' });
+  classes.push({ name: 'outline', css: '.outline { outline-style: solid; }' });
+  classes.push({ name: 'outline-dashed', css: '.outline-dashed { outline-style: dashed; }' });
+  classes.push({ name: 'outline-dotted', css: '.outline-dotted { outline-style: dotted; }' });
+  classes.push({ name: 'outline-double', css: '.outline-double { outline-style: double; }' });
+
+  // Outline Offset
+  ['0', '1', '2', '4', '8'].forEach(o => {
+    const value = `${o}px`;
+    classes.push({ name: `outline-offset-${o}`, css: `.outline-offset-${o} { outline-offset: ${value}; }` });
+  });
+
+  // Ring
+  ['0', '1', '2', '4', '8'].forEach(w => {
+    const className = w === '1' ? 'ring' : `ring-${w}`;
+    const width = w === '1' ? '1px' : w === '0' ? '0px' : `${w}px`;
+    classes.push({
+      name: className,
+      css: `.${className} { box-shadow: 0 0 0 ${width} var(--j-ring, var(--j-primary)); }`
+    });
+  });
+  classes.push({ name: 'ring', css: '.ring { box-shadow: 0 0 0 3px var(--j-ring, var(--j-primary)); }' });
+  classes.push({ name: 'ring-inset', css: '.ring-inset { --j-ring-inset: inset; }' });
+
+  // Ring Offset
+  ['0', '1', '2', '4', '8'].forEach(o => {
+    const value = `${o}px`;
+    classes.push({
+      name: `ring-offset-${o}`,
+      css: `.ring-offset-${o} { --j-ring-offset-width: ${value}; box-shadow: 0 0 0 var(--j-ring-offset-width) var(--j-ring-offset-color, white), var(--j-ring-shadow); }`
+    });
+  });
+
+  // Mix Blend Mode
+  const blendModes = ['normal', 'multiply', 'screen', 'overlay', 'darken', 'lighten', 'color-dodge', 'color-burn', 'hard-light', 'soft-light', 'difference', 'exclusion', 'hue', 'saturation', 'color', 'luminosity', 'plus-lighter'];
+  blendModes.forEach(mode => {
+    classes.push({ name: `mix-blend-${mode}`, css: `.mix-blend-${mode} { mix-blend-mode: ${mode}; }` });
+  });
+
+  // Background Blend Mode
+  blendModes.forEach(mode => {
+    classes.push({ name: `bg-blend-${mode}`, css: `.bg-blend-${mode} { background-blend-mode: ${mode}; }` });
+  });
+
+  // Cursor
+  const cursors = ['auto', 'default', 'pointer', 'wait', 'text', 'move', 'help', 'not-allowed', 'none', 'context-menu', 'progress', 'cell', 'crosshair', 'vertical-text', 'alias', 'copy', 'no-drop', 'grab', 'grabbing', 'all-scroll', 'col-resize', 'row-resize', 'n-resize', 's-resize', 'e-resize', 'w-resize', 'ne-resize', 'nw-resize', 'se-resize', 'sw-resize', 'ew-resize', 'ns-resize', 'nesw-resize', 'nwse-resize', 'zoom-in', 'zoom-out'];
+  cursors.forEach(cursor => {
+    classes.push({ name: `cursor-${cursor}`, css: `.cursor-${cursor} { cursor: ${cursor}; }` });
+  });
+
+  // User Select
+  ['none', 'text', 'all', 'auto'].forEach(select => {
+    classes.push({ name: `select-${select}`, css: `.select-${select} { user-select: ${select}; }` });
+  });
+
+  // Pointer Events
+  classes.push({ name: 'pointer-events-none', css: '.pointer-events-none { pointer-events: none; }' });
+  classes.push({ name: 'pointer-events-auto', css: '.pointer-events-auto { pointer-events: auto; }' });
+
+  // Resize
+  ['none', 'y', 'x', 'both'].forEach(r => {
+    const value = r === 'both' ? 'both' : r === 'y' ? 'vertical' : r === 'x' ? 'horizontal' : 'none';
+    const className = r === 'both' ? 'resize' : `resize-${r}`;
+    classes.push({ name: className, css: `.${className} { resize: ${value}; }` });
+  });
+
+  // Scroll Behavior
+  classes.push({ name: 'scroll-auto', css: '.scroll-auto { scroll-behavior: auto; }' });
+  classes.push({ name: 'scroll-smooth', css: '.scroll-smooth { scroll-behavior: smooth; }' });
+
+  // Scroll Snap Type
+  classes.push({ name: 'snap-none', css: '.snap-none { scroll-snap-type: none; }' });
+  classes.push({ name: 'snap-x', css: '.snap-x { scroll-snap-type: x var(--j-scroll-snap-strictness, proximity); }' });
+  classes.push({ name: 'snap-y', css: '.snap-y { scroll-snap-type: y var(--j-scroll-snap-strictness, proximity); }' });
+  classes.push({ name: 'snap-both', css: '.snap-both { scroll-snap-type: both var(--j-scroll-snap-strictness, proximity); }' });
+  classes.push({ name: 'snap-mandatory', css: '.snap-mandatory { --j-scroll-snap-strictness: mandatory; }' });
+  classes.push({ name: 'snap-proximity', css: '.snap-proximity { --j-scroll-snap-strictness: proximity; }' });
+
+  // Scroll Snap Align
+  classes.push({ name: 'snap-start', css: '.snap-start { scroll-snap-align: start; }' });
+  classes.push({ name: 'snap-end', css: '.snap-end { scroll-snap-align: end; }' });
+  classes.push({ name: 'snap-center', css: '.snap-center { scroll-snap-align: center; }' });
+  classes.push({ name: 'snap-align-none', css: '.snap-align-none { scroll-snap-align: none; }' });
+
+  // Touch Action
+  ['auto', 'none', 'pan-x', 'pan-left', 'pan-right', 'pan-y', 'pan-up', 'pan-down', 'pinch-zoom', 'manipulation'].forEach(action => {
+    classes.push({ name: `touch-${action}`, css: `.touch-${action} { touch-action: ${action}; }` });
+  });
+
+  // Will Change
+  classes.push({ name: 'will-change-auto', css: '.will-change-auto { will-change: auto; }' });
+  classes.push({ name: 'will-change-scroll', css: '.will-change-scroll { will-change: scroll-position; }' });
+  classes.push({ name: 'will-change-contents', css: '.will-change-contents { will-change: contents; }' });
+  classes.push({ name: 'will-change-transform', css: '.will-change-transform { will-change: transform; }' });
+
+  // Glass Effect (futuristic)
+  classes.push({
+    name: 'glass',
+    css: `.glass {
+  background: rgba(255, 255, 255, 0.1);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+}`
+  });
+  classes.push({
+    name: 'glass-dark',
+    css: `.glass-dark {
+  background: rgba(0, 0, 0, 0.3);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+}`
+  });
+
+  return {
+    css: classes.map(c => c.css).join('\n'),
+    classes
+  };
+}

package/src/core/utilities/filters.js

@@ -0,0 +1,135 @@
+export function generateFilterUtilities(config) {
+  const classes = [];
+
+  // Filter
+  classes.push({
+    name: 'filter',
+    css: `.filter { filter: var(--j-blur, ) var(--j-brightness, ) var(--j-contrast, ) var(--j-grayscale, ) var(--j-hue-rotate, ) var(--j-invert, ) var(--j-saturate, ) var(--j-sepia, ) var(--j-drop-shadow, ); }`
+  });
+  classes.push({ name: 'filter-none', css: '.filter-none { filter: none; }' });
+
+  // Backdrop Filter
+  classes.push({
+    name: 'backdrop-filter',
+    css: `.backdrop-filter { backdrop-filter: var(--j-backdrop-blur, ) var(--j-backdrop-brightness, ) var(--j-backdrop-contrast, ) var(--j-backdrop-grayscale, ) var(--j-backdrop-hue-rotate, ) var(--j-backdrop-invert, ) var(--j-backdrop-saturate, ) var(--j-backdrop-sepia, ); -webkit-backdrop-filter: var(--j-backdrop-blur, ) var(--j-backdrop-brightness, ) var(--j-backdrop-contrast, ) var(--j-backdrop-grayscale, ) var(--j-backdrop-hue-rotate, ) var(--j-backdrop-invert, ) var(--j-backdrop-saturate, ) var(--j-backdrop-sepia, ); }`
+  });
+  classes.push({ name: 'backdrop-filter-none', css: '.backdrop-filter-none { backdrop-filter: none; -webkit-backdrop-filter: none; }' });
+
+  // Blur
+  const blurs = {
+    'none': '0',
+    'sm': '4px',
+    'DEFAULT': '8px',
+    'md': '12px',
+    'lg': '16px',
+    'xl': '24px',
+    '2xl': '40px',
+    '3xl': '64px'
+  };
+
+  Object.entries(blurs).forEach(([name, value]) => {
+    const className = name === 'DEFAULT' ? 'blur' : `blur-${name}`;
+    classes.push({ name: className, css: `.${className} { --j-blur: blur(${value}); filter: blur(${value}); }` });
+
+    const backdropClassName = name === 'DEFAULT' ? 'backdrop-blur' : `backdrop-blur-${name}`;
+    classes.push({
+      name: backdropClassName,
+      css: `.${backdropClassName} { --j-backdrop-blur: blur(${value}); backdrop-filter: blur(${value}); -webkit-backdrop-filter: blur(${value}); }`
+    });
+  });
+
+  // Brightness
+  const brightnessValues = [0, 50, 75, 90, 95, 100, 105, 110, 125, 150, 200];
+  brightnessValues.forEach(b => {
+    const value = b / 100;
+    classes.push({ name: `brightness-${b}`, css: `.brightness-${b} { --j-brightness: brightness(${value}); filter: brightness(${value}); }` });
+    classes.push({ name: `backdrop-brightness-${b}`, css: `.backdrop-brightness-${b} { --j-backdrop-brightness: brightness(${value}); backdrop-filter: brightness(${value}); -webkit-backdrop-filter: brightness(${value}); }` });
+  });
+
+  // Contrast
+  const contrastValues = [0, 50, 75, 100, 125, 150, 200];
+  contrastValues.forEach(c => {
+    const value = c / 100;
+    classes.push({ name: `contrast-${c}`, css: `.contrast-${c} { --j-contrast: contrast(${value}); filter: contrast(${value}); }` });
+    classes.push({ name: `backdrop-contrast-${c}`, css: `.backdrop-contrast-${c} { --j-backdrop-contrast: contrast(${value}); backdrop-filter: contrast(${value}); -webkit-backdrop-filter: contrast(${value}); }` });
+  });
+
+  // Grayscale
+  classes.push({ name: 'grayscale-0', css: '.grayscale-0 { --j-grayscale: grayscale(0); filter: grayscale(0); }' });
+  classes.push({ name: 'grayscale', css: '.grayscale { --j-grayscale: grayscale(100%); filter: grayscale(100%); }' });
+  classes.push({ name: 'backdrop-grayscale-0', css: '.backdrop-grayscale-0 { --j-backdrop-grayscale: grayscale(0); backdrop-filter: grayscale(0); -webkit-backdrop-filter: grayscale(0); }' });
+  classes.push({ name: 'backdrop-grayscale', css: '.backdrop-grayscale { --j-backdrop-grayscale: grayscale(100%); backdrop-filter: grayscale(100%); -webkit-backdrop-filter: grayscale(100%); }' });
+
+  // Hue Rotate
+  const hueRotations = [0, 15, 30, 60, 90, 180];
+  hueRotations.forEach(h => {
+    classes.push({ name: `hue-rotate-${h}`, css: `.hue-rotate-${h} { --j-hue-rotate: hue-rotate(${h}deg); filter: hue-rotate(${h}deg); }` });
+    classes.push({ name: `-hue-rotate-${h}`, css: `.-hue-rotate-${h} { --j-hue-rotate: hue-rotate(-${h}deg); filter: hue-rotate(-${h}deg); }` });
+    classes.push({ name: `backdrop-hue-rotate-${h}`, css: `.backdrop-hue-rotate-${h} { --j-backdrop-hue-rotate: hue-rotate(${h}deg); backdrop-filter: hue-rotate(${h}deg); -webkit-backdrop-filter: hue-rotate(${h}deg); }` });
+  });
+
+  // Invert
+  classes.push({ name: 'invert-0', css: '.invert-0 { --j-invert: invert(0); filter: invert(0); }' });
+  classes.push({ name: 'invert', css: '.invert { --j-invert: invert(100%); filter: invert(100%); }' });
+  classes.push({ name: 'backdrop-invert-0', css: '.backdrop-invert-0 { --j-backdrop-invert: invert(0); backdrop-filter: invert(0); -webkit-backdrop-filter: invert(0); }' });
+  classes.push({ name: 'backdrop-invert', css: '.backdrop-invert { --j-backdrop-invert: invert(100%); backdrop-filter: invert(100%); -webkit-backdrop-filter: invert(100%); }' });
+
+  // Saturate
+  const saturateValues = [0, 50, 100, 150, 200];
+  saturateValues.forEach(s => {
+    const value = s / 100;
+    classes.push({ name: `saturate-${s}`, css: `.saturate-${s} { --j-saturate: saturate(${value}); filter: saturate(${value}); }` });
+    classes.push({ name: `backdrop-saturate-${s}`, css: `.backdrop-saturate-${s} { --j-backdrop-saturate: saturate(${value}); backdrop-filter: saturate(${value}); -webkit-backdrop-filter: saturate(${value}); }` });
+  });
+
+  // Sepia
+  classes.push({ name: 'sepia-0', css: '.sepia-0 { --j-sepia: sepia(0); filter: sepia(0); }' });
+  classes.push({ name: 'sepia', css: '.sepia { --j-sepia: sepia(100%); filter: sepia(100%); }' });
+  classes.push({ name: 'backdrop-sepia-0', css: '.backdrop-sepia-0 { --j-backdrop-sepia: sepia(0); backdrop-filter: sepia(0); -webkit-backdrop-filter: sepia(0); }' });
+  classes.push({ name: 'backdrop-sepia', css: '.backdrop-sepia { --j-backdrop-sepia: sepia(100%); backdrop-filter: sepia(100%); -webkit-backdrop-filter: sepia(100%); }' });
+
+  // Drop Shadow
+  const dropShadows = {
+    'sm': 'drop-shadow(0 1px 1px rgb(0 0 0 / 0.05))',
+    'DEFAULT': 'drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.06))',
+    'md': 'drop-shadow(0 4px 3px rgb(0 0 0 / 0.07)) drop-shadow(0 2px 2px rgb(0 0 0 / 0.06))',
+    'lg': 'drop-shadow(0 10px 8px rgb(0 0 0 / 0.04)) drop-shadow(0 4px 3px rgb(0 0 0 / 0.1))',
+    'xl': 'drop-shadow(0 20px 13px rgb(0 0 0 / 0.03)) drop-shadow(0 8px 5px rgb(0 0 0 / 0.08))',
+    '2xl': 'drop-shadow(0 25px 25px rgb(0 0 0 / 0.15))',
+    'none': 'drop-shadow(0 0 #0000)'
+  };
+
+  Object.entries(dropShadows).forEach(([name, value]) => {
+    const className = name === 'DEFAULT' ? 'drop-shadow' : `drop-shadow-${name}`;
+    classes.push({ name: className, css: `.${className} { --j-drop-shadow: ${value}; filter: ${value}; }` });
+  });
+
+  // Glow filter (futuristic)
+  classes.push({
+    name: 'drop-shadow-glow',
+    css: `.drop-shadow-glow { filter: drop-shadow(0 0 10px var(--j-primary)) drop-shadow(0 0 20px var(--j-primary)); }`
+  });
+  classes.push({
+    name: 'drop-shadow-glow-sm',
+    css: `.drop-shadow-glow-sm { filter: drop-shadow(0 0 5px var(--j-primary)); }`
+  });
+  classes.push({
+    name: 'drop-shadow-glow-lg',
+    css: `.drop-shadow-glow-lg { filter: drop-shadow(0 0 20px var(--j-primary)) drop-shadow(0 0 40px var(--j-primary)); }`
+  });
+
+  // Backdrop Opacity
+  const opacities = [0, 5, 10, 20, 25, 30, 40, 50, 60, 70, 75, 80, 90, 95, 100];
+  opacities.forEach(o => {
+    const value = o / 100;
+    classes.push({
+      name: `backdrop-opacity-${o}`,
+      css: `.backdrop-opacity-${o} { --j-backdrop-opacity: opacity(${value}); backdrop-filter: opacity(${value}); -webkit-backdrop-filter: opacity(${value}); }`
+    });
+  });
+
+  return {
+    css: classes.map(c => c.css).join('\n'),
+    classes
+  };
+}