@abrasileirado/dsgovbr-bootstraped 0.1.2 → 0.2.0

package/vendor/bootstrap/scss/tests/mixins/_color-contrast.test.scss

@@ -0,0 +1,139 @@
+@import "../../functions";
+@import "../../variables";
+@import "../../variables-dark";
+@import "../../maps";
+@import "../../mixins";
+
+@include describe("color-contrast function") {
+  @include it("should return a color when contrast ratio equals minimum requirement (WCAG 2.1 compliance)") {
+    // Test case: Background color that produces contrast ratio close to 4.5:1
+    // This tests the WCAG 2.1 requirement that contrast should be "at least 4.5:1" (>= 4.5)
+    // rather than "strictly greater than 4.5:1" (> 4.5)
+
+    // #777777 produces 4.4776:1 contrast ratio with white text
+    // Since this is below the 4.5:1 threshold, it should return the highest available contrast color
+    $test-background: #777;
+    $result: color-contrast($test-background);
+
+    @include assert-equal($result, $black, "Should return black (highest available contrast) for background with 4.4776:1 contrast ratio (below threshold)");
+  }
+
+  @include it("should return a color when contrast ratio is above minimum requirement") {
+    // Test case: Background color that produces contrast ratio above 4.5:1
+    // #767676 produces 4.5415:1 contrast ratio with white text
+    $test-background: #767676;
+    $result: color-contrast($test-background);
+
+    @include assert-equal($result, $white, "Should return white for background with 4.5415:1 contrast ratio (above threshold)");
+  }
+
+  @include it("should return a color when contrast ratio is below minimum requirement") {
+    // Test case: Background color that produces contrast ratio below 4.5:1
+    // #787878 produces 4.4155:1 contrast ratio with white text
+    $test-background: #787878;
+    $result: color-contrast($test-background);
+
+    // Should return the color with the highest available contrast ratio
+    @include assert-equal($result, $black, "Should return black (highest available contrast) for background with 4.4155:1 contrast ratio (below threshold)");
+  }
+
+  @include it("should handle edge case with very light background") {
+    // Test case: Very light background that should return dark text
+    $test-background: #f8f9fa; // Very light gray
+    $result: color-contrast($test-background);
+
+    @include assert-equal($result, $color-contrast-dark, "Should return dark text for very light background");
+  }
+
+  @include it("should handle edge case with very dark background") {
+    // Test case: Very dark background that should return light text
+    $test-background: #212529; // Very dark gray
+    $result: color-contrast($test-background);
+
+    @include assert-equal($result, $color-contrast-light, "Should return light text for very dark background");
+  }
+
+  @include it("should work with custom minimum contrast ratio") {
+    // Test case: Using a custom minimum contrast ratio
+    $test-background: #666;
+    $result: color-contrast($test-background, $color-contrast-dark, $color-contrast-light, 3);
+
+    @include assert-equal($result, $white, "Should return white when using custom minimum contrast ratio of 3.0");
+  }
+
+  @include it("should test contrast ratio calculation accuracy") {
+    // Test case: Verify that contrast-ratio function works correctly
+    $background: #767676;
+    $foreground: $white;
+    $ratio: contrast-ratio($background, $foreground);
+    // Bootstrap's implementation calculates this as ~4.5415, not exactly 4.5, due to its luminance math.
+    // We use 4.54 as the threshold for this test to match the actual implementation.
+    @include assert-true($ratio >= 4.54 and $ratio <= 4.55, "Contrast ratio should be approximately 4.54:1 (Bootstrap's math)");
+  }
+
+  @include it("should test luminance calculation") {
+    // Test case: Verify luminance function works correctly
+    $white-luminance: luminance($white);
+    $black-luminance: luminance($black);
+
+    @include assert-equal($white-luminance, 1, "White should have luminance of 1");
+    @include assert-equal($black-luminance, 0, "Black should have luminance of 0");
+  }
+
+  @include it("should handle rgba colors correctly") {
+    // Test case: Test with rgba colors
+    $test-background: rgba(118, 118, 118, 1); // Same as #767676
+    $result: color-contrast($test-background);
+
+    @include assert-equal($result, $white, "Should handle rgba colors correctly");
+  }
+
+  @include it("should test the WCAG 2.1 boundary condition with color below threshold") {
+    // Test case: Background color that produces contrast ratio below 4.5:1
+    // #787878 produces 4.4155:1 contrast ratio with white
+    $test-background: #787878; // Produces 4.4155:1 contrast ratio
+    $contrast-ratio: contrast-ratio($test-background, $white);
+
+    // Verify the contrast ratio is below 4.5:1
+    @include assert-true($contrast-ratio < 4.5, "Contrast ratio should be below 4.5:1 threshold");
+
+    // The color-contrast function should return the color with highest available contrast
+    $result: color-contrast($test-background);
+    @include assert-equal($result, $black, "color-contrast should return black (highest available contrast) for below-threshold ratio");
+  }
+
+  @include it("should test the WCAG 2.1 boundary condition with color at threshold") {
+    // Test case: Background color that produces contrast ratio close to 4.5:1
+    // #777777 produces 4.4776:1 contrast ratio with white
+    $test-background: #777; // Produces 4.4776:1 contrast ratio
+    $contrast-ratio: contrast-ratio($test-background, $white);
+
+    // Verify the contrast ratio is below 4.5:1 threshold
+    @include assert-true($contrast-ratio < 4.5, "Contrast ratio is below threshold, function should handle gracefully");
+  }
+
+  @include it("should demonstrate the difference between > and >= operators") {
+    // Test case: Demonstrates the difference between > and >= operators
+    // Uses #767676 with a custom minimum contrast ratio that matches its actual ratio (4.5415)
+    // With > 4.5415: should return black (fallback to highest available)
+    // With >= 4.5415: should return white (meets threshold)
+
+    $test-background: #767676; // Produces 4.5415:1 contrast ratio
+    $actual-ratio: contrast-ratio($test-background, $white);
+
+    // Test with a custom minimum that matches the actual ratio
+    $result: color-contrast($test-background, $color-contrast-dark, $color-contrast-light, $actual-ratio);
+
+    // Should return white when using >= implementation
+    @include assert-equal($result, $white, "color-contrast should return white when using exact ratio as threshold (>= implementation)");
+  }
+
+  @include it("should test additional working colors above threshold") {
+    // Test case: Background color that produces contrast ratio well above 4.5:1
+    // #757575 produces 4.6047:1 contrast ratio with white text
+    $test-background: #757575; // Produces 4.6047:1 contrast ratio
+    $result: color-contrast($test-background);
+
+    @include assert-equal($result, $white, "Should return white for background with 4.6047:1 contrast ratio (well above threshold)");
+  }
+}

