Orange-OpenSource · MaxLardenois · Mar 7, 2025 · Mar 12, 2025 · Mar 12, 2025 · Mar 13, 2025
diff --git a/.github/workflows/node-sass.yml b/.github/workflows/node-sass.yml
diff --git a/scss/_forms.scss b/scss/_forms.scss
@@ -2,7 +2,7 @@
 @import "forms/form-text";
 @import "forms/form-control";
 @import "forms/form-select";
-@import "forms/form-check";
+@import "forms/control-item";
 @import "forms/form-range";
 // OUDS mod: no floating-labels
 @import "forms/input-group";

diff --git a/scss/_root.scss b/scss/_root.scss
@@ -420,14 +420,14 @@
   // scss-docs-end root-focus-variables
 
   // scss-docs-start root-form-validation-variables
-  --#{$prefix}form-valid-color: #{$form-valid-color};
-  --#{$prefix}form-valid-border-color: #{$form-valid-border-color};
-  --#{$prefix}form-invalid-color: #{$form-invalid-color};
-  --#{$prefix}form-invalid-border-color: #{$form-invalid-border-color};
+  @if $enable-bootstrap-compatibility {
+    --#{$prefix}form-valid-color: #{$form-valid-color};
+    --#{$prefix}form-valid-border-color: #{$form-valid-border-color};
+    --#{$prefix}form-invalid-color: #{$form-invalid-color};
+    --#{$prefix}form-invalid-border-color: #{$form-invalid-border-color};
+  }
   // scss-docs-end root-form-validation-variables
 
-  --#{$prefix}form-check-filter: #{$form-check-filter}; // OUDS mod
-  --#{$prefix}form-check-input-disabled-color: #{$form-check-input-disabled-color}; // OUDS mod
   --#{$prefix}form-color-disabled-filter: #{$form-color-disabled-filter}; // OUDS mod
   --#{$prefix}form-select-indicator: #{$form-select-indicator}; // OUDS mod
   --#{$prefix}form-select-disabled-indicator: #{$form-select-disabled-indicator}; // OUDS mod
@@ -516,12 +516,12 @@
 
     --#{$prefix}focus-ring-color: #{$focus-ring-color-dark}; // OUDS mod
 
-    --#{$prefix}form-valid-color: #{$form-valid-color-dark};
-    --#{$prefix}form-valid-border-color: #{$form-valid-border-color-dark};
-    --#{$prefix}form-invalid-color: #{$form-invalid-color-dark};
-    --#{$prefix}form-invalid-border-color: #{$form-invalid-border-color-dark};
-    --#{$prefix}form-check-filter: #{$form-check-filter-dark}; // OUDS mod
-    --#{$prefix}form-check-input-disabled-color: #{$form-check-input-disabled-color-dark}; // OUDS mod
+    @if $enable-bootstrap-compatibility {
+      --#{$prefix}form-valid-color: #{$form-valid-color-dark};
+      --#{$prefix}form-valid-border-color: #{$form-valid-border-color-dark};
+      --#{$prefix}form-invalid-color: #{$form-invalid-color-dark};
+      --#{$prefix}form-invalid-border-color: #{$form-invalid-border-color-dark};
+    }
     --#{$prefix}form-select-indicator: #{$form-select-indicator-dark}; // OUDS mod
     --#{$prefix}form-select-disabled-indicator: #{$form-select-disabled-indicator-dark}; // OUDS mod
     --#{$prefix}form-color-disabled-filter: #{$form-color-disabled-filter-dark};

