tabler/core/scss/ui/_patterns.scss

@use '../config' as *;

@mixin pattern-base($opacity: $pattern-opacity) {
  --pattern-color: var(--body-color);
  --pattern-size: #{$pattern-size};
  --pattern-opacity: calc(var(--pattern-opacity-factor, #{$pattern-opacity-factor}) * #{$opacity});
  --pattern-fill: #{color-transparent(var(--pattern-color), var(--pattern-opacity))};
  background-clip: padding-box;
}

// The shared tokens are written once for every pattern through @extend; a
// pattern with a different opacity only overrides --pattern-opacity.
%pattern-base {
  @include pattern-base();
}

@mixin pattern-opacity($opacity) {
  --pattern-opacity: calc(var(--pattern-opacity-factor, #{$pattern-opacity-factor}) * #{$opacity});
}

.bg-pattern-transparent {
  @extend %pattern-base;
  background-image: repeating-conic-gradient(var(--pattern-fill) 0% 25%, transparent 0% 50%);
  background-size: calc(var(--pattern-size) * 2) calc(var(--pattern-size) * 2);
}

.bg-pattern-diagonal {
  @extend %pattern-base;
  background-image: repeating-linear-gradient(-45deg, var(--pattern-fill) 0 1px, transparent 0 50%);
  background-size: var(--pattern-size) var(--pattern-size);
}

.bg-pattern-diagonal-2 {
  @extend %pattern-base;
  background-image: repeating-linear-gradient(45deg, var(--pattern-fill) 0 1px, transparent 0 50%);
  background-size: var(--pattern-size) var(--pattern-size);
}

.bg-pattern-dots {
  @extend %pattern-base;
  @include pattern-opacity(20%);
  --pattern-dot: max(1px, calc(var(--pattern-size) * 0.1));
  background-image: radial-gradient(circle, var(--pattern-fill) var(--pattern-dot), transparent calc(var(--pattern-dot) + 0.5px)), radial-gradient(circle, var(--pattern-fill) var(--pattern-dot), transparent calc(var(--pattern-dot) + 0.5px));
  background-position:
    0 0,
    calc(var(--pattern-size)) calc(var(--pattern-size));
  background-size: calc(var(--pattern-size) * 2) calc(var(--pattern-size) * 2);
}

.bg-pattern-rectangles {
  @extend %pattern-base;
  @include pattern-opacity(3%);
  background-image: repeating-linear-gradient(45deg, var(--pattern-fill) 25%, transparent 25%, transparent 75%, var(--pattern-fill) 75%, var(--pattern-fill)), repeating-linear-gradient(45deg, var(--pattern-fill) 25%, transparent 25%, transparent 75%, var(--pattern-fill) 75%, var(--pattern-fill));
  background-position:
    -1px -1px,
    calc(var(--pattern-size) - 1px) calc(var(--pattern-size) - 1px);
  background-size: calc(var(--pattern-size) * 2) calc(var(--pattern-size) * 2);
}

.bg-pattern-lines {
  @extend %pattern-base;
  @include pattern-opacity(6%);
  background-image: repeating-linear-gradient(0deg, var(--pattern-fill), var(--pattern-fill) 1px, transparent 1px, transparent);
  background-position: -1px -1px;
  background-size: var(--pattern-size) var(--pattern-size);
}

.bg-pattern-lines-vertical {
  @extend %pattern-base;
  @include pattern-opacity(6%);
  background-image: repeating-linear-gradient(90deg, var(--pattern-fill), var(--pattern-fill) 1px, transparent 1px, transparent);
  background-position: -1px -1px;
  background-size: var(--pattern-size) var(--pattern-size);
}

.bg-pattern-grid {
  @extend %pattern-base;
  @include pattern-opacity(6%);
  background-image: linear-gradient(to right, var(--pattern-fill) 1px, transparent 1px), linear-gradient(to bottom, var(--pattern-fill) 1px, transparent 1px);
  background-position:
    -1px -1px,
    -1px -1px;
  background-size: calc(var(--pattern-size) * 2) calc(var(--pattern-size) * 2);
}

.bg-pattern-grid-diagonal {
  @extend %pattern-base;
  background-image: linear-gradient(45deg, transparent 49%, var(--pattern-fill) 49%, var(--pattern-fill) 51%, transparent 51%), linear-gradient(-45deg, transparent 49%, var(--pattern-fill) 49%, var(--pattern-fill) 51%, transparent 51%);
  background-position: center center;
  background-size: calc(var(--pattern-size) * 2) calc(var(--pattern-size) * 2);
}

.bg-pattern-blueprint {
  @extend %pattern-base;
  @include pattern-opacity(6%);
  --pattern-line: var(--pattern-fill);
  background-image: linear-gradient(var(--pattern-line) 2px, transparent 2px), linear-gradient(90deg, var(--pattern-line) 2px, transparent 2px), linear-gradient(var(--pattern-line) 1px, transparent 1px), linear-gradient(90deg, var(--pattern-line) 1px, transparent 1px);
  background-position:
    -3px -3px,
    -3px -3px,
    -2px -2px,
    -2px -2px;
  background-size:
    calc(var(--pattern-size) * 10) calc(var(--pattern-size) * 10),
    calc(var(--pattern-size) * 10) calc(var(--pattern-size) * 10),
    calc(var(--pattern-size) * 2) calc(var(--pattern-size) * 2),
    calc(var(--pattern-size) * 2) calc(var(--pattern-size) * 2);
}

.bg-pattern-cross-dots {
  @extend %pattern-base;
  background-image: radial-gradient(var(--pattern-fill) 1px, transparent 1px), radial-gradient(var(--pattern-fill) 1px, transparent 1px);
  background-position:
    0 0,
    var(--pattern-size) var(--pattern-size);
  background-size: calc(var(--pattern-size) * 2) calc(var(--pattern-size) * 2);
}

.bg-pattern-circles {
  @extend %pattern-base;
  background-image:
    radial-gradient(circle at center top, transparent 9%, var(--pattern-fill) 10%, var(--pattern-fill) 15%, transparent 16%), radial-gradient(circle at center bottom, transparent 9%, var(--pattern-fill) 10%, var(--pattern-fill) 15%, transparent 16%),
    radial-gradient(circle at right center, transparent 9%, var(--pattern-fill) 10%, var(--pattern-fill) 15%, transparent 16%), radial-gradient(circle at left center, transparent 9%, var(--pattern-fill) 10%, var(--pattern-fill) 15%, transparent 16%);
  background-position: 0 0;
  background-size: calc(var(--pattern-size) * 3) calc(var(--pattern-size) * 3);
}

.bg-pattern-diagonal-stripes {
  @extend %pattern-base;
  @include pattern-opacity(5%);
  background-image: repeating-linear-gradient(45deg, transparent, transparent var(--pattern-size), var(--pattern-fill) var(--pattern-size), var(--pattern-fill) calc(2 * var(--pattern-size)));
  background-repeat: no-repeat;
}

.bg-pattern-diagonal-stripes-2 {
  @extend %pattern-base;
  @include pattern-opacity(5%);
  background-image: repeating-linear-gradient(-45deg, transparent, transparent var(--pattern-size), var(--pattern-fill) var(--pattern-size), var(--pattern-fill) calc(2 * var(--pattern-size)));
  background-repeat: no-repeat;
}

.bg-pattern-zigzag {
  @extend %pattern-base;
  @include pattern-opacity(5%);
  background:
    linear-gradient(135deg, var(--pattern-fill) 25%, transparent 25%) calc(-1 * var(--pattern-size)) 0,
    linear-gradient(225deg, var(--pattern-fill) 25%, transparent 25%) calc(-1 * var(--pattern-size)) 0,
    linear-gradient(315deg, var(--pattern-fill) 25%, transparent 25%),
    linear-gradient(45deg, var(--pattern-fill) 25%, transparent 25%);
  background-clip: padding-box;
  background-size: calc(2 * var(--pattern-size)) calc(2 * var(--pattern-size));
}

.bg-pattern-vertical-stripes {
  @extend %pattern-base;
  @include pattern-opacity(5%);
  background-image: repeating-linear-gradient(90deg, transparent, transparent var(--pattern-size), var(--pattern-fill) var(--pattern-size), var(--pattern-fill) calc(2 * var(--pattern-size)));
}

.bg-pattern-horizontal-stripes {
  @extend %pattern-base;
  @include pattern-opacity(5%);
  background-image: repeating-linear-gradient(0deg, transparent, transparent var(--pattern-size), var(--pattern-fill) var(--pattern-size), var(--pattern-fill) calc(2 * var(--pattern-size)));
  background-position: -1px -1px;
}

// Color variants
@each $color, $value in $theme-colors {
  .bg-pattern-#{$color} {
    --pattern-color: #{$value};
  }
}

// Sizes
$sizes: (
  'sm': $pattern-size-sm,
  'md': $pattern-size-md,
  'lg': $pattern-size-lg,
  'xl': $pattern-size-xl,
);

@each $size, $value in $sizes {
  .bg-pattern-#{$size} {
    --pattern-size: #{$value};
  }
}

@each $key, $value in $pattern-opacities {
  .bg-pattern-opacity-#{$key} {
    --pattern-opacity: #{$value};
  }
}