package/vendor/bootstrap/scss/tests/mixins/_color-modes.test.scss

@@ -0,0 +1,69 @@
+// stylelint-disable selector-attribute-quotes
+
+@import "../../functions";
+@import "../../variables";
+@import "../../variables-dark";
+@import "../../maps";
+@import "../../mixins";
+
+@include describe("global $color-mode-type: data") {
+  @include it("generates data attribute selectors for dark mode") {
+    @include assert() {
+      @include output() {
+        @include color-mode(dark) {
+          .element {
+            color: var(--bs-primary-text-emphasis);
+            background-color: var(--bs-primary-bg-subtle);
+          }
+        }
+        @include color-mode(dark, true) {
+          --custom-color: #{mix($indigo, $blue, 50%)};
+        }
+      }
+      @include expect() {
+        [data-bs-theme=dark] .element {
+          color: var(--bs-primary-text-emphasis);
+          background-color: var(--bs-primary-bg-subtle);
+        }
+        [data-bs-theme=dark] {
+          --custom-color: #3a3ff8;
+        }
+      }
+    }
+  }
+}
+
+@include describe("global $color-mode-type: media-query") {
+  @include it("generates media queries for dark mode") {
+    $color-mode-type: media-query !global;
+
+    @include assert() {
+      @include output() {
+        @include color-mode(dark) {
+          .element {
+            color: var(--bs-primary-text-emphasis);
+            background-color: var(--bs-primary-bg-subtle);
+          }
+        }
+        @include color-mode(dark, true) {
+          --custom-color: #{mix($indigo, $blue, 50%)};
+        }
+      }
+      @include expect() {
+        @media (prefers-color-scheme: dark) {
+          .element {
+            color: var(--bs-primary-text-emphasis);
+            background-color: var(--bs-primary-bg-subtle);
+          }
+        }
+        @media (prefers-color-scheme: dark) {
+          :root {
+            --custom-color: #3a3ff8;
+          }
+        }
+      }
+    }
+
+    $color-mode-type: data !global;
+  }
+}

package/vendor/bootstrap/scss/tests/mixins/_media-query-color-mode-full.test.scss

@@ -0,0 +1,8 @@
+$color-mode-type: media-query;
+
+@import "../../bootstrap";
+
+@include describe("global $color-mode-type: media-query") {
+  @include it("compiles entirely Bootstrap CSS with media-query color mode") { // stylelint-disable-line block-no-empty
+  }
+}

package/vendor/bootstrap/scss/tests/mixins/_utilities.test.scss

