sdga-ui 1.0.7 → 1.0.9

package/theme/customizations/_contexts.scss

@@ -1,432 +0,0 @@
-// Context System Customizations
-// Enhancements and specific component adaptations within context wrappers
-
-// ============================================
-// CONTEXT-AWARE LINK VARIANTS
-// ============================================
-
-// Apply context link colors to all link variants
-@each $context-name, $context-props in $contexts {
-  .#{$context-name} {
-    // Default links (without variant classes) use context colors
-    a:not([class*="link-"]):not(.btn) {
-      color: map-get($context-props, link-color) !important;
-      text-decoration-color: map-get($context-props, link-color) !important;
-
-      &:visited,
-      &:focus-visible {
-        color: map-get($context-props, link-color) !important;
-        text-decoration-color: map-get($context-props, link-color) !important;
-      }
-
-      &:hover,
-      &:focus {
-        color: map-get($context-props, link-hover) !important;
-        text-decoration-color: map-get($context-props, link-hover) !important;
-      }
-
-      &:active {
-        color: map-get($context-props, link-active) !important;
-        text-decoration-color: map-get($context-props, link-active) !important;
-      }
-    }
-    
-    // Link variants adapt to maintain their semantic meaning in context
-    // Primary link -> uses primary color adapted for this context
-    .link-primary {
-      @if map-get($context-props, text) == $white {
-        // On dark backgrounds, primary links are bright
-        color: $primary-300 !important;
-        &:hover { color: $primary-200 !important; }
-        &:active { color: $primary-400 !important; }
-      } @else {
-        // On light backgrounds, primary links are darker
-        color: $primary-700 !important;
-        &:hover { color: $primary-800 !important; }
-        &:active { color: $primary-900 !important; }
-      }
-    }
-    
-    .link-secondary {
-      @if map-get($context-props, text) == $white {
-        color: $gray-300 !important;
-        &:hover { color: $gray-200 !important; }
-        &:active { color: $gray-400 !important; }
-      } @else {
-        color: $gray-700 !important;
-        &:hover { color: $gray-800 !important; }
-        &:active { color: $gray-900 !important; }
-      }
-    }
-    
-    .link-success {
-      @if map-get($context-props, text) == $white {
-        color: $success-300 !important;
-        &:hover { color: $success-200 !important; }
-        &:active { color: $success-400 !important; }
-      } @else {
-        color: $success-700 !important;
-        &:hover { color: $success-800 !important; }
-        &:active { color: $success-900 !important; }
-      }
-    }
-    
-    .link-danger {
-      @if map-get($context-props, text) == $white {
-        color: $danger-300 !important;
-        &:hover { color: $danger-200 !important; }
-        &:active { color: $danger-400 !important; }
-      } @else {
-        color: $danger-700 !important;
-        &:hover { color: $danger-800 !important; }
-        &:active { color: $danger-900 !important; }
-      }
-    }
-    
-    .link-warning {
-      @if map-get($context-props, text) == $white {
-        color: $warning-300 !important;
-        &:hover { color: $warning-200 !important; }
-        &:active { color: $warning-400 !important; }
-      } @else {
-        color: $warning-700 !important;
-        &:hover { color: $warning-800 !important; }
-        &:active { color: $warning-900 !important; }
-      }
-    }
-    
-    .link-info {
-      @if map-get($context-props, text) == $white {
-        color: $info-300 !important;
-        &:hover { color: $info-200 !important; }
-        &:active { color: $info-400 !important; }
-      } @else {
-        color: $info-700 !important;
-        &:hover { color: $info-800 !important; }
-        &:active { color: $info-900 !important; }
-      }
-    }
-    
-    .link-neutral {
-      @if map-get($context-props, text) == $white {
-        color: $gray-300 !important;
-        &:hover { color: $gray-200 !important; }
-        &:active { color: $gray-400 !important; }
-      } @else {
-        color: $neutral-700 !important;
-        &:hover { color: $neutral-800 !important; }
-        &:active { color: $neutral-900 !important; }
-      }
-    }
-    
-    .link-lavender {
-      @if map-get($context-props, text) == $white {
-        color: $lavender-300 !important;
-        &:hover { color: $lavender-200 !important; }
-        &:active { color: $lavender-400 !important; }
-      } @else {
-        color: $lavender-700 !important;
-        &:hover { color: $lavender-800 !important; }
-        &:active { color: $lavender-900 !important; }
-      }
-    }
-    
-    // Button variants adapt to maintain their semantic meaning in context
-    // Success button
-    .btn-success {
-      @if map-get($context-props, text) == $white {
-        // On dark backgrounds
-        --#{$prefix}btn-bg: #{$success-600};
-        --#{$prefix}btn-color: #{$white};
-        --#{$prefix}btn-border-color: #{$success-600};
-        --#{$prefix}btn-hover-bg: #{$success-500};
-        --#{$prefix}btn-hover-color: #{$white};
-        --#{$prefix}btn-active-bg: #{$success-700};
-        --#{$prefix}btn-active-color: #{$white};
-      } @else {
-        // On light backgrounds
-        --#{$prefix}btn-bg: #{$success-600};
-        --#{$prefix}btn-color: #{$white};
-        --#{$prefix}btn-border-color: #{$success-600};
-        --#{$prefix}btn-hover-bg: #{$success-700};
-        --#{$prefix}btn-hover-color: #{$white};
-        --#{$prefix}btn-active-bg: #{$success-800};
-        --#{$prefix}btn-active-color: #{$white};
-      }
-    }
-    
-    .btn-danger {
-      @if map-get($context-props, text) == $white {
-        --#{$prefix}btn-bg: #{$danger-600};
-        --#{$prefix}btn-color: #{$white};
-        --#{$prefix}btn-border-color: #{$danger-600};
-        --#{$prefix}btn-hover-bg: #{$danger-500};
-        --#{$prefix}btn-hover-color: #{$white};
-        --#{$prefix}btn-active-bg: #{$danger-700};
-        --#{$prefix}btn-active-color: #{$white};
-      } @else {
-        --#{$prefix}btn-bg: #{$danger-600};
-        --#{$prefix}btn-color: #{$white};
-        --#{$prefix}btn-border-color: #{$danger-600};
-        --#{$prefix}btn-hover-bg: #{$danger-700};
-        --#{$prefix}btn-hover-color: #{$white};
-        --#{$prefix}btn-active-bg: #{$danger-800};
-        --#{$prefix}btn-active-color: #{$white};
-      }
-    }
-    
-    .btn-warning {
-      @if map-get($context-props, text) == $white {
-        --#{$prefix}btn-bg: #{$warning-600};
-        --#{$prefix}btn-color: #{$gray-900};
-        --#{$prefix}btn-border-color: #{$warning-600};
-        --#{$prefix}btn-hover-bg: #{$warning-500};
-        --#{$prefix}btn-hover-color: #{$gray-900};
-        --#{$prefix}btn-active-bg: #{$warning-700};
-        --#{$prefix}btn-active-color: #{$gray-900};
-      } @else {
-        --#{$prefix}btn-bg: #{$warning-600};
-        --#{$prefix}btn-color: #{$gray-900};
-        --#{$prefix}btn-border-color: #{$warning-600};
-        --#{$prefix}btn-hover-bg: #{$warning-700};
-        --#{$prefix}btn-hover-color: #{$gray-900};
-        --#{$prefix}btn-active-bg: #{$warning-800};
-        --#{$prefix}btn-active-color: #{$gray-900};
-      }
-    }
-    
-    .btn-info {
-      @if map-get($context-props, text) == $white {
-        --#{$prefix}btn-bg: #{$info-600};
-        --#{$prefix}btn-color: #{$white};
-        --#{$prefix}btn-border-color: #{$info-600};
-        --#{$prefix}btn-hover-bg: #{$info-500};
-        --#{$prefix}btn-hover-color: #{$white};
-        --#{$prefix}btn-active-bg: #{$info-700};
-        --#{$prefix}btn-active-color: #{$white};
-      } @else {
-        --#{$prefix}btn-bg: #{$info-600};
-        --#{$prefix}btn-color: #{$white};
-        --#{$prefix}btn-border-color: #{$info-600};
-        --#{$prefix}btn-hover-bg: #{$info-700};
-        --#{$prefix}btn-hover-color: #{$white};
-        --#{$prefix}btn-active-bg: #{$info-800};
-        --#{$prefix}btn-active-color: #{$white};
-      }
-    }
-    
-    .btn-neutral {
-      @if map-get($context-props, text) == $white {
-        --#{$prefix}btn-bg: #{$gray-700};
-        --#{$prefix}btn-color: #{$white};
-        --#{$prefix}btn-border-color: #{$gray-700};
-        --#{$prefix}btn-hover-bg: #{$gray-600};
-        --#{$prefix}btn-hover-color: #{$white};
-        --#{$prefix}btn-active-bg: #{$gray-800};
-        --#{$prefix}btn-active-color: #{$white};
-      } @else {
-        --#{$prefix}btn-bg: #{$neutral-900};
-        --#{$prefix}btn-color: #{$white};
-        --#{$prefix}btn-border-color: #{$neutral-900};
-        --#{$prefix}btn-hover-bg: #{$neutral-800};
-        --#{$prefix}btn-hover-color: #{$white};
-        --#{$prefix}btn-active-bg: #{$black};
-        --#{$prefix}btn-active-color: #{$white};
-      }
-    }
-    
-    .btn-lavender {
-      @if map-get($context-props, text) == $white {
-        --#{$prefix}btn-bg: #{$lavender-600};
-        --#{$prefix}btn-color: #{$white};
-        --#{$prefix}btn-border-color: #{$lavender-600};
-        --#{$prefix}btn-hover-bg: #{$lavender-500};
-        --#{$prefix}btn-hover-color: #{$white};
-        --#{$prefix}btn-active-bg: #{$lavender-700};
-        --#{$prefix}btn-active-color: #{$white};
-      } @else {
-        --#{$prefix}btn-bg: #{$lavender-600};
-        --#{$prefix}btn-color: #{$white};
-        --#{$prefix}btn-border-color: #{$lavender-600};
-        --#{$prefix}btn-hover-bg: #{$lavender-700};
-        --#{$prefix}btn-hover-color: #{$white};
-        --#{$prefix}btn-active-bg: #{$lavender-800};
-        --#{$prefix}btn-active-color: #{$white};
-      }
-    }
-    
-    // Outline button variants
-    .btn-outline-success {
-      @if map-get($context-props, text) == $white {
-        --#{$prefix}btn-color: #{$success-300};
-        --#{$prefix}btn-border-color: #{$success-400};
-        --#{$prefix}btn-hover-bg: #{$success-600};
-        --#{$prefix}btn-hover-color: #{$white};
-        --#{$prefix}btn-active-bg: #{$success-700};
-        --#{$prefix}btn-active-color: #{$white};
-      } @else {
-        --#{$prefix}btn-color: #{$success-700};
-        --#{$prefix}btn-border-color: #{$success-600};
-        --#{$prefix}btn-hover-bg: #{$success-600};
-        --#{$prefix}btn-hover-color: #{$white};
-        --#{$prefix}btn-active-bg: #{$success-700};
-        --#{$prefix}btn-active-color: #{$white};
-      }
-    }
-    
-    .btn-outline-danger {
-      @if map-get($context-props, text) == $white {
-        --#{$prefix}btn-color: #{$danger-300};
-        --#{$prefix}btn-border-color: #{$danger-400};
-        --#{$prefix}btn-hover-bg: #{$danger-600};
-        --#{$prefix}btn-hover-color: #{$white};
-        --#{$prefix}btn-active-bg: #{$danger-700};
-        --#{$prefix}btn-active-color: #{$white};
-      } @else {
-        --#{$prefix}btn-color: #{$danger-700};
-        --#{$prefix}btn-border-color: #{$danger-600};
-        --#{$prefix}btn-hover-bg: #{$danger-600};
-        --#{$prefix}btn-hover-color: #{$white};
-        --#{$prefix}btn-active-bg: #{$danger-700};
-        --#{$prefix}btn-active-color: #{$white};
-      }
-    }
-    
-    .btn-outline-warning {
-      @if map-get($context-props, text) == $white {
-        --#{$prefix}btn-color: #{$warning-300};
-        --#{$prefix}btn-border-color: #{$warning-400};
-        --#{$prefix}btn-hover-bg: #{$warning-600};
-        --#{$prefix}btn-hover-color: #{$gray-900};
-        --#{$prefix}btn-active-bg: #{$warning-700};
-        --#{$prefix}btn-active-color: #{$gray-900};
-      } @else {
-        --#{$prefix}btn-color: #{$warning-700};
-        --#{$prefix}btn-border-color: #{$warning-600};
-        --#{$prefix}btn-hover-bg: #{$warning-600};
-        --#{$prefix}btn-hover-color: #{$gray-900};
-        --#{$prefix}btn-active-bg: #{$warning-700};
-        --#{$prefix}btn-active-color: #{$gray-900};
-      }
-    }
-    
-    .btn-outline-info {
-      @if map-get($context-props, text) == $white {
-        --#{$prefix}btn-color: #{$info-300};
-        --#{$prefix}btn-border-color: #{$info-400};
-        --#{$prefix}btn-hover-bg: #{$info-600};
-        --#{$prefix}btn-hover-color: #{$white};
-        --#{$prefix}btn-active-bg: #{$info-700};
-        --#{$prefix}btn-active-color: #{$white};
-      } @else {
-        --#{$prefix}btn-color: #{$info-700};
-        --#{$prefix}btn-border-color: #{$info-600};
-        --#{$prefix}btn-hover-bg: #{$info-600};
-        --#{$prefix}btn-hover-color: #{$white};
-        --#{$prefix}btn-active-bg: #{$info-700};
-        --#{$prefix}btn-active-color: #{$white};
-      }
-    }
-    
-    .btn-outline-lavender {
-      @if map-get($context-props, text) == $white {
-        --#{$prefix}btn-color: #{$lavender-300};
-        --#{$prefix}btn-border-color: #{$lavender-400};
-        --#{$prefix}btn-hover-bg: #{$lavender-600};
-        --#{$prefix}btn-hover-color: #{$white};
-        --#{$prefix}btn-active-bg: #{$lavender-700};
-        --#{$prefix}btn-active-color: #{$white};
-      } @else {
-        --#{$prefix}btn-color: #{$lavender-700};
-        --#{$prefix}btn-border-color: #{$lavender-600};
-        --#{$prefix}btn-hover-bg: #{$lavender-600};
-        --#{$prefix}btn-hover-color: #{$white};
-        --#{$prefix}btn-active-bg: #{$lavender-700};
-        --#{$prefix}btn-active-color: #{$white};
-      }
-    }
-    
-    // Button active states for primary/secondary/outline (already defined in context)
-    .btn-primary:active,
-    .btn-primary.active {
-      --#{$prefix}btn-active-bg: #{map-get($context-props, btn-primary-active-bg)};
-      --#{$prefix}btn-active-color: #{map-get($context-props, btn-primary-active-color)};
-      --#{$prefix}btn-active-border-color: #{map-get($context-props, btn-primary-active-bg)};
-    }
-    
-    .btn-secondary:active,
-    .btn-secondary.active {
-      --#{$prefix}btn-active-bg: #{map-get($context-props, btn-secondary-active-bg)};
-      --#{$prefix}btn-active-color: #{map-get($context-props, btn-secondary-active-color)};
-    }
-    
-    .btn-outline-primary:active,
-    .btn-outline-primary.active,
-    .btn-outline-secondary:active,
-    .btn-outline-secondary.active,
-    .btn-outline-neutral:active,
-    .btn-outline-neutral.active {
-      --#{$prefix}btn-active-bg: #{map-get($context-props, btn-outline-active-bg)};
-      --#{$prefix}btn-active-color: #{map-get($context-props, btn-outline-active-color)};
-      --#{$prefix}btn-active-border-color: #{map-get($context-props, btn-outline-active-bg)};
-    }
-  }
-}
-
-// ============================================
-// CONTEXT-AWARE TRANSITIONS
-// ============================================
-
-[class*="on-"] {
-  transition: background-color 0.3s ease, color 0.3s ease;
-
-  // Smooth transitions for interactive elements
-  a,
-  button,
-  .btn,
-  input,
-  textarea,
-  select {
-    transition: all 0.2s ease;
-  }
-}
-
-// ============================================
-// CONTEXT-AWARE COMPONENT ENHANCEMENTS
-// ============================================
-
-// Card adaptations within contexts
-@each $context-name, $context-props in $contexts {
-  .#{$context-name} {
-    .card {
-      background-color: rgba(map-get($context-props, bg), 0.1);
-      border-color: map-get($context-props, border);
-      color: map-get($context-props, text);
-    }
-
-    .badge {
-      background-color: rgba(map-get($context-props, text), 0.2);
-      color: map-get($context-props, text);
-    }
-
-    .alert {
-      background-color: rgba(map-get($context-props, text), 0.1);
-      border-color: map-get($context-props, border);
-      color: map-get($context-props, text);
-    }
-  }
-}
-
-// ============================================
-// FOCUS STATES IN CONTEXTS
-// ============================================
-
-@each $context-name, $context-props in $contexts {
-  .#{$context-name} {
-    *:focus-visible {
-      outline-color: map-get($context-props, link-color);
-      outline-offset: 2px;
-      outline-width: 2px;
-    }
-  }
-}