sdga-ui 1.0.0

package/theme/customizations/_forms-check.scss

@@ -0,0 +1,279 @@
+// Form Check Customizations - Checkboxes & Radios
+// Excludes switches (use _forms-switch.scss for switches)
+
+// ============================================
+// BASE WRAPPER
+// ============================================
+
+.form-check {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+
+// ============================================
+// RIPPLE EFFECT APPLICATION
+// ============================================
+
+// Force enable ripple on specific elements
+.form-check-input.ripple {
+  @include ripple-effect();
+}
+
+.form-check-neutral .form-check-input.ripple {
+  &:checked,
+  &:indeterminate {
+    color: $neutral;
+  }
+}
+
+// ============================================
+// PRIMARY VARIANT (DEFAULT)
+// ============================================
+
+// Target: Checkboxes and radios (excluding switches and neutral variant)
+.form-check-input:not([type="checkbox"][role="switch"]):not(.form-check-neutral .form-check-input) {
+  
+  // Focus state
+  &:focus {
+    border-color: $form-check-input-focus-border;
+  }
+  
+  // Unchecked state interactions
+  &:not(:checked):not(:indeterminate):not(:disabled):not([readonly]) {
+    &:hover {
+      border-color: $form-check-input-unchecked-hover-border;
+      background-color: $form-check-input-unchecked-hover-bg;
+    }
+    
+    &:active {
+      border-color: $form-check-input-unchecked-active-border;
+      background-color: $form-check-input-unchecked-active-bg;
+    }
+  }
+  
+  // Checked state interactions
+  &:checked:not(:disabled):not([readonly]) {
+    &:hover {
+      border-color: $form-check-input-checked-hover-border;
+      background-color: $form-check-input-checked-hover-bg;
+    }
+    
+    &:active {
+      border-color: $form-check-input-checked-active-border;
+      background-color: $form-check-input-checked-active-bg;
+    }
+  }
+  
+  // Indeterminate state interactions
+  &:indeterminate:not(:disabled):not([readonly]) {
+    &:hover {
+      border-color: $form-check-input-indeterminate-hover-border;
+      background-color: $form-check-input-indeterminate-hover-bg;
+    }
+    
+    &:active {
+      border-color: $form-check-input-indeterminate-active-border;
+      background-color: $form-check-input-indeterminate-active-bg;
+    }
+  }
+  
+  // Disabled state
+  &:disabled {
+    background-color: $form-check-input-disabled-bg;
+    border-color: $form-check-input-disabled-border-color;
+    cursor: not-allowed;
+    
+    &:checked {
+      background-color: $form-check-input-disabled-checked-bg;
+      border-color: $form-check-input-disabled-checked-bg;
+      
+      &[type="checkbox"] {
+        $escaped-color: svg-encode-color($form-check-input-disabled-checked-color);
+        background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#{$escaped-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/></svg>");
+      }
+      
+      &[type="radio"] {
+        $escaped-color: svg-encode-color($form-check-input-disabled-checked-color);
+        background-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='#{$escaped-color}'/></svg>");
+      }
+    }
+    
+    &:indeterminate[type="checkbox"] {
+      background-color: $form-check-input-disabled-indeterminate-bg;
+      border-color: $form-check-input-disabled-indeterminate-bg;
+      $escaped-color: svg-encode-color($form-check-input-disabled-indeterminate-color);
+      background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#{$escaped-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/></svg>");
+    }
+    
+    ~ .form-check-label {
+      cursor: not-allowed;
+      opacity: $form-check-label-disabled-opacity;
+    }
+  }
+  
+  // Readonly state
+  &[readonly] {
+    background-color: $form-check-input-readonly-bg;
+    border-color: $form-check-input-readonly-border-color;
+    cursor: $form-check-input-readonly-cursor;
+    pointer-events: none;
+    
+    &:checked {
+      background-color: $form-check-input-readonly-checked-bg;
+      
+      &[type="checkbox"] {
+        $escaped-color: svg-encode-color($form-check-input-readonly-checked-color);
+        background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#{$escaped-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/></svg>");
+      }
+      
+      &[type="radio"] {
+        background-color: $form-check-radio-readonly-checked-bg;
+        border-color: $form-check-radio-readonly-checked-border;
+        $escaped-color: svg-encode-color($form-check-radio-readonly-checked-color);
+        background-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='#{$escaped-color}'/></svg>");
+      }
+    }
+    
+    &:indeterminate[type="checkbox"] {
+      background-color: $form-check-input-readonly-indeterminate-bg;
+      border-color: $form-check-input-readonly-indeterminate-bg;
+      $escaped-color: svg-encode-color($form-check-input-readonly-indeterminate-color);
+      background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#{$escaped-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/></svg>");
+    }
+    
+    ~ .form-check-label {
+      cursor: $form-check-input-readonly-cursor;
+      pointer-events: none;
+    }
+  }
+}
+
+// ============================================
+// NEUTRAL VARIANT
+// ============================================
+
+.form-check-neutral {
+  .form-check-input:not([type="checkbox"][role="switch"]) {
+    
+    // Base checked states
+    &:checked {
+      background-color: $form-check-neutral-checked-bg-color;
+      border-color: $form-check-neutral-checked-bg-color;
+    }
+    
+    &:indeterminate {
+      background-color: $form-check-neutral-indeterminate-bg-color;
+      border-color: $form-check-neutral-indeterminate-bg-color;
+    }
+    
+    // Focus state
+    &:focus {
+      border-color: $form-check-neutral-checked-bg-color;
+    }
+    
+    // Unchecked state interactions
+    &:not(:checked):not(:indeterminate):not(:disabled):not([readonly]) {
+      &:hover {
+        border-color: $form-check-neutral-unchecked-hover-border;
+        background-color: $form-check-neutral-unchecked-hover-bg;
+      }
+      
+      &:active {
+        border-color: $form-check-neutral-unchecked-active-border;
+        background-color: $form-check-neutral-unchecked-active-bg;
+      }
+    }
+    
+    // Checked state interactions
+    &:checked:not(:disabled):not([readonly]) {
+      &:hover {
+        border-color: $form-check-neutral-checked-hover-border;
+        background-color: $form-check-neutral-checked-hover-bg;
+      }
+      
+      &:active {
+        border-color: $form-check-neutral-checked-active-border;
+        background-color: $form-check-neutral-checked-active-bg;
+      }
+    }
+    
+    // Indeterminate state interactions
+    &:indeterminate:not(:disabled):not([readonly]) {
+      &:hover {
+        border-color: $form-check-neutral-indeterminate-hover-border;
+        background-color: $form-check-neutral-indeterminate-hover-bg;
+      }
+      
+      &:active {
+        border-color: $form-check-neutral-indeterminate-active-border;
+        background-color: $form-check-neutral-indeterminate-active-bg;
+      }
+    }
+  }
+}
+
+// ============================================
+// SIZE VARIANTS
+// ============================================
+
+// Size on wrapper (affects input and label)
+.form-check {
+  &.form-check-md {
+    .form-check-input {
+      width: $form-check-input-width-md;
+      height: $form-check-input-width-md;
+    }
+  }
+  
+  &.form-check-sm {
+    .form-check-input {
+      width: $form-check-input-width-sm;
+      height: $form-check-input-width-sm;
+    }
+    
+    .form-check-label {
+      font-size: .875rem;
+    }
+  }
+  
+  &.form-check-xs {
+    .form-check-input {
+      width: $form-check-input-width-xs;
+      height: $form-check-input-width-xs;
+    }
+    
+    .form-check-label {
+      font-size: .75rem;
+    }
+  }
+  
+  // Variant + size combinations
+  &.form-check-neutral {
+    &.form-check-sm .form-check-input {
+      width: $form-check-input-width-sm;
+      height: $form-check-input-width-sm;
+    }
+    
+    &.form-check-xs .form-check-input {
+      width: $form-check-input-width-xs;
+      height: $form-check-input-width-xs;
+    }
+  }
+}
+
+// Size directly on input (standalone usage without wrapper)
+.form-check-input-md {
+  width: $form-check-input-width-md;
+  height: $form-check-input-width-md;
+}
+
+.form-check-input-sm {
+  width: $form-check-input-width-sm;
+  height: $form-check-input-width-sm;
+}
+
+.form-check-input-xs {
+  width: $form-check-input-width-xs;
+  height: $form-check-input-width-xs;
+}

package/theme/customizations/_forms-inputs.scss

@@ -0,0 +1,9 @@
+// Form Input Customizations - Text Controls
+
+.form-control-lg {
+  min-height: calc(1.5em + 1.25rem + 2px);
+}
+
+.form-control-sm {
+  min-height: calc(1.5em + 0.75rem + 2px);
+}

package/theme/customizations/_forms-switch.scss

@@ -0,0 +1,91 @@
+// Form Switch Customizations - RTL Support
+
+// ============================================
+// FORM SWITCH SPECIFIC STYLES
+// ============================================
+
+.form-switch {
+  // Override default box-shadow for switches
+  .form-check-input {
+    box-shadow: none;
+  }
+}
+
+// ============================================
+// HOVER AND ACTIVE STATES FOR FORM SWITCH
+// ============================================
+
+.form-switch .form-check-input:not(:disabled):not([readonly]) {
+  // Unchecked hover
+  &:not(:checked):hover {
+    background-color: $form-switch-unchecked-hover-bg !important;
+    border-color: $form-switch-unchecked-hover-border !important;
+    $escaped-color: svg-encode-color($form-switch-unchecked-hover-color);
+    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$escaped-color}'/></svg>") !important;
+  }
+  
+  // Checked hover
+  &:checked:hover {
+    background-color: $form-switch-checked-hover-bg !important;
+    border-color: $form-switch-checked-hover-border !important;
+    $escaped-color: svg-encode-color($form-switch-checked-hover-color);
+    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$escaped-color}'/></svg>") !important;
+  }
+  
+  // Unchecked active/pressed
+  &:not(:checked):active {
+    background-color: $form-switch-unchecked-active-bg !important;
+    border-color: $form-switch-unchecked-active-border !important;
+    $escaped-color: svg-encode-color($form-switch-unchecked-active-color);
+    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$escaped-color}'/></svg>") !important;
+  }
+  
+  // Checked active/pressed
+  &:checked:active {
+    background-color: $form-switch-checked-active-bg !important;
+    border-color: $form-switch-checked-active-border !important;
+    $escaped-color: svg-encode-color($form-switch-checked-active-color);
+    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$escaped-color}'/></svg>") !important;
+  }
+}
+
+// ============================================
+// DISABLED STATE FOR FORM SWITCH
+// ============================================
+
+.form-switch .form-check-input:disabled {
+  background-color: $form-switch-unchecked-disabled-bg;
+  border-color: $form-switch-unchecked-disabled-border;
+  cursor: not-allowed;
+  $escaped-color: svg-encode-color($form-switch-unchecked-disabled-color);
+  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$escaped-color}'/></svg>");
+
+  &:checked {
+    background-color: $form-switch-checked-disabled-bg;
+    border-color: $form-switch-checked-disabled-border;
+    $escaped-color: svg-encode-color($form-switch-checked-disabled-color);
+    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$escaped-color}'/></svg>");
+  }
+}
+
+// ============================================
+// RTL SUPPORT FOR FORM SWITCH
+// ============================================
+
+[dir="rtl"] {
+  .form-switch {
+    padding-left: 0;
+    padding-right: $form-switch-padding-start;
+
+    .form-check-input {
+      margin-left: 0;
+      margin-right: calc(#{$form-switch-padding-start} * -1);
+      background-position: right center;
+      
+      // RTL: Flip background position for checked state
+      &:checked {
+        background-position: left center;
+      }
+    }
+  }
+}

package/theme/customizations/_forms.scss

@@ -0,0 +1,5 @@
+// Form Customizations - SDJA Custom Enhancements
+
+@import 'forms-inputs';
+@import 'forms-check';
+

package/theme/customizations/_global.scss

@@ -0,0 +1,25 @@
+// Global Customizations - SDGA Custom Enhancements
+// ============================================
+// GLOBAL FOCUS STYLING
+// ============================================
+
+// Global button focus styling - applies to all button variants
+*:focus-visible {
+  outline-offset: 2px !important;
+  outline: 2px solid #161616 !important;
+  border-color: $border-color !important;
+}
+
+// ============================================
+// SAFARI COMPATIBILITY
+// ============================================
+
+// Fix Safari compatibility for text-align in table headers
+th {
+  text-align: match-parent;
+}
+
+// Fix text-size-adjust for modern browsers
+html {
+  text-size-adjust: 100%;
+}

package/theme/customizations/_links.scss

@@ -0,0 +1,47 @@
+// Links Customizations - SDGA Custom Enhancements
+
+// ============================================
+// LINK COLOR VARIANTS
+// ============================================
+
+.link-primary {
+  --#{$prefix}link-color: #{$primary-600};
+  --#{$prefix}link-color-rgb: #{red($primary-600)}, #{green($primary-600)}, #{blue($primary-600)};
+  --#{$prefix}link-hover-color: #{$primary-400};
+  --#{$prefix}link-hover-color-rgb: #{red($primary-400)}, #{green($primary-400)}, #{blue($primary-400)};
+}
+
+.link-secondary {
+  --#{$prefix}link-color: #{$secondary-600};
+  --#{$prefix}link-color-rgb: #{red($secondary-600)}, #{green($secondary-600)}, #{blue($secondary-600)};
+  --#{$prefix}link-hover-color: #{$secondary-400};
+  --#{$prefix}link-hover-color-rgb: #{red($secondary-400)}, #{green($secondary-400)}, #{blue($secondary-400)};
+}
+
+.link-success {
+  --#{$prefix}link-color: #{$success-600};
+  --#{$prefix}link-color-rgb: #{red($success-600)}, #{green($success-600)}, #{blue($success-600)};
+  --#{$prefix}link-hover-color: #{$success-400};
+  --#{$prefix}link-hover-color-rgb: #{red($success-400)}, #{green($success-400)}, #{blue($success-400)};
+}
+
+.link-danger {
+  --#{$prefix}link-color: #{$danger-600};
+  --#{$prefix}link-color-rgb: #{red($danger-600)}, #{green($danger-600)}, #{blue($danger-600)};
+  --#{$prefix}link-hover-color: #{$danger-400};
+  --#{$prefix}link-hover-color-rgb: #{red($danger-400)}, #{green($danger-400)}, #{blue($danger-400)};
+}
+
+.link-warning {
+  --#{$prefix}link-color: #{$warning-600};
+  --#{$prefix}link-color-rgb: #{red($warning-600)}, #{green($warning-600)}, #{blue($warning-600)};
+  --#{$prefix}link-hover-color: #{$warning-400};
+  --#{$prefix}link-hover-color-rgb: #{red($warning-400)}, #{green($warning-400)}, #{blue($warning-400)};
+}
+
+.link-info {
+  --#{$prefix}link-color: #{$info-600};
+  --#{$prefix}link-color-rgb: #{red($info-600)}, #{green($info-600)}, #{blue($info-600)};
+  --#{$prefix}link-hover-color: #{$info-400};
+  --#{$prefix}link-hover-color-rgb: #{red($info-400)}, #{green($info-400)}, #{blue($info-400)};
+}

package/theme/customizations/_tables.scss

@@ -0,0 +1,68 @@
+// Table Customizations - SDGA Custom Enhancements
+
+// ============================================
+// TABLE HOVER ENHANCEMENTS
+// ============================================
+
+// .table-hover-primary tbody tr:hover {
+//   background-color: rgba($primary, 0.1);
+// }
+
+// .table-hover-secondary tbody tr:hover {
+//   background-color: rgba($secondary, 0.1);
+// }
+
+.table {
+  border: $table-th-border-width solid $table-th-border-color;
+  border-radius: $table-thead-border-radius;
+  border-collapse: separate;
+  border-spacing: 0;
+  overflow: hidden;
+
+  &.side-borderless {
+    border-inline: none;
+    border-radius: 0;
+  }
+
+  thead {
+    background-color: $table-thead-bg;
+
+    th {
+      height: 3rem;
+      vertical-align: middle;
+      padding: $table-cell-padding-y $table-cell-padding-x;
+      background-color: transparent;
+      color: $table-th-color;
+      border-block-end: $table-thead-border-width solid $table-thead-border-color;
+      border-block-start: none;
+      border-inline-start: none;
+      border-inline-end: $table-thead-border-width solid $table-thead-border-color;
+
+      &:last-child {
+        border-inline-end: none;
+      }
+    }
+  }
+
+  tbody {
+    tr {
+      th, td {
+        height: 4rem;
+        vertical-align: middle;
+        border-inline: none;
+        border-block-start: none;
+        border-block-end: none;
+      }
+
+      th:first-child, td:first-child {
+        border-inline-end: $table-th-border-width solid $table-th-border-color;
+      }
+
+      &:not(:last-child) {
+        th, td {
+          border-block-end: $table-border-width solid $table-border-color;
+        }
+      }
+    }
+  }
+}