sdga-ui 1.0.0

package/theme/config/_effects.scss

@@ -0,0 +1,228 @@
+// Bootstrap 5.3 - Effects & Utilities
+// Elevation shadows and backdrop blur utilities using SDGA design tokens
+
+@use 'sass:map';
+
+// ============================================
+// EFFECTS CONFIGURATION
+// ============================================
+
+// Global ripple effect toggle
+$enable-ripple-effect: true !default;
+
+// Ripple effect variables
+$ripple-size: 200% !default; // Percentage-based size relative to element
+$ripple-hover-opacity: 0.08 !default;
+$ripple-active-opacity: 0.08 !default;
+$ripple-focus-opacity: 0.08 !default;
+$ripple-transition-duration: 0.2s !default;
+$ripple-transition-timing: ease-out !default;
+
+// ============================================
+// RIPPLE EFFECT MIXIN
+// ============================================
+
+@mixin ripple-effect(
+  $size: $ripple-size,
+  $hover-opacity: $ripple-hover-opacity,
+  $active-opacity: $ripple-active-opacity,
+  $focus-opacity: $ripple-focus-opacity,
+  $duration: $ripple-transition-duration,
+  $timing: $ripple-transition-timing
+) {
+  position: relative;
+  overflow: visible;
+  
+  // Ripple background element
+  &::before {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: $size;
+    height: $size;
+    background-color: currentColor;
+    border-radius: 50%;
+    transform: translate(-50%, -50%) scale(0);
+    opacity: 0;
+    pointer-events: none;
+    transition: transform $duration $timing, opacity $duration $timing;
+  }
+  
+  // Ripple on hover (subtle)
+  &:hover:not(:disabled):not([readonly])::before {
+    transform: translate(-50%, -50%) scale(1);
+    opacity: $hover-opacity;
+  }
+  
+  // Ripple on active/click (prominent)
+  &:active:not(:disabled):not([readonly])::before {
+    transform: translate(-50%, -50%) scale(1);
+    opacity: $active-opacity;
+    transition: transform ($duration * 0.5) $timing, opacity ($duration * 0.5) $timing;
+  }
+  
+  // Ripple on focus
+  &:focus:not(:disabled):not([readonly])::before {
+    transform: translate(-50%, -50%) scale(1);
+    opacity: $focus-opacity;
+  }
+}
+
+// ============================================
+// ELEVATION SHADOWS
+// ============================================
+
+// Shadow XS - Subtle elevation
+$box-shadow-xs: 
+  0px 1px 2px 0px shadow-rgba(0.05),
+  0px 1px 3px 0px shadow-rgba(0.10);
+
+// Shadow SM - Small elevation
+$box-shadow-sm: 
+  0px 1px 2px 0px shadow-rgba(0.06),
+  0px 4px 8px -2px shadow-rgba(0.10);
+
+// Shadow MD - Medium elevation (Bootstrap default)
+$box-shadow: 
+  0px 4px 8px -2px shadow-rgba(0.10),
+  0px 2px 4px -2px shadow-rgba(0.06);
+
+// Shadow LG - Large elevation
+$box-shadow-lg: 
+  0px 4px 6px -2px shadow-rgba(0.03),
+  0px 20px 24px -4px shadow-rgba(0.08);
+
+// Shadow XL - Extra large elevation
+$box-shadow-xl: 
+  0px 8px 8px -4px shadow-rgba(0.03),
+  0px 24px 48px -12px shadow-rgba(0.08);
+
+// Shadow 2XL - Very large elevation
+$box-shadow-2xl: 
+  0px 24px 48px -12px shadow-rgba(0.18);
+
+// Shadow 3XL - Maximum elevation
+$box-shadow-3xl: 
+  0px 32px 64px -12px shadow-rgba(0.14);
+
+// Shadow Inset - For form controls
+$box-shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.075);
+
+// ============================================
+// BACKDROP BLUR
+// ============================================
+
+$backdrop-blur-sm: blur(8px);
+$backdrop-blur-md: blur(16px);
+$backdrop-blur-lg: blur(24px);
+$backdrop-blur-xl: blur(40px);
+
+// ============================================
+// UTILITY CLASSES GENERATION
+// ============================================
+
+// ============================================
+// UTILITY CLASSES GENERATION
+// ============================================
+
+// Elevation shadow utilities
+$utilities: (
+  "shadow-xs": (
+    property: box-shadow,
+    class: shadow-xs,
+    values: (
+      null: $box-shadow-xs
+    )
+  ),
+  "shadow-sm": (
+    property: box-shadow,
+    class: shadow-sm,
+    values: (
+      null: $box-shadow-sm
+    )
+  ),
+  "shadow-md": (
+    property: box-shadow,
+    class: shadow-md,
+    values: (
+      null: $box-shadow
+    )
+  ),
+  "shadow-lg": (
+    property: box-shadow,
+    class: shadow-lg,
+    values: (
+      null: $box-shadow-lg
+    )
+  ),
+  "shadow-xl": (
+    property: box-shadow,
+    class: shadow-xl,
+    values: (
+      null: $box-shadow-xl
+    )
+  ),
+  "shadow-2xl": (
+    property: box-shadow,
+    class: shadow-2xl,
+    values: (
+      null: $box-shadow-2xl
+    )
+  ),
+  "shadow-3xl": (
+    property: box-shadow,
+    class: shadow-3xl,
+    values: (
+      null: $box-shadow-3xl
+    )
+  ),
+  // Backdrop blur utilities
+  "backdrop-blur-sm": (
+    property: backdrop-filter,
+    class: backdrop-blur-sm,
+    values: (
+      null: $backdrop-blur-sm
+    )
+  ),
+  "backdrop-blur-md": (
+    property: backdrop-filter,
+    class: backdrop-blur-md,
+    values: (
+      null: $backdrop-blur-md
+    )
+  ),
+  "backdrop-blur-lg": (
+    property: backdrop-filter,
+    class: backdrop-blur-lg,
+    values: (
+      null: $backdrop-blur-lg
+    )
+  ),
+  "backdrop-blur-xl": (
+    property: backdrop-filter,
+    class: backdrop-blur-xl,
+    values: (
+      null: $backdrop-blur-xl
+    )
+  )
+);
+
+// Generate utility classes
+@each $key, $utility in $utilities {
+  $property: map.get($utility, property);
+  $class: map.get($utility, class);
+  $values: map.get($utility, values);
+  
+  @each $value-key, $value in $values {
+    @if $value-key == null {
+      .#{$class} {
+        #{$property}: $value !important;
+      }
+    } @else {
+      .#{$class}-#{$value-key} {
+        #{$property}: $value !important;
+      }
+    }
+  }
+}

