@collagejs/core 0.1.2 → 0.2.0

package/dist/theme/utilities.css

@@ -0,0 +1,189 @@
+/**
+ * CollageJS Theme - Utility Classes
+ *
+ * This file provides utility classes for common styling patterns.
+ */
+
+/* ===== COLORS ===== */
+
+/* Text colors */
+.cjs-text-primary { color: var(--cjs-primary); }
+.cjs-text-secondary { color: var(--cjs-secondary); }
+.cjs-text-accent { color: var(--cjs-accent); }
+.cjs-text-warning { color: var(--cjs-warning); }
+.cjs-text-success { color: var(--cjs-success); }
+.cjs-text-error { color: var(--cjs-error); }
+.cjs-text-muted { color: var(--cjs-text-muted); }
+.cjs-text-white { color: var(--cjs-white); }
+
+/* Contrasting text colors - solves the "what text color goes with X background?" problem */
+.cjs-text-on-light { color: var(--cjs-text-on-light); }        /* Dark text for light backgrounds */
+.cjs-text-on-dark { color: var(--cjs-text-on-dark); }          /* Light text for dark backgrounds */
+.cjs-text-on-primary { color: var(--cjs-text-on-primary); }    /* Contrasting text for primary BG */
+.cjs-text-on-secondary { color: var(--cjs-text-on-secondary); } /* Contrasting text for secondary BG */
+
+/* Background colors with opacity support */
+.cjs-bg-primary { background: rgba(var(--cjs-primary-rgb), var(--cjs-bg-opacity)); }
+.cjs-bg-secondary { background: rgba(var(--cjs-secondary-rgb), var(--cjs-bg-opacity)); }
+.cjs-bg-accent { background: rgba(var(--cjs-accent-rgb), var(--cjs-bg-opacity)); }
+.cjs-bg-warning { background: rgba(var(--cjs-warning-rgb), var(--cjs-bg-opacity)); }
+.cjs-bg-success { background: rgba(var(--cjs-success-rgb), var(--cjs-bg-opacity)); }
+.cjs-bg-error { background: rgba(var(--cjs-error-rgb), var(--cjs-bg-opacity)); }
+.cjs-bg-surface { background: var(--cjs-surface); }
+.cjs-bg-white { background: var(--cjs-white); }
+
+/* Brand color backgrounds (theme-agnostic, always the same color) */
+.cjs-bg-indigo {
+  --cjs-background: rgba(var(--cjs-brand-indigo-start-rgb), var(--cjs-bg-opacity)) !important;
+  &.cjs-glass {
+    --cjs-background: rgba(var(--cjs-brand-indigo-start-rgb), var(--cjs-glass-bg-opacity)) !important;
+  }
+}
+.cjs-bg-cyan {
+  --cjs-background: rgba(var(--cjs-brand-cyan-start-rgb), var(--cjs-bg-opacity)) !important;
+  &.cjs-glass {
+    --cjs-background: rgba(var(--cjs-brand-cyan-start-rgb), var(--cjs-glass-bg-opacity)) !important;
+  }
+}
+.cjs-bg-green {
+  --cjs-background: rgba(var(--cjs-brand-green-start-rgb), var(--cjs-bg-opacity)) !important;
+  &.cjs-glass {
+    --cjs-background: rgba(var(--cjs-brand-green-start-rgb), var(--cjs-glass-bg-opacity)) !important;
+  }
+}
+.cjs-bg-orange {
+  --cjs-background: rgba(var(--cjs-brand-orange-start-rgb), var(--cjs-bg-opacity)) !important;
+  &.cjs-glass {
+    --cjs-background: rgba(var(--cjs-brand-orange-start-rgb), var(--cjs-glass-bg-opacity)) !important;
+  }
+}
+
+/* Background + text combinations that are guaranteed to work together */
+.cjs-contrast-light {
+  background: var(--cjs-contrast-light-bg);
+  color: var(--cjs-contrast-light-text);
+}
+.cjs-contrast-dark {
+  background: var(--cjs-contrast-dark-bg);
+  color: var(--cjs-contrast-dark-text);
+}
+
+/* Gradient backgrounds */
+.cjs-bg-primary-gradient {
+  background: var(--cjs-primary-gradient);
+  color: var(--cjs-text-on-primary);
+}
+.cjs-bg-secondary-gradient {
+  background: var(--cjs-secondary-gradient);
+  color: var(--cjs-text-on-secondary);
+}
+.cjs-bg-accent-gradient {
+  background: var(--cjs-accent-gradient);
+  color: var(--cjs-text-on-primary);
+}
+.cjs-bg-warning-gradient {
+  background: var(--cjs-warning-gradient);
+  color: var(--cjs-text-on-primary);
+}
+
+/* Border colors */
+.cjs-border-primary { border-color: var(--cjs-primary); }
+.cjs-border-secondary { border-color: var(--cjs-secondary); }
+.cjs-border-default { border-color: var(--cjs-border); }
+
+/* ===== SPACING ===== */
+.cjs-p-0 { padding: 0; }
+.cjs-p-1 { padding: 0.25rem; }
+.cjs-p-2 { padding: 0.5rem; }
+.cjs-p-3 { padding: 0.75rem; }
+.cjs-p-4 { padding: 1rem; }
+.cjs-p-6 { padding: 1.5rem; }
+.cjs-p-8 { padding: 2rem; }
+
+.cjs-m-0 { margin: 0; }
+.cjs-m-1 { margin: 0.25rem; }
+.cjs-m-2 { margin: 0.5rem; }
+.cjs-m-3 { margin: 0.75rem; }
+.cjs-m-4 { margin: 1rem; }
+.cjs-m-6 { margin: 1.5rem; }
+.cjs-m-8 { margin: 2rem; }
+
+/* ===== LAYOUT ===== */
+.cjs-flex { display: flex; }
+.cjs-grid { display: grid; }
+.cjs-block { display: block; }
+.cjs-inline { display: inline; }
+.cjs-inline-block { display: inline-block; }
+.cjs-hidden { display: none; }
+
+.cjs-flex-row { flex-direction: row; }
+.cjs-flex-col { flex-direction: column; }
+
+.cjs-items-center { align-items: center; }
+.cjs-items-start { align-items: flex-start; }
+.cjs-items-end { align-items: flex-end; }
+.cjs-items-baseline { align-items: baseline; }
+
+.cjs-justify-center { justify-content: center; }
+.cjs-justify-between { justify-content: space-between; }
+.cjs-justify-around { justify-content: space-around; }
+.cjs-justify-start { justify-content: flex-start; }
+.cjs-justify-end { justify-content: flex-end; }
+
+.cjs-gap-1 { gap: 0.25rem; }
+.cjs-gap-2 { gap: 0.5rem; }
+.cjs-gap-3 { gap: 0.75rem; }
+.cjs-gap-4 { gap: 1rem; }
+.cjs-gap-6 { gap: 1.5rem; }
+
+.cjs-grow { flex-grow: 1; }
+.cjs-shrink { flex-shrink: 1; }
+.cjs-no-grow { flex-grow: 0; }
+
+/* ===== BORDERS ===== */
+.cjs-rounded { border-radius: var(--cjs-radius-sm); }
+.cjs-rounded-md { border-radius: var(--cjs-radius); }
+.cjs-rounded-lg { border-radius: var(--cjs-radius-lg); }
+.cjs-rounded-xl { border-radius: var(--cjs-radius-xl); }
+.cjs-rounded-pill { border-radius: var(--cjs-radius-pill); }
+.cjs-rounded-circle { border-radius: var(--cjs-radius-circle); }
+
+.cjs-border { border: 1px solid var(--cjs-border); }
+.cjs-border-2 { border: 2px solid var(--cjs-border); }
+.cjs-border-0 { border: none; }
+
+/* ===== SHADOWS ===== */
+.cjs-shadow-sm { box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); }
+.cjs-shadow { box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1); }
+.cjs-shadow-md { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); }
+.cjs-shadow-lg { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1); }
+.cjs-shadow-none { box-shadow: none; }
+
+/* ===== LOGO UTILITIES ===== */
+.cjs-logo {
+  display: inline-block;
+  vertical-align: middle;
+}
+
+.cjs-logo-16 { width: 1rem; height: 1rem; }
+.cjs-logo-48 { width: 3rem; height: 3rem; }
+.cjs-logo-64 { width: 4rem; height: 4rem; }
+.cjs-logo-128 { width: 8rem; height: 8rem; }
+.cjs-logo-512 { width: 32rem; height: 32rem; }
+
+/* ===== TYPOGRAPHY ===== */
+.cjs-text-xs { font-size: 0.75rem; line-height: 1rem; }
+.cjs-text-sm { font-size: 0.875rem; line-height: 1.25rem; }
+.cjs-text-base { font-size: 1rem; line-height: 1.5rem; }
+.cjs-text-lg { font-size: 1.125rem; line-height: 1.75rem; }
+.cjs-text-xl { font-size: 1.25rem; line-height: 1.75rem; }
+.cjs-text-2xl { font-size: 1.5rem; line-height: 2rem; }
+.cjs-text-3xl { font-size: 1.875rem; line-height: 2.25rem; }
+
+.cjs-font-light { font-weight: 300; }
+.cjs-font-normal { font-weight: 400; }
+.cjs-font-medium { font-weight: 500; }
+.cjs-font-semibold { font-weight: 600; }
+.cjs-font-bold { font-weight: 700; }
+
+.cjs-font-mono { font-family: var(--cjs-font-mono, monospace); }