@@ -0,0 +1,393 @@
+$prefix: bs-;
+$enable-important-utilities: false;
+
+// Important: Do not import rfs to check that the mixin just calls the appropriate functions from it
+@import "../../mixins/utilities";
+
+@mixin test-generate-utility($params...) {
+  @include assert() {
+    @include output() {
+      @include generate-utility($params...);
+    }
+
+    @include expect() {
+      @content;
+    }
+  }
+}
+
+@include describe(generate-utility) {
+  @include it("generates a utility class for each value") {
+    @include test-generate-utility(
+      (
+        property: "padding",
+        values: (small: .5rem, large: 2rem)
+      )
+    ) {
+      .padding-small {
+        padding: .5rem;
+      }
+
+      .padding-large {
+        padding: 2rem;
+      }
+    }
+  }
+
+  @include describe("global $enable-important-utilities: true") {
+    @include it("sets !important") {
+      $enable-important-utilities: true !global;
+
+      @include test-generate-utility(
+        (
+          property: "padding",
+          values: (small: .5rem, large: 2rem)
+        )
+      ) {
+        .padding-small {
+          padding: .5rem !important;
+        }
+
+        .padding-large {
+          padding: 2rem !important;
+        }
+      }
+
+      $enable-important-utilities: false !global;
+    }
+  }
+
+  @include describe("$utility") {
+    @include describe("values") {
+      @include it("supports null keys") {
+        @include test-generate-utility(
+          (
+            property: "padding",
+            values: (null: 1rem, small: .5rem, large: 2rem)
+          ),
+        ) {
+          .padding {
+            padding: 1rem;
+          }
+
+          .padding-small {
+            padding: .5rem;
+          }
+
+          .padding-large {
+            padding: 2rem;
+          }
+        }
+      }
+
+      @include it("ignores null values") {
+        @include test-generate-utility(
+          (
+            property: "padding",
+            values: (small: null, large: 2rem)
+          )
+        ) {
+          .padding-large {
+            padding: 2rem;
+          }
+        }
+      }
+
+      @include it("supports lists") {
+        @include test-generate-utility(
+          (
+            property: "padding",
+            values: 1rem 2rem
+          )
+        ) {
+          .padding-1rem {
+            padding: 1rem;
+          }
+
+          .padding-2rem {
+            padding: 2rem;
+          }
+        }
+      }
+
+      @include it("supports single values") {
+        @include test-generate-utility(
+          (
+            property: padding,
+            values: 1rem
+          )
+        ) {
+          .padding-1rem {
+            padding: 1rem;
+          }
+        }
+      }
+    }
+
+    @include describe("class & property") {
+      @include it("adds each property to the declaration") {
+        @include test-generate-utility(
+          (
+            class: padding-x,
+            property: padding-inline-start padding-inline-end,
+            values: 1rem
+          )
+        ) {
+          .padding-x-1rem {
+            padding-inline-start: 1rem;
+            padding-inline-end: 1rem;
+          }
+        }
+      }
+
+      @include it("uses the first property as class name") {
+        @include test-generate-utility(
+          (
+            property: padding-inline-start padding-inline-end,
+            values: 1rem
+          )
+        ) {
+          .padding-inline-start-1rem {
+            padding-inline-start: 1rem;
+            padding-inline-end: 1rem;
+          }
+        }
+      }
+
+      @include it("supports a null class to create classes straight from the values") {
+        @include test-generate-utility(
+          (
+            property: visibility,
+            class: null,
+            values: (
+              visible: visible,
+              invisible: hidden,
+            )
+          )
+        ) {
+          .visible {
+            visibility: visible;
+          }
+
+          .invisible {
+            visibility: hidden;
+          }
+        }
+      }
+    }
+
+    @include describe("state") {
+      @include it("Generates selectors for each states") {
+        @include test-generate-utility(
+          (
+            property: padding,
+            values: 1rem,
+            state: hover focus,
+          )
+        ) {
+          .padding-1rem {
+            padding: 1rem;
+          }
+
+          .padding-1rem-hover:hover {
+            padding: 1rem;
+          }
+
+          .padding-1rem-focus:focus {
+            padding: 1rem;
+          }
+        }
+      }
+    }
+
+    @include describe("css-var"){
+      @include it("sets a CSS variable instead of the property") {
+        @include test-generate-utility(
+          (
+            property: padding,
+            css-variable-name: padding,
+            css-var: true,
+            values: 1rem 2rem
+          )
+        ) {
+          .padding-1rem {
+            --bs-padding: 1rem;
+          }
+
+          .padding-2rem {
+            --bs-padding: 2rem;
+          }
+        }
+      }
+
+      @include it("defaults to class") {
+        @include test-generate-utility(
+          (
+            property: padding,
+            class: padding,
+            css-var: true,
+            values: 1rem 2rem
+          )
+        ) {
+          .padding-1rem {
+            --bs-padding: 1rem;
+          }
+
+          .padding-2rem {
+            --bs-padding: 2rem;
+          }
+        }
+      }
+    }
+
+    @include describe("local-vars") {
+      @include it("generates the listed variables") {
+        @include test-generate-utility(
+          (
+            property: color,
+            class: desaturated-color,
+            local-vars: (
+              color-opacity: 1,
+              color-saturation: .25
+            ),
+            values: (
+              blue: hsla(192deg, var(--bs-color-saturation), 0, var(--bs-color-opacity))
+            )
+          )
+        ) {
+          .desaturated-color-blue {
+            --bs-color-opacity: 1;
+            // Sass compilation will put a leading zero so we want to keep that one
+            // stylelint-disable-next-line @stylistic/number-leading-zero
+            --bs-color-saturation: 0.25;
+            color: hsla(192deg, var(--bs-color-saturation), 0, var(--bs-color-opacity));
+          }
+        }
+      }
+    }
+
+    @include describe("css-var & state") {
+      @include it("Generates a rule with for each state with a CSS variable") {
+        @include test-generate-utility(
+          (
+            property: padding,
+            css-var: true,
+            css-variable-name: padding,
+            values: 1rem,
+            state: hover focus,
+          )
+        ) {
+          .padding-1rem {
+            --bs-padding: 1rem;
+          }
+
+          .padding-1rem-hover:hover {
+            --bs-padding: 1rem;
+          }
+
+          .padding-1rem-focus:focus {
+            --bs-padding: 1rem;
+          }
+        }
+      }
+    }
+
+    @include describe("rtl") {
+      @include it("sets up RTLCSS for removal when false") {
+        @include test-generate-utility(
+          (
+            property: padding,
+            values: 1rem,
+            rtl: false
+          )
+        ) {
+          /* rtl:begin:remove */
+
+          .padding-1rem {
+            padding: 1rem;
+          }
+
+          /* rtl:end:remove */
+
+        }
+      }
+    }
+
+    @include describe("rfs") {
+      @include it("sets the fluid value when not inside media query") {
+        @include test-generate-utility(
+          (
+            property: padding,
+            values: 1rem,
+            rfs: true
+          )
+        ) {
+          .padding-1rem {
+            padding: rfs-fluid-value(1rem);
+          }
+        }
+      }
+
+      @include it("sets the value when inside the media query") {
+        @include test-generate-utility(
+          (
+            property: padding,
+            values: 1rem,
+            rfs: true
+          ),
+          $is-rfs-media-query: true
+        ) {
+          .padding-1rem {
+            padding: rfs-value(1rem);
+          }
+        }
+      }
+    }
+  }
+
+  @include describe("$infix") {
+    @include it("inserts the given infix") {
+      @include test-generate-utility(
+        (
+          property: "padding",
+          values: (null: 1rem, small: .5rem, large: 2rem)
+        ),
+        $infix: -sm
+      ) {
+        .padding-sm {
+          padding: 1rem;
+        }
+
+        .padding-sm-small {
+          padding: .5rem;
+        }
+
+        .padding-sm-large {
+          padding: 2rem;
+        }
+      }
+    }
+
+    @include it("strips leading - if class is null") {
+      @include test-generate-utility(
+        (
+          property: visibility,
+          class: null,
+          values: (
+            visible: visible,
+            invisible: hidden,
+          )
+        ),
+        -sm
+      ) {
+        .sm-visible {
+          visibility: visible;
+        }
+
+        .sm-invisible {
+          visibility: hidden;
+        }
+      }
+    }
+  }
+}

package/vendor/bootstrap/scss/tests/sass-true/register.js

@@ -0,0 +1,14 @@
+'use strict'
+
+const path = require('node:path')
+
+const runnerPath = path.join(__dirname, 'runner').replace(/\\/g, '/')
+
+require.extensions['.scss'] = (module, filename) => {
+  const normalizedFilename = filename.replace(/\\/g, '/')
+
+  return module._compile(`
+    const runner = require('${runnerPath}')
+    runner('${normalizedFilename}', { describe, it })
+    `, filename)
+}

package/vendor/bootstrap/scss/tests/sass-true/runner.js

@@ -0,0 +1,17 @@
+'use strict'
+
+const fs = require('node:fs')
+const path = require('node:path')
+const { runSass } = require('sass-true')
+
+module.exports = (filename, { describe, it }) => {
+  const data = fs.readFileSync(filename, 'utf8')
+  const TRUE_SETUP = '$true-terminal-output: false; @import "true";'
+  const sassString = TRUE_SETUP + data
+
+  runSass(
+    { describe, it, sourceType: 'string' },
+    sassString,
+    { loadPaths: [path.dirname(filename)] }
+  )
+}