package/theme/config/_radius.scss

@@ -0,0 +1,78 @@
+// Bootstrap 5.3 - Border Radius Variables & Utilities
+// Extended radius system with utility classes
+
+// ============================================
+// BORDER RADIUS SCALE
+// ============================================
+
+// Extended radius scale
+$radius-none: 0rem;                   // 0px
+$radius-xs: 0.125rem;                 // 2px
+$radius-sm: 0.25rem;                  // 4px
+$radius-md: 0.5rem;                   // 8px
+$radius-lg: 1rem;                     // 16px
+$radius-xl: 1.5rem;                   // 24px
+$radius-full: 9999px;                 // Full round
+
+// Radius scale map
+$radius-scale: (
+  none: $radius-none,
+  xs: $radius-xs,
+  sm: $radius-sm,
+  md: $radius-md,
+  lg: $radius-lg,
+  xl: $radius-xl,
+  full: $radius-full
+);
+
+// ============================================
+// UTILITY CLASSES GENERATION
+// ============================================
+
+// Generate border-radius utilities
+@each $name, $value in $radius-scale {
+  .radius-#{$name} {
+    border-radius: $value !important;
+  }
+  
+  // Top corners
+  .radius-t-#{$name} {
+    border-top-left-radius: $value !important;
+    border-top-right-radius: $value !important;
+  }
+  
+  // Bottom corners
+  .radius-b-#{$name} {
+    border-bottom-left-radius: $value !important;
+    border-bottom-right-radius: $value !important;
+  }
+  
+  // Left corners
+  .radius-l-#{$name} {
+    border-top-left-radius: $value !important;
+    border-bottom-left-radius: $value !important;
+  }
+  
+  // Right corners
+  .radius-r-#{$name} {
+    border-top-right-radius: $value !important;
+    border-bottom-right-radius: $value !important;
+  }
+  
+  // Individual corners
+  .radius-tl-#{$name} {
+    border-top-left-radius: $value !important;
+  }
+  
+  .radius-tr-#{$name} {
+    border-top-right-radius: $value !important;
+  }
+  
+  .radius-bl-#{$name} {
+    border-bottom-left-radius: $value !important;
+  }
+  
+  .radius-br-#{$name} {
+    border-bottom-right-radius: $value !important;
+  }
+}

package/theme/config/_spacing.scss

