sdga-ui 1.0.0

package/theme/components/_overlays.scss

@@ -0,0 +1,112 @@
+// Bootstrap 5.3 - Overlay Components Variables
+// Modals, Tooltips, Popovers, Toasts, Offcanvas
+
+// ============================================
+// MODALS
+// ============================================
+
+$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);
+
+// ============================================
+// TOOLTIPS
+// ============================================
+
+$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;
+
+// ============================================
+// POPOVERS
+// ============================================
+
+$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);
+
+// ============================================
+// OFFCANVAS
+// ============================================
+
+$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;

package/theme/components/_pagination.scss

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

package/theme/components/_popovers.scss

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

package/theme/components/_progress.scss

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

package/theme/components/_spinners.scss

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

package/theme/components/_tables.scss

@@ -0,0 +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-bg-scale:              -80%;

package/theme/components/_toasts.scss

@@ -0,0 +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-header-border-color:         transparent;

package/theme/components/_tooltips.scss

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

package/theme/config/_base.scss

@@ -0,0 +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;
+$desktop: 64rem;

package/theme/config/_colors.scss

@@ -0,0 +1,303 @@
+// Bootstrap 5.3 - Color System Variables
+// Customized with SDGA Palette System - All Shades Available
+
+// Grays
+$white: #FFFFFF;
+$gray-25: #FCFCFD;
+$gray-50: #F9FAFB;
+$gray-100: #F3F4F6;                   // --SDGA-neutral-100
+$gray-200: #E5E7EB;                   // --SDGA-neutral-200
+$gray-300: #D2D6DB;                   // --SDGA-neutral-300
+$gray-400: #9DA4AE;                   // --SDGA-neutral-400
+$gray-500: #6C737F;                   // --SDGA-neutral-500
+$gray-600: #4D5761;                   // --SDGA-neutral-600
+$gray-700: #384250;                   // --SDGA-neutral-700
+$gray-800: #1F2A37;                   // --SDGA-neutral-800
+$gray-900: #111927;                   // --SDGA-neutral-900
+$gray-950: #0D121C;                   // --SDGA-neutral-950
+$black: #161616;
+
+// SA Palette (full range)
+$sa-25: #F7FDF9;
+$sa-50: #F3FCF6;
+$sa-100: #DFF6E7;
+$sa-200: #B8EACB;
+$sa-300: #88D8AD;
+$sa-400: #54C08A;
+$sa-500: #25935F;
+$sa-600: #1B8354;
+$sa-700: #166A45;
+$sa-800: #14573A;
+$sa-900: #104631;
+$sa-950: #092A1E;
+
+
+// Gold Palette (full range)
+$gold-25: #FFFEF7;
+$gold-50: #FFFEF2;
+$gold-100: #FFFCE6;
+$gold-200: #FCF3BD;
+$gold-300: #FAE996;
+$gold-400: #F7D54D;
+$gold-500: #F5BD02;
+$gold-600: #DBA102;
+$gold-700: #B87B02;
+$gold-800: #945C01;
+$gold-900: #6E3C00;
+$gold-950: #472400;
+
+
+// Lavender Palette (full range)
+$lavender-25: #FEFCFF;
+$lavender-50: #F9F5FA;
+$lavender-100: #F2E9F5;
+$lavender-200: #E1CCE8;
+$lavender-300: #CCADD9;
+$lavender-400: #A57BBA;
+$lavender-500: #80519F;
+$lavender-600: #6D428F;
+$lavender-700: #532D75;
+$lavender-800: #3D1D5E;
+$lavender-900: #281047;
+$lavender-950: #16072E;
+
+// Error/Danger Palette (full range)
+$error-25: #FFFBFA;
+$error-50: #FEF3F2;
+$error-100: #FEE4E2;
+$error-200: #FECDCA;
+$error-300: #FDA29B;
+$error-400: #F97066;
+$error-500: #F04438;
+$error-600: #D92D20;
+$error-700: #B42318;
+$error-800: #912018;
+$error-900: #7A271A;
+$error-950: #55160C;
+
+// Warning Palette (full range)
+$warning-25: #FFFCF5;
+$warning-50: #FFFAEB;
+$warning-100: #FEF0C7;
+$warning-200: #FEDF89;
+$warning-300: #FEC84B;
+$warning-400: #FDB022;
+$warning-500: #F79009;
+$warning-600: #DC6803;
+$warning-700: #B54708;
+$warning-800: #93370D;
+$warning-900: #7A2E0E;
+$warning-950: #4E1D09;
+
+// Info Palette (full range)
+$info-25: #F5FAFF;
+$info-50: #EFF8FF;
+$info-100: #D1E9FF;
+$info-200: #B2DDFF;
+$info-300: #84CAFF;
+$info-400: #53B1FD;
+$info-500: #2E90FA;
+$info-600: #1570EF;
+$info-700: #175CD3;
+$info-800: #1849A9;
+$info-900: #194185;
+$info-950: #102A56;
+
+// Success Palette (full range)
+$success-25: #F6FEF9;
+$success-50: #ECFDF3;
+$success-100: #DCFAE6;
+$success-200: #ABEFC6;
+$success-300: #75E0A7;
+$success-400: #47CD89;
+$success-500: #17B26A;
+$success-600: #079455;
+$success-700: #067647;
+$success-800: #085D3A;
+$success-900: #074D31;
+$success-950: #053321;
+
+// ============================================
+// COLOR SYSTEM - Map SDGA Palette to Bootstrap
+// ============================================
+// semantic Palette (full range)
+$primary: $sa-600;
+$primary-25:  $sa-25;
+$primary-50:  $sa-50;
+$primary-100:  $sa-100;
+$primary-200:  $sa-200;
+$primary-300:  $sa-300;
+$primary-400:  $sa-400;
+$primary-500:  $sa-500;
+$primary-600:  $sa-600;
+$primary-700:  $sa-700;
+$primary-800:  $sa-800;
+$primary-900:  $sa-900;
+$primary-950:  $sa-950;
+
+$secondary: $gray-100;
+$secondary-25: $gray-25;
+$secondary-50: $gray-50;
+$secondary-100: $gray-100;
+$secondary-200: $gray-200;
+$secondary-300: $gray-300;
+$secondary-400: $gray-400;
+$secondary-500: $gray-500;
+$secondary-600: $gray-600;
+$secondary-700: $gray-700;
+$secondary-800: $gray-800;
+$secondary-900: $gray-900;
+$secondary-950: $gray-950;
+
+$danger: $error-600;
+$danger-25: $error-25;
+$danger-50: $error-50;
+$danger-100: $error-100;
+$danger-200: $error-200;
+$danger-300: $error-300;
+$danger-400: $error-400;
+$danger-500: $error-500;
+$danger-600: $error-600;
+$danger-700: $error-700;
+$danger-800: $error-800;
+$danger-900: $error-900;
+$danger-950: $error-950;
+
+$neutral: $gray-950;
+$neutral-25: $gray-25;
+$neutral-50: $gray-50;
+$neutral-100: $gray-100;
+$neutral-200: $gray-200;
+$neutral-300: $gray-300;
+$neutral-400: $gray-400;
+$neutral-500: $gray-500;
+$neutral-600: $gray-600;
+$neutral-700: $gray-700;
+$neutral-800: $gray-800;
+$neutral-900: $gray-900;
+$neutral-950: $gray-950;
+
+$success: $success-600;                    
+$info: $info-600;                       
+$warning: $warning-600;                   
+$light: $gray-50;                    
+$dark: $gray-800;                     
+
+
+$theme-colors: (
+  "primary": $primary,
+  "secondary": $secondary,
+  "success": $success,
+  "info": $info,
+  "warning": $warning,
+  "danger": $danger,
+  "light": $light,
+  "dark": $dark,
+  // Additional custom colors from SDGA palette
+  "lavender": $lavender-600,
+  "neutral": $neutral,
+  // Primary shades
+  "primary-25": $primary-25,
+  "primary-50": $primary-50,
+  "primary-100": $primary-100,
+  "primary-200": $primary-200,
+  "primary-300": $primary-300,
+  "primary-400": $primary-400,
+  "primary-500": $primary-500,
+  "primary-600": $primary-600,
+  "primary-700": $primary-700,
+  "primary-800": $primary-800,
+  "primary-900": $primary-900,
+  "primary-950": $primary-950,
+  // Secondary shades
+  "secondary-25": $secondary-25,
+  "secondary-50": $secondary-50,
+  "secondary-100": $secondary-100,
+  "secondary-200": $secondary-200,
+  "secondary-300": $secondary-300,
+  "secondary-400": $secondary-400,
+  "secondary-500": $secondary-500,
+  "secondary-600": $secondary-600,
+  "secondary-700": $secondary-700,
+  "secondary-800": $secondary-800,
+  "secondary-900": $secondary-900,
+  "secondary-950": $secondary-950,
+  // Success shades
+  "success-25": $success-25,
+  "success-50": $success-50,
+  "success-100": $success-100,
+  "success-200": $success-200,
+  "success-300": $success-300,
+  "success-400": $success-400,
+  "success-500": $success-500,
+  "success-600": $success-600,
+  "success-700": $success-700,
+  "success-800": $success-800,
+  "success-900": $success-900,
+  "success-950": $success-950,
+  // Info shades
+  "info-25": $info-25,
+  "info-50": $info-50,
+  "info-100": $info-100,
+  "info-200": $info-200,
+  "info-300": $info-300,
+  "info-400": $info-400,
+  "info-500": $info-500,
+  "info-600": $info-600,
+  "info-700": $info-700,
+  "info-800": $info-800,
+  "info-900": $info-900,
+  "info-950": $info-950,
+  // Warning shades
+  "warning-25": $warning-25,
+  "warning-50": $warning-50,
+  "warning-100": $warning-100,
+  "warning-200": $warning-200,
+  "warning-300": $warning-300,
+  "warning-400": $warning-400,
+  "warning-500": $warning-500,
+  "warning-600": $warning-600,
+  "warning-700": $warning-700,
+  "warning-800": $warning-800,
+  "warning-900": $warning-900,
+  "warning-950": $warning-950,
+  // Danger/Error shades
+  "danger-25": $danger-25,
+  "danger-50": $danger-50,
+  "danger-100": $danger-100,
+  "danger-200": $danger-200,
+  "danger-300": $danger-300,
+  "danger-400": $danger-400,
+  "danger-500": $danger-500,
+  "danger-600": $danger-600,
+  "danger-700": $danger-700,
+  "danger-800": $danger-800,
+  "danger-900": $danger-900,
+  "danger-950": $danger-950,
+  // Lavender shades
+  "lavender-25": $lavender-25,
+  "lavender-50": $lavender-50,
+  "lavender-100": $lavender-100,
+  "lavender-200": $lavender-200,
+  "lavender-300": $lavender-300,
+  "lavender-400": $lavender-400,
+  "lavender-500": $lavender-500,
+  "lavender-600": $lavender-600,
+  "lavender-700": $lavender-700,
+  "lavender-800": $lavender-800,
+  "lavender-900": $lavender-900,
+  "lavender-950": $lavender-950,
+  // Neutral shades
+  "neutral-25": $neutral-25,
+  "neutral-50": $neutral-50,
+  "neutral-100": $neutral-100,
+  "neutral-200": $neutral-200,
+  "neutral-300": $neutral-300,
+  "neutral-400": $neutral-400,
+  "neutral-500": $neutral-500,
+  "neutral-600": $neutral-600,
+  "neutral-700": $neutral-700,
+  "neutral-800": $neutral-800,
+  "neutral-900": $neutral-900,
+  "neutral-950": $neutral-950
+);