move.gl 0.0.1 → 0.0.2

package/dist/scss/classes/_effects.scss

@@ -0,0 +1,283 @@
+// ============================================================================
+// move.gl | Effect Classes
+// ============================================================================
+// Copyright 2025 Scape Agency BV
+// Licensed under MIT License
+// ============================================================================
+
+////
+/// Effect Classes
+/// ===========================================================================
+///
+/// This module provides ready-to-use CSS classes for visual effects
+/// including filters, shadows, opacity, gradients, and backdrop effects.
+/// All classes use corresponding mixins from the mixins/effects module.
+///
+/// @group Classes
+/// @author Scape Agency
+/// @link https://move.gl
+/// @since 0.1.0 initial release
+/// @access public
+////
+
+
+// ============================================================================
+// Use
+// ============================================================================
+
+@use "../mixins/effects" as *;
+
+
+// ============================================================================
+// Filter Effect Classes
+// ============================================================================
+
+/// Blur filter
+.filter--blur-sm { @include filter_blur(2px); }
+.filter--blur { @include filter_blur(4px); }
+.filter--blur-md { @include filter_blur(8px); }
+.filter--blur-lg { @include filter_blur(16px); }
+.filter--blur-xl { @include filter_blur(24px); }
+
+/// Grayscale filter
+.filter--grayscale { @include filter_grayscale(100%); }
+.filter--grayscale-50 { @include filter_grayscale(50%); }
+.filter--grayscale-0 { @include filter_grayscale(0%); }
+
+/// Sepia filter
+.filter--sepia { @include filter_sepia(100%); }
+.filter--sepia-50 { @include filter_sepia(50%); }
+
+/// Brightness filter
+.filter--brightness-50 { @include filter_brightness(0.5); }
+.filter--brightness-75 { @include filter_brightness(0.75); }
+.filter--brightness-90 { @include filter_brightness(0.9); }
+.filter--brightness-100 { @include filter_brightness(1); }
+.filter--brightness-110 { @include filter_brightness(1.1); }
+.filter--brightness-125 { @include filter_brightness(1.25); }
+.filter--brightness-150 { @include filter_brightness(1.5); }
+
+/// Contrast filter
+.filter--contrast-50 { @include filter_contrast(0.5); }
+.filter--contrast-75 { @include filter_contrast(0.75); }
+.filter--contrast-100 { @include filter_contrast(1); }
+.filter--contrast-125 { @include filter_contrast(1.25); }
+.filter--contrast-150 { @include filter_contrast(1.5); }
+.filter--contrast-200 { @include filter_contrast(2); }
+
+/// Saturate filter
+.filter--saturate-0 { @include filter_saturate(0); }
+.filter--saturate-50 { @include filter_saturate(0.5); }
+.filter--saturate-100 { @include filter_saturate(1); }
+.filter--saturate-150 { @include filter_saturate(1.5); }
+.filter--saturate-200 { @include filter_saturate(2); }
+
+/// Hue rotate filter
+.filter--hue-rotate-0 { @include filter_hue_rotate(0deg); }
+.filter--hue-rotate-30 { @include filter_hue_rotate(30deg); }
+.filter--hue-rotate-60 { @include filter_hue_rotate(60deg); }
+.filter--hue-rotate-90 { @include filter_hue_rotate(90deg); }
+.filter--hue-rotate-180 { @include filter_hue_rotate(180deg); }
+.filter--hue-rotate-270 { @include filter_hue_rotate(270deg); }
+
+/// Invert filter
+.filter--invert { @include filter_invert(100%); }
+.filter--invert-50 { @include filter_invert(50%); }
+.filter--invert-0 { @include filter_invert(0%); }
+
+/// Drop shadow filter
+.filter--drop-shadow-sm { @include filter_drop_shadow(0, 1px, 1px, rgba(0, 0, 0, 0.05)); }
+.filter--drop-shadow { @include filter_drop_shadow(0, 1px, 2px, rgba(0, 0, 0, 0.1)); }
+.filter--drop-shadow-md { @include filter_drop_shadow(0, 4px, 3px, rgba(0, 0, 0, 0.07)); }
+.filter--drop-shadow-lg { @include filter_drop_shadow(0, 10px, 8px, rgba(0, 0, 0, 0.04)); }
+.filter--drop-shadow-xl { @include filter_drop_shadow(0, 20px, 13px, rgba(0, 0, 0, 0.03)); }
+.filter--drop-shadow-none { @include filter_drop_shadow(0, 0, 0, transparent); }
+
+/// Combined filter effects
+.filter--noir { @include filter_preset_noir; }
+.filter--vintage { @include filter_preset_vintage; }
+.filter--cold { @include filter_preset_cold; }
+.filter--warm { @include filter_preset_warm; }
+.filter--dramatic { @include filter_preset_dramatic; }
+
+
+// ============================================================================
+// Backdrop Filter Classes
+// ============================================================================
+
+/// Backdrop blur
+.backdrop--blur-sm { @include backdrop_blur(4px); }
+.backdrop--blur { @include backdrop_blur(8px); }
+.backdrop--blur-md { @include backdrop_blur(12px); }
+.backdrop--blur-lg { @include backdrop_blur(16px); }
+.backdrop--blur-xl { @include backdrop_blur(24px); }
+.backdrop--blur-2xl { @include backdrop_blur(40px); }
+.backdrop--blur-3xl { @include backdrop_blur(64px); }
+
+/// Backdrop brightness
+.backdrop--brightness-50 { @include backdrop_multi($brightness: 0.5); }
+.backdrop--brightness-75 { @include backdrop_multi($brightness: 0.75); }
+.backdrop--brightness-90 { @include backdrop_multi($brightness: 0.9); }
+.backdrop--brightness-100 { @include backdrop_multi($brightness: 1); }
+.backdrop--brightness-105 { @include backdrop_multi($brightness: 1.05); }
+.backdrop--brightness-110 { @include backdrop_multi($brightness: 1.1); }
+.backdrop--brightness-125 { @include backdrop_multi($brightness: 1.25); }
+.backdrop--brightness-150 { @include backdrop_multi($brightness: 1.5); }
+
+/// Backdrop contrast
+.backdrop--contrast-50 { @include backdrop_multi($contrast: 0.5); }
+.backdrop--contrast-75 { @include backdrop_multi($contrast: 0.75); }
+.backdrop--contrast-100 { @include backdrop_multi($contrast: 1); }
+.backdrop--contrast-125 { @include backdrop_multi($contrast: 1.25); }
+.backdrop--contrast-150 { @include backdrop_multi($contrast: 1.5); }
+.backdrop--contrast-200 { @include backdrop_multi($contrast: 2); }
+
+/// Backdrop grayscale
+.backdrop--grayscale-0 { @include backdrop_grayscale(0); }
+.backdrop--grayscale { @include backdrop_grayscale(100%); }
+
+/// Backdrop saturate
+.backdrop--saturate-0 { @include backdrop_multi($saturate: 0); }
+.backdrop--saturate-50 { @include backdrop_multi($saturate: 0.5); }
+.backdrop--saturate-100 { @include backdrop_multi($saturate: 1); }
+.backdrop--saturate-150 { @include backdrop_multi($saturate: 1.5); }
+.backdrop--saturate-200 { @include backdrop_multi($saturate: 2); }
+
+/// Backdrop sepia
+.backdrop--sepia-0 { @include backdrop_multi($sepia: 0); }
+.backdrop--sepia { @include backdrop_multi($sepia: 100%); }
+
+/// Backdrop invert
+.backdrop--invert-0 { @include backdrop_multi($invert: 0); }
+.backdrop--invert { @include backdrop_multi($invert: 100%); }
+
+/// Combined backdrop effects - frosted glass
+.backdrop--glass { @include backdrop_glass(10px, 150%, 100%); }
+.backdrop--glass-dark { @include backdrop_glass(10px, 100%, 80%); }
+
+
+// ============================================================================
+// Shadow Classes
+// ============================================================================
+
+/// Box shadows
+.shadow--none { @include shadow_none; }
+.shadow--sm { @include shadow_sm; }
+.shadow { @include shadow_md; }
+.shadow--md { @include shadow_md; }
+.shadow--lg { @include shadow_lg; }
+.shadow--xl { @include shadow_xl; }
+.shadow--2xl { @include shadow_2xl; }
+.shadow--inner { @include shadow_inner; }
+
+/// Colored shadows
+.shadow--primary { @include shadow_colored(#3b82f6, 0.4); }
+.shadow--success { @include shadow_colored(#22c55e, 0.4); }
+.shadow--danger { @include shadow_colored(#ef4444, 0.4); }
+.shadow--warning { @include shadow_colored(#f59e0b, 0.4); }
+
+/// Glow shadows
+.shadow--glow { @include shadow_glow(#3b82f6, 0.5, 20px); }
+.shadow--glow-sm { @include shadow_glow(#3b82f6, 0.3, 10px); }
+.shadow--glow-lg { @include shadow_glow(#3b82f6, 0.6, 40px); }
+
+
+// ============================================================================
+// Opacity Classes
+// ============================================================================
+
+.opacity--0 { @include set_opacity(0, false); }
+.opacity--5 { @include set_opacity(0.05, false); }
+.opacity--10 { @include set_opacity(0.1, false); }
+.opacity--20 { @include set_opacity(0.2, false); }
+.opacity--25 { @include set_opacity(0.25, false); }
+.opacity--30 { @include set_opacity(0.3, false); }
+.opacity--40 { @include set_opacity(0.4, false); }
+.opacity--50 { @include set_opacity(0.5, false); }
+.opacity--60 { @include set_opacity(0.6, false); }
+.opacity--70 { @include set_opacity(0.7, false); }
+.opacity--75 { @include set_opacity(0.75, false); }
+.opacity--80 { @include set_opacity(0.8, false); }
+.opacity--90 { @include set_opacity(0.9, false); }
+.opacity--95 { @include set_opacity(0.95, false); }
+.opacity--100 { @include set_opacity(1, false); }
+
+
+// ============================================================================
+// Mix Blend Mode Classes
+// ============================================================================
+
+.blend--normal { @include blend_normal; }
+.blend--multiply { @include blend_multiply; }
+.blend--screen { @include blend_screen; }
+.blend--overlay { @include blend_overlay; }
+.blend--darken { @include blend_darken; }
+.blend--lighten { @include blend_lighten; }
+.blend--color-dodge { @include blend_color_dodge; }
+.blend--color-burn { @include blend_color_burn; }
+.blend--hard-light { @include blend_hard_light; }
+.blend--soft-light { @include blend_soft_light; }
+.blend--difference { @include blend_difference; }
+.blend--exclusion { @include blend_exclusion; }
+.blend--hue { @include blend_hue; }
+.blend--saturation { @include blend_saturation; }
+.blend--color { @include blend_color; }
+.blend--luminosity { @include blend_luminosity; }
+
+
+// ============================================================================
+// Background Blend Mode Classes
+// ============================================================================
+
+.bg-blend--normal { @include bg_blend_normal; }
+.bg-blend--multiply { @include bg_blend_multiply; }
+.bg-blend--screen { @include bg_blend_screen; }
+.bg-blend--overlay { @include bg_blend_overlay; }
+.bg-blend--darken { @include bg_blend_darken; }
+.bg-blend--lighten { @include bg_blend_lighten; }
+.bg-blend--color-dodge { @include bg_blend_color_dodge; }
+.bg-blend--color-burn { @include bg_blend_color_burn; }
+.bg-blend--hard-light { @include bg_blend_hard_light; }
+.bg-blend--soft-light { @include bg_blend_soft_light; }
+.bg-blend--difference { @include bg_blend_difference; }
+.bg-blend--exclusion { @include bg_blend_exclusion; }
+
+
+// ============================================================================
+// Gradient Classes
+// ============================================================================
+
+/// Linear gradients
+.gradient--to-r { @include gradient_to_r; }
+.gradient--to-l { @include gradient_to_l; }
+.gradient--to-t { @include gradient_to_t; }
+.gradient--to-b { @include gradient_to_b; }
+.gradient--to-tr { @include gradient_to_tr; }
+.gradient--to-tl { @include gradient_to_tl; }
+.gradient--to-br { @include gradient_to_br; }
+.gradient--to-bl { @include gradient_to_bl; }
+
+/// Radial gradients
+.gradient--radial { @include gradient_radial; }
+.gradient--radial-at-t { @include gradient_radial_at_t; }
+.gradient--radial-at-b { @include gradient_radial_at_b; }
+.gradient--radial-at-l { @include gradient_radial_at_l; }
+.gradient--radial-at-r { @include gradient_radial_at_r; }
+
+/// Conic gradients
+.gradient--conic { @include gradient_conic; }
+
+
+// ============================================================================
+// Mask Classes
+// ============================================================================
+
+/// Gradient masks for fade effects
+.mask--fade-b { @include mask_fade_b; }
+.mask--fade-t { @include mask_fade_t; }
+.mask--fade-l { @include mask_fade_l; }
+.mask--fade-r { @include mask_fade_r; }
+
+/// Radial mask
+.mask--radial { @include mask_radial; }
+

package/dist/scss/classes/_index.scss

@@ -0,0 +1,28 @@
+////
+///
+/// Classes Module Index
+/// =========================================================================
+///
+/// Central index for all CSS utility classes. This module consolidates
+/// ready-to-use classes that apply mixins for animations, controls,
+/// effects, loaders, transforms, and transitions.
+///
+/// @group Classes
+/// @author Scape Agency
+/// @link https://move.gl
+/// @since 0.1.0 initial release
+/// @access public
+///
+////
+
+
+// ============================================================================
+// Forwards
+// ============================================================================
+
+@forward "animations";
+@forward "controls";
+@forward "effects";
+@forward "loaders";
+@forward "transforms";
+@forward "transitions";