@@ -0,0 +1,156 @@
+// Bootstrap 5.3 - Spacing Variables
+// Customized with extended spacing scale, width utilities, and semantic tokens
+
+// ============================================
+// SPACING SCALE
+// ============================================
+
+// Base spacer unit
+$spacer: 1rem;
+
+// Bootstrap spacers map (0-10)
+$spacers: (
+  0: 0,
+  1: $spacer * 0.25,    // 4px
+  2: $spacer * 0.5,     // 8px
+  3: $spacer * 0.75,    // 12px
+  4: $spacer,           // 16px
+  5: $spacer * 1.5,     // 24px
+  6: $spacer * 2,       // 32px
+  7: $spacer * 2.5,     // 40px
+  8: $spacer * 3,       // 48px
+  9: $spacer * 4,       // 64px
+  10: $spacer * 5       // 80px
+);
+
+// Extended spacing scale for custom utilities
+$spacing-scale: (
+  0: 0rem,
+  0-5: 0.125rem,        // 2px
+  1: 0.25rem,           // 4px
+  2: 0.5rem,            // 8px
+  3: 0.75rem,           // 12px
+  4: 1rem,              // 16px
+  5: 1.25rem,           // 20px
+  6: 1.5rem,            // 24px
+  8: 2rem,              // 32px
+  10: 2.5rem,           // 40px
+  12: 3rem,             // 48px
+  16: 4rem,             // 64px
+  20: 5rem,             // 80px
+  24: 6rem,             // 96px
+  32: 8rem,             // 128px
+  40: 10rem,            // 160px
+  48: 12rem,            // 192px
+  56: 14rem,            // 224px
+  64: 16rem             // 256px
+);
+
+// ============================================
+// SEMANTIC SPACING TOKENS
+// ============================================
+
+$spacing-tokens: (
+  spacing-none: 0rem,
+  spacing-xxs: 0.125rem,
+  spacing-xs: 0.25rem,
+  spacing-sm: 0.375rem,
+  spacing-md: 0.5rem,
+  spacing-lg: 0.75rem,
+  spacing-xl: 1rem,
+  spacing-2xl: 1.25rem,
+  spacing-3xl: 1.5rem,
+  spacing-4xl: 2rem,
+  spacing-5xl: 2.5rem,
+  spacing-6xl: 3rem,
+  spacing-7xl: 4rem,
+  spacing-8xl: 5rem,
+  spacing-9xl: 6rem,
+  spacing-10xl: 8rem,
+  spacing-11xl: 10rem
+);
+
+// ============================================
+// WIDTH SCALE
+// ============================================
+
+$width-scale: (
+  width-xxs: 20rem,
+  width-xs: 24rem,
+  width-sm: 30rem,
+  width-md: 35rem,
+  width-lg: 40rem,
+  width-xl: 48rem,
+  width-2xl: 64rem,
+  width-3xl: 80rem,
+  width-4xl: 90rem,
+  width-5xl: 100rem,
+  width-6xl: 120rem
+);
+
+// ============================================
+// CONTAINER CONFIGURATION
+// ============================================
+
+$container-padding-mobile: 1rem;
+$container-padding-desktop: 2rem;
+$container-max-width-desktop: 80rem;
+
+// ============================================
+// PARAGRAPH CONFIGURATION
+// ============================================
+
+$paragraph-max-width: 45rem;
+
+// ============================================
+// UTILITY CLASSES GENERATION
+// ============================================
+
+// Generate extended spacing utilities
+@each $key, $value in $spacing-scale {
+  // Margin utilities
+  .m-#{$key} { margin: $value !important; }
+  .mt-#{$key} { margin-top: $value !important; }
+  .mb-#{$key} { margin-bottom: $value !important; }
+  .ml-#{$key} { margin-left: $value !important; }
+  .mr-#{$key} { margin-right: $value !important; }
+  .mx-#{$key} { margin-inline: $value !important; }
+  .my-#{$key} { margin-block: $value !important; }
+  
+  // Padding utilities
+  .p-#{$key} { padding: $value !important; }
+  .pt-#{$key} { padding-top: $value !important; }
+  .pb-#{$key} { padding-bottom: $value !important; }
+  .pl-#{$key} { padding-left: $value !important; }
+  .pr-#{$key} { padding-right: $value !important; }
+  .px-#{$key} { padding-inline: $value !important; }
+  .py-#{$key} { padding-block: $value !important; }
+}
+
+// Generate semantic spacing token utilities
+@each $name, $space in $spacing-tokens {
+  .#{$name} { margin: $space !important; }
+}
+
+// Generate width utilities
+@each $name, $value in $width-scale {
+  .#{$name} { max-width: $value !important; }
+}
+
+// Container utility class
+.container-platform {
+  padding-left: $container-padding-mobile;
+  padding-right: $container-padding-mobile;
+
+  @media (min-width: 992px) {
+    padding-left: $container-padding-desktop;    
+    padding-right: $container-padding-desktop;
+    max-width: $container-max-width-desktop;
+    margin: 0 auto;
+  }
+}
+
+// Paragraph max-width utility
+.paragraph-max {
+  max-width: $paragraph-max-width;
+}