package/dist/theme/variants.css

@@ -0,0 +1,248 @@
+/**
+ * CollageJS Theme - Color Variants
+ *
+ * This file provides different theme variants by overriding the main color variables.
+ * Apply these classes to any themed container to change the theme appearance.
+ *
+ * MICRO-FRONTEND READY: Works with any scoped container.
+ */
+
+/* ===== ACCENT THEME (Orange Primary) ===== */
+[data-collagejs-theme] .cjs-theme-accent,
+.cjs-themed .cjs-theme-accent {
+  --cjs-primary: var(--cjs-brand-orange-start);
+  --cjs-primary-rgb: var(--cjs-brand-orange-start-rgb);
+  --cjs-primary-end: var(--cjs-brand-orange-end);
+  --cjs-primary-end-rgb: var(--cjs-brand-orange-end-rgb);
+  --cjs-primary-gradient: linear-gradient(135deg, var(--cjs-primary), var(--cjs-primary-end));
+
+  /* Regenerate primary variants for CSS variable reactivity */
+  --cjs-primary-50: color-mix(in srgb, var(--cjs-primary) 10%, white);
+  --cjs-primary-100: color-mix(in srgb, var(--cjs-primary) 20%, white);
+  --cjs-primary-200: color-mix(in srgb, var(--cjs-primary) 40%, white);
+  --cjs-primary-300: color-mix(in srgb, var(--cjs-primary) 60%, white);
+  --cjs-primary-400: color-mix(in srgb, var(--cjs-primary) 80%, white);
+  --cjs-primary-500: var(--cjs-primary);
+  --cjs-primary-600: color-mix(in srgb, var(--cjs-primary) 80%, black);
+  --cjs-primary-700: color-mix(in srgb, var(--cjs-primary) 60%, black);
+  --cjs-primary-800: color-mix(in srgb, var(--cjs-primary) 40%, black);
+  --cjs-primary-900: color-mix(in srgb, var(--cjs-primary) 20%, black);
+
+  --cjs-secondary: var(--cjs-brand-green-start);
+  --cjs-secondary-rgb: var(--cjs-brand-green-start-rgb);
+  --cjs-secondary-end: var(--cjs-brand-green-end);
+  --cjs-secondary-end-rgb: var(--cjs-brand-green-end-rgb);
+  --cjs-secondary-gradient: linear-gradient(135deg, var(--cjs-secondary), var(--cjs-secondary-end));
+
+  --cjs-warning: var(--cjs-brand-indigo-start);
+  --cjs-warning-rgb: var(--cjs-brand-indigo-start-rgb);
+  --cjs-warning-end: var(--cjs-brand-indigo-end);
+  --cjs-warning-end-rgb: var(--cjs-brand-indigo-end-rgb);
+  --cjs-warning-gradient: linear-gradient(135deg, var(--cjs-warning), var(--cjs-warning-end));
+
+  --cjs-accent: var(--cjs-brand-cyan-start);
+  --cjs-accent-rgb: var(--cjs-brand-cyan-start-rgb);
+  --cjs-accent-end: var(--cjs-brand-cyan-end);
+  --cjs-accent-end-rgb: var(--cjs-brand-cyan-end-rgb);
+  --cjs-accent-gradient: linear-gradient(135deg, var(--cjs-accent), var(--cjs-accent-end));
+}
+
+/* ===== SKY THEME (Cyan Primary) ===== */
+[data-collagejs-theme] .cjs-theme-sky,
+.cjs-themed .cjs-theme-sky {
+  --cjs-primary: var(--cjs-brand-cyan-start);
+  --cjs-primary-rgb: var(--cjs-brand-cyan-start-rgb);
+  --cjs-primary-end: var(--cjs-brand-cyan-end);
+  --cjs-primary-end-rgb: var(--cjs-brand-cyan-end-rgb);
+  --cjs-primary-gradient: linear-gradient(135deg, var(--cjs-primary), var(--cjs-primary-end));
+
+  /* Regenerate primary variants for CSS variable reactivity */
+  --cjs-primary-50: color-mix(in srgb, var(--cjs-primary) 10%, white);
+  --cjs-primary-100: color-mix(in srgb, var(--cjs-primary) 20%, white);
+  --cjs-primary-200: color-mix(in srgb, var(--cjs-primary) 40%, white);
+  --cjs-primary-300: color-mix(in srgb, var(--cjs-primary) 60%, white);
+  --cjs-primary-400: color-mix(in srgb, var(--cjs-primary) 80%, white);
+  --cjs-primary-500: var(--cjs-primary);
+  --cjs-primary-600: color-mix(in srgb, var(--cjs-primary) 80%, black);
+  --cjs-primary-700: color-mix(in srgb, var(--cjs-primary) 60%, black);
+  --cjs-primary-800: color-mix(in srgb, var(--cjs-primary) 40%, black);
+  --cjs-primary-900: color-mix(in srgb, var(--cjs-primary) 20%, black);
+
+  --cjs-secondary: var(--cjs-brand-green-start);
+  --cjs-secondary-rgb: var(--cjs-brand-green-start-rgb);
+  --cjs-secondary-end: var(--cjs-brand-green-end);
+  --cjs-secondary-end-rgb: var(--cjs-brand-green-end-rgb);
+  --cjs-secondary-gradient: linear-gradient(135deg, var(--cjs-secondary), var(--cjs-secondary-end));
+
+  --cjs-warning: var(--cjs-brand-orange-start);
+  --cjs-warning-rgb: var(--cjs-brand-orange-start-rgb);
+  --cjs-warning-end: var(--cjs-brand-orange-end);
+  --cjs-warning-end-rgb: var(--cjs-brand-orange-end-rgb);
+  --cjs-warning-gradient: linear-gradient(135deg, var(--cjs-warning), var(--cjs-warning-end));
+
+  --cjs-accent: var(--cjs-brand-cyan-start);
+  --cjs-accent-rgb: var(--cjs-brand-cyan-start-rgb);
+  --cjs-accent-end: var(--cjs-brand-cyan-end);
+  --cjs-accent-end-rgb: var(--cjs-brand-cyan-end-rgb);
+  --cjs-accent-gradient: linear-gradient(135deg, var(--cjs-accent), var(--cjs-accent-end));
+}
+
+/* ===== NATURE THEME (Green Primary) ===== */
+[data-collagejs-theme] .cjs-theme-nature,
+.cjs-themed .cjs-theme-nature {
+  --cjs-primary: var(--cjs-brand-green-start);
+  --cjs-primary-rgb: var(--cjs-brand-green-start-rgb);
+  --cjs-primary-end: var(--cjs-brand-green-end);
+  --cjs-primary-end-rgb: var(--cjs-brand-green-end-rgb);
+  --cjs-primary-gradient: linear-gradient(135deg, var(--cjs-primary), var(--cjs-primary-end));
+
+  /* Regenerate primary variants for CSS variable reactivity */
+  --cjs-primary-50: color-mix(in srgb, var(--cjs-primary) 10%, white);
+  --cjs-primary-100: color-mix(in srgb, var(--cjs-primary) 20%, white);
+  --cjs-primary-200: color-mix(in srgb, var(--cjs-primary) 40%, white);
+  --cjs-primary-300: color-mix(in srgb, var(--cjs-primary) 60%, white);
+  --cjs-primary-400: color-mix(in srgb, var(--cjs-primary) 80%, white);
+  --cjs-primary-500: var(--cjs-primary);
+  --cjs-primary-600: color-mix(in srgb, var(--cjs-primary) 80%, black);
+  --cjs-primary-700: color-mix(in srgb, var(--cjs-primary) 60%, black);
+  --cjs-primary-800: color-mix(in srgb, var(--cjs-primary) 40%, black);
+  --cjs-primary-900: color-mix(in srgb, var(--cjs-primary) 20%, black);
+
+  --cjs-secondary: var(--cjs-brand-cyan-start);
+  --cjs-secondary-rgb: var(--cjs-brand-cyan-start-rgb);
+  --cjs-secondary-end: var(--cjs-brand-cyan-end);
+  --cjs-secondary-end-rgb: var(--cjs-brand-cyan-end-rgb);
+  --cjs-secondary-gradient: linear-gradient(135deg, var(--cjs-secondary), var(--cjs-secondary-end));
+
+  --cjs-warning: var(--cjs-brand-indigo-start);
+  --cjs-warning-rgb: var(--cjs-brand-indigo-start-rgb);
+  --cjs-warning-end: var(--cjs-brand-indigo-end);
+  --cjs-warning-end-rgb: var(--cjs-brand-indigo-end-rgb);
+  --cjs-warning-gradient: linear-gradient(135deg, var(--cjs-warning), var(--cjs-warning-end));
+
+  --cjs-accent: var(--cjs-brand-orange-start);
+  --cjs-accent-rgb: var(--cjs-brand-orange-start-rgb);
+  --cjs-accent-end: var(--cjs-brand-orange-end);
+  --cjs-accent-end-rgb: var(--cjs-brand-orange-end-rgb);
+  --cjs-accent-gradient: linear-gradient(135deg, var(--cjs-accent), var(--cjs-accent-end));
+}
+
+/* ===== ROYAL THEME (Purple Primary) ===== */
+[data-collagejs-theme] .cjs-theme-royal,
+.cjs-themed .cjs-theme-royal {
+  --cjs-primary: var(--cjs-brand-indigo-start);
+  --cjs-primary-rgb: var(--cjs-brand-indigo-start-rgb);
+  --cjs-primary-end: var(--cjs-brand-indigo-end);
+  --cjs-primary-end-rgb: var(--cjs-brand-indigo-end-rgb);
+  --cjs-primary-gradient: linear-gradient(135deg, var(--cjs-primary), var(--cjs-primary-end));
+
+  /* Regenerate primary variants for CSS variable reactivity */
+  --cjs-primary-50: color-mix(in srgb, var(--cjs-primary) 10%, white);
+  --cjs-primary-100: color-mix(in srgb, var(--cjs-primary) 20%, white);
+  --cjs-primary-200: color-mix(in srgb, var(--cjs-primary) 40%, white);
+  --cjs-primary-300: color-mix(in srgb, var(--cjs-primary) 60%, white);
+  --cjs-primary-400: color-mix(in srgb, var(--cjs-primary) 80%, white);
+  --cjs-primary-500: var(--cjs-primary);
+  --cjs-primary-600: color-mix(in srgb, var(--cjs-primary) 80%, black);
+  --cjs-primary-700: color-mix(in srgb, var(--cjs-primary) 60%, black);
+  --cjs-primary-800: color-mix(in srgb, var(--cjs-primary) 40%, black);
+  --cjs-primary-900: color-mix(in srgb, var(--cjs-primary) 20%, black);
+
+  --cjs-secondary: var(--cjs-brand-cyan-start);
+  --cjs-secondary-rgb: var(--cjs-brand-cyan-start-rgb);
+  --cjs-secondary-end: var(--cjs-brand-cyan-end);
+  --cjs-secondary-end-rgb: var(--cjs-brand-cyan-end-rgb);
+  --cjs-secondary-gradient: linear-gradient(135deg, var(--cjs-secondary), var(--cjs-secondary-end));
+
+  --cjs-accent: var(--cjs-brand-green-start);
+  --cjs-accent-rgb: var(--cjs-brand-green-start-rgb);
+  --cjs-accent-end: var(--cjs-brand-green-end);
+  --cjs-accent-end-rgb: var(--cjs-brand-green-end-rgb);
+  --cjs-accent-gradient: linear-gradient(135deg, var(--cjs-accent), var(--cjs-accent-end));
+
+  --cjs-warning: var(--cjs-brand-orange-start);
+  --cjs-warning-rgb: var(--cjs-brand-orange-start-rgb);
+  --cjs-warning-end: var(--cjs-brand-orange-end);
+  --cjs-warning-end-rgb: var(--cjs-brand-orange-end-rgb);
+  --cjs-warning-gradient: linear-gradient(135deg, var(--cjs-warning), var(--cjs-warning-end));
+}
+
+/* ===== DARK THEME ===== */
+[data-collagejs-theme] .cjs-theme-dark,
+.cjs-themed .cjs-theme-dark {
+  --cjs-background: rgba(var(--cjs-black-rgb), var(--cjs-bg-opacity));
+  --cjs-surface: var(--cjs-gray-800);
+  --cjs-border: rgba(var(--cjs-gray-200-rgb), var(--cjs-border-opacity));
+  --cjs-highlight: rgba(var(--cjs-white-rgb), 0.14);
+  --cjs-text: rgba(var(--cjs-foreground-on-dark-rgb), var(--cjs-text-opacity));
+  --cjs-text-secondary: var(--cjs-gray-300);
+  --cjs-text-muted: var(--cjs-gray-400);
+
+  /* Adjust primary variants for dark theme */
+  --cjs-primary-50: color-mix(in srgb, var(--cjs-primary) 10%, black);
+  --cjs-primary-100: color-mix(in srgb, var(--cjs-primary) 20%, black);
+  --cjs-primary-200: color-mix(in srgb, var(--cjs-primary) 40%, black);
+  --cjs-primary-300: color-mix(in srgb, var(--cjs-primary) 60%, black);
+  --cjs-primary-400: color-mix(in srgb, var(--cjs-primary) 80%, black);
+  --cjs-primary-600: color-mix(in srgb, var(--cjs-primary) 80%, white);
+  --cjs-primary-700: color-mix(in srgb, var(--cjs-primary) 60%, white);
+  --cjs-primary-800: color-mix(in srgb, var(--cjs-primary) 40%, white);
+  --cjs-primary-900: color-mix(in srgb, var(--cjs-primary) 20%, white);
+  --cjs-primary-gradient: linear-gradient(135deg, var(--cjs-primary), var(--cjs-primary-end));
+}
+
+/* ===== GLASS EFFECT VARIANTS ===== */
+/* Applies backdrop blur and makes background translucent */
+/* Background color automatically matches current theme (light/dark) */
+
+[data-collagejs-theme] .cjs-glass,
+.cjs-themed .cjs-glass {
+  /* Regenerate background with glass opacity for CSS variable reactivity */
+  --cjs-background: rgba(var(--cjs-white-rgb), var(--cjs-glass-bg-opacity));
+  backdrop-filter: blur(var(--cjs-glass-blur)) saturate(var(--cjs-glass-saturation));
+  -webkit-backdrop-filter: blur(var(--cjs-glass-blur)) saturate(var(--cjs-glass-saturation));
+}
+
+/* Glass effect in dark theme - use dark background */
+/* Handle both: dark theme with glass child AND both classes on same element */
+[data-collagejs-theme] .cjs-theme-dark .cjs-glass,
+.cjs-themed .cjs-theme-dark .cjs-glass,
+[data-collagejs-theme].cjs-theme-dark .cjs-glass,
+.cjs-themed.cjs-theme-dark .cjs-glass,
+[data-collagejs-theme] .cjs-theme-dark.cjs-glass,
+.cjs-themed .cjs-theme-dark.cjs-glass,
+[data-collagejs-theme].cjs-theme-dark.cjs-glass,
+.cjs-themed.cjs-theme-dark.cjs-glass {
+  --cjs-background: rgba(var(--cjs-black-rgb), var(--cjs-glass-bg-opacity));
+}
+
+/* ===== ACCESSIBILITY PRESETS ===== */
+/* Pre-defined glass intensity levels for different needs */
+/* Apply these WITH .cjs-glass (e.g., class="cjs-glass cjs-glass-subtle") */
+
+/* Subtle glass - for users sensitive to visual effects */
+[data-collagejs-theme] .cjs-glass-subtle,
+.cjs-themed .cjs-glass-subtle {
+  --cjs-glass-blur: 4px;
+  --cjs-glass-saturation: 120%;
+  --cjs-glass-bg-opacity: 0.05;
+  --cjs-glass-border-opacity: 0.1;
+}
+
+/* Strong glass - for users who want maximum effect */
+[data-collagejs-theme] .cjs-glass-strong,
+.cjs-themed .cjs-glass-strong {
+  --cjs-glass-blur: 20px;
+  --cjs-glass-saturation: 220%;
+  --cjs-glass-bg-opacity: 0.15;
+  --cjs-glass-border-opacity: 0.3;
+}
+
+/* No blur glass - transparency without blur for accessibility */
+[data-collagejs-theme] .cjs-glass-no-blur,
+.cjs-themed .cjs-glass-no-blur {
+  --cjs-glass-blur: 0px;
+  --cjs-glass-saturation: 100%;
+  --cjs-glass-bg-opacity: 0.2;
+  --cjs-glass-border-opacity: 0.4;
+}

