sdga-ui 1.0.6 → 1.0.7

package/theme/customizations/_contexts.scss

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

package/theme/customizations/_footer.scss

@@ -0,0 +1,83 @@
+.dga-footer {
+    padding: 2.5rem 2rem;
+
+    .dga-list-group-container {
+        gap: 1.5rem;
+        margin-bottom: 3rem;
+
+        .dga-link-group {
+            min-width: 12rem;
+        }
+    }
+    .dga-social-container {
+            display: flex;
+            gap: 2rem;
+            flex-direction: column;
+            flex-wrap: wrap;
+            min-width: 12rem;
+
+            & > div {
+                flex: 1;
+            }
+        }
+
+    .dga-footer-bottom {
+        margin-top: 1rem;
+
+        
+
+        .dga-footer-bottom-links {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 1rem;
+            margin-bottom: 2.5rem;
+        }
+        
+
+        .dga-footer-copyright {
+            margin-bottom: 0.5rem;
+
+            .dga-footer-copyright-links {
+                display: flex;
+                flex-wrap: wrap;
+                gap: 1rem;
+
+            }
+        }
+
+        .dga-logo-container {
+            display: flex;
+            gap: 1rem;
+            justify-content: flex-end;
+            flex-wrap: wrap;
+        }
+
+    }
+}
+
+@media (max-width: $tablet) {
+    .dga-footer {
+        .dga-social-container {
+            flex-direction: row;
+            flex-wrap: wrap;
+        }
+        .dga-footer-bottom {
+            .dga-footer-bottom-links {
+                justify-content: center;
+                padding: 2rem 0;
+            }
+            .dga-footer-copyright {
+                text-align: center;
+                padding: 2rem 0;
+
+                .dga-footer-copyright-links {
+                    justify-content: center;
+                }
+            }
+
+            .dga-logo-container {
+                justify-content: space-between;
+            }
+        }
+    }
+}

package/theme/customizations/_links.scss

