@omega.js/web 0.1.0

package/core/css/core/_animations.scss

@@ -0,0 +1,343 @@
+// Core Animation Styles
+// Reusable animation utilities for the entire application
+
+// ============================================
+// Fade Animations
+// ============================================
+
+@keyframes fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+.animation-fade-in {
+  animation: fade-in 1s ease;
+}
+
+@keyframes fade-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+.animation-fade-out {
+  animation: fade-out 1s ease;
+}
+
+// ============================================
+// Slide Animations
+// ============================================
+
+@keyframes slide-up {
+  0% {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.animation-slide-up {
+  animation: slide-up 1s ease;
+}
+
+@keyframes slide-down {
+  from {
+    opacity: 0;
+    transform: translateY(-20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.animation-slide-down {
+  animation: slide-down 0.5s ease-out;
+}
+
+// ============================================
+// Scale Animations
+// ============================================
+
+@keyframes popup {
+  0% {
+    transform: scale(.93);
+    opacity: .8;
+  }
+  50% {
+    transform: scale(1.02);
+    opacity: 1;
+  }
+  to {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+.animation-popup {
+  animation: popup .5s ease-in-out;
+}
+
+@keyframes popup-medium {
+  0% {
+    transform: scale(.93);
+    opacity: 0;
+  }
+  75% {
+    transform: scale(.93);
+    opacity: 0;
+  }
+  80% {
+    transform: scale(.93);
+    opacity: .8;
+  }
+  90% {
+    transform: scale(1.02);
+    opacity: 1;
+  }
+  to {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+.animation-popup-medium {
+  animation: popup-medium 1.5s ease-in-out;
+}
+
+@keyframes flex {
+  0% {
+    transform: scaleX(1)
+  }
+  50% {
+    transform: scale3d(1.05, 1.05, 1.05)
+  }
+  to {
+    transform: scaleX(1)
+  }
+}
+
+.animation-flex {
+  animation: flex 1.5s ease-in-out infinite;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .animation-flex {
+    animation: none;
+  }
+}
+
+// ============================================
+// Movement Animations
+// ============================================
+
+@keyframes bounce {
+  0%, 100% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-10px);
+  }
+}
+
+.animation-bounce {
+  animation: bounce 3s ease-in-out infinite;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .animation-bounce {
+    animation: none;
+  }
+}
+
+@keyframes pulse-right {
+  0%, 100% {
+    transform: translateX(0);
+    opacity: 0.5;
+  }
+  50% {
+    transform: translateX(10px);
+    opacity: 1;
+  }
+}
+
+.animation-pulse-right {
+  animation: pulse-right 1.5s ease-in-out infinite;
+}
+
+// The loop rests half-faded; parked, the element keeps its own opacity, which
+// is the readable state for a cue that no longer moves.
+@media (prefers-reduced-motion: reduce) {
+  .animation-pulse-right {
+    animation: none;
+  }
+}
+
+// ============================================
+// Rotation Animations
+// ============================================
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.animation-spin {
+  animation: spin 1s linear infinite;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .animation-spin {
+    animation: none;
+  }
+}
+
+@keyframes wiggle {
+  0%,
+  20%,
+  80%,
+  to {
+    transform: rotate(0deg);
+  }
+  30%,
+  60% {
+    transform: rotate(-2deg);
+  }
+  40%,
+  70% {
+    transform: rotate(2deg);
+  }
+  45% {
+    transform: rotate(-4deg);
+  }
+  55% {
+    transform: rotate(4deg);
+  }
+}
+
+.animation-wiggle {
+  animation: wiggle 1.5s ease-in-out infinite;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .animation-wiggle {
+    animation: none;
+  }
+}
+
+// ============================================
+// Effect Animations
+// ============================================
+
+@keyframes pulse {
+  50% {
+    opacity: .5;
+  }
+}
+
+.animation-pulse {
+  animation: pulse 2s cubic-bezier(.4, 0, .6, 1) infinite;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .animation-pulse {
+    animation: none;
+  }
+}
+
+@keyframes shimmer {
+  0% {
+    background-position: 0 50%;
+  }
+  50% {
+    background-position: 100% 50%;
+  }
+  to {
+    background-position: 0 50%;
+  }
+}
+
+.animation-shimmer {
+  animation: shimmer 3s ease-out infinite alternate;
+}
+
+// Only utility whose park needs a resting state: the loop drives
+// background-position, so dropping it hands the element back its authored
+// position. Restate the loop's own rest frame so an oversized gradient parks
+// on its band instead of off it.
+@media (prefers-reduced-motion: reduce) {
+  .animation-shimmer {
+    animation: none;
+    background-position: 0 50%;
+  }
+}
+
+@keyframes gradient-shimmer {
+  0% {
+    background-position: 0% 50%;
+  }
+  100% {
+    background-position: 100% 50%;
+  }
+}
+
+// ============================================
+// Hover Animation Utilities
+// ============================================
+
+$hover-transition: all 0.3s cubic-bezier(.2,.3,0,1);
+
+.hover-up {
+  transition: $hover-transition;
+
+  &:hover {
+    transform: translateY(-8px);
+  }
+}
+
+.hover-flex {
+  transition: $hover-transition;
+
+  &:hover {
+    transform: scale(1.05);
+  }
+}
+
+// One for opacity
+.hover-opacity {
+  transition: $hover-transition;
+
+  &:hover {
+    opacity: 0.5;
+  }
+}
+
+// .hover-shadow {
+//   transition: $hover-transition;
+
+//   &:hover {
+//     box-shadow: $classy-shadow-lg;
+//   }
+// }
+
+// .hover-glow {
+//   transition: $hover-transition;
+
+//   &:hover {
+//     box-shadow: $classy-shadow-glow;
+//   }
+// }

package/core/css/core/_bindings.scss

@@ -0,0 +1,116 @@
+// Core Bindings Styles
+// Loading skeleton effects for data-bound elements
+
+// ============================================
+// Loading States
+// ============================================
+
+// Loading state with shimmer animation for skeleton elements
+// This applies to elements that have the omega-binding-skeleton class
+.omega-binding-skeleton {
+  --binding-color-1: rgba(0, 0, 0, 0.03);
+  --binding-color-2: rgba(0, 0, 0, 0.06);
+  --binding-color-3: rgba(0, 0, 0, 0.03);
+
+  background: linear-gradient(
+    90deg,
+    var(--binding-color-1) 25%,
+    var(--binding-color-2) 50%,
+    var(--binding-color-3) 75%
+  );
+  background-size: 200% 100%;
+  animation: binding-shimmer 1.5s infinite;
+  border-radius: 0.25rem;
+
+  // Subtle color overlay for text elements
+  color: transparent !important;
+  * {
+    // color: transparent !important;
+    // z-index: -1 !important;
+    opacity: 0 !important;
+  }
+
+  // Prevent text selection during loading
+  user-select: none;
+  pointer-events: none;
+
+  // Minimum dimensions for empty elements
+  min-width: 50px;
+  min-height: 1lh;
+  // display: inline-block;
+}
+
+// Same deal as the lazy-loading shimmer: the loop only slides
+// background-position across a gradient twice the box wide, so the parked
+// skeleton keeps its authored fill at the default position.
+@media (prefers-reduced-motion: reduce) {
+  .omega-binding-skeleton {
+    animation: none;
+  }
+}
+
+// Dark theme overrides
+[data-bs-theme="dark"] .omega-binding-skeleton {
+  --binding-color-1: rgba(255, 255, 255, 0.03);
+  --binding-color-2: rgba(255, 255, 255, 0.08);
+  --binding-color-3: rgba(255, 255, 255, 0.03);
+}
+
+// ============================================
+// Bound State
+// ============================================
+
+// When bound is added while skeleton is still present, fade out the skeleton
+.omega-bound.omega-binding-skeleton {
+  animation: binding-fadeout 0.25s ease-out forwards;
+}
+
+// ============================================
+// Animations
+// ============================================
+
+// Shimmer animation
+@keyframes binding-shimmer {
+  0% {
+    background-position: 200% 0;
+  }
+  100% {
+    background-position: -200% 0;
+  }
+}
+
+// Fade out animation for skeleton
+@keyframes binding-fadeout {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+// ============================================
+// Special Cases
+// ============================================
+
+// For block-level elements, use full width
+.omega-binding-skeleton.d-block {
+  display: block;
+  width: 100%;
+}
+
+// For images, maintain aspect ratio
+img.omega-binding-skeleton {
+  display: block;
+  width: 100%;
+  height: auto;
+  min-height: 100px; // Default minimum height for image skeleton
+}
+
+// For input fields, keep as inline-block with normal sizing
+input.omega-binding-skeleton,
+textarea.omega-binding-skeleton,
+select.omega-binding-skeleton {
+  min-width: auto;
+  min-height: auto;
+}

package/core/css/core/_blog-search.scss

@@ -0,0 +1,57 @@
+// Blog search results
+// The client-side result list the blog index renders in place of its normal
+// listing (core/js/pages/blog/index.js). Token-painted only, so it reads as
+// native in any theme and holds in both modes.
+
+.omega-blog-search__summary {
+  color: var(--omega-ink-muted);
+  font-size: 0.875rem;
+  margin-bottom: 1.5rem;
+}
+
+.omega-blog-search__list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.omega-blog-search__item {
+  padding: 1.25rem 0;
+  border-top: 1px solid var(--omega-line);
+
+  &:last-child {
+    border-bottom: 1px solid var(--omega-line);
+  }
+}
+
+.omega-blog-search__title {
+  color: var(--omega-ink);
+  font-size: 1.125rem;
+  font-weight: 600;
+  text-decoration: none;
+
+  &:hover,
+  &:focus-visible {
+    color: var(--omega-accent);
+  }
+}
+
+.omega-blog-search__meta {
+  color: var(--omega-ink-faint);
+  font-size: 0.8125rem;
+  margin: 0.25rem 0 0;
+}
+
+.omega-blog-search__excerpt {
+  color: var(--omega-ink-muted);
+  margin: 0.5rem 0 0;
+  max-width: 60ch;
+}
+
+.omega-blog-search__empty {
+  border: 1px solid var(--omega-line);
+  border-radius: var(--omega-radius-l);
+  color: var(--omega-ink-muted);
+  padding: 3rem 1.5rem;
+  text-align: center;
+}

package/core/css/core/_chatsy.scss

@@ -0,0 +1,61 @@
+// Core Chatsy Styles
+// Chat widget integration and floating action button
+
+// ============================================
+// Pre-Chat Button Base
+// ============================================
+
+#prechat-btn {
+  position: fixed;
+  background: #237AFC;
+  color: #fff;
+  width: 60px;
+  height: 60px;
+  text-align: center;
+  line-height: 1;
+  border-radius: 50%;
+  right: 20px;
+  bottom: 20px;
+  transition: background 0.5s;
+  z-index: 11;
+  box-shadow: rgba(0, 0, 0, 0.16) 0px 2px 10px 0px;
+  
+  // Animation setup
+  transition: transform 167ms cubic-bezier(0.33, 0, 0, 1) 0s;
+  transform-origin: center center;
+
+  // ============================================
+  // Button Icon
+  // ============================================
+  
+  svg {
+    color: #fff;
+    width: 50%;
+    opacity: 1.0;
+    pointer-events: none;
+  }
+
+  // ============================================
+  // Button Interactions
+  // ============================================
+  
+  &:hover {
+    transition: transform 250ms cubic-bezier(0.33, 0, 0, 1) 0s;
+    transform: scale(1.1);
+  }
+
+  &:active {
+    transform: scale(0.85);
+    transition: transform 134ms cubic-bezier(0.45, 0, 0.2, 1) 0s;
+  }
+}
+
+// ============================================
+// Responsive Adjustments
+// ============================================
+
+@media (max-width: 768px) {
+  #prechat-btn {
+    bottom: 15px;
+  }
+}