package/theme/config/_typography.scss

@@ -0,0 +1,118 @@
+// Bootstrap 5.3 - Typography Variables
+// Customized with SDGA Typography System (IBM Plex Sans Arabic)
+// Responsive typography with breakpoint-specific sizes
+
+// ============================================
+// TYPOGRAPHY - DESKTOP (Default)
+// ============================================
+
+// Font Family
+$font-family-base: 'IBM Plex Sans Arabic';
+
+// Font Sizes - Desktop (1024px+)
+$font-size-base: 1rem;                // 16px
+$font-size-sm: 0.875rem;              // 14px
+$font-size-lg: 1.125rem;              // 18px
+
+// Font Weights
+$font-weight-lighter: 300;
+$font-weight-light: 300;
+$font-weight-base: 400;
+$font-weight-medium: 500;
+$font-weight-semibold: 600;
+$font-weight-bold: 700;
+$font-weight-bolder: 700;
+
+// Line Heights
+$line-height-base: 1.5;
+$line-height-sm: 1.43;
+$line-height-lg: 1.56;
+
+// Headings - Desktop
+$headings-font-family: $font-family-base;
+$headings-font-weight: $font-weight-semibold;
+$headings-line-height: $line-height-base;
+$headings-color: null;
+
+// Heading Sizes - Desktop
+$h1-font-size: 3rem;                  // 48px
+$h2-font-size: 2.25rem;               // 36px
+$h3-font-size: 1.875rem;              // 30px
+$h4-font-size: 1.5rem;                // 24px
+$h5-font-size: 1.125rem;              // 18px
+$h6-font-size: 1rem;                  // 16px
+
+// Display Headings - Desktop
+$display-font-sizes: (
+  1: 4.5rem,                          // 72px
+  2: 3.75rem,                         // 60px
+  3: 3rem,                            // 48px
+  4: 2.25rem,                         // 36px
+  5: 1.875rem,                        // 30px
+  6: 1.5rem                           // 24px
+);
+
+$display-font-weight: 700;
+$display-line-height: 1.25;
+
+// ============================================
+// RESPONSIVE CONFIGURATION
+// ============================================
+
+// Enable responsive font sizes
+$enable-rfs: true;
+
+// Small text
+$small-font-size: 0.875rem;
+$sub-sup-font-size: 0.75rem;
+
+// Paragraph
+$paragraph-margin-bottom: 1rem;
+
+// Lead text
+$lead-font-size: 1.25rem;
+$lead-font-weight: 300;
+
+// ============================================
+// TABLET SIZES (768px - 1023px)
+// Will be applied via media queries in bootstrap.scss
+// ============================================
+$h1-font-size-tablet: 2.5rem;        // 40px
+$h2-font-size-tablet: 2rem;          // 32px
+$h3-font-size-tablet: 1.75rem;       // 28px
+$h4-font-size-tablet: 1.375rem;      // 22px
+$h5-font-size-tablet: 1.0625rem;     // 17px
+$h6-font-size-tablet: 0.9375rem;     // 15px
+
+$display-1-tablet: 3.75rem;          // 60px
+$display-2-tablet: 3rem;             // 48px
+$display-3-tablet: 2.5rem;           // 40px
+$display-4-tablet: 2rem;             // 32px
+$display-5-tablet: 1.75rem;          // 28px
+$display-6-tablet: 1.375rem;         // 22px
+
+$font-size-base-tablet: 0.9375rem;   // 15px
+$font-size-sm-tablet: 0.8125rem;     // 13px
+$font-size-lg-tablet: 1.0625rem;     // 17px
+
+// ============================================
+// MOBILE SIZES (below 768px)
+// Will be applied via media queries in bootstrap.scss
+// ============================================
+$h1-font-size-mobile: 2rem;          // 32px
+$h2-font-size-mobile: 1.75rem;       // 28px
+$h3-font-size-mobile: 1.5rem;        // 24px
+$h4-font-size-mobile: 1.25rem;       // 20px
+$h5-font-size-mobile: 1rem;          // 16px
+$h6-font-size-mobile: 0.875rem;      // 14px
+
+$display-1-mobile: 3rem;             // 48px
+$display-2-mobile: 2.5rem;           // 40px
+$display-3-mobile: 2rem;             // 32px
+$display-4-mobile: 1.75rem;          // 28px
+$display-5-mobile: 1.5rem;           // 24px
+$display-6-mobile: 1.25rem;          // 20px
+
+$font-size-base-mobile: 0.875rem;    // 14px
+$font-size-sm-mobile: 0.75rem;       // 12px
+$font-size-lg-mobile: 1rem;          // 16px