package/dist/types.d.ts

@@ -1,25 +1,79 @@
+/**
+ * Properties passed to `mount()` functions of `CorePiece` objects.  It extends the piece's supported objects with a
+ * property of type `symbol` that carries the piece parent's `mountPiece()` function.
+ */
 export type MountProps<TProps extends Record<string, any> = Record<string, any>> = TProps & {
     [x: symbol]: MountPiece<TProps>;
 };
+/**
+ * Signature for unmount (cleanup) functions, including the ones returned by `CorePiece.mount()`.
+ */
 export type UnmountFn = () => Promise<void>;
+/**
+ * Type that defines the signature of the functions accepted in `CorePiece.mount`.
+ * @param target The HTML target where the piece will be mounted as a child.
+ * @param props The piece's initial property values.
+ * @returns A promise to the cleanup function that unmounts the piece.
+ */
 export type MountFn<TProps extends Record<string, any> = Record<string, any>> = (target: HTMLElement, props?: MountProps<TProps>) => Promise<UnmountFn>;
+/**
+ * Type that defines the signature of the functions accepted in `CorePiece.update`.
+ * @param props The new property values for the mounted piece.
+ * @returns A promise that resolves once the process of updating property values concludes.
+ */
 export type UpdateFn<TProps extends Record<string, any> = Record<string, any>> = (props: TProps) => Promise<void>;
