sdga-ui 1.0.0

package/theme/components/_forms-check.scss

@@ -0,0 +1,124 @@
+// Bootstrap 5.3 - Form Check Variables (Checkbox & Radio)
+
+// ============================================
+// FORM CHECK (CHECKBOX & RADIO)
+// ============================================
+
+$form-check-input-width:                  1.5em;
+$form-check-min-height:                   $font-size-base * $line-height-base;
+$form-check-padding-start:                0;
+$form-check-margin-bottom:                0;
+$form-check-label-color:                  null;
+$form-check-label-cursor:                 null;
+$form-check-transition:                   null;
+
+$form-check-input-active-filter:          none;
+
+$form-check-input-bg:                     $input-bg;
+$form-check-input-border:                 $border-width solid $border-color;
+$form-check-input-border-radius:          .125rem;
+$form-check-input-focus-border:           $border-color;
+$form-check-input-focus-box-shadow:       none;
+
+// ============================================
+// PRIMARY HOVER & ACTIVE STATES
+// ============================================
+// Unchecked state
+$form-check-input-unchecked-hover-border:     $gray-500;
+$form-check-input-unchecked-hover-bg:         $gray-100;
+$form-check-input-unchecked-active-border:    $gray-500;
+$form-check-input-unchecked-active-bg:        $gray-300;
+
+// Checked state
+$form-check-input-checked-hover-border:       $primary-700;
+$form-check-input-checked-hover-bg:           $primary-700;
+$form-check-input-checked-active-border:      $primary-800;
+$form-check-input-checked-active-bg:          $primary-800;
+
+// Indeterminate state
+$form-check-input-indeterminate-hover-border:   $primary-800;
+$form-check-input-indeterminate-hover-bg:       $primary-800;
+$form-check-input-indeterminate-active-border:  $primary-900;
+$form-check-input-indeterminate-active-bg:      $primary-900;
+
+$form-check-input-checked-color:          $component-active-color;
+$form-check-input-checked-bg-color:       $component-active-bg;
+$form-check-input-checked-border-color:   $form-check-input-checked-bg-color;
+$form-check-input-checked-bg-image:       url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#{$form-check-input-checked-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/></svg>");
+$form-check-radio-checked-bg-image:       url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='none' stroke='#{$form-check-input-checked-color}'/></svg>");
+
+$form-check-input-indeterminate-color:          $component-active-color;
+$form-check-input-indeterminate-bg-color:       $component-active-bg;
+$form-check-input-indeterminate-border-color:   $form-check-input-indeterminate-bg-color;
+$form-check-input-indeterminate-bg-image:       url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#{$form-check-input-indeterminate-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/></svg>");
+
+$form-check-input-disabled-opacity:        1;
+$form-check-label-disabled-opacity:        $form-check-input-disabled-opacity;
+$form-check-btn-check-disabled-opacity:    $btn-disabled-opacity;
+
+// ============================================
+// DISABLED STATE
+// ============================================
+$form-check-input-disabled-bg:                    $gray-200;
+$form-check-input-disabled-border-color:          $border-color;
+$form-check-input-disabled-checked-bg:            $gray-400;
+$form-check-input-disabled-checked-color:         $white;
+$form-check-input-disabled-indeterminate-bg:      $gray-400;
+$form-check-input-disabled-indeterminate-color:   $white;
+$form-check-input-disabled-box-shadow:            none;
+
+// ============================================
+// READONLY STATE
+// ============================================
+$form-check-input-readonly-bg:                    $white;
+$form-check-input-readonly-border-color:          $border-color;
+$form-check-input-readonly-checked-bg:            $white;
+$form-check-input-readonly-checked-color:         $component-active-bg;
+$form-check-input-readonly-indeterminate-bg:      $white;
+$form-check-input-readonly-indeterminate-color:   $component-active-bg;
+$form-check-input-readonly-cursor:                default;
+$form-check-input-readonly-box-shadow:            none;
+
+// Radio-specific readonly variables
+$form-check-radio-readonly-checked-bg:            $gray-400;
+$form-check-radio-readonly-checked-border:        $border-color;
+$form-check-radio-readonly-checked-color:         $white;
+
+$form-check-inline-margin-end:    1rem;
+
+// ============================================
+// VARIANTS (PRIMARY & NEUTRAL)
+// ============================================
+// Neutral variant
+$form-check-neutral-checked-bg-color:       $neutral;
+$form-check-neutral-checked-color:          $white;
+$form-check-neutral-indeterminate-bg-color: $neutral;
+$form-check-neutral-indeterminate-color:    $white;
+
+// ============================================
+// NEUTRAL HOVER & ACTIVE STATES
+// ============================================
+// Unchecked state
+$form-check-neutral-unchecked-hover-border:     $gray-500;
+$form-check-neutral-unchecked-hover-bg:         $gray-100;
+$form-check-neutral-unchecked-active-border:    $gray-500;
+$form-check-neutral-unchecked-active-bg:        $gray-300;
+
+// Checked state
+$form-check-neutral-checked-hover-border:       $neutral-600;
+$form-check-neutral-checked-hover-bg:           $neutral-600;
+$form-check-neutral-checked-active-border:      $neutral-500;
+$form-check-neutral-checked-active-bg:          $neutral-500;
+
+// Indeterminate state
+$form-check-neutral-indeterminate-hover-border:   $neutral-800;
+$form-check-neutral-indeterminate-hover-bg:       $neutral-800;
+$form-check-neutral-indeterminate-active-border:  $neutral-900;
+$form-check-neutral-indeterminate-active-bg:      $neutral-900;
+// ============================================
+// SIZE VARIABLES (MD default, SM, XS)
+// ============================================
+
+$form-check-input-width-md: $form-check-input-width; // baseline 24px at root 16px
+$form-check-input-width-sm: 1.25em; // ~20px
+$form-check-input-width-xs: 1em; // ~12px (below recommended 16px target)

