sdga-ui 1.0.0

package/theme/components/_buttons.scss

@@ -0,0 +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;

package/theme/components/_cards.scss

@@ -0,0 +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;

package/theme/components/_carousel.scss

@@ -0,0 +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);

package/theme/components/_content.scss

@@ -0,0 +1,211 @@
+// Bootstrap 5.3 - Content Component Variables
+// Cards, Tables, Lists, Accordion, Alerts, Badges, Progress, Spinners, Carousel
+
+@use 'sass:color';
+
+// ============================================
+// CARDS
+// ============================================
+
+$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;
+
+
+// ============================================
+// TABLES
+// ============================================
+
+$table-cell-padding-y: 0.5rem;
+$table-cell-padding-x: 0.5rem;
+$table-cell-padding-y-sm: 0.25rem;
+$table-cell-padding-x-sm: 0.25rem;
+
+$table-cell-vertical-align: top;
+
+$table-color: var(--#{$prefix}body-color);
+$table-bg: transparent;
+$table-accent-bg: transparent;
+
+$table-th-font-weight: null;
+
+$table-striped-color: $table-color;
+$table-striped-bg-factor: 0.05;
+$table-striped-bg: rgba($black, $table-striped-bg-factor);
+
+$table-active-color: $table-color;
+$table-active-bg-factor: 0.1;
+$table-active-bg: rgba($black, $table-active-bg-factor);
+
+$table-hover-color: $table-color;
+$table-hover-bg-factor: 0.075;
+$table-hover-bg: rgba($black, $table-hover-bg-factor);
+
+$table-border-factor: 0.1;
+$table-border-width: $border-width;
+$table-border-color: $border-color;
+
+$table-striped-order: odd;
+$table-striped-columns-order: even;
+
+$table-group-separator-color: currentcolor;
+
+// $table-caption-color: $text-muted;
+
+$table-bg-scale: -80%;
+
+// ============================================
+// LIST GROUP
+// ============================================
+
+$list-group-color: var(--#{$prefix}body-color);
+$list-group-bg: $white;
+$list-group-border-color: rgba($black, 0.125);
+$list-group-border-width: $border-width;
+$list-group-border-radius: $radius-sm;
+
+$list-group-item-padding-y: 0.5rem;
+$list-group-item-padding-x: 1rem;
+$list-group-item-bg-scale: -80%;
+$list-group-item-color-scale: 40%;
+
+$list-group-hover-bg: $gray-100;
+$list-group-active-color: $white;
+$list-group-active-bg: $primary;
+$list-group-active-border-color: $list-group-active-bg;
+
+$list-group-disabled-color: $gray-600;
+$list-group-disabled-bg: $list-group-bg;
+
+$list-group-action-color: $gray-700;
+$list-group-action-hover-color: $list-group-action-color;
+
+$list-group-action-active-color: var(--#{$prefix}body-color);
+$list-group-action-active-bg: $gray-200;
+
+// ============================================
+// ACCORDION
+// ============================================
+
+$accordion-padding-y: 1rem;
+$accordion-padding-x: 1.25rem;
+$accordion-color: var(--#{$prefix}body-color);
+$accordion-bg: $white;
+$accordion-border-width: $border-width;
+$accordion-border-color: rgba($black, 0.125);
+$accordion-border-radius: $radius-sm;
+$accordion-inner-border-radius: calc(#{$accordion-border-radius} - #{$accordion-border-width});
+
+$accordion-body-padding-y: $accordion-padding-y;
+$accordion-body-padding-x: $accordion-padding-x;
+
+$accordion-button-padding-y: $accordion-padding-y;
+$accordion-button-padding-x: $accordion-padding-x;
+$accordion-button-color: var(--#{$prefix}body-color);
+$accordion-button-bg: $accordion-bg;
+$accordion-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, border-radius 0.15s ease;
+$accordion-button-active-bg: color.scale($primary, $lightness: 65%);
+$accordion-button-active-color: color.scale($primary, $lightness: -32%);
+
+$accordion-button-focus-border-color: $input-focus-border-color;
+$accordion-button-focus-box-shadow: $btn-focus-box-shadow;
+
+$accordion-icon-width: 1.25rem;
+$accordion-icon-color: $body-color;
+$accordion-icon-active-color: $accordion-button-active-color;
+$accordion-icon-transition: transform 0.2s ease-in-out;
+$accordion-icon-transform: rotate(-180deg);
+
+$accordion-button-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-color}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>");
+$accordion-button-active-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-active-color}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>");
+
+// ============================================
+// BADGES
+// ============================================
+
+$badge-font-size: 0.75em;
+$badge-font-weight: $font-weight-bold;
+$badge-color: $white;
+$badge-padding-y: 0.35em;
+$badge-padding-x: 0.65em;
+$badge-border-radius: $radius-sm;
+
+// ============================================
+// PROGRESS BARS
+// ============================================
+
+$progress-height: 1rem;
+$progress-font-size: $font-size-base * 0.75;
+$progress-bg: $gray-200;
+$progress-border-radius: $radius-sm;
+$progress-box-shadow: inset 0 0.1rem 0.1rem rgba($black, 0.1);
+$progress-bar-color: $white;
+$progress-bar-bg: $primary;
+$progress-bar-animation-timing: 1s linear infinite;
+$progress-bar-transition: width 0.6s ease;
+
+// ============================================
+// SPINNERS
+// ============================================
+
+$spinner-width: 2rem;
+$spinner-height: $spinner-width;
+$spinner-vertical-align: -0.125em;
+$spinner-border-width: 0.25em;
+$spinner-animation-speed: 0.75s;
+
+$spinner-width-sm: 1rem;
+$spinner-height-sm: $spinner-width-sm;
+$spinner-border-width-sm: 0.2em;
+
+// ============================================
+// CAROUSEL
+// ============================================
+
+$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);

package/theme/components/_dropdowns.scss

@@ -0,0 +1,45 @@
+// Bootstrap 5.3 - Dropdown Component Variables
+
+$dropdown-min-width: 10rem;
+$dropdown-padding-x: 0;
+$dropdown-padding-y: 0.5rem;
+$dropdown-spacer: 0.125rem;
+$dropdown-font-size: $font-size-base;
+$dropdown-color: $body-color;
+$dropdown-bg: $white;
+$dropdown-border-color: $gray-200;
+$dropdown-border-radius: $radius-sm;
+$dropdown-border-width: $border-width;
+$dropdown-inner-border-radius: calc(#{$dropdown-border-radius} - #{$dropdown-border-width});
+$dropdown-divider-bg: $gray-200;
+$dropdown-divider-margin-y: 0.5rem;
+$dropdown-box-shadow: 0 0.5rem 1rem rgba($black, 0.175);
+
+$dropdown-link-color: $gray-900;
+$dropdown-link-hover-color: darken($gray-900, 5%);
+$dropdown-link-hover-bg: $gray-100;
+
+$dropdown-link-active-color: $white;
+$dropdown-link-active-bg: $primary;
+
+$dropdown-link-disabled-color: $gray-500;
+
+$dropdown-item-padding-y: 0.25rem;
+$dropdown-item-padding-x: 1rem;
+
+$dropdown-header-color: $gray-600;
+$dropdown-header-padding-x: $dropdown-item-padding-x;
+$dropdown-header-padding-y: $dropdown-padding-y;
+
+$dropdown-dark-color: $gray-300;
+$dropdown-dark-bg: $gray-800;
+$dropdown-dark-border-color: $dropdown-border-color;
+$dropdown-dark-divider-bg: $dropdown-divider-bg;
+$dropdown-dark-box-shadow: null;
+$dropdown-dark-link-color: $dropdown-dark-color;
+$dropdown-dark-link-hover-color: $white;
+$dropdown-dark-link-hover-bg: rgba($white, 0.15);
+$dropdown-dark-link-active-color: $dropdown-link-active-color;
+$dropdown-dark-link-active-bg: $dropdown-link-active-bg;
+$dropdown-dark-link-disabled-color: $gray-500;
+$dropdown-dark-header-color: $gray-500;