osi-cards-lib 1.5.32 → 1.5.34

package/styles/core/_utilities.scss

@@ -0,0 +1,326 @@
+/**
+ * CONSOLIDATED CUSTOM UTILITIES
+ *
+ * NOTE: Most standard utilities (flex, grid, gap, padding, margin, colors, sizing, text styles, etc.)
+ * are generated by Tailwind from tailwind.config.js and @tailwind directives.
+ *
+ * This file contains ONLY custom utilities not covered by Tailwind CSS.
+ *
+ * For standard utilities, use Tailwind classes directly:
+ * - Layout: .flex, .grid, .gap-4, .p-6, .m-2, etc.
+ * - Colors: .bg-card, .text-foreground, .border-primary, etc.
+ * - Sizing: .w-full, .h-auto, .text-lg, .font-bold, etc.
+ * - Spacing: .mb-4, .px-3, .py-6, etc.
+ * - Transitions: .transition-all, .duration-200, etc.
+ */
+
+/* Align icon pseudo-elements with text */
+div [class$="-icon"]::before {
+  vertical-align: middle;
+}
+
+/* Component-specific error/warning state backgrounds (not in Tailwind config) */
+.bg-red-500\/10 {
+  background-color: rgba(239, 68, 68, 0.1);
+}
+
+.bg-yellow-500\/10 {
+  background-color: rgba(236, 175, 34, 0.1);
+}
+
+/* Component-specific error/warning state borders (not in Tailwind config) */
+.border-red-500\/50 {
+  border-color: rgba(239, 68, 68, 0.5);
+}
+
+.border-red-500\/20 {
+  border-color: rgba(239, 68, 68, 0.2);
+}
+
+.border-yellow-500\/50 {
+  border-color: rgba(236, 175, 34, 0.5);
+}
+
+/* ===================================================================
+   ANIMATION UTILITIES
+   =================================================================== */
+
+/*
+  Animation utilities are now defined in _animations.scss
+  Available classes:
+
+  Entry Animations:
+  - .animate-fade-in
+  - .animate-fade-in-up
+  - .animate-slide-up
+  - .animate-slide-down
+  - .animate-slide-in-left
+  - .animate-slide-in-right
+
+  Scale Animations:
+  - .animate-scale
+  - .animate-scale-in
+  - .animate-pulse
+
+  Rotation Animations:
+  - .animate-spin
+  - .animate-spin-slow
+
+  Attention Animations:
+  - .animate-shake
+  - .animate-bounce
+
+  Stagger Delays:
+  - .animate-delay-1 through .animate-delay-5
+
+  Performance Helpers:
+  - .will-animate
+  - .will-animate-transform
+  - .will-animate-opacity
+  - .gpu-accelerated
+*/
+
+/* ===================================================================
+   TRANSITION UTILITIES
+   Smooth transitions using design system variables
+   =================================================================== */
+
+/* Standard transitions */
+.transition-smooth {
+  transition:
+    transform var(--duration-normal) var(--ease-out-smooth),
+    opacity var(--duration-normal) var(--ease-out-smooth);
+}
+
+.transition-fast {
+  transition:
+    transform var(--duration-fast) var(--ease-out-smooth),
+    opacity var(--duration-fast) var(--ease-out-smooth);
+}
+
+.transition-slow {
+  transition:
+    transform var(--duration-slow) var(--ease-out-smooth),
+    opacity var(--duration-slow) var(--ease-out-smooth);
+}
+
+/* Transform-specific transitions */
+.transition-transform {
+  transition: transform var(--duration-normal) var(--ease-out-smooth);
+}
+
+.transition-transform-fast {
+  transition: transform var(--duration-fast) var(--ease-out-smooth);
+}
+
+/* Opacity transitions */
+.transition-opacity {
+  transition: opacity var(--duration-normal) var(--ease-out-smooth);
+}
+
+.transition-opacity-fast {
+  transition: opacity var(--duration-fast) var(--ease-out-smooth);
+}
+
+/* Color transitions - smooth 300ms transitions */
+.transition-colors {
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 300ms;
+}
+
+/* ===================================================================
+   INTERACTION UTILITIES
+   Hover, active, and focus states
+   =================================================================== */
+
+/* Hover lift effect - DISABLED: Cards should not move vertically */
+.hover-lift {
+  transition: transform var(--duration-normal) var(--ease-out-smooth);
+}
+
+.hover-lift:hover {
+  /* No vertical movement, only GPU acceleration */
+  transform: translateZ(0);
+}
+
+/* Hover scale effect */
+.hover-scale {
+  transition: transform var(--duration-normal) var(--ease-out-smooth);
+}
+
+.hover-scale:hover {
+  transform: scale(1.05) translateZ(0);
+}
+
+/* Hover glow effect */
+.hover-glow {
+  transition: box-shadow var(--duration-normal) var(--ease-out-smooth);
+}
+
+.hover-glow:hover {
+  box-shadow: 0 0 20px color-mix(in srgb, var(--primary) 40%, transparent);
+}
+
+/* Active state - press effect */
+.active-press:active {
+  transform: scale(0.98) translateZ(0);
+}
+
+/* Focus visible outline */
+.focus-ring:focus-visible {
+  outline: 2px solid var(--ring);
+  outline-offset: 2px;
+}
+
+/* ===================================================================
+   BACKDROP BLUR UTILITIES
+   Glass-morphism and blur effects
+   =================================================================== */
+
+/* Backdrop blur - small (4px) */
+.backdrop-blur-sm {
+  backdrop-filter: blur(4px);
+  -webkit-backdrop-filter: blur(4px);
+}
+
+/* Backdrop blur - medium (12px) */
+.backdrop-blur-md {
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+}
+
+/* Backdrop blur - large (20px) */
+.backdrop-blur-lg {
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+}
+
+/* Backdrop blur - extra large (32px) */
+.backdrop-blur-xl {
+  backdrop-filter: blur(32px);
+  -webkit-backdrop-filter: blur(32px);
+}
+
+/* Backdrop blur - none (remove blur) */
+.backdrop-blur-none {
+  backdrop-filter: none;
+  -webkit-backdrop-filter: none;
+}
+
+/* ===================================================================
+   GLASS PANEL UTILITIES
+   Ready-to-use glass effect classes
+   =================================================================== */
+
+/* Glass panel - standard */
+.glass-panel {
+  background: color-mix(in srgb, var(--background, #0c0c0c) 80%, transparent);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  border: 1px solid color-mix(in srgb, var(--border, rgba(255, 255, 255, 0.1)) 50%, transparent);
+}
+
+/* Glass panel - dark */
+.glass-panel-dark {
+  background: color-mix(in srgb, rgba(16, 16, 24, 0.86) 90%, transparent);
+  backdrop-filter: blur(18px);
+  -webkit-backdrop-filter: blur(18px);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.5);
+}
+
+/* Glass panel - light */
+.glass-panel-light {
+  background: color-mix(in srgb, rgba(255, 255, 255, 0.8) 90%, transparent);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  border: 1px solid rgba(0, 0, 0, 0.1);
+}
+
+/* Glass panel - branded */
+.glass-panel-brand {
+  background: color-mix(in srgb, var(--background, #0c0c0c) 85%, var(--color-brand, #ff7900) 5%);
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
+  border: 1px solid color-mix(in srgb, var(--color-brand, #ff7900) 20%, transparent);
+}
+
+/* ===================================================================
+   STAGGER ANIMATION UTILITIES
+   Pre-built staggered animation delays
+   =================================================================== */
+
+/* Stagger delay utilities - 80ms increment (matches homepage) */
+.stagger-delay-1 {
+  animation-delay: 80ms;
+}
+.stagger-delay-2 {
+  animation-delay: 160ms;
+}
+.stagger-delay-3 {
+  animation-delay: 240ms;
+}
+.stagger-delay-4 {
+  animation-delay: 320ms;
+}
+.stagger-delay-5 {
+  animation-delay: 400ms;
+}
+.stagger-delay-6 {
+  animation-delay: 480ms;
+}
+.stagger-delay-7 {
+  animation-delay: 560ms;
+}
+.stagger-delay-8 {
+  animation-delay: 640ms;
+}
+.stagger-delay-9 {
+  animation-delay: 720ms;
+}
+.stagger-delay-10 {
+  animation-delay: 800ms;
+}
+
+/* Transition delay utilities - for staggered transitions */
+.transition-delay-1 {
+  transition-delay: 80ms;
+}
+.transition-delay-2 {
+  transition-delay: 160ms;
+}
+.transition-delay-3 {
+  transition-delay: 240ms;
+}
+.transition-delay-4 {
+  transition-delay: 320ms;
+}
+.transition-delay-5 {
+  transition-delay: 400ms;
+}
+
+/* ===================================================================
+   REDUCED MOTION SUPPORT
+   =================================================================== */
+
+@media (prefers-reduced-motion: reduce) {
+  .transition-smooth,
+  .transition-fast,
+  .transition-slow,
+  .transition-transform,
+  .transition-transform-fast,
+  .transition-opacity,
+  .transition-opacity-fast,
+  .transition-colors,
+  .hover-lift,
+  .hover-scale,
+  .hover-glow {
+    transition: none !important;
+  }
+
+  .hover-scale:hover,
+  .active-press:active {
+    transform: none !important;
+  }
+}

package/styles/core/_variables-unified.scss

@@ -0,0 +1,57 @@
+// ===================================================================
+// DESIGN TOKENS - Scoped for .osi-cards-container Integration
+// Generated from master tokens
+//
+// Used when integrating into external apps (like Orange Sales Assistance)
+// to prevent CSS variable conflicts with the host application.
+//
+// This file is designed to be imported INSIDE .osi-cards-container { }
+// ===================================================================
+
+@use "../tokens/master" as *;
+
+@import "variables/colors-unified";
+
+// Additional design tokens that extend the theme system
+&,
+&[data-theme="night"],
+&[data-theme="day"] {
+  @include osi-tokens("integration", true);
+}
+
+// ===== HIGH CONTRAST MODE SUPPORT =====
+@media (prefers-contrast: high) {
+  &,
+  &[data-theme="night"],
+  &[data-theme="day"] {
+    @include osi-tokens-high-contrast();
+  }
+}
+
+// Windows High Contrast Mode detection
+@media (forced-colors: active) {
+  &,
+  &[data-theme="night"],
+  &[data-theme="day"] {
+    @include osi-tokens-forced-colors();
+  }
+}
+
+// ===== RESPONSIVE ANIMATION PREFERENCES =====
+// Reduced motion support for accessibility
+@media (prefers-reduced-motion: reduce) {
+  &,
+  &[data-theme="night"],
+  &[data-theme="day"] {
+    @include osi-tokens-reduced-motion();
+  }
+
+  *,
+  *::before,
+  *::after {
+    animation-duration: 1ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 1ms !important;
+    scroll-behavior: auto !important;
+  }
+}

package/styles/core/_variables.scss

@@ -0,0 +1,36 @@
+// ===================================================================
+// DESIGN TOKENS - For Demo App (applies to :root)
+// Generated from master tokens
+// ===================================================================
+
+@use "../tokens/master" as *;
+
+// Import theme colors (applies to :root with theme variants)
+// Note: Using @import as colors file exports CSS rules directly
+@import "variables/colors";
+
+// Additional design tokens that extend the theme system
+:root,
+:root[data-theme="night"],
+:root[data-theme="day"] {
+  @include osi-tokens("demo", false);
+}
+
+// ===== RESPONSIVE ANIMATION PREFERENCES =====
+// Reduced motion support for accessibility
+@media (prefers-reduced-motion: reduce) {
+  :root,
+  :root[data-theme="night"],
+  :root[data-theme="day"] {
+    @include osi-tokens-reduced-motion();
+  }
+
+  *,
+  *::before,
+  *::after {
+    animation-duration: 1ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 1ms !important;
+    scroll-behavior: auto !important;
+  }
+}

package/styles/core/variables/_colors-source.scss

@@ -0,0 +1,34 @@
+// ===================================================================
+// SHARED COLOR SOURCE - Re-exports from Master Tokens
+// ===================================================================
+//
+// This file re-exports theme color mixins from the master tokens file.
+// All color definitions have been consolidated into ../tokens/_master.scss
+//
+// ===================================================================
+
+@use "../../tokens/master" as *;
+
+// Theme color mixins are now defined in master tokens:
+//
+// Base theme:
+//   @include osi-theme-base($variant, $is-scoped);
+//
+// Dark theme:
+//   @include osi-theme-dark($variant, $is-scoped);
+//
+// Light theme:
+//   @include osi-theme-light($variant, $is-scoped);
+
+// Legacy mixin aliases for backward compatibility
+@mixin osi-colors($variant: "demo", $is-scoped: false) {
+  @include osi-theme-base($variant, $is-scoped);
+}
+
+@mixin osi-colors-dark($variant: "demo", $is-scoped: false) {
+  @include osi-theme-dark($variant, $is-scoped);
+}
+
+@mixin osi-colors-light($variant: "demo", $is-scoped: false) {
+  @include osi-theme-light($variant, $is-scoped);
+}

package/styles/core/variables/_colors-unified.scss

@@ -0,0 +1,26 @@
+// ===================================================================
+// COLOR VARIABLES - Scoped for .osi-cards-container Integration
+// Generated from master tokens
+//
+// Used when integrating into external apps (like Orange Sales Assistance)
+// to prevent CSS variable conflicts with the host application.
+//
+// This file is designed to be imported INSIDE .osi-cards-container { }
+// ===================================================================
+
+@use "../../tokens/master" as *;
+
+// Base colors for scoped container (& refers to .osi-cards-container)
+& {
+  @include osi-theme-base("integration", true);
+}
+
+// Dark theme (Night Mode) - scoped
+&[data-theme="night"] {
+  @include osi-theme-dark("integration", true);
+}
+
+// Light theme (Day Mode) - scoped
+&[data-theme="day"] {
+  @include osi-theme-light("integration", true);
+}

package/styles/core/variables/_colors.scss

@@ -0,0 +1,21 @@
+// ===================================================================
+// COLOR VARIABLES - For Demo App (applies to :root)
+// Generated from master tokens
+// ===================================================================
+
+@use "../../tokens/master" as *;
+
+// Base colors for :root
+:root {
+  @include osi-theme-base("demo", false);
+}
+
+// Dark theme (Night Mode)
+:root[data-theme="night"] {
+  @include osi-theme-dark("demo", false);
+}
+
+// Light theme (Day Mode)
+:root[data-theme="day"] {
+  @include osi-theme-light("demo", false);
+}