@luizleon/sf.prefeiturasp.vuecomponents 0.0.1

package/src/style/src/_mixins.scss

@@ -0,0 +1,633 @@
+@use "sass:map";
+@use "sass:list";
+@use "sass:color";
+@use "sass:math";
+@import "./variables";
+@import "./functions";
+
+@mixin avatar-colors($dark: false) {
+  $incr: 0;
+
+  @each $key, $value in $colors {
+    $bgColor: color.scale($value, $lightness: -40%);
+    $color: color.scale($value, $lightness: 90%);
+
+    @if ($dark) {
+      $bgColor: color.scale($value, $lightness: 40%);
+      $color: color.scale($value, $lightness: -90%);
+    }
+
+    &[data-cor="#{$incr}"] {
+      color: $color;
+      background-color: $bgColor;
+
+      &[data-hover]:hover {
+        box-shadow: 0 0 0 2px color.scale($bgColor, $alpha: -50%);
+        cursor: pointer;
+      }
+    }
+
+    $incr: $incr + 1;
+  }
+}
+
+@mixin colors-hsl($colors) {
+  @each $key, $value in $colors {
+    $h: hue($value);
+    $s: saturation($value);
+    $l: lightness($value);
+    #{$key}-color-h: $h;
+    #{$key}-color-s: $s;
+    #{$key}-color-l: $l;
+  }
+}
+
+@mixin colors($colors, $buildShades: true) {
+  @each $colorName, $colorValue in $colors {
+    @if ($buildShades) {
+      @each $shade, $color in makeColorPalette($colorValue) {
+        $var: $colorName + "-color" + $shade;
+        #{$var}: $color;
+      }
+    } @else {
+      $var: $colorName + "-color";
+      #{$var}: $colorValue;
+    }
+  }
+}
+
+@mixin button-colors($dark: false) {
+  $cores: themeColors($dark);
+  @each $colorKey, $colorValue in $cores {
+    $colorName: str-replace($colorKey, "--");
+    $color: #fff;
+    @if ($dark) {
+      $color: #000;
+    }
+    &[data-color="#{$colorName}"] {
+      @media (pointer: fine) {
+        &:focus-visible {
+          outline: 2px solid color.scale($colorValue, $alpha: -50%);
+          outline-offset: 1px;
+          border-color: var(--bg-color);
+        }
+      }
+      &:active {
+        transition: 0s;
+        background-color: color.scale($colorValue, $alpha: -70%);
+      }
+      &.sf-button-filled {
+        color: $color;
+        background-color: $colorValue;
+        &:active {
+          @if ($dark) {
+            background-color: color.scale($colorValue, $alpha: -30%);
+          } @else {
+            background-color: color.scale(
+              $colorValue,
+              $lightness: -30%
+            );
+          }
+        }
+      }
+      &.sf-button-outlined,
+      &.sf-button-text {
+        @if ($dark == false and $colorName == "warn") {
+          color: color.scale($colorValue, $lightness: -40%);
+          border-color: color.scale($colorValue, $lightness: -40%);
+        } @else {
+          color: $colorValue;
+          border-color: $colorValue;
+        }
+        background-color: transparent;
+        @media (pointer: fine) {
+          &:hover,
+          &:focus-visible {
+            background-color: color.scale($colorValue, $alpha: -80%);
+          }
+        }
+      }
+      &.sf-button-text {
+        border-color: transparent !important;
+      }
+    }
+  }
+}
+
+@mixin dot-colors() {
+  @each $colorKey, $colorValue in themeColors() {
+    @if list.index($theme-colors-list, $colorKey) != null {
+      $colorName: str-replace($colorKey, "--");
+      &[data-color="#{$colorName}"] {
+        background-color: var(#{$colorKey}-color);
+      }
+    }
+  }
+}
+
+@mixin input-colors() {
+  @each $colorKey, $colorValue in themeColors() {
+    @if list.index($theme-colors-list, $colorKey) != null {
+      $colorName: str-replace($colorKey, "--");
+      &[data-color="#{$colorName}"] {
+        color: var(#{$colorKey}-color);
+      }
+    }
+  }
+}
+
+@mixin toast-colors() {
+  @each $colorKey, $colorValue in themeColors() {
+    @if list.index($theme-colors-list, $colorKey) != null {
+      $colorName: str-replace($colorKey, "--");
+      &.toast-#{$colorName} {
+        --animate-bg-color: var(#{$colorKey}-color);
+      }
+    }
+  }
+}
+
+@mixin theme-colors {
+  @each $colorKey, $colorValue in themeColors() {
+    $colorName: str-replace($colorKey, "--");
+    $A: list.index($theme-colors-list, $colorKey) != null;
+    $B: list.index($theme-colors-hover-list, $colorKey) != null;
+    $C: str-replace($colorName, "surface") != $colorName;
+    @if $A or $B {
+      .sf-#{$colorName}-color {
+        color: var(#{$colorKey}-color);
+      }
+      .sf-#{$colorName}-bgcolor {
+        background-color: var(#{$colorKey}-color);
+      }
+    }
+    @if $C {
+      .sf-#{$colorName}-bgcolor {
+        background-color: var(#{$colorKey}-color);
+      }
+    }
+  }
+}
+
+@mixin sf-internal-icon-button {
+  isolation: isolate;
+  display: flex;
+  align-items: center;
+  background: none;
+  border: none;
+  padding: 8px;
+  position: relative;
+  border-radius: 50%;
+  @media (pointer: fine) {
+    &:hover {
+      cursor: pointer;
+      background-color: $icon-hover-color;
+    }
+    &:focus-visible {
+      outline-offset: 0px;
+    }
+  }
+
+  svg {
+    height: 24px;
+    width: 24px;
+    fill: var(--text-color);
+  }
+}
+
+/*
+Primeflex mixins
+*/
+@mixin style-class($prop, $map, $responsive: false, $states: false) {
+  @each $key, $val in $map {
+    .#{$prefix}#{$key} {
+      #{$prop}: #{$val} !important;
+    }
+  }
+
+  @if ($states) {
+    @each $key, $val in $map {
+      .focus#{$separator} {
+        &#{$prefix}#{$key}:focus {
+          #{$prop}: #{$val} !important;
+        }
+      }
+
+      .hover#{$separator} {
+        &#{$prefix}#{$key}:hover {
+          #{$prop}: #{$val} !important;
+        }
+      }
+
+      .active#{$separator} {
+        &#{$prefix}#{$key}:active {
+          #{$prop}: #{$val} !important;
+        }
+      }
+    }
+  }
+
+  @if ($responsive) {
+    @each $key, $val in $breakpoints {
+      @media screen and (min-width: #{$val}) {
+        .#{$key + $separator} {
+          @each $key, $val in $map {
+            &#{$prefix}#{$key} {
+              #{$prop}: #{$val} !important;
+            }
+          }
+
+          @if ($states) {
+            @each $key, $val in $map {
+              &focus#{$separator} {
+                &#{$prefix}#{$key}:focus {
+                  #{$prop}: #{$val} !important;
+                }
+              }
+
+              &hover#{$separator} {
+                &#{$prefix}#{$key}:hover {
+                  #{$prop}: #{$val} !important;
+                }
+              }
+
+              &active#{$separator} {
+                &#{$prefix}#{$key}:active {
+                  #{$prop}: #{$val} !important;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+@mixin color-class($name, $prop, $colors, $shades) {
+  @each $color in $colors {
+    .#{$prefix}#{$name}#{$color} {
+      @each $shade in $shades {
+        &-#{$shade} {
+          #{$prop}: var(--#{$color}-#{$shade}) !important;
+        }
+      }
+    }
+
+    .focus#{$separator} {
+      &#{$prefix}#{$name}#{$color} {
+        @each $shade in $shades {
+          &-#{$shade}:focus {
+            #{$prop}: var(--#{$color}-#{$shade}) !important;
+          }
+        }
+      }
+    }
+
+    .hover#{$separator} {
+      &#{$prefix}#{$name}#{$color} {
+        @each $shade in $shades {
+          &-#{$shade}:hover {
+            #{$prop}: var(--#{$color}-#{$shade}) !important;
+          }
+        }
+      }
+    }
+
+    .active#{$separator} {
+      &#{$prefix}#{$name}#{$color} {
+        @each $shade in $shades {
+          &-#{$shade}:active {
+            #{$prop}: var(--#{$color}-#{$shade}) !important;
+          }
+        }
+      }
+    }
+  }
+}
+
+@mixin surface-class($name, $prop, $shades) {
+  @each $shade in $shades {
+    .#{$prefix}#{$name}-#{$shade} {
+      #{$prop}: var(--surface-#{$shade}) !important;
+    }
+  }
+
+  @each $shade in $shades {
+    .focus#{$separator} {
+      &#{$prefix}#{$name}-#{$shade}:focus {
+        #{$prop}: var(--surface-#{$shade}) !important;
+      }
+    }
+
+    .hover#{$separator} {
+      &#{$prefix}#{$name}-#{$shade}:hover {
+        #{$prop}: var(--surface-#{$shade}) !important;
+      }
+    }
+
+    .active#{$separator} {
+      &#{$prefix}#{$name}-#{$shade}:active {
+        #{$prop}: var(--surface-#{$shade}) !important;
+      }
+    }
+  }
+}
+
+@mixin border-class($name, $directions, $scales) {
+  @each $dir, $prop in $directions {
+    @for $i from 0 through length($scales) - 1 {
+      $borderValue: if($i == 0, "none", $i);
+      $className: #{$name}-#{$dir}-#{$borderValue};
+      @if ($dir == "") {
+        $className: #{$name}-#{$borderValue};
+      }
+
+      .#{$prefix}#{$className} {
+        @each $propName in $prop {
+          #{$propName}-width: nth($scales, $i + 1) !important;
+          #{$propName}-style: if($i == 0, none, solid);
+        }
+      }
+    }
+  }
+
+  @each $key, $val in $breakpoints {
+    @media screen and (min-width: #{$val}) {
+      .#{$key + $separator} {
+        @each $dir, $prop in $directions {
+          @for $i from 0 through length($scales) - 1 {
+            $borderValue: if($i == 0, "none", $i);
+            $className: #{$name}-#{$dir}-#{$borderValue};
+            @if ($dir == "") {
+              $className: #{$name}-#{$borderValue};
+            }
+
+            &#{$prefix}#{$className} {
+              @each $propName in $prop {
+                #{$propName}-width: nth($scales, $i + 1) !important;
+                #{$propName}-style: if($i == 0, none, solid);
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+@mixin border-radius-class($map, $directions) {
+  @each $key, $val in $map {
+    $prefixName: $key;
+    $suffixName: "";
+    $index: str-index($key, "border-round");
+
+    @if $index != null {
+      $prefixName: "border-round";
+      $suffixName: str-slice(
+        $key,
+        str-length("border-round") + 1,
+        str-length($key)
+      );
+    }
+
+    @each $dir, $prop in $directions {
+      .#{$prefix}#{$prefixName}-#{$dir}#{$suffixName} {
+        @each $propName in $prop {
+          #{$propName}: #{$val} !important;
+        }
+      }
+    }
+  }
+
+  @each $key, $val in $breakpoints {
+    @media screen and (min-width: #{$val}) {
+      .#{$key + $separator} {
+        @each $key, $val in $map {
+          $prefixName: $key;
+          $suffixName: "";
+          $index: str-index($key, "border-round");
+
+          @if $index != null {
+            $prefixName: "border-round";
+            $suffixName: str-slice(
+              $key,
+              str-length("border-round") + 1,
+              str-length($key)
+            );
+          }
+
+          @each $dir, $prop in $directions {
+            &#{$prefix}#{$prefixName}-#{$dir}#{$suffixName} {
+              @each $propName in $prop {
+                #{$propName}: #{$val} !important;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+@mixin rgba-color-class($name, $prop, $colors, $shades) {
+  @each $colorName, $colorValue in $colors {
+    .#{$prefix}#{$name}#{$colorName}-alpha {
+      @each $shade in $shades {
+        &-#{$shade} {
+          #{$prop}: #{"rgba(#{$colorValue},#{math.div($shade, 100)})"} !important;
+        }
+      }
+    }
+
+    .hover#{$separator} {
+      &#{$prefix}#{$name}#{$colorName}-alpha {
+        @each $shade in $shades {
+          &-#{$shade}:hover {
+            #{$prop}: #{"rgba(#{$colorValue},#{math.div($shade, 100)})"} !important;
+          }
+        }
+      }
+    }
+
+    .focus#{$separator} {
+      &#{$prefix}#{$name}#{$colorName}-alpha {
+        @each $shade in $shades {
+          &-#{$shade}:focus {
+            #{$prop}: #{"rgba(#{$colorValue},#{math.div($shade, 100)})"} !important;
+          }
+        }
+      }
+    }
+
+    .active#{$separator} {
+      &#{$prefix}#{$name}#{$colorName}-alpha {
+        @each $shade in $shades {
+          &-#{$shade}:active {
+            #{$prop}: #{"rgba(#{$colorValue},#{math.div($shade, 100)})"} !important;
+          }
+        }
+      }
+    }
+  }
+}
+
+@mixin spacing-class(
+  $inPrefix,
+  $map,
+  $scales,
+  $responsive: true,
+  $auto: false,
+  $negative: false
+) {
+  $inPrefix: $prefix + $inPrefix;
+
+  @each $name, $prop in $map {
+    @for $i from 0 through length($scales) - 1 {
+      .#{$inPrefix}#{$name}-#{$i} {
+        @each $propName in $prop {
+          #{$propName}: $spacer * nth($scales, $i + 1) !important;
+        }
+      }
+    }
+
+    @if ($negative) {
+      @for $i from 1 through length($scales) - 1 {
+        .-#{$inPrefix}#{$name}-#{$i} {
+          @each $propName in $prop {
+            #{$propName}: -1 *
+              $spacer *
+              nth($scales, $i + 1) !important;
+          }
+        }
+      }
+    }
+
+    @if ($auto) {
+      .#{$inPrefix}#{$name}-auto {
+        @each $propName in $prop {
+          #{$propName}: auto !important;
+        }
+      }
+    }
+  }
+
+  @if ($responsive) {
+    @each $key, $val in $breakpoints {
+      @media screen and (min-width: #{$val}) {
+        @each $name, $prop in $map {
+          @for $i from 0 through length($scales) - 1 {
+            .#{$key + $separator}#{$inPrefix}#{$name}-#{$i} {
+              @each $propName in $prop {
+                #{$propName}: $spacer *
+                  nth($scales, $i + 1) !important;
+              }
+            }
+          }
+
+          @if ($negative) {
+            @for $i from 1 through length($scales) - 1 {
+              .#{$key + $separator}-#{$inPrefix}#{$name}-#{$i} {
+                @each $propName in $prop {
+                  #{$propName}: -1 *
+                    $spacer *
+                    nth($scales, $i + 1) !important;
+                }
+              }
+            }
+          }
+
+          @if ($auto) {
+            .#{$key + $separator}#{$inPrefix}#{$name}-auto {
+              @each $propName in $prop {
+                #{$propName}: auto !important;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+@mixin generate-class($map, $responsive: false, $states: false) {
+  @each $name, $propMap in $map {
+    .#{$prefix}#{$name} {
+      @each $prop, $val in $propMap {
+        #{$prop}: #{$val} !important;
+      }
+    }
+  }
+
+  @if ($states) {
+    @each $name, $propMap in $map {
+      .focus#{$separator} {
+        &#{$prefix}#{$name}:focus {
+          @each $prop, $val in $propMap {
+            #{$prop}: #{$val} !important;
+          }
+        }
+      }
+
+      .hover#{$separator} {
+        &#{$prefix}#{$name}:hover {
+          @each $prop, $val in $propMap {
+            #{$prop}: #{$val} !important;
+          }
+        }
+      }
+
+      .active#{$separator} {
+        &#{$prefix}#{$name}:active {
+          @each $prop, $val in $propMap {
+            #{$prop}: #{$val} !important;
+          }
+        }
+      }
+    }
+  }
+
+  @if ($responsive) {
+    @each $key, $val in $breakpoints {
+      @media screen and (min-width: #{$val}) {
+        .#{$key + $separator} {
+          @each $name, $propMap in $map {
+            &#{$prefix}#{$name} {
+              @each $prop, $val in $propMap {
+                #{$prop}: #{$val} !important;
+              }
+            }
+          }
+
+          @if ($states) {
+            @each $name, $propMap in $map {
+              &focus#{$separator} {
+                &#{$prefix}#{$name}:focus {
+                  @each $prop, $val in $propMap {
+                    #{$prop}: #{$val} !important;
+                  }
+                }
+              }
+
+              &hover#{$separator} {
+                &#{$prefix}#{$name}:hover {
+                  @each $prop, $val in $propMap {
+                    #{$prop}: #{$val} !important;
+                  }
+                }
+              }
+
+              &active#{$separator} {
+                &#{$prefix}#{$name}:active {
+                  @each $prop, $val in $propMap {
+                    #{$prop}: #{$val} !important;
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}