move.gl 0.0.1 → 0.0.2

package/src/scss/classes/_controls.scss

@@ -0,0 +1,314 @@
+////
+///
+/// Controls Classes
+/// =========================================================================
+///
+/// This module provides ready-to-use CSS classes for user interaction
+/// controls including cursor styles, scroll behavior, touch handling,
+/// selection styling, and virtual keyboard components.
+///
+/// @group Classes
+/// @author Scape Agency
+/// @link https://move.gl
+/// @since 0.1.0 initial release
+/// @access public
+///
+////
+
+
+// ============================================================================
+// Use
+// ============================================================================
+
+@use "../mixins" as *;
+
+
+// ============================================================================
+// Cursor Classes
+// ============================================================================
+
+/// Default cursor styles
+.cursor--auto { cursor: auto; }
+.cursor--default { cursor: default; }
+.cursor--none { cursor: none; }
+
+/// Interactive cursor styles
+.cursor--pointer { cursor: pointer; }
+.cursor--help { cursor: help; }
+.cursor--context-menu { cursor: context-menu; }
+.cursor--progress { cursor: progress; }
+.cursor--wait { cursor: wait; }
+
+/// Selection cursor styles
+.cursor--text { cursor: text; }
+.cursor--vertical-text { cursor: vertical-text; }
+.cursor--cell { cursor: cell; }
+.cursor--crosshair { cursor: crosshair; }
+
+/// Drag and drop cursor styles
+.cursor--move { cursor: move; }
+.cursor--grab { cursor: grab; }
+.cursor--grabbing { cursor: grabbing; }
+.cursor--copy { cursor: copy; }
+.cursor--alias { cursor: alias; }
+.cursor--no-drop { cursor: no-drop; }
+.cursor--not-allowed { cursor: not-allowed; }
+
+/// Resize cursor styles
+.cursor--col-resize { cursor: col-resize; }
+.cursor--row-resize { cursor: row-resize; }
+.cursor--n-resize { cursor: n-resize; }
+.cursor--e-resize { cursor: e-resize; }
+.cursor--s-resize { cursor: s-resize; }
+.cursor--w-resize { cursor: w-resize; }
+.cursor--ne-resize { cursor: ne-resize; }
+.cursor--nw-resize { cursor: nw-resize; }
+.cursor--se-resize { cursor: se-resize; }
+.cursor--sw-resize { cursor: sw-resize; }
+.cursor--ew-resize { cursor: ew-resize; }
+.cursor--ns-resize { cursor: ns-resize; }
+.cursor--nesw-resize { cursor: nesw-resize; }
+.cursor--nwse-resize { cursor: nwse-resize; }
+.cursor--all-scroll { cursor: all-scroll; }
+
+/// Zoom cursor styles
+.cursor--zoom-in { cursor: zoom-in; }
+.cursor--zoom-out { cursor: zoom-out; }
+
+
+// ============================================================================
+// Scroll Classes
+// ============================================================================
+
+/// Scroll behavior
+.scroll--smooth { scroll-behavior: smooth; }
+.scroll--auto { scroll-behavior: auto; }
+
+/// Overflow handling
+.overflow--auto { overflow: auto; }
+.overflow--hidden { overflow: hidden; }
+.overflow--visible { overflow: visible; }
+.overflow--scroll { overflow: scroll; }
+.overflow-x--auto { overflow-x: auto; }
+.overflow-x--hidden { overflow-x: hidden; }
+.overflow-x--scroll { overflow-x: scroll; }
+.overflow-y--auto { overflow-y: auto; }
+.overflow-y--hidden { overflow-y: hidden; }
+.overflow-y--scroll { overflow-y: scroll; }
+
+/// Overscroll behavior
+.overscroll--auto { overscroll-behavior: auto; }
+.overscroll--contain { overscroll-behavior: contain; }
+.overscroll--none { overscroll-behavior: none; }
+
+
+// ============================================================================
+// Touch Classes
+// ============================================================================
+
+/// Touch action classes
+.touch--auto { touch-action: auto; }
+.touch--none { touch-action: none; }
+.touch--pan-x { touch-action: pan-x; }
+.touch--pan-y { touch-action: pan-y; }
+.touch--pan-left { touch-action: pan-left; }
+.touch--pan-right { touch-action: pan-right; }
+.touch--pan-up { touch-action: pan-up; }
+.touch--pan-down { touch-action: pan-down; }
+.touch--pinch-zoom { touch-action: pinch-zoom; }
+.touch--manipulation { touch-action: manipulation; }
+
+/// Pointer events
+.pointer--auto { pointer-events: auto; }
+.pointer--none { pointer-events: none; }
+
+
+// ============================================================================
+// Selection Classes
+// ============================================================================
+
+/// User selection control
+.select--none { user-select: none; }
+.select--text { user-select: text; }
+.select--all { user-select: all; }
+.select--auto { user-select: auto; }
+
+
+// ============================================================================
+// Hover Classes
+// ============================================================================
+
+/// Hover opacity effects
+.hover--opacity-50:hover { opacity: 0.5; }
+.hover--opacity-75:hover { opacity: 0.75; }
+.hover--opacity-100:hover { opacity: 1; }
+
+/// Hover scale effects
+.hover--scale:hover { transform: scale(1.05); }
+.hover--scale-sm:hover { transform: scale(1.02); }
+.hover--scale-lg:hover { transform: scale(1.1); }
+
+
+// ============================================================================
+// Keyboard Container Classes
+// ============================================================================
+
+/// Main keyboard container
+.keyboard {
+    @include keyboard_container;
+}
+
+
+// ============================================================================
+// Keyboard Row Classes
+// ============================================================================
+
+/// Keyboard row layout
+.keyboard__row {
+    @include keyboard_row;
+}
+
+
+// ============================================================================
+// Keyboard Key Classes
+// ============================================================================
+
+/// Base key styling
+.key {
+    @include key_base;
+}
+
+/// Space key (wide)
+.key--space {
+    @include key_space;
+}
+
+/// Special keys (shift, backspace, enter)
+.key--shift,
+.key--backspace,
+.key--enter {
+    @include key_special;
+}
+
+/// Mode switch key
+.key--mode {
+    @include key_mode;
+
+    &:hover {
+        background: var(--key-mode-bg-hover, #5a6fd6);
+    }
+}
+
+
+// ============================================================================
+// Keyboard Input Classes
+// ============================================================================
+
+/// Keyboard input field
+.keyboard__input {
+    @include keyboard_input;
+}
+
+
+// ============================================================================
+// Keyboard Mode Classes
+// ============================================================================
+
+/// Mode button container
+.keyboard__modes {
+    @include keyboard_modes;
+}
+
+/// Mode button styling
+.keyboard__mode-btn {
+    @include keyboard_mode_btn;
+}
+
+
+// ============================================================================
+// Keyboard Stats Classes
+// ============================================================================
+
+/// Stats display for keyboard metrics
+.keyboard__stats {
+    @include keyboard_stats;
+}
+
+
+// ============================================================================
+// Keyboard Theme Classes
+// ============================================================================
+
+/// Dark theme support for keyboard
+[data-theme="dark"] {
+    .keyboard {
+        @include keyboard_dark;
+    }
+}
+
+
+// ============================================================================
+// Screensaver Classes
+// ============================================================================
+
+/// Screensaver keyframes
+@include keyframes_screensaver_float;
+
+/// Main screensaver overlay
+.screensaver {
+    @include screensaver_container;
+
+    &.active {
+        @include screensaver_active;
+    }
+}
+
+/// Screensaver content wrapper
+.screensaver__content {
+    @include screensaver_content;
+}
+
+/// Screensaver icon
+.screensaver__icon {
+    @include screensaver_icon;
+}
+
+/// Screensaver title
+.screensaver__title {
+    @include screensaver_title;
+}
+
+/// Screensaver subtitle/hint
+.screensaver__hint {
+    @include screensaver_hint;
+}
+
+/// Video element for screensaver
+.screensaver__video {
+    @include screensaver_video;
+    pointer-events: none;
+}
+
+/// Gradient overlay for screensaver
+.screensaver__overlay {
+    @include screensaver_gradient_overlay;
+}
+
+/// Dark screensaver theme
+.screensaver--dark {
+    @include screensaver_dark;
+}
+
+/// Light screensaver theme
+.screensaver--light {
+    @include screensaver_light;
+}
+
+/// Gradient screensaver theme
+.screensaver--gradient {
+    --screensaver-bg: transparent;
+
+    .screensaver__overlay {
+        opacity: 1;
+    }
+}

package/src/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/src/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";