diff --git a/scss/_variables-dark.scss b/scss/_variables-dark.scss
@@ -98,8 +98,6 @@ $svg-as-custom-props-dark: (
 // Forms
 //
 
-$form-check-filter-dark:                none !default; // OUDS mod
-$form-check-input-disabled-color-dark:  $gray-700 !default; // OUDS mod
 $form-color-disabled-filter-dark:       brightness(0) invert(1) brightness(.4) !default; // OUDS mod
 $form-switch-square-bg-dark:            $ouds-color-functional-dark-gray-880 !default; // OUDS mod
 
@@ -111,10 +109,10 @@ $form-select-disabled-indicator-dark:   escape-svg(url("data:image/svg+xml,<svg
 // OUDS mod: no $form-switch-bg-image-dark
 
 // scss-docs-start form-validation-colors-dark
-$form-valid-color-dark:                           var(--#{$prefix}success-text-emphasis) !default; // OUDS mod: instead of `$green-300`
-$form-valid-border-color-dark:                    var(--#{$prefix}success) !default; // OUDS mod: instead of `$green-300`
-$form-invalid-color-dark:                         var(--#{$prefix}danger-text-emphasis) !default; // OUDS mod: instead of `$red-300`
-$form-invalid-border-color-dark:                  var(--#{$prefix}danger) !default; // OUDS mod: instead of `$red-300`
+$form-valid-color-dark:                           $ouds-color-content-default-dark !default; // OUDS mod: instead of `$green-300`
+$form-valid-border-color-dark:                    $ouds-color-border-emphasized-dark !default; // OUDS mod: instead of `$green-300`
+$form-invalid-color-dark:                         $ouds-color-action-negative-enabled-dark !default; // OUDS mod: instead of `$red-300`
+$form-invalid-border-color-dark:                  $ouds-color-action-negative-enabled-dark !default; // OUDS mod: instead of `$red-300`
 $form-switch-unchecked-invalid-border-color-dark: $form-invalid-border-color-dark !default; // OUDS mod
 // scss-docs-end form-validation-colors-dark
 

diff --git a/scss/_variables.scss b/scss/_variables.scss
@@ -368,7 +368,7 @@ $escaped-characters: (
 $chevron-icon:          url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'><path d='M597.22 225 402.78 421.43 325 500l77.78 78.57L597.22 775 675 696.43 480.56 500 675 303.57z'/></svg>") !default;
 $cross-icon:            url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30' fill='#{$black}'><path d='m15 17.121-8.132 8.132-2.121-2.12L12.879 15 4.747 6.868l2.12-2.121L15 12.879l8.132-8.132 2.12 2.121L17.122 15l8.132 8.132-2.121 2.12L15 17.123z'/></svg>") !default;
 $cross-icon-stroke:     url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='116 116 767 767' fill='#{$black}'><path d='M817.493 676.165a49.977 49.977 0 0 1 0 70.664l-70.664 70.664a49.977 49.977 0 0 1-70.664 0L499.5 640.828 322.835 817.493a49.977 49.977 0 0 1-70.664 0l-70.664-70.664a49.977 49.977 0 0 1 0-70.664L358.172 499.5 181.507 322.835a49.977 49.977 0 0 1 0-70.664l70.664-70.664a49.977 49.977 0 0 1 70.664 0L499.5 358.172l176.665-176.665a49.977 49.977 0 0 1 70.664 0l70.664 70.664a49.977 49.977 0 0 1 0 70.664L640.828 499.5Z'/></svg>") !default;
-$check-icon:            url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 12'><path fill='#{$black}' d='M13 0 5 8 2 5 0 7l5 5L15 2z'/></svg>") !default;
+$check-icon:            url("data:image/svg+xml,<svg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'><path fill='#000' fill-rule='evenodd' d='M875,240a64.568,64.568,0,0,0-108.864-47.408l-0.011-.012L383.621,565,257.594,424.648l-0.011.014a64.372,64.372,0,0,0-87.784,3.375l-25.862,26a65.23,65.23,0,0,0-4.758,86.56l-0.011.008,206.9,260,0.01-.008a64.407,64.407,0,0,0,100.953,0l0.011,0.009,413.793-520-0.011-.008A64.916,64.916,0,0,0,875,240Z' transform='scale(.1)'/></svg>") !default;
 $burger-icon:           url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30' fill='#{$black}'><path d='M28 21v2H2v-2h26Zm0-7v2H2v-2h26Zm0-7v2H2V7h26Z'/></svg>") !default;
 $burger-icon-small:     url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 25 25' fill='#{$black}'><path d='M2 19h21v-2H2v2Zm0-6h21v-2H2v2Zm0-6h21V5H2v2Z'/></svg>") !default;
 $success-icon:          url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 125 125'><path fill='#{$success}' d='M62.5 0a62.5 62.5 0 1 0 0 125 62.5 62.5 0 0 0 0-125zm28 29.4c3.3 0 6 2.6 6 5.9a5.9 5.9 0 0 1-1.3 3.7L57.7 86a5.8 5.8 0 0 1-9.1 0L29.8 62.5c-.8-1-1.2-2.3-1.2-3.7a5.9 5.9 0 0 1 1.7-4.1l2.3-2.4a5.8 5.8 0 0 1 4.2-1.7 5.8 5.8 0 0 1 3.8 1.4L52 64.7 86.6 31a5.8 5.8 0 0 1 4-1.6z'/></svg>") !default;
@@ -1054,44 +1054,40 @@ $form-color-disabled-filter:            brightness(0) invert(1) brightness(.8) !
 // scss-docs-end form-input-variables
 
 // scss-docs-start form-check-variables
-$form-check-input-width:                  1em !default;
-$form-check-min-height:                   calc(#{$font-size-base} * #{$input-btn-line-height}) !default; // stylelint-disable-line function-disallowed-list
-$form-check-padding-start:                $form-check-input-width + .5em !default;
-$form-check-margin-bottom:                .125rem !default;
-$form-check-label-padding-top:            .4375rem !default; // OUDS mod
-$form-check-label-color:                  null !default;
-$form-check-label-cursor:                 null !default;
-$form-check-transition:                   null !default;
-$form-check-filter:                       $invert-filter !default; // OUDS mod
-
-$form-check-input-active-filter:          null !default;
-$form-check-input-active-bg-color:        $component-active-bg !default; // OUDS mod
-
-$form-check-input-bg:                     $input-bg !default;
-$form-check-input-border:                 var(--#{$prefix}border-width) solid $input-border-color !default; // OUDS mod: instead of `var(--#{$prefix}border-width) solid var(--#{$prefix}border-color)`
-$form-check-input-border-radius:          0 !default;
-$form-check-radio-border-radius:          50% !default;
-$form-check-input-focus-border:           null !default;
-$form-check-input-focus-box-shadow:       $focus-ring-box-shadow !default;
-
-$form-check-input-checked-color:          $component-active-color !default;
-$form-check-input-checked-bg-color:       $component-active-bg !default;
-$form-check-input-checked-border-color:   $form-check-input-checked-bg-color !default;
-$form-check-input-checked-bg-image:       var(--#{$prefix}check-icon) !default;
-$form-check-input-disabled-color:         $gray-900 !default; // OUDS mod
-$form-check-input-disabled-filter:        var(--#{$prefix}form-check-filter) !default; // OUDS mod
-$form-check-radio-checked-bg-image:       url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='2' fill='#{$form-check-input-checked-color}'/></svg>") !default;
-
-$form-check-input-indeterminate-color:          $form-check-input-checked-color !default;
-$form-check-input-indeterminate-bg-color:       $form-check-input-checked-bg-color !default;
-$form-check-input-indeterminate-border-color:   $form-check-input-indeterminate-bg-color !default;
-$form-check-input-indeterminate-bg-image:       url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 3'><path fill='#{$form-check-input-indeterminate-color}' d='M0 0h10v3H0z'/></svg>") !default;
-
-$form-check-input-disabled-opacity:        null !default;
-$form-check-label-disabled-opacity:        null !default;
-$form-check-btn-check-disabled-opacity:    null !default;
-
-$form-check-inline-margin-end:    1rem !default;
+$form-check-input-width:                  $ouds-checkbox-size-indicator !default; // OUDS mod: instead of `1em`
+$form-check-min-height:                   $ouds-control-item-size-min-height !default; // OUDS mod: instead of `$font-size-base * $line-height-base`
+// OUDS mod: no `$form-check-padding-start`
+// OUDS mod: no `$form-check-margin-bottom`
+// OUDS mod: no `$form-check-label-color`
+$form-check-label-cursor:                 pointer !default; // OUDS mod: instead of `null`
+// OUDS mod: no `$form-check-transition`
+// OUDS mod: no `$form-check-filter`
+
+// OUDS mod: no `$form-check-input-active-filter`
+
+// ouds mod: no `$form-check-input-color`
+// OUDS mod: no `$form-check-input-border`
+$form-check-input-border-radius:          $ouds-checkbox-border-radius !default; // OUDS mod: instead of `0`
+$form-check-radio-border-radius:          $ouds-radio-button-border-radius !default; // OUDS mod: instead of `0`
+// OUDS mod: no `$form-check-input-focus-border`
+// OUDS mod: no `$form-check-input-focus-box-shadow`
+
+// OUDS mod: no `$form-check-input-checked-color`
+// OUDS mod: no `$form-check-input-checked-bg-color`
+// OUDS mod: no `$form-check-input-checked-border-color`
+$form-check-input-checked-bg-image:       url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='#000' d='m15.262 7.047-6.034 7a.97.97 0 0 1-.737.328.97.97 0 0 1-.736-.329l-3.017-3.5A.833.833 0 0 1 4.53 10c0-.242.106-.46.276-.619l.378-.35a.978.978 0 0 1 .666-.256c.235 0 .449.08.614.21l1.838 1.89 5.578-5.013a.98.98 0 0 1 .645-.237c.52 0 .943.392.943.875a.833.833 0 0 1-.207.547Z'/></svg>") !default; // OUDS mod: custom SVG
+$form-check-radio-checked-bg-image:       url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='#000' d='M14.0635 10C14.0635 12.2437 12.2446 14.0625 10.001 14.0625C7.75732 14.0625 5.93848 12.2437 5.93848 10C5.93848 7.75634 7.75732 5.9375 10.001 5.9375C12.2446 5.9375 14.0635 7.75634 14.0635 10Z'/></svg>") !default; // OUDS mod: custom SVG
+
+// OUDS mod: no `$form-check-input-indeterminate-color`
+// OUDS mod: no `$form-check-input-indeterminate-bg-color`
+// OUDS mod: no `$form-check-input-indeterminate-border-color`
+$form-check-input-indeterminate-bg-image:       url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='#000' d='M4.5 9.375c0-.345.28-.625.625-.625h9.75c.345 0 .625.28.625.625v1.25c0 .345-.28.625-.625.625h-9.75a.625.625 0 0 1-.625-.625v-1.25Z'/></svg>") !default; // OUDS mod: custom SVG
+
+// OUDS mod: no `$form-check-input-disabled-opacity`
+// OUDS mod: no `$form-check-label-disabled-opacity`
+// OUDS mod: no `$form-check-btn-check-disabled-opacity`
+
+// OUDS mod: no `$form-check-inline-margin-end`
 
 // OUDS mod: Star rating
 $form-star-size:                        1.5625rem !default;
@@ -1107,10 +1103,10 @@ $form-star-rating-checked-icon:         escape-svg(url("data:image/svg+xml,<svg
 $form-star-rating-unchecked-icon:       escape-svg(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 25 25'><path fill='transparent' stroke='#{$black}' d='m12.5 4.523 2.016 6.227 6.542-.005-5.296 3.843 2.027 6.224L12.5 16.96l-5.289 3.852 2.027-6.224-5.296-3.843 6.542.005L12.5 4.523Z'/></svg>")) !default;
 $form-star-rating-sm-checked-icon:      escape-svg(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='#{$black}' stroke='#{$black}' d='M10 3.943 11.54 8.7l4.998-.004-4.046 2.936 1.548 4.755L10 13.444l-4.04 2.943 1.548-4.755-4.046-2.936L8.46 8.7 10 3.943Z'/></svg>")) !default;
 $form-star-rating-sm-unchecked-icon:    escape-svg(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='transparent' stroke='#{$black}' d='M10 3.943 11.54 8.7l4.998-.004-4.046 2.936 1.548 4.755L10 13.444l-4.04 2.943 1.548-4.755-4.046-2.936L8.46 8.7 10 3.943Z'/></svg>")) !default;
-
 // End mod
 // scss-docs-end form-check-variables
 
+// fusv-disable
 // scss-docs-start form-switch-variables
 // OUDS mod: no $form-switch-color
 $form-switch-width:               $spacer * 3 !default; // OUDS mod
@@ -1146,6 +1142,7 @@ $form-switch-checked-focus-inner:               var(--#{$prefix}color-border-foc
 $form-switch-checked-focus-outer:               var(--#{$prefix}color-border-focus) !default; // OUDS mod
 $form-switch-unchecked-invalid-border-color:    #31c3eb !default; // OUDS mod: will be rendered red when mixed with the filter
 // scss-docs-end form-switch-variables
+// fusv-enable
 
 // scss-docs-start input-group-variables
 $input-group-addon-padding-y:           $input-padding-y !default;
@@ -1253,10 +1250,10 @@ $form-feedback-color:               null !default; // OUDS mod
 // scss-docs-end form-feedback-variables
 
 // scss-docs-start form-validation-colors
-$form-valid-color:                  var(--#{$prefix}success-text-emphasis) !default; // OUDS mod: instead of `$form-feedback-valid-color`
-$form-valid-border-color:           var(--#{$prefix}success) !default; // OUDS mod: instead of `$form-feedback-valid-color`
-$form-invalid-color:                var(--#{$prefix}danger-text-emphasis) !default; // OUDS mod: instead of `$form-feedback-invalid-color`
-$form-invalid-border-color:         var(--#{$prefix}danger) !default; // OUDS mod: instead of `$form-feedback-invalid-color`
+$form-valid-color:                  $ouds-color-content-default-light !default; // OUDS mod: instead of `$form-feedback-valid-color`
+$form-valid-border-color:           $ouds-color-border-emphasized-light !default; // OUDS mod: instead of `$form-feedback-valid-color`
+$form-invalid-color:                $ouds-color-action-negative-enabled-light !default; // OUDS mod: instead of `$form-feedback-invalid-color`
+$form-invalid-border-color:         $ouds-color-action-negative-enabled-light !default; // OUDS mod: instead of `$form-feedback-invalid-color`
 // scss-docs-end form-validation-colors
 
 // scss-docs-start form-validation-states