tabler/core/scss/tests/_deprecated.test.scss

// The deprecated functions, mixins and parameters keep the results they had in
// 1.5, so a project written for it still compiles to the same thing.

@use 'sass:color';
@use 'sass:map';
@use '../config' as *;

@include describe('deprecated functions') {
  @include it('theme-color-lighter mixes 10% of the colour into the background') {
    @include assert-equal(theme-color-lighter(#000), color.mix(#000, #fff, 10%));
    @include assert-equal(theme-color-lighter(#fff, #000), color.mix(#fff, #000, 10%));
  }

  @include it('theme-color-darker shades by 10%') {
    @include assert-equal(theme-color-darker(#fff), shade-color(#fff, 10%));
  }

  @include it('map-get-multiple keeps the listed keys') {
    @include assert-equal(
      map-get-multiple(
        (
          a: 1,
          b: 2,
          c: 3,
        ),
        (a, c)
      ),
      (
        a: 1,
        c: 3,
      )
    );
  }

  @include it('map-merge-multiple merges every map') {
    @include assert-equal(
      map-merge-multiple(
        (
          a: 1,
        ),
        (
          b: 2,
        ),
        (
          a: 3,
        )
      ),
      (
        a: 3,
        b: 2,
      )
    );
  }

  @include it('breakpoint-prev returns the breakpoint one step down') {
    @include assert-equal(
      breakpoint-prev(
        md,
        (
          xs: 0,
          sm: 576px,
          md: 768px,
        )
      ),
      sm
    );
    @include assert-equal(
      breakpoint-prev(
        xs,
        (
          xs: 0,
          sm: 576px,
        )
      ),
      null
    );
  }

  @include it('varify wraps every entry in var()') {
    @include assert-equal('#{varify((a, b))}', 'var(--a) var(--b)');
  }
}

@include describe('deprecated variables') {
  @include it('keep their 1.5 defaults') {
    @include assert-equal($input-btn-focus-width, 0.25rem);
    @include assert-equal($form-hint-margin-top, 0.25rem);
    @include assert-equal(map.has-key($theme-colors-rgb, 'primary'), true);
  }
}

@include describe('deprecated mixin parameters') {
  @include it('focus-ring($show-border: true) draws the ring over the border') {
    @include assert() {
      @include output() {
        .t {
          @include focus-ring($show-border: true);
        }
      }
      @include expect() {
        .t {
          outline: var(--focus-ring, var(--focus-ring-width) solid var(--focus-ring-color));
          outline-offset: var(--focus-ring-offset);
        }
      }
    }
  }

  @include it('media-breakpoint-down-than wraps content below the previous breakpoint') {
    @include assert() {
      @include output() {
        @include media-breakpoint-down-than(
          md,
          (
            xs: 0,
            sm: 576px,
            md: 768px,
          )
        ) {
          .t {
            color: red;
          }
        }
      }
      @include expect() {
        @media (max-width: 575.98px) {
          .t {
            color: red;
          }
        }
      }
    }
  }
}