+/**
+ * Defines the accepted shapes for `CorePiece.mount`.
+ */
 export type Mount<TProps extends Record<string, any> = Record<string, any>> = MountFn<TProps> | MountFn<TProps>[] | Mount<TProps>[];
+/**
+ * Defines the accepted shapes for `CorePiece.update`.
+ */
 export type Update<TProps extends Record<string, any> = Record<string, any>> = UpdateFn<TProps> | UpdateFn<TProps>[] | Update[];
+/**
+ * Defines the contract that objects must follow in order to be mountable as *CollageJS* pieces (micro-frontends).
+ */
 export interface CorePiece<TProps extends Record<string, any> = Record<string, any>> {
+    /**
+     * Mounts the piece (micro-frontend) in the document.  Every mount function should always return a cleanup function
+     * that, when called, unmounts the piece.
+     */
     mount: Mount<TProps>;
+    /**
+     * Updates the piece property values.  This is optional.  If not provided, the piece won't support property updates
+     * while mounted in the document, and all property values must have been passed during mounting.
+     */
     update?: Update<TProps>;
 }
-export type FactoryFnUntyped = () => Promise<CorePiece>;
-export type Factories = Record<string, FactoryFnUntyped>;
-export type CollageModule = {
-    bootstrap: UnmountFn;
-    unload: UnmountFn;
-    factories: Factories;
-};
+/**
+ * Defines the shape of the object returned by the process of mounting a `CorePiece` object.
+ */
 export interface MountedPiece<TProps extends Record<string, any> = Record<string, any>> {
+    /**
+     * Function used to apply updated property values to the mounted `CorePiece` object.
+     */
     update: UpdateFn<TProps>;
+    /**
+     * Function used to unmount the `CorePiece` object.
+     */
     unmount: UnmountFn;
+    /**
+     * The version of the global `mountPiece` function that tracks mounted children so their unmounting is
+     * synchronized with this piece's unmount event.
+     *
+     * **IMPORTANT:**  Always use this function instead of the global `mountPiece` function when mounting other
+     * `CorePiece` objects inside the mounted `CorePiece` object to prevent lifecycle issues.
+     */
     mountPiece: MountPiece<TProps>;
 }
