sdga-ui 1.0.2 → 1.0.4

package/theme/components/_buttons.scss

@@ -1,270 +1,270 @@
-// Bootstrap 5.3 - Button Variables
-
-// ============================================
-// BUTTONS
-// ============================================
-
-// Button padding and sizing
-$btn-padding-y: 0.375rem;
-$btn-padding-x: 0.75rem;
-$btn-font-family: $font-family-base;
-$btn-font-size: $font-size-base;
-$btn-line-height: $line-height-base;
-$btn-white-space: null;
-
-$btn-padding-y-sm: 0.25rem;
-$btn-padding-x-sm: 0.5rem;
-$btn-font-size-sm: $font-size-sm;
-$btn-line-height-sm: $line-height-sm;
-
-$btn-padding-y-lg: 0.5rem;
-$btn-padding-x-lg: 1rem;
-$btn-font-size-lg: $font-size-lg;
-$btn-line-height-lg: $line-height-lg;
-
-// Button styling
-$btn-border-width: $border-width;
-$btn-font-weight: 500;
-$btn-box-shadow: none;
-$btn-focus-width: 0.25rem;
-$btn-focus-box-shadow: none;
-$btn-disabled-opacity: 0.65;
-$btn-active-box-shadow: none;
-
-// Button border radius
-$btn-border-radius: $radius-sm;
-$btn-border-radius-sm: $radius-sm;
-$btn-border-radius-lg: $radius-sm;
-
-// Button transitions
-$btn-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
-
-// Button hover state
-$btn-hover-bg-shade-amount: 15%;
-$btn-hover-bg-tint-amount: 15%;
-$btn-hover-border-shade-amount: 20%;
-$btn-hover-border-tint-amount: 10%;
-
-// Button active state
-$btn-active-bg-shade-amount: 20%;
-$btn-active-bg-tint-amount: 20%;
-$btn-active-border-shade-amount: 25%;
-$btn-active-border-tint-amount: 10%;
-
-// Link buttons
-$btn-link-color: $link-color;
-$btn-link-hover-color: $link-hover-color;
-$btn-link-decoration: $link-decoration;
-$btn-link-hover-decoration: $link-hover-decoration;
-$btn-link-focus-shadow-rgb: rgba($primary, 0.5);
-$btn-link-disabled-color: $gray-600;
-
-// Button close
-$btn-close-width: .7031rem;
-$btn-close-height: $btn-close-width;
-$btn-close-padding-x: .6481rem;
-$btn-close-padding-y: $btn-close-padding-x;
-$btn-close-color: $black;
-$btn-close-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$btn-close-color}'><path d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/></svg>");
-$btn-close-focus-shadow: $btn-focus-box-shadow;
-$btn-close-opacity: 1;
-$btn-close-hover-opacity: 0.75;
-$btn-close-focus-opacity: 1;
-$btn-close-disabled-opacity: 0.25;
-$btn-close-white-filter: invert(1) grayscale(100%) brightness(200%);
-
-// ============================================
-// CUSTOM BUTTON VARIANTS
-// ============================================
-
-// Primary Button Variant
-$btn-primary-color: $white;
-$btn-primary-bg: $primary-600;
-$btn-primary-border-color: $primary-600;
-$btn-primary-hover-color: $white;
-$btn-primary-hover-bg: $primary-700;
-$btn-primary-hover-border-color: $primary-700;
-$btn-primary-active-color: $white;
-$btn-primary-active-bg: $primary-800;
-$btn-primary-active-border-color: $primary-800;
-$btn-primary-focus-color: $white;
-$btn-primary-focus-bg: $primary-600;
-$btn-primary-focus-border-color: $black;
-$btn-primary-focus-shadow-rgb: null;
-$btn-primary-disabled-color: $white;
-$btn-primary-disabled-bg: $primary-200;
-$btn-primary-disabled-border-color: $primary-200;
-
-// Primary Outline Button Variant
-$btn-outline-primary-color: $primary-600;
-$btn-outline-primary-border-color: $primary-600;
-$btn-outline-primary-hover-color: $white;
-$btn-outline-primary-hover-bg: $primary-600;
-$btn-outline-primary-hover-border-color: $primary-600;
-$btn-outline-primary-active-color: $white;
-$btn-outline-primary-active-bg: $primary-700;
-$btn-outline-primary-active-border-color: $primary-700;
-$btn-outline-primary-focus-color: $primary-700;
-$btn-outline-primary-focus-bg: transparent;
-$btn-outline-primary-focus-border-color: $black;
-$btn-outline-primary-focus-shadow-rgb: null;
-$btn-outline-primary-disabled-color: $primary-400;
-$btn-outline-primary-disabled-bg: transparent;
-$btn-outline-primary-disabled-border-color: $primary-400;
-
-// Secondary Button Variant
-$btn-secondary-color: $black;
-$btn-secondary-bg: $secondary-100;
-$btn-secondary-border-color: $secondary-100;
-$btn-secondary-hover-color: $black;
-$btn-secondary-hover-bg: $secondary-200;
-$btn-secondary-hover-border-color: $secondary-200;
-$btn-secondary-active-color: $black;
-$btn-secondary-active-bg: $secondary-200;
-$btn-secondary-active-border-color: $secondary-200;
-$btn-secondary-focus-color: $black;
-$btn-secondary-focus-bg: $secondary-100;
-$btn-secondary-focus-border-color: $black;
-$btn-secondary-focus-shadow-rgb: null;
-$btn-secondary-disabled-color: $secondary-400;
-$btn-secondary-disabled-bg: $secondary-200;
-$btn-secondary-disabled-border-color: $secondary-200;
-
-// Secondary Outline Button Variant
-$btn-outline-secondary-color: $black;
-$btn-outline-secondary-border-color: $secondary-300;
-$btn-outline-secondary-hover-color: $black;
-$btn-outline-secondary-hover-bg: $secondary-100;
-$btn-outline-secondary-hover-border-color: $secondary-200;
-$btn-outline-secondary-active-color: $black;
-$btn-outline-secondary-active-bg: $secondary-200;
-$btn-outline-secondary-active-border-color: $secondary-300;
-$btn-outline-secondary-focus-color: $black;
-$btn-outline-secondary-focus-bg: transparent;
-$btn-outline-secondary-focus-border-color: $black;
-$btn-outline-secondary-focus-shadow-rgb: null;
-$btn-outline-secondary-disabled-color: $secondary-400;
-$btn-outline-secondary-disabled-bg: transparent;
-$btn-outline-secondary-disabled-border-color: $secondary-400;
-
-// Danger/Destructive Button Variant
-$btn-danger-color: $white;
-$btn-danger-bg: $danger-600;
-$btn-danger-border-color: $danger-600;
-$btn-danger-hover-color: $white;
-$btn-danger-hover-bg: $danger-700;
-$btn-danger-hover-border-color: $danger-700;
-$btn-danger-active-color: $white;
-$btn-danger-active-bg: $danger-800;
-$btn-danger-active-border-color: $danger-800;
-$btn-danger-focus-color: $white;
-$btn-danger-focus-bg: $danger-600;
-$btn-danger-focus-border-color: $black;
-$btn-danger-focus-shadow-rgb: null;
-$btn-danger-disabled-color: $white;
-$btn-danger-disabled-bg: $danger-200;
-$btn-danger-disabled-border-color: $danger-200;
-
-// Danger Outline Button Variant
-$btn-outline-danger-color: $danger-600;
-$btn-outline-danger-border-color: $danger-600;
-$btn-outline-danger-hover-color: $white;
-$btn-outline-danger-hover-bg: $danger-600;
-$btn-outline-danger-hover-border-color: $danger-600;
-$btn-outline-danger-active-color: $white;
-$btn-outline-danger-active-bg: $danger-700;
-$btn-outline-danger-active-border-color: $danger-700;
-$btn-outline-danger-focus-color: $danger-700;
-$btn-outline-danger-focus-bg: transparent;
-$btn-outline-danger-focus-border-color: $black;
-$btn-outline-danger-focus-shadow-rgb: null;
-$btn-outline-danger-disabled-color: $danger-400;
-$btn-outline-danger-disabled-bg: transparent;
-$btn-outline-danger-disabled-border-color: $danger-400;
-
-// Neutral Button Variant
-$btn-neutral-color: $white;
-$btn-neutral-bg: $neutral-950;
-$btn-neutral-border-color: $neutral-950;
-$btn-neutral-hover-color: $white;
-$btn-neutral-hover-bg: $neutral-800;
-$btn-neutral-hover-border-color: $neutral-800;
-$btn-neutral-active-color: $white;
-$btn-neutral-active-bg: $neutral-600;
-$btn-neutral-active-border-color: $neutral-600;
-$btn-neutral-focus-color: $white;
-$btn-neutral-focus-bg: $neutral-950;
-$btn-neutral-focus-border-color: $black;
-$btn-neutral-focus-shadow-rgb: 77, 87, 97;
-$btn-neutral-disabled-color: $neutral-400;
-$btn-neutral-disabled-bg: $neutral-200;
-$btn-neutral-disabled-border-color: $neutral-200;
-
-// Neutral Outline Button Variant
-$btn-outline-neutral-color: $neutral-600;
-$btn-outline-neutral-border-color: $neutral-600;
-$btn-outline-neutral-hover-color: $white;
-$btn-outline-neutral-hover-bg: $neutral-600;
-$btn-outline-neutral-hover-border-color: $neutral-600;
-$btn-outline-neutral-active-color: $white;
-$btn-outline-neutral-active-bg: $neutral-700;
-$btn-outline-neutral-active-border-color: $neutral-700;
-$btn-outline-neutral-focus-color: $neutral-700;
-$btn-outline-neutral-focus-bg: transparent;
-$btn-outline-neutral-focus-border-color: $neutral-600;
-$btn-outline-neutral-focus-shadow-rgb: null;
-$btn-outline-neutral-disabled-color: $neutral-400;
-$btn-outline-neutral-disabled-bg: transparent;
-$btn-outline-neutral-disabled-border-color: $neutral-400;
-
-// Subtle Outline Button Variant
-$btn-subtle-color: $black;
-$btn-subtle-border-color: transparent;
-$btn-subtle-hover-color: $black;
-$btn-subtle-hover-bg: transparent;
-$btn-subtle-hover-border-color: transparent;
-$btn-subtle-active-color: $black;
-$btn-subtle-active-bg: transparent;
-$btn-subtle-active-border-color: transparent;
-$btn-subtle-focus-color: $black;
-$btn-subtle-focus-bg: transparent;
-$btn-subtle-focus-border-color: transparent;
-$btn-subtle-focus-shadow-rgb: null;
-$btn-subtle-disabled-color: $neutral-400;
-$btn-subtle-disabled-bg: transparent;
-$btn-subtle-disabled-border-color: transparent;
-
-// Lavender Button Variant
-$btn-lavender-color: $white;
-$btn-lavender-bg: $lavender-600;
-$btn-lavender-border-color: $lavender-600;
-$btn-lavender-hover-color: $white;
-$btn-lavender-hover-bg: $lavender-700;
-$btn-lavender-hover-border-color: $lavender-700;
-$btn-lavender-active-color: $white;
-$btn-lavender-active-bg: $lavender-800;
-$btn-lavender-active-border-color: $lavender-800;
-$btn-lavender-focus-color: $white;
-$btn-lavender-focus-bg: $lavender-600;
-$btn-lavender-focus-border-color: $lavender-700;
-$btn-lavender-focus-shadow-rgb: null;
-$btn-lavender-disabled-color: $white;
-$btn-lavender-disabled-bg: $lavender-400;
-$btn-lavender-disabled-border-color: $lavender-400;
-
-// Lavender Outline Button Variant
-$btn-outline-lavender-color: $lavender-600;
-$btn-outline-lavender-border-color: $lavender-600;
-$btn-outline-lavender-hover-color: $white;
-$btn-outline-lavender-hover-bg: $lavender-600;
-$btn-outline-lavender-hover-border-color: $lavender-600;
-$btn-outline-lavender-active-color: $white;
-$btn-outline-lavender-active-bg: $lavender-700;
-$btn-outline-lavender-active-border-color: $lavender-700;
-$btn-outline-lavender-focus-color: $lavender-700;
-$btn-outline-lavender-focus-bg: transparent;
-$btn-outline-lavender-focus-border-color: $lavender-600;
-$btn-outline-lavender-focus-shadow-rgb: null;
-$btn-outline-lavender-disabled-color: $lavender-400;
-$btn-outline-lavender-disabled-bg: transparent;
-$btn-outline-lavender-disabled-border-color: $lavender-400;
+// Bootstrap 5.3 - Button Variables
+
+// ============================================
+// BUTTONS
+// ============================================
+
+// Button padding and sizing
+$btn-padding-y: 0.375rem;
+$btn-padding-x: 0.75rem;
+$btn-font-family: $font-family-base;
+$btn-font-size: $font-size-base;
+$btn-line-height: $line-height-base;
+$btn-white-space: null;
+
+$btn-padding-y-sm: 0.25rem;
+$btn-padding-x-sm: 0.5rem;
+$btn-font-size-sm: $font-size-sm;
+$btn-line-height-sm: $line-height-sm;
+
+$btn-padding-y-lg: 0.5rem;
+$btn-padding-x-lg: 1rem;
+$btn-font-size-lg: $font-size-lg;
+$btn-line-height-lg: $line-height-lg;
+
+// Button styling
+$btn-border-width: 1px;
+$btn-font-weight: 500;
+$btn-box-shadow: none;
+$btn-focus-width: 0.25rem;
+$btn-focus-box-shadow: none;
+$btn-disabled-opacity: 0.65;
+$btn-active-box-shadow: none;
+
+// Button border radius
+$btn-border-radius: $radius-sm;
+$btn-border-radius-sm: $radius-sm;
+$btn-border-radius-lg: $radius-sm;
+
+// Button transitions
+$btn-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+
+// Button hover state
+$btn-hover-bg-shade-amount: 15%;
+$btn-hover-bg-tint-amount: 15%;
+$btn-hover-border-shade-amount: 20%;
+$btn-hover-border-tint-amount: 10%;
+
+// Button active state
+$btn-active-bg-shade-amount: 20%;
+$btn-active-bg-tint-amount: 20%;
+$btn-active-border-shade-amount: 25%;
+$btn-active-border-tint-amount: 10%;
+
+// Link buttons
+$btn-link-color: $primary-600;
+$btn-link-hover-color: $primary-600;
+$btn-link-decoration: underline;
+$btn-link-hover-decoration: underline;
+$btn-link-focus-shadow-rgb: none;
+$btn-link-disabled-color: $gray-600;
+
+// Button close
+$btn-close-width: .7031rem;
+$btn-close-height: $btn-close-width;
+$btn-close-padding-x: .6481rem;
+$btn-close-padding-y: $btn-close-padding-x;
+$btn-close-color: $black;
+$btn-close-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$btn-close-color}'><path d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/></svg>");
+$btn-close-focus-shadow: $btn-focus-box-shadow;
+$btn-close-opacity: 1;
+$btn-close-hover-opacity: 0.75;
+$btn-close-focus-opacity: 1;
+$btn-close-disabled-opacity: 0.25;
+$btn-close-white-filter: invert(1) grayscale(100%) brightness(200%);
+
+// ============================================
+// CUSTOM BUTTON VARIANTS
+// ============================================
+
+// Primary Button Variant
+$btn-primary-color: $white;
+$btn-primary-bg: $primary-600;
+$btn-primary-border-color: $primary-600;
+$btn-primary-hover-color: $white;
+$btn-primary-hover-bg: $primary-700;
+$btn-primary-hover-border-color: $primary-700;
+$btn-primary-active-color: $white;
+$btn-primary-active-bg: $primary-800;
+$btn-primary-active-border-color: $primary-800;
+$btn-primary-focus-color: $white;
+$btn-primary-focus-bg: $primary-600;
+$btn-primary-focus-border-color: $black;
+$btn-primary-focus-shadow-rgb: null;
+$btn-primary-disabled-color: $white;
+$btn-primary-disabled-bg: $primary-200;
+$btn-primary-disabled-border-color: $primary-200;
+
+// Primary Outline Button Variant
+$btn-outline-primary-color: $primary-600;
+$btn-outline-primary-border-color: $primary-600;
+$btn-outline-primary-hover-color: $white;
+$btn-outline-primary-hover-bg: $primary-600;
+$btn-outline-primary-hover-border-color: $primary-600;
+$btn-outline-primary-active-color: $white;
+$btn-outline-primary-active-bg: $primary-700;
+$btn-outline-primary-active-border-color: $primary-700;
+$btn-outline-primary-focus-color: $primary-700;
+$btn-outline-primary-focus-bg: transparent;
+$btn-outline-primary-focus-border-color: $black;
+$btn-outline-primary-focus-shadow-rgb: null;
+$btn-outline-primary-disabled-color: $primary-400;
+$btn-outline-primary-disabled-bg: transparent;
+$btn-outline-primary-disabled-border-color: $primary-400;
+
+// Secondary Button Variant
+$btn-secondary-color: $black;
+$btn-secondary-bg: $secondary-100;
+$btn-secondary-border-color: $secondary-100;
+$btn-secondary-hover-color: $black;
+$btn-secondary-hover-bg: $secondary-200;
+$btn-secondary-hover-border-color: $secondary-200;
+$btn-secondary-active-color: $black;
+$btn-secondary-active-bg: $secondary-200;
+$btn-secondary-active-border-color: $secondary-200;
+$btn-secondary-focus-color: $black;
+$btn-secondary-focus-bg: $secondary-100;
+$btn-secondary-focus-border-color: $black;
+$btn-secondary-focus-shadow-rgb: null;
+$btn-secondary-disabled-color: $secondary-400;
+$btn-secondary-disabled-bg: $secondary-200;
+$btn-secondary-disabled-border-color: $secondary-200;
+
+// Secondary Outline Button Variant
+$btn-outline-secondary-color: $black;
+$btn-outline-secondary-border-color: $secondary-300;
+$btn-outline-secondary-hover-color: $black;
+$btn-outline-secondary-hover-bg: $secondary-100;
+$btn-outline-secondary-hover-border-color: $secondary-200;
+$btn-outline-secondary-active-color: $black;
+$btn-outline-secondary-active-bg: $secondary-200;
+$btn-outline-secondary-active-border-color: $secondary-300;
+$btn-outline-secondary-focus-color: $black;
+$btn-outline-secondary-focus-bg: transparent;
+$btn-outline-secondary-focus-border-color: $black;
+$btn-outline-secondary-focus-shadow-rgb: null;
+$btn-outline-secondary-disabled-color: $secondary-400;
+$btn-outline-secondary-disabled-bg: transparent;
+$btn-outline-secondary-disabled-border-color: $secondary-400;
+
+// Danger/Destructive Button Variant
+$btn-danger-color: $white;
+$btn-danger-bg: $danger-600;
+$btn-danger-border-color: $danger-600;
+$btn-danger-hover-color: $white;
+$btn-danger-hover-bg: $danger-700;
+$btn-danger-hover-border-color: $danger-700;
+$btn-danger-active-color: $white;
+$btn-danger-active-bg: $danger-800;
+$btn-danger-active-border-color: $danger-800;
+$btn-danger-focus-color: $white;
+$btn-danger-focus-bg: $danger-600;
+$btn-danger-focus-border-color: $black;
+$btn-danger-focus-shadow-rgb: null;
+$btn-danger-disabled-color: $white;
+$btn-danger-disabled-bg: $danger-200;
+$btn-danger-disabled-border-color: $danger-200;
+
+// Danger Outline Button Variant
+$btn-outline-danger-color: $danger-600;
+$btn-outline-danger-border-color: $danger-600;
+$btn-outline-danger-hover-color: $white;
+$btn-outline-danger-hover-bg: $danger-600;
+$btn-outline-danger-hover-border-color: $danger-600;
+$btn-outline-danger-active-color: $white;
+$btn-outline-danger-active-bg: $danger-700;
+$btn-outline-danger-active-border-color: $danger-700;
+$btn-outline-danger-focus-color: $danger-700;
+$btn-outline-danger-focus-bg: transparent;
+$btn-outline-danger-focus-border-color: $black;
+$btn-outline-danger-focus-shadow-rgb: null;
+$btn-outline-danger-disabled-color: $danger-400;
+$btn-outline-danger-disabled-bg: transparent;
+$btn-outline-danger-disabled-border-color: $danger-400;
+
+// Neutral Button Variant
+$btn-neutral-color: $white;
+$btn-neutral-bg: $neutral-950;
+$btn-neutral-border-color: $neutral-950;
+$btn-neutral-hover-color: $white;
+$btn-neutral-hover-bg: $neutral-800;
+$btn-neutral-hover-border-color: $neutral-800;
+$btn-neutral-active-color: $white;
+$btn-neutral-active-bg: $neutral-600;
+$btn-neutral-active-border-color: $neutral-600;
+$btn-neutral-focus-color: $white;
+$btn-neutral-focus-bg: $neutral-950;
+$btn-neutral-focus-border-color: $black;
+$btn-neutral-focus-shadow-rgb: 77, 87, 97;
+$btn-neutral-disabled-color: $neutral-400;
+$btn-neutral-disabled-bg: $neutral-200;
+$btn-neutral-disabled-border-color: $neutral-200;
+
+// Neutral Outline Button Variant
+$btn-outline-neutral-color: $neutral-600;
+$btn-outline-neutral-border-color: $neutral-600;
+$btn-outline-neutral-hover-color: $white;
+$btn-outline-neutral-hover-bg: $neutral-600;
+$btn-outline-neutral-hover-border-color: $neutral-600;
+$btn-outline-neutral-active-color: $white;
+$btn-outline-neutral-active-bg: $neutral-700;
+$btn-outline-neutral-active-border-color: $neutral-700;
+$btn-outline-neutral-focus-color: $neutral-700;
+$btn-outline-neutral-focus-bg: transparent;
+$btn-outline-neutral-focus-border-color: $neutral-600;
+$btn-outline-neutral-focus-shadow-rgb: null;
+$btn-outline-neutral-disabled-color: $neutral-400;
+$btn-outline-neutral-disabled-bg: transparent;
+$btn-outline-neutral-disabled-border-color: $neutral-400;
+
+// Subtle Outline Button Variant
+$btn-subtle-color: $black;
+$btn-subtle-border-color: transparent;
+$btn-subtle-hover-color: $black;
+$btn-subtle-hover-bg: transparent;
+$btn-subtle-hover-border-color: transparent;
+$btn-subtle-active-color: $black;
+$btn-subtle-active-bg: transparent;
+$btn-subtle-active-border-color: transparent;
+$btn-subtle-focus-color: $black;
+$btn-subtle-focus-bg: transparent;
+$btn-subtle-focus-border-color: transparent;
+$btn-subtle-focus-shadow-rgb: null;
+$btn-subtle-disabled-color: $neutral-400;
+$btn-subtle-disabled-bg: transparent;
+$btn-subtle-disabled-border-color: transparent;
+
+// Lavender Button Variant
+$btn-lavender-color: $white;
+$btn-lavender-bg: $lavender-600;
+$btn-lavender-border-color: $lavender-600;
+$btn-lavender-hover-color: $white;
+$btn-lavender-hover-bg: $lavender-700;
+$btn-lavender-hover-border-color: $lavender-700;
+$btn-lavender-active-color: $white;
+$btn-lavender-active-bg: $lavender-800;
+$btn-lavender-active-border-color: $lavender-800;
+$btn-lavender-focus-color: $white;
+$btn-lavender-focus-bg: $lavender-600;
+$btn-lavender-focus-border-color: $lavender-700;
+$btn-lavender-focus-shadow-rgb: null;
+$btn-lavender-disabled-color: $white;
+$btn-lavender-disabled-bg: $lavender-400;
+$btn-lavender-disabled-border-color: $lavender-400;
+
+// Lavender Outline Button Variant
+$btn-outline-lavender-color: $lavender-600;
+$btn-outline-lavender-border-color: $lavender-600;
+$btn-outline-lavender-hover-color: $white;
+$btn-outline-lavender-hover-bg: $lavender-600;
+$btn-outline-lavender-hover-border-color: $lavender-600;
+$btn-outline-lavender-active-color: $white;
+$btn-outline-lavender-active-bg: $lavender-700;
+$btn-outline-lavender-active-border-color: $lavender-700;
+$btn-outline-lavender-focus-color: $lavender-700;
+$btn-outline-lavender-focus-bg: transparent;
+$btn-outline-lavender-focus-border-color: $lavender-600;
+$btn-outline-lavender-focus-shadow-rgb: null;
+$btn-outline-lavender-disabled-color: $lavender-400;
+$btn-outline-lavender-disabled-bg: transparent;
+$btn-outline-lavender-disabled-border-color: $lavender-400;

