sdga-ui 1.0.2 → 1.0.4

package/theme/components/_popovers.scss

@@ -1,26 +1,26 @@
-// Bootstrap 5.3 - Popover Component Variables
-
-$popover-font-size: $font-size-sm;
-$popover-bg: $white;
-$popover-max-width: 276px;
-$popover-border-width: $border-width;
-$popover-border-color: rgba($black, 0.2);
-$popover-border-radius: $radius-lg;
-$popover-inner-border-radius: calc(#{$popover-border-radius} - #{$popover-border-width});
-$popover-box-shadow: 0 0.5rem 1rem rgba($black, 0.15);
-
-$popover-header-font-size: $font-size-base;
-$popover-header-bg: $gray-100;
-$popover-header-color: $headings-color;
-$popover-header-padding-y: 0.5rem;
-$popover-header-padding-x: 0.75rem;
-
-$popover-body-color: $body-color;
-$popover-body-padding-y: 0.5rem;
-$popover-body-padding-x: 0.75rem;
-
-$popover-arrow-width: 1rem;
-$popover-arrow-height: 0.5rem;
-$popover-arrow-color: $popover-bg;
-
-$popover-arrow-outer-color: rgba($black, 0.25);
+// Bootstrap 5.3 - Popover Component Variables
+
+$popover-font-size: $font-size-sm;
+$popover-bg: $white;
+$popover-max-width: 276px;
+$popover-border-width: 1px;
+$popover-border-color: rgba($black, 0.2);
+$popover-border-radius: $radius-lg;
+$popover-inner-border-radius: calc(#{$popover-border-radius} - #{$popover-border-width});
+$popover-box-shadow: 0 0.5rem 1rem rgba($black, 0.15);
+
+$popover-header-font-size: $font-size-base;
+$popover-header-bg: $gray-100;
+$popover-header-color: $headings-color;
+$popover-header-padding-y: 0.5rem;
+$popover-header-padding-x: 0.75rem;
+
+$popover-body-color: $body-color;
+$popover-body-padding-y: 0.5rem;
+$popover-body-padding-x: 0.75rem;
+
+$popover-arrow-width: 1rem;
+$popover-arrow-height: 0.5rem;
+$popover-arrow-color: $popover-bg;
+
+$popover-arrow-outer-color: rgba($black, 0.25);

package/theme/components/_progress.scss

@@ -1,11 +1,11 @@
-// Bootstrap 5.3 - Progress Bar Component Variables
-
-$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;
+// Bootstrap 5.3 - Progress Bar Component Variables
+
+$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;

package/theme/components/_spinners.scss

@@ -1,11 +1,11 @@
-// Bootstrap 5.3 - Spinner Component Variables
-
-$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;
+// Bootstrap 5.3 - Spinner Component Variables
+
+$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;

package/theme/components/_tables.scss

@@ -1,48 +1,48 @@
-$table-cell-padding-y:        .5rem;
-$table-cell-padding-x:        1rem;
-$table-cell-padding-y-sm:     .25rem;
-$table-cell-padding-x-sm:     .5rem;
-
-$table-cell-vertical-align:   top;
-
-$table-color:                 $black;
-$table-bg:                    var(--#{$prefix}body-bg);
-$table-accent-bg:             transparent;
-$table-border:                $neutral-300;
-$table-border-width:          1px;
-
-
-$table-thead-bg:              $neutral-100;
-$table-thead-border-width:    $table-border-width;
-$table-thead-border-radius:   $radius-md;
-$table-thead-border-color:    $table-border;
-
-$table-th-font-weight:        $font-weight-medium;
-$table-th-color:              $neutral-700;
-$table-th-border-width:       $table-border-width;
-$table-th-border-color:       $table-border;
-
-$table-striped-color:         $table-color;
-$table-striped-bg-factor:     1;
-$table-striped-bg:            rgba($neutral-50, $table-striped-bg-factor);
-
-$table-active-color:          $table-color;
-$table-active-bg-factor:      1;
-$table-active-bg:             rgba($neutral-50, $table-active-bg-factor);
-
-$table-hover-color:           $table-color;
-$table-hover-bg-factor:       1;
-$table-hover-bg:              rgba($neutral-50, $table-hover-bg-factor);
-
-$table-border-factor:         .2;
-$table-border-width:          var(--#{$prefix}border-width);
-$table-border-color:          $table-border;
-
-$table-striped-order:         even;
-$table-striped-columns-order: even;
-
-$table-group-separator-color: currentcolor;
-
-$table-caption-color:         var(--#{$prefix}secondary-color);
-
+$table-cell-padding-y:        .5rem;
+$table-cell-padding-x:        1rem;
+$table-cell-padding-y-sm:     .25rem;
+$table-cell-padding-x-sm:     .5rem;
+
+$table-cell-vertical-align:   top;
+
+$table-color:                 $black;
+$table-bg:                    var(--#{$prefix}body-bg);
+$table-accent-bg:             transparent;
+$table-border:                $neutral-300;
+$table-border-width:          1px;
+
+
+$table-thead-bg:              $neutral-100;
+$table-thead-border-width:    $table-border-width;
+$table-thead-border-radius:   $radius-md;
+$table-thead-border-color:    $table-border;
+
+$table-th-font-weight:        $font-weight-medium;
+$table-th-color:              $neutral-700;
+$table-th-border-width:       $table-border-width;
+$table-th-border-color:       $table-border;
+
+$table-striped-color:         $table-color;
+$table-striped-bg-factor:     1;
+$table-striped-bg:            rgba($neutral-50, $table-striped-bg-factor);
+
+$table-active-color:          $table-color;
+$table-active-bg-factor:      1;
+$table-active-bg:             rgba($neutral-50, $table-active-bg-factor);
+
+$table-hover-color:           $table-color;
+$table-hover-bg-factor:       1;
+$table-hover-bg:              rgba($neutral-50, $table-hover-bg-factor);
+
+$table-border-factor:         .2;
+$table-border-width:          var(--#{$prefix}border-width);
+$table-border-color:          $table-border;
+
+$table-striped-order:         even;
+$table-striped-columns-order: even;
+
+$table-group-separator-color: currentcolor;
+
+$table-caption-color:         var(--#{$prefix}secondary-color);
+
 $table-bg-scale:              -80%;

package/theme/components/_toasts.scss

@@ -1,17 +1,17 @@
-$toast-max-width:                   30.25rem;
-$toast-padding-y:                   $spacer;
-$toast-padding-x:                   $spacer * 1.5;
-$toast-font-size:                   1rem;
-$toast-color:                       $gray-700;
-$toast-background-color:            $white;
-$toast-border-width:                var(--#{$prefix}border-width);
-$toast-border-color:                var(--#{$prefix}border-color-translucent);
-$toast-border-radius:               $radius-md;
-$toast-box-shadow:                  $box-shadow-lg;
-$toast-spacing:                     $container-padding-x;
-$toast-icon-bg:                     var(--#{$prefix}toast-icon-bg);
-$toast-icon-color:                  var(--#{$prefix}toast-icon-color);
-$toast-title-color:                 var(--#{$prefix}toast-title-color);
-$toast-header-color:                var(--#{$prefix}secondary-color);
-$toast-header-background-color:     transparent;
+$toast-max-width:                   30.25rem;
+$toast-padding-y:                   $spacer;
+$toast-padding-x:                   $spacer * 1.5;
+$toast-font-size:                   1rem;
+$toast-color:                       $gray-700;
+$toast-background-color:            $white;
+$toast-border-width:                var(--#{$prefix}border-width);
+$toast-border-color:                var(--#{$prefix}border-color-translucent);
+$toast-border-radius:               $radius-md;
+$toast-box-shadow:                  $box-shadow-lg;
+$toast-spacing:                     1rem;
+$toast-icon-bg:                     var(--#{$prefix}toast-icon-bg);
+$toast-icon-color:                  var(--#{$prefix}toast-icon-color);
+$toast-title-color:                 var(--#{$prefix}toast-title-color);
+$toast-header-color:                var(--#{$prefix}secondary-color);
+$toast-header-background-color:     transparent;
 $toast-header-border-color:         transparent;

package/theme/components/_tooltips.scss

@@ -1,15 +1,15 @@
-// Bootstrap 5.3 - Tooltip Component Variables
-
-$tooltip-font-size: $font-size-sm;
-$tooltip-max-width: 200px;
-$tooltip-color: $white;
-$tooltip-bg: $black;
-$tooltip-border-radius: $radius-sm;
-$tooltip-opacity: 0.9;
-$tooltip-padding-y: 0.25rem;
-$tooltip-padding-x: 0.5rem;
-$tooltip-margin: null;
-
-$tooltip-arrow-width: 0.8rem;
-$tooltip-arrow-height: 0.4rem;
-$tooltip-arrow-color: null;
+// Bootstrap 5.3 - Tooltip Component Variables
+
+$tooltip-font-size: $font-size-sm;
+$tooltip-max-width: 200px;
+$tooltip-color: $white;
+$tooltip-bg: $black;
+$tooltip-border-radius: $radius-sm;
+$tooltip-opacity: 0.9;
+$tooltip-padding-y: 0.25rem;
+$tooltip-padding-x: 0.5rem;
+$tooltip-margin: null;
+
+$tooltip-arrow-width: 0.8rem;
+$tooltip-arrow-height: 0.4rem;
+$tooltip-arrow-color: null;

package/theme/config/_base.scss

@@ -1,112 +1,112 @@
-// Bootstrap 5.3 - Component Base Variables
-// Body, Links, Borders, Shadows, Focus, Layout, and Utilities
-
-@use 'sass:color';
-
-// ============================================
-// PREFIX
-// ============================================
-
-$prefix: dga-;
-
-// ============================================
-// BODY
-// ============================================
-
-$body-bg: $white;
-$body-color: $black;
-$body-text-align: start;
-
-// ============================================
-// LINKS
-// ============================================
-
-$link-color: $primary;
-$link-decoration: none;
-$link-hover-color: color.scale($primary, $lightness: -32%);
-$link-hover-decoration: underline;
-
-// ============================================
-// COMPONENTS BASE
-// ============================================
-
-$component-active-color: $white;
-$component-active-bg: $primary;
-
-// Border
-$border-width: 1px;
-$border-widths: (
-  0: 0,
-  1: 1px,
-  2: 2px,
-  3: 3px,
-  4: 4px,
-  5: 5px
-);
-// Shadow base color (using SDGA neutral-900 shade)
-$shadow-color: $gray-900;
-$border-color: $gray-500;
-
-// Focus
-$focus-ring-width: 0.25rem;
-$focus-ring-opacity: 0.25;
-$focus-ring-color: rgba($shadow-color, $focus-ring-opacity);
-$focus-ring-blur: 0;
-$focus-ring-box-shadow: 0 0 $focus-ring-blur $focus-ring-width $focus-ring-color;
-
-// ============================================
-// UTILITIES
-// ============================================
-
-$enable-shadows: true;
-$enable-negative-margins: true;
-$enable-smooth-scroll: true;
-$enable-rfs: true;
-$enable-important-utilities: true;
-$enable-ripple-effect: true !default;
-
-// ============================================
-// CONTAINER
-// ============================================
-
-$container-max-widths: (
-  sm: 540px,
-  md: 720px,
-  lg: 960px,
-  xl: 1140px,
-  xxl: 1320px
-);
-
-$container-padding-x: 1rem;
-
-// ============================================
-// GRID
-// ============================================
-
-$grid-columns: 12;
-$grid-gutter-width: 1.5rem;
-$grid-row-columns: 6;
-
-// ============================================
-// Z-INDEX
-// ============================================
-
-$zindex-dropdown: 1000;
-$zindex-sticky: 1020;
-$zindex-fixed: 1030;
-$zindex-offcanvas-backdrop: 1040;
-$zindex-offcanvas: 1045;
-$zindex-modal-backdrop: 1050;
-$zindex-modal: 1055;
-$zindex-popover: 1070;
-$zindex-tooltip: 1080;
-$zindex-toast: 1090;
-
-
-// ============================================
-// Responsive Variables
-// ============================================
-
-$mobile: 48rem;
-$tablet: 63.9375rem;
+// Bootstrap 5.3 - Component Base Variables
+// Body, Links, Borders, Shadows, Focus, Layout, and Utilities
+
+@use 'sass:color';
+
+// ============================================
+// PREFIX
+// ============================================
+
+$prefix: dga-;
+
+// ============================================
+// BODY
+// ============================================
+
+$body-bg: $white;
+$body-color: $black;
+$body-text-align: start;
+
+// ============================================
+// LINKS
+// ============================================
+
+$link-color: $primary;
+$link-decoration: none;
+$link-hover-color: color.scale($primary, $lightness: -32%);
+$link-hover-decoration: underline;
+
+// ============================================
+// COMPONENTS BASE
+// ============================================
+
+$component-active-color: $white;
+$component-active-bg: $primary;
+
+// Border
+$border-width: 1px;
+$border-widths: (
+  0: 0,
+  1: 1px,
+  2: 2px,
+  3: 3px,
+  4: 4px,
+  5: 5px
+);
+// Shadow base color (using SDGA neutral-900 shade)
+$shadow-color: $gray-900;
+$border-color: $gray-500;
+
+// Focus
+$focus-ring-width: 0.25rem;
+$focus-ring-opacity: 0.25;
+$focus-ring-color: rgba($shadow-color, $focus-ring-opacity);
+$focus-ring-blur: 0;
+$focus-ring-box-shadow: 0 0 $focus-ring-blur $focus-ring-width $focus-ring-color;
+
+// ============================================
+// UTILITIES
+// ============================================
+
+$enable-shadows: true;
+$enable-negative-margins: true;
+$enable-smooth-scroll: true;
+$enable-rfs: true;
+$enable-important-utilities: true;
+$enable-ripple-effect: true !default;
+
+// ============================================
+// CONTAINER
+// ============================================
+
+$container-max-widths: (
+  sm: 540px,
+  md: 720px,
+  lg: 960px,
+  xl: 1140px,
+  xxl: 1320px
+);
+
+$container-padding-x: 1rem;
+
+// ============================================
+// GRID
+// ============================================
+
+$grid-columns: 12;
+$grid-gutter-width: 1.5rem;
+$grid-row-columns: 6;
+
+// ============================================
+// Z-INDEX
+// ============================================
+
+$zindex-dropdown: 1000;
+$zindex-sticky: 1020;
+$zindex-fixed: 1030;
+$zindex-offcanvas-backdrop: 1040;
+$zindex-offcanvas: 1045;
+$zindex-modal-backdrop: 1050;
+$zindex-modal: 1055;
+$zindex-popover: 1070;
+$zindex-tooltip: 1080;
+$zindex-toast: 1090;
+
+
+// ============================================
+// Responsive Variables
+// ============================================
+
+$mobile: 48rem;
+$tablet: 63.9375rem;
 $desktop: 64rem;