tabler/core/scss/_props.scss

@import "config";

:root,
:host {
  /** Fonts */
  --#{$prefix}font-monospace: #{$font-family-monospace};
  --#{$prefix}font-sans-serif: #{$font-family-sans-serif};
  --#{$prefix}font-serif: #{$font-family-serif};
  --#{$prefix}font-comic: #{$font-family-comic};

  /** Gray colors */
  @each $name, $color in $gray-colors {
    --#{$prefix}#{$name}: #{$color};
    --#{$prefix}#{$name}-fg: #{$color};
  }

  --#{$prefix}white: #{$white};
  --#{$prefix}black: #{$black};
  --#{$prefix}dark: #{$dark};
  --#{$prefix}light: #{$light};

  /** Brand colors */
  --#{$prefix}brand: #{$primary};

  /** Theme colors */
  @each $name, $color in map-merge($theme-colors, $social-colors) {
    --#{$prefix}#{$name}: #{$color};
    --#{$prefix}#{$name}-fg: #{if(contrast-ratio($color) > $min-contrast-ratio, var(--#{$prefix}light), var(--#{$prefix}dark))};
    --#{$prefix}#{$name}-darker: #{theme-color-darker($color)};
    --#{$prefix}#{$name}-lighter: #{theme-color-lighter($color)};
    --#{$prefix}#{$name}-lightest: #{theme-color-lightest($color)};
  }

  /** Social colors */
  @each $name, $color in $social-colors {
    --#{$prefix}#{$name}: #{$color};
  }

  /** Spacers */
  @each $name, $value in $spacers {
    --#{$prefix}spacer-#{$name}: #{$value};
  }

  /** Font sizes */
  @each $name, $value in $font-weights {
    --#{$prefix}font-weight-#{$name}: #{$value};
  }

  @each $name, $value in $font-sizes {
    --#{$prefix}font-size-h#{$name}: #{$value};
  }

  @each $name, $value in $line-heights {
    --#{$prefix}line-height-#{$name}: #{$value};
  }

  /** Shadows */
  @each $name, $value in $box-shadows {
    --#{$prefix}shadow#{if($name, '-#{$name}', '')}: #{$value};
  }

  /** Border radiuses */
  --#{$prefix}border-radius-scale: 1;
  @each $name, $value in $border-radiuses {
    @if $name {
      --#{$prefix}border-radius-#{$name}: calc(#{$value} * var(--#{$prefix}border-radius-scale, 1));
    } @else {
      --#{$prefix}border-radius: #{$value};
    }
  }

  /** Backdrops */
  --#{$prefix}backdrop-opacity: #{$backdrop-opacity};
  --#{$prefix}backdrop-bg: var(--#{$prefix}bg-surface-dark);
  @each $name, $value in $backdrops {
    --#{$prefix}backdrop-bg#{if($name, '-#{$name}', '')}: #{$value};
  }
  --#{$prefix}backdrop-blur: #{$backdrop-blur};
  --#{$prefix}backdrop-filter: blur(var(--#{$prefix}backdrop-blur));
}