sdga-ui 1.0.2 → 1.0.4

package/theme/customizations/_forms-switch.scss

@@ -1,91 +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;
-      }
-    }
-  }
-}
+// 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

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

package/theme/customizations/_global.scss

@@ -1,25 +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%;
-}
+// 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

@@ -1,47 +1,95 @@
-// 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)};
+// Links Customizations - SDGA Custom Enhancements
+
+// ============================================
+// LINK COLOR VARIANTS
+// ============================================
+
+.link-primary {
+  color: $primary-600 !important;
+
+  &:hover,
+  &:focus {
+    color: $primary-400 !important;
+    text-decoration-color: $primary-400 !important;
+  }
+
+  &:active {
+    color: $primary-300 !important;
+    text-decoration-color: $primary-300 !important;
+  }
+}
+
+.link-secondary {
+  color: $secondary-600 !important;
+
+  &:hover,
+  &:focus {
+    color: $secondary-400 !important;
+    text-decoration-color: $secondary-400 !important;
+  }
+
+  &:active {
+    color: $secondary-300 !important;
+    text-decoration-color: $secondary-300 !important;
+  }
+}
+
+.link-success {
+  color: $success-600 !important;
+
+  &:hover,
+  &:focus {
+    color: $success-400 !important;
+    text-decoration-color: $success-400 !important;
+  }
+
+  &:active {
+    color: $success-300 !important;
+    text-decoration-color: $success-300 !important;
+  }
+}
+
+.link-danger {
+  color: $danger-600 !important;
+
+  &:hover,
+  &:focus {
+    color: $danger-400 !important;
+    text-decoration-color: $danger-400 !important;
+  }
+
+  &:active {
+    color: $danger-300 !important;
+    text-decoration-color: $danger-300 !important;
+  }
+}
+
+.link-warning {
+  color: $warning-600 !important;
+
+  &:hover,
+  &:focus {
+    color: $warning-400 !important;
+    text-decoration-color: $warning-400 !important;
+  }
+
+  &:active {
+    color: $warning-300 !important;
+    text-decoration-color: $warning-300 !important;
+  }
+}
+
+.link-info {
+  color: $info-600 !important;
+
+  &:hover,
+  &:focus {
+    color: $info-400 !important;
+    text-decoration-color: $info-400 !important;
+  }
+
+  &:active {
+    color: $info-300 !important;
+    text-decoration-color: $info-300 !important;
+  }
 }

package/theme/customizations/_tables.scss

@@ -1,68 +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;
-        }
-      }
-    }
-  }
+// 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;
+        }
+      }
+    }
+  }
 }