@@ -8,76 +8,92 @@
 // Define link color variants with their shades
 $link-variants: (
   "primary": (
-    base: $primary-600,
-    hover: $primary-400,
-    active: $primary-300 ),
+    base: rgba($primary-600, var(--#{$prefix}link-opacity, 1)),
+    base-decoration: rgba($primary-600, var(--#{$prefix}link-decoration-opacity, 1)),
+    hover: rgba($primary-400, var(--#{$prefix}link-opacity, 1)),
+    hover-decoration: rgba($primary-400, var(--#{$prefix}link-decoration-opacity, 1)),
+    active: rgba($primary-300, var(--#{$prefix}link-opacity, 1)),
+    active-decoration: rgba($primary-300, var(--#{$prefix}link-decoration-opacity, 1)) ),
   "secondary": (
-    base: $secondary-600,
-    hover: $secondary-400,
-    active: $secondary-300 ),
+    base: rgba($secondary-600, var(--#{$prefix}link-opacity, 1)),
+    base-decoration: rgba($secondary-600, var(--#{$prefix}link-decoration-opacity, 1)),
+    hover: rgba($secondary-400, var(--#{$prefix}link-opacity, 1)),
+    hover-decoration: rgba($secondary-400, var(--#{$prefix}link-decoration-opacity, 1)),
+    active: rgba($secondary-300, var(--#{$prefix}link-opacity, 1)),
+    active-decoration: rgba($secondary-300, var(--#{$prefix}link-decoration-opacity, 1)) ),
   "success": (
-    base: $success-600,
-    hover: $success-400,
-    active: $success-300 ),
+    base: rgba($success-600, var(--#{$prefix}link-opacity, 1)),
+    base-decoration: rgba($success-600, var(--#{$prefix}link-decoration-opacity, 1)),
+    hover: rgba($success-400, var(--#{$prefix}link-opacity, 1)),
+    hover-decoration: rgba($success-400, var(--#{$prefix}link-decoration-opacity, 1)),
+    active: rgba($success-300, var(--#{$prefix}link-opacity, 1)),
+    active-decoration: rgba($success-300, var(--#{$prefix}link-decoration-opacity, 1)) ),
   "danger": (
-    base: $danger-600,
-    hover: $danger-400,
-    active: $danger-300 ),
+    base: rgba($danger-600, var(--#{$prefix}link-opacity, 1)),
+    base-decoration: rgba($danger-600, var(--#{$prefix}link-decoration-opacity, 1)),
+    hover: rgba($danger-400, var(--#{$prefix}link-opacity, 1)),
+    hover-decoration: rgba($danger-400, var(--#{$prefix}link-decoration-opacity, 1)),
+    active: rgba($danger-300, var(--#{$prefix}link-opacity, 1)),
+    active-decoration: rgba($danger-300, var(--#{$prefix}link-decoration-opacity, 1)) ),
   "warning": (
-    base: $warning-600,
-    hover: $warning-400,
-    active: $warning-300 ),
+    base: rgba($warning-600, var(--#{$prefix}link-opacity, 1)),
+    base-decoration: rgba($warning-600, var(--#{$prefix}link-decoration-opacity, 1)),
+    hover: rgba($warning-400, var(--#{$prefix}link-opacity, 1)),
+    hover-decoration: rgba($warning-400, var(--#{$prefix}link-decoration-opacity, 1)),
+    active: rgba($warning-300, var(--#{$prefix}link-opacity, 1)),
+    active-decoration: rgba($warning-300, var(--#{$prefix}link-decoration-opacity, 1)) ),
   "info": (
-    base: $info-600,
-    hover: $info-400,
-    active: $info-300 ),
+    base: rgba($info-600, var(--#{$prefix}link-opacity, 1)),
+    base-decoration: rgba($info-600, var(--#{$prefix}link-decoration-opacity, 1)),
+    hover: rgba($info-400, var(--#{$prefix}link-opacity, 1)),
+    hover-decoration: rgba($info-400, var(--#{$prefix}link-decoration-opacity, 1)),
+    active: rgba($info-300, var(--#{$prefix}link-opacity, 1)),
+    active-decoration: rgba($info-300, var(--#{$prefix}link-decoration-opacity, 1)) ),
   "neutral": (
-    base: $neutral-700,
-    hover: $neutral-500,
-    active: $neutral-400 ),
+    base: rgba($neutral-700, var(--#{$prefix}link-opacity, 1)),
+    base-decoration: rgba($neutral-700, var(--#{$prefix}link-decoration-opacity, 1)),
+    hover: rgba($neutral-500, var(--#{$prefix}link-opacity, 1)),
+    hover-decoration: rgba($neutral-500, var(--#{$prefix}link-decoration-opacity, 1)),
+    active: rgba($neutral-400, var(--#{$prefix}link-opacity, 1)),
+    active-decoration: rgba($neutral-400, var(--#{$prefix}link-decoration-opacity, 1)) ),
   "lavender": (
-    base: $lavender-600,
-    hover: $lavender-500,
-    active: $lavender-400 ),
-  "oncolor": (
-    base: $white,
-    hover: rgba($white, 0.8),
-    active: rgba($white, 0.6) )
+    base: rgba($lavender-600, var(--#{$prefix}link-opacity, 1)),
+    base-decoration: rgba($lavender-600, var(--#{$prefix}link-decoration-opacity, 1)),
+    hover: rgba($lavender-500, var(--#{$prefix}link-opacity, 1)),
+    hover-decoration: rgba($lavender-500, var(--#{$prefix}link-decoration-opacity, 1)),
+    active: rgba($lavender-400, var(--#{$prefix}link-opacity, 1)),
+    active-decoration: rgba($lavender-400, var(--#{$prefix}link-decoration-opacity, 1)) )
 );
 
 // Generate link variant classes
 @each $name, $colors in $link-variants {
   .link-#{$name} {
     color: map-get($colors, base) !important;
-    text-decoration-color: map-get($colors, base) !important;
+    text-decoration-color: map-get($colors, base-decoration) !important;
 
     &:visited,
     &:focus-visible {
       color: map-get($colors, base) !important;
-      text-decoration-color: map-get($colors, base) !important;
+      text-decoration-color: map-get($colors, base-decoration) !important;
     }
 
     &:hover,
     &:focus {
       color: map-get($colors, hover) !important;
-      text-decoration-color: map-get($colors, hover) !important;
+      text-decoration-color: map-get($colors, hover-decoration) !important;
     }
 
     &:active {
       color: map-get($colors, active) !important;
-      text-decoration-color: map-get($colors, active) !important;
+      text-decoration-color: map-get($colors, active-decoration) !important;
     }
   }
 }
 
 a.disabled {
-  color: $gray-400 !important;
-  text-decoration-color: $gray-400 !important;
-  pointer-events: none;
+  color: rgba($gray-400, var(--#{$prefix}link-opacity, 1)) !important;
+  text-decoration-color: rgba($gray-400, var(--#{$prefix}link-opacity, 1)) !important;
 
-  &.link-oncolor {
-    color: rgba($white, 0.3) !important;
-    text-decoration-color: rgba($white, 0.3) !important;
-  }
+  pointer-events: none;
 }