+/**
+ * Type definition for the `mountPiece` functions that mount *CollageJS* pieces in the HTML document.
+ *
+ * **NOTE:**  There is a global `mountPiece` function, and then every mounted *CollageJS* piece that gets mounted
+ * generates a version of the global function that works identically, except that it tracks the `CollageJS` pieces
+ * mounted with it so these are unmounted automatically as soon as the parent is unmounted.
+ * @param piece `CorePiece` object to mount in the provided target, or a promise that resolves said object.
+ * @param target HTML element where to mount
+ * @param props Optional properties for the `CorePiece` object.
+ */
 export type MountPiece<TProps extends Record<string, any> = Record<string, any>> = (piece: CorePiece<TProps> | Promise<CorePiece<TProps>>, target: HTMLElement, props?: TProps) => Promise<MountedPiece<TProps>>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@collagejs/core",
-  "version": "0.1.2",
+  "version": "0.2.0",
   "description": "Core functionality for CollageJS.",
   "type": "module",
   "main": "./dist/index.js",
@@ -56,6 +56,10 @@
     "./logo/512": {
       "types": "./dist/logos/logo.d.ts",
       "default": "./dist/logos/collagejs-512.svg"
+    },
+    "./theme/*": {
+      "types": "./dist/theme/*.d.ts",
+      "default": "./dist/theme/*.css"
     }
   },
   "files": [