osi-cards-lib 1.5.30 → 1.5.32

package/styles/core/_utilities.scss

@@ -1,326 +0,0 @@
-/**
- * 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

@@ -1,57 +0,0 @@
-// ===================================================================
-// 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

@@ -1,36 +0,0 @@
-// ===================================================================
-// 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

@@ -1,34 +0,0 @@
-// ===================================================================
-// 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

@@ -1,26 +0,0 @@
-// ===================================================================
-// 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

@@ -1,21 +0,0 @@
-// ===================================================================
-// 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);
-}