package/theme/components/_forms-floating.scss

@@ -0,0 +1,17 @@
+// Bootstrap 5.3 - Form Floating Variables
+
+// ============================================
+// FORM FLOATING LABELS
+// ============================================
+
+$form-floating-height: calc(3.5rem + #{$input-height-border});
+$form-floating-line-height: 1.25;
+$form-floating-padding-x: $input-padding-x;
+$form-floating-padding-y: 1rem;
+$form-floating-input-padding-t: 1.625rem;
+$form-floating-input-padding-b: 0.625rem;
+$form-floating-label-height: 1.5em;
+$form-floating-label-opacity: 0.65;
+$form-floating-label-transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
+$form-floating-label-disabled-color: $gray-600;
+$form-floating-transition: opacity 0.1s ease-in-out, transform 0.1s ease-in-out;

package/theme/components/_forms-inputs.scss

@@ -0,0 +1,70 @@
+// Bootstrap 5.3 - Form Input Variables
+
+@use 'sass:color';
+
+// ============================================
+// FORM INPUTS
+// ============================================
+
+// Form Controls
+$input-padding-y: 0.5rem;
+$input-padding-x: 0.75rem;
+$input-font-family: $font-family-base;
+$input-font-size: $font-size-base;
+$input-font-weight: $font-weight-base;
+$input-line-height: $line-height-base;
+
+$input-padding-y-sm: 0.375rem;
+$input-padding-x-sm: 0.625rem;
+$input-font-size-sm: $font-size-sm;
+
+$input-padding-y-lg: 0.625rem;
+$input-padding-x-lg: 1rem;
+$input-font-size-lg: $font-size-lg;
+
+$input-bg: $white;
+$input-disabled-color: null;
+$input-disabled-bg: $gray-200;
+$input-disabled-border-color: null;
+
+$input-color: $body-color;
+$input-border-color: $gray-300;
+$input-border-width: $border-width;
+$input-box-shadow: inset 0 1px 2px rgba($black, 0.075);
+
+$input-border-radius: $radius-sm;
+$input-border-radius-sm: $radius-sm;
+$input-border-radius-lg: $radius-lg;
+
+$input-focus-bg: $input-bg;
+$input-focus-border-color: color.scale($primary, $lightness: 50%);
+$input-focus-color: $input-color;
+$input-focus-width: 0.25rem;
+$input-focus-box-shadow: 0 0 0 $input-focus-width rgba($primary, 0.25);
+
+$input-placeholder-color: $gray-500;
+$input-plaintext-color: $body-color;
+
+$input-height-border: calc(#{$input-border-width} * 2);
+$input-height-inner: calc(#{$input-line-height * 1em} + #{$input-padding-y * 2});
+$input-height-inner-half: calc(#{$input-line-height * 0.5em} + #{$input-padding-y});
+$input-height-inner-quarter: calc(#{$input-line-height * 0.25em} + calc(#{$input-padding-y} / 2));
+$input-height: calc(#{$input-line-height * 1em} + #{$input-padding-y * 2} + #{$input-height-border});
+$input-height-sm: calc(#{$input-line-height * 1em} + #{$input-padding-y-sm * 2} + #{$input-height-border});
+$input-height-lg: calc(#{$input-line-height * 1em} + #{$input-padding-y-lg * 2} + #{$input-height-border});
+
+$input-transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+
+// Form Labels
+$form-label-margin-bottom: 0.5rem;
+$form-label-font-size: $font-size-base;
+$form-label-font-style: null;
+$form-label-font-weight: 500;
+$form-label-color: $body-color;
+
+// Form Text
+$form-text-margin-top: 0.25rem;
+$form-text-font-size: $font-size-sm;
+$form-text-font-style: null;
+$form-text-font-weight: null;
+$form-text-color: $gray-600;

package/theme/components/_forms-range.scss

@@ -0,0 +1,26 @@
+// Bootstrap 5.3 - Form Range Variables
+
+@use 'sass:color';
+
+// ============================================
+// FORM RANGE
+// ============================================
+
+$form-range-track-width: 100%;
+$form-range-track-height: 0.5rem;
+$form-range-track-cursor: pointer;
+$form-range-track-bg: $gray-200;
+$form-range-track-border-radius: 1rem;
+$form-range-track-box-shadow: inset 0 0.25rem 0.25rem rgba($black, 0.1);
+
+$form-range-thumb-width: 1rem;
+$form-range-thumb-height: $form-range-thumb-width;
+$form-range-thumb-bg: $primary;
+$form-range-thumb-border: 0;
+$form-range-thumb-border-radius: 1rem;
+$form-range-thumb-box-shadow: 0 0.1rem 0.25rem rgba($black, 0.1);
+$form-range-thumb-focus-box-shadow: 0 0 0 1px var(--#{$prefix}body-bg)$body-bg, $input-focus-box-shadow;
+$form-range-thumb-focus-box-shadow-width: $input-focus-width;
+$form-range-thumb-active-bg: color.scale($primary, $lightness: 51%);
+$form-range-thumb-disabled-bg: $gray-400;
+$form-range-thumb-transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;

package/theme/components/_forms-select.scss

@@ -0,0 +1,47 @@
+// Bootstrap 5.3 - Form Select Variables
+
+// ============================================
+// FORM SELECT
+// ============================================
+
+$form-select-padding-y: $input-padding-y;
+$form-select-padding-x: $input-padding-x;
+$form-select-font-family: $input-font-family;
+$form-select-font-size: $input-font-size;
+$form-select-indicator-padding: 1rem;
+$form-select-font-weight: $input-font-weight;
+$form-select-line-height: $input-line-height;
+$form-select-color: $input-color;
+$form-select-bg: $input-bg;
+$form-select-disabled-color: null;
+$form-select-disabled-bg: $gray-200;
+$form-select-disabled-border-color: $input-disabled-border-color;
+$form-select-bg-position: right $form-select-padding-x center;
+$form-select-bg-size: 16px 12px;
+$form-select-indicator-color: $gray-800;
+$form-select-indicator: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#{$form-select-indicator-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/></svg>");
+
+$form-select-feedback-icon-padding-end: calc((1em + #{$form-select-padding-x * 2}) * 3 / 4 + #{$form-select-indicator-padding});
+$form-select-feedback-icon-position: center right $form-select-indicator-padding;
+$form-select-feedback-icon-size: $input-height-inner-half $input-height-inner-half;
+
+$form-select-border-width: $input-border-width;
+$form-select-border-color: $input-border-color;
+$form-select-border-radius: $input-border-radius;
+$form-select-box-shadow: $input-box-shadow;
+
+$form-select-focus-border-color: $input-focus-border-color;
+$form-select-focus-width: $input-focus-width;
+$form-select-focus-box-shadow: 0 0 0 $form-select-focus-width rgba($primary, 0.25);
+
+$form-select-padding-y-sm: $input-padding-y-sm;
+$form-select-padding-x-sm: $input-padding-x-sm;
+$form-select-font-size-sm: $input-font-size-sm;
+$form-select-border-radius-sm: $input-border-radius-sm;
+
+$form-select-padding-y-lg: $input-padding-y-lg;
+$form-select-padding-x-lg: $input-padding-x-lg;
+$form-select-font-size-lg: $input-font-size-lg;
+$form-select-border-radius-lg: $input-border-radius-lg;
+
+$form-select-transition: $input-transition;

package/theme/components/_forms-switch.scss

@@ -0,0 +1,64 @@
+// Bootstrap 5.3 - Form Switch Variables
+
+// ============================================
+// FORM SWITCH
+// ============================================
+
+$form-switch-color: $gray-950;
+$form-switch-width: 3em;
+$form-switch-padding-start: $form-switch-width + .5em;
+$form-switch-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-color}'/></svg>");
+$form-switch-border-radius: $form-switch-width;
+$form-switch-transition: background-position .15s ease-in-out;
+
+$form-switch-focus-color: $gray-950;
+$form-switch-focus-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-focus-color}'/></svg>");
+
+$form-switch-checked-color: $component-active-color;
+$form-switch-checked-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-checked-color}'/></svg>");
+$form-switch-checked-bg-position: right center;
+
+// ============================================
+// FORM SWITCH HOVER STATES
+// ============================================
+
+// Unchecked
+$form-switch-unchecked-hover-bg: $white;
+$form-switch-unchecked-hover-border: $neutral-600;
+$form-switch-unchecked-hover-color: $neutral-600;
+
+
+// Checked
+$form-switch-checked-hover-bg: $primary-700;
+$form-switch-checked-hover-border: $primary-700;
+$form-switch-checked-hover-color: $form-switch-checked-color;
+
+
+// ============================================
+// FORM SWITCH ACTIVE/PRESSED STATES
+// ============================================
+
+// Unchecked
+$form-switch-unchecked-active-bg: $white;
+$form-switch-unchecked-active-border: $neutral-500;
+$form-switch-unchecked-active-color: $neutral-500;
+
+// Checked
+$form-switch-checked-active-bg: $primary-900;
+$form-switch-checked-active-border: $primary-900;
+$form-switch-checked-active-color: $form-switch-checked-color;
+
+// ============================================
+// FORM SWITCH DISABLED STATES
+// ============================================
+
+// Unchecked
+$form-switch-unchecked-disabled-bg: $white;
+$form-switch-unchecked-disabled-border: $gray-400;
+$form-switch-unchecked-disabled-color: $gray-300;
+
+
+// checked
+$form-switch-checked-disabled-bg: $gray-300;
+$form-switch-checked-disabled-border: $gray-300;
+$form-switch-checked-disabled-color: $white;

package/theme/components/_forms-validation.scss

@@ -0,0 +1,16 @@
+// Bootstrap 5.3 - Form Validation Variables
+
+// ============================================
+// FORM VALIDATION
+// ============================================
+
+$form-feedback-margin-top: $form-text-margin-top;
+$form-feedback-font-size: $form-text-font-size;
+$form-feedback-font-style: $form-text-font-style;
+$form-feedback-valid-color: $success;
+$form-feedback-invalid-color: $danger;
+
+$form-feedback-icon-valid-color: $form-feedback-valid-color;
+$form-feedback-icon-valid: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'><path fill='#{$form-feedback-icon-valid-color}' d='M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/></svg>");
+$form-feedback-icon-invalid-color: $form-feedback-invalid-color;
+$form-feedback-icon-invalid: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='#{$form-feedback-icon-invalid-color}'><circle cx='6' cy='6' r='4.5'/><path stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/><circle cx='6' cy='8.2' r='.6' fill='#{$form-feedback-icon-invalid-color}' stroke='none'/></svg>");

package/theme/components/_forms.scss

@@ -0,0 +1,14 @@
+// Bootstrap 5.3 - Form Variables
+
+// ============================================
+// FORM COMPONENTS
+// Import all form-related variable files
+// ============================================
+
+@import 'forms-inputs';
+@import 'forms-select';
+@import 'forms-check';
+@import 'forms-switch';
+@import 'forms-range';
+@import 'forms-validation';
+@import 'forms-floating';

package/theme/components/_list-group.scss

@@ -0,0 +1,26 @@
+// Bootstrap 5.3 - List Group Component Variables
+
+$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;

package/theme/components/_modals.scss

@@ -0,0 +1,42 @@
+// Bootstrap 5.3 - Modal Component Variables
+
+$modal-inner-padding: 1rem;
+
+$modal-footer-margin-between: 0.5rem;
+
+$modal-dialog-margin: 0.5rem;
+$modal-dialog-margin-y-sm-up: 1.75rem;
+
+$modal-title-line-height: $line-height-base;
+
+$modal-content-color: null;
+$modal-content-bg: $white;
+$modal-content-border-color: rgba($black, 0.2);
+$modal-content-border-width: $border-width;
+$modal-content-border-radius: $radius-lg;
+$modal-content-inner-border-radius: calc(#{$modal-content-border-radius} - #{$modal-content-border-width});
+$modal-content-box-shadow-xs: 0 0.25rem 0.5rem rgba($black, 0.5);
+$modal-content-box-shadow-sm-up: 0 0.5rem 1rem rgba($black, 0.5);
+
+$modal-backdrop-bg: $black;
+$modal-backdrop-opacity: 0.5;
+
+$modal-header-border-color: $border-color;
+$modal-header-border-width: $modal-content-border-width;
+$modal-header-padding-y: 1rem;
+$modal-header-padding-x: 1rem;
+$modal-header-padding: $modal-header-padding-y $modal-header-padding-x;
+
+$modal-footer-bg: null;
+$modal-footer-border-color: $modal-header-border-color;
+$modal-footer-border-width: $modal-header-border-width;
+
+$modal-sm: 300px;
+$modal-md: 500px;
+$modal-lg: 800px;
+$modal-xl: 1140px;
+
+$modal-fade-transform: translate(0, -50px);
+$modal-show-transform: none;
+$modal-transition: transform 0.3s ease-out;
+$modal-scale-transform: scale(1.02);

package/theme/components/_navbar.scss

@@ -0,0 +1,40 @@
+// Bootstrap 5.3 - Navbar Component Variables
+
+$navbar-padding-y: 0.5rem;
+$navbar-padding-x: 1rem;
+
+$navbar-nav-link-padding-x: 0.5rem;
+
+$navbar-brand-font-size: $font-size-lg;
+$navbar-brand-height: null;
+$navbar-brand-padding-y: 0.3125rem;
+$navbar-brand-margin-end: 1rem;
+
+$navbar-toggler-padding-y: 0.25rem;
+$navbar-toggler-padding-x: 0.75rem;
+$navbar-toggler-font-size: $font-size-lg;
+$navbar-toggler-border-radius: $btn-border-radius;
+$navbar-toggler-focus-width: $btn-focus-width;
+$navbar-toggler-transition: box-shadow 0.15s ease-in-out;
+
+// Navbar dark theme
+$navbar-dark-color: rgba($white, 0.55);
+$navbar-dark-hover-color: rgba($white, 0.75);
+$navbar-dark-active-color: $white;
+$navbar-dark-disabled-color: rgba($white, 0.25);
+$navbar-dark-icon-color: $navbar-dark-color;
+$navbar-dark-toggler-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$navbar-dark-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>");
+$navbar-dark-toggler-border-color: rgba($white, 0.1);
+$navbar-dark-brand-color: $navbar-dark-active-color;
+$navbar-dark-brand-hover-color: $navbar-dark-active-color;
+
+// Navbar light theme
+$navbar-light-color: rgba($black, 0.55);
+$navbar-light-hover-color: rgba($black, 0.7);
+$navbar-light-active-color: rgba($black, 0.9);
+$navbar-light-disabled-color: rgba($black, 0.3);
+$navbar-light-icon-color: rgba($black, 0.5);
+$navbar-light-toggler-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$navbar-light-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>");
+$navbar-light-toggler-border-color: rgba($black, 0.1);
+$navbar-light-brand-color: $navbar-light-active-color;
+$navbar-light-brand-hover-color: $navbar-light-active-color;

package/theme/components/_navigation.scss

@@ -0,0 +1,151 @@
+// Bootstrap 5.3 - Navigation Components Variables
+// Navbar, Breadcrumb, Pagination, Dropdowns
+
+// ============================================
+// NAVBAR
+// ============================================
+
+$navbar-padding-y: 0.5rem;
+$navbar-padding-x: 1rem;
+
+$navbar-nav-link-padding-x: 0.5rem;
+
+$navbar-brand-font-size: $font-size-lg;
+$navbar-brand-height: null;
+$navbar-brand-padding-y: 0.3125rem;
+$navbar-brand-margin-end: 1rem;
+
+$navbar-toggler-padding-y: 0.25rem;
+$navbar-toggler-padding-x: 0.75rem;
+$navbar-toggler-font-size: $font-size-lg;
+$navbar-toggler-border-radius: $btn-border-radius;
+$navbar-toggler-focus-width: $btn-focus-width;
+$navbar-toggler-transition: box-shadow 0.15s ease-in-out;
+
+// Navbar dark theme
+$navbar-dark-color: rgba($white, 0.55);
+$navbar-dark-hover-color: rgba($white, 0.75);
+$navbar-dark-active-color: $white;
+$navbar-dark-disabled-color: rgba($white, 0.25);
+$navbar-dark-icon-color: $navbar-dark-color;
+$navbar-dark-toggler-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$navbar-dark-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>");
+$navbar-dark-toggler-border-color: rgba($white, 0.1);
+$navbar-dark-brand-color: $navbar-dark-active-color;
+$navbar-dark-brand-hover-color: $navbar-dark-active-color;
+
+// Navbar light theme
+$navbar-light-color: rgba($black, 0.55);
+$navbar-light-hover-color: rgba($black, 0.7);
+$navbar-light-active-color: rgba($black, 0.9);
+$navbar-light-disabled-color: rgba($black, 0.3);
+$navbar-light-icon-color: rgba($black, 0.5);
+$navbar-light-toggler-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$navbar-light-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>");
+$navbar-light-toggler-border-color: rgba($black, 0.1);
+$navbar-light-brand-color: $navbar-light-active-color;
+$navbar-light-brand-hover-color: $navbar-light-active-color;
+
+// ============================================
+// DROPDOWNS
+// ============================================
+
+$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;
+
+// ============================================
+// PAGINATION
+// ============================================
+
+$pagination-padding-y: 0.375rem;
+$pagination-padding-x: 0.75rem;
+$pagination-padding-y-sm: 0.25rem;
+$pagination-padding-x-sm: 0.5rem;
+$pagination-padding-y-lg: 0.75rem;
+$pagination-padding-x-lg: 1.5rem;
+
+$pagination-font-size: $font-size-base;
+
+$pagination-color: $primary;
+$pagination-bg: $white;
+$pagination-border-radius: $radius-sm;
+$pagination-border-width: $border-width;
+$pagination-margin-start: calc(#{$pagination-border-width} * -1);
+$pagination-border-color: $gray-300;
+
+$pagination-focus-color: $link-hover-color;
+$pagination-focus-bg: $gray-200;
+$pagination-focus-box-shadow: $input-focus-box-shadow;
+$pagination-focus-outline: 0;
+
+$pagination-hover-color: $link-hover-color;
+$pagination-hover-bg: $gray-200;
+$pagination-hover-border-color: $gray-300;
+
+$pagination-active-color: $white;
+$pagination-active-bg: $primary;
+$pagination-active-border-color: $primary;
+
+$pagination-disabled-color: $gray-600;
+$pagination-disabled-bg: $white;
+$pagination-disabled-border-color: $gray-300;
+
+$pagination-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;
+
+$pagination-border-radius-sm: $radius-sm;
+$pagination-border-radius-lg: $radius-lg;
+
+// ============================================
+// BREADCRUMB
+// ============================================
+
+$breadcrumb-font-size: $font-size-base;
+$breadcrumb-padding-y: 0.75rem;
+$breadcrumb-padding-x: 1rem;
+$breadcrumb-item-padding-x: 0.5rem;
+$breadcrumb-margin-bottom: 1rem;
+$breadcrumb-bg: $gray-100;
+$breadcrumb-divider-color: $gray-500;
+$breadcrumb-active-color: $gray-700;
+$breadcrumb-divider: "/";
+$breadcrumb-divider-flipped: $breadcrumb-divider;
+$breadcrumb-border-radius: $radius-sm;

package/theme/components/_offcanvas.scss

@@ -0,0 +1,15 @@
+// Bootstrap 5.3 - Offcanvas Component Variables
+
+$offcanvas-padding-y: 1rem;
+$offcanvas-padding-x: 1rem;
+$offcanvas-horizontal-width: 400px;
+$offcanvas-vertical-height: 30vh;
+$offcanvas-transition-duration: 0.3s;
+$offcanvas-border-color: $modal-content-border-color;
+$offcanvas-border-width: $modal-content-border-width;
+$offcanvas-title-line-height: $modal-title-line-height;
+$offcanvas-bg-color: $white;
+$offcanvas-color: $body-color;
+$offcanvas-box-shadow: 0 0.125rem 0.25rem rgba($black, 0.075);
+$offcanvas-backdrop-bg: $modal-backdrop-bg;
+$offcanvas-backdrop-opacity: $modal-backdrop-opacity;