package/theme/components/_cards.scss

@@ -1,21 +1,21 @@
-// Bootstrap 5.3 - Card Component Variables
-
-$card-spacer-y: $spacer;
-$card-spacer-x: $spacer;
-$card-title-spacer-y: $spacer * .5;
-$card-title-color: null;
-$card-subtitle-color: $gray-800;
-$card-border-width: 0;
-$card-border-color: none;
-$card-border-radius: $radius-lg;
-$card-box-shadow: $box-shadow;
-$card-inner-border-radius: subtract($card-border-radius, $card-border-width);
-$card-cap-padding-y: $card-spacer-y * 1.5 0;
-$card-cap-padding-x: 0;
-$card-cap-bg: none;
-$card-cap-color: null;
-$card-height: null;
-$card-color: null;
-$card-bg: var(--#{$prefix}body-bg);
-$card-img-overlay-padding: $spacer;
-$card-group-margin: $grid-gutter-width * .5;
+// Bootstrap 5.3 - Card Component Variables
+
+$card-spacer-y: $spacer;
+$card-spacer-x: $spacer;
+$card-title-spacer-y: $spacer * .5;
+$card-title-color: null;
+$card-subtitle-color: $gray-800;
+$card-border-width: 0;
+$card-border-color: none;
+$card-border-radius: $radius-lg;
+$card-box-shadow: $box-shadow;
+$card-inner-border-radius: subtract($card-border-radius, $card-border-width);
+$card-cap-padding-y: $card-spacer-y * 1.5 0;
+$card-cap-padding-x: 0;
+$card-cap-bg: none;
+$card-cap-color: null;
+$card-height: null;
+$card-color: null;
+$card-bg: var(--#{$prefix}body-bg);
+$card-img-overlay-padding: $spacer;
+$card-group-margin: $grid-gutter-width * .5;

package/theme/components/_carousel.scss

@@ -1,33 +1,33 @@
-// Bootstrap 5.3 - Carousel Component Variables
-
-$carousel-control-color: $white;
-$carousel-control-width: 15%;
-$carousel-control-opacity: 0.5;
-$carousel-control-hover-opacity: 0.9;
-$carousel-control-transition: opacity 0.15s ease;
-
-$carousel-indicator-width: 30px;
-$carousel-indicator-height: 3px;
-$carousel-indicator-hit-area-height: 10px;
-$carousel-indicator-spacer: 3px;
-$carousel-indicator-opacity: 0.5;
-$carousel-indicator-active-bg: $white;
-$carousel-indicator-active-opacity: 1;
-$carousel-indicator-transition: opacity 0.6s ease;
-
-$carousel-caption-width: 70%;
-$carousel-caption-color: $white;
-$carousel-caption-padding-y: 1.25rem;
-$carousel-caption-spacer: 1.25rem;
-
-$carousel-control-icon-width: 2rem;
-
-$carousel-control-prev-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$carousel-control-color}'><path d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/></svg>");
-$carousel-control-next-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$carousel-control-color}'><path d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/></svg>");
-
-$carousel-transition-duration: 0.6s;
-$carousel-transition: transform $carousel-transition-duration ease-in-out;
-
-$carousel-dark-indicator-active-bg: $black;
-$carousel-dark-caption-color: $black;
-$carousel-dark-control-icon-filter: invert(1) grayscale(100);
+// Bootstrap 5.3 - Carousel Component Variables
+
+$carousel-control-color: $white;
+$carousel-control-width: 15%;
+$carousel-control-opacity: 0.5;
+$carousel-control-hover-opacity: 0.9;
+$carousel-control-transition: opacity 0.15s ease;
+
+$carousel-indicator-width: 30px;
+$carousel-indicator-height: 3px;
+$carousel-indicator-hit-area-height: 10px;
+$carousel-indicator-spacer: 3px;
+$carousel-indicator-opacity: 0.5;
+$carousel-indicator-active-bg: $white;
+$carousel-indicator-active-opacity: 1;
+$carousel-indicator-transition: opacity 0.6s ease;
+
+$carousel-caption-width: 70%;
+$carousel-caption-color: $white;
+$carousel-caption-padding-y: 1.25rem;
+$carousel-caption-spacer: 1.25rem;
+
+$carousel-control-icon-width: 2rem;
+
+$carousel-control-prev-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$carousel-control-color}'><path d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/></svg>");
+$carousel-control-next-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$carousel-control-color}'><path d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/></svg>");
+
+$carousel-transition-duration: 0.6s;
+$carousel-transition: transform $carousel-transition-duration ease-in-out;
+
+$carousel-dark-indicator-active-bg: $black;
+$carousel-dark-caption-color: $black;
+$carousel-dark-control-icon-filter: invert(1) grayscale(100);