@luizleon/sf.prefeiturasp.vuecomponents 0.0.1

package/src/style/src/_functions.scss

@@ -0,0 +1,171 @@
+@use "sass:color";
+
+@function alpha($color, $opacity) {
+  $color-h: unquote("var(#{$color + -color-h})");
+  $color-s: unquote("var(#{$color + -color-s})");
+  $color-l: unquote("var(#{$color + -color-l})");
+  @return hsla($color-h, $color-s, $color-l, $opacity);
+}
+
+@function str-replace($string, $search, $replace: "") {
+  $index: str-index($string, $search);
+
+  @if $index {
+    @return str-slice($string, 1, $index - 1) + $replace +
+      str-replace(
+        str-slice($string, $index + str-length($search)),
+        $search,
+        $replace
+      );
+  }
+
+  @return $string;
+}
+
+@function tetradColor($color) {
+  $hue: hue($color);
+  $saturation: saturation($color);
+  $lightness: lightness($color);
+  $tetrad: (
+    hsl($hue, $saturation, $lightness),
+    hsl($hue + 90 % 360, $saturation, $lightness),
+    hsl($hue + 180 % 360, $saturation, $lightness),
+    hsl($hue + 270 % 360, $saturation, $lightness)
+  );
+  @return $tetrad;
+}
+
+@function multiplyColor($fore, $back) {
+  $red: calc(red($back) * red($fore) / 255);
+  $green: calc(green($back) * green($fore) / 255);
+  $blue: calc(blue($back) * blue($fore) / 255);
+  @return rgb($red, $green, $blue);
+}
+
+@function makeColorPalette($color) {
+  $light: #fff;
+  $dark: multiplyColor($color, $color);
+  $tetrad: tetradColor($color);
+  $palette: (
+    "": mix($light, $color, 0%),
+    "-50": mix($light, $color, 88%),
+    "-100": mix($light, $color, 70%),
+    "-200": mix($light, $color, 50%),
+    "-300": mix($light, $color, 30%),
+    "-400": mix($light, $color, 15%),
+    "-500": mix($light, $color, 0%),
+    "-600": mix($dark, $color, 13%),
+    "-700": mix($dark, $color, 30%),
+    "-800": mix($dark, $color, 46%),
+    "-900": mix($dark, $color, 75%),
+  );
+  @return $palette;
+}
+
+@function themeColors($dark: false) {
+  $bg: #fff;
+  $text: #334d5c;
+  $primary: #3f51b5;
+  $info: #2196f3;
+  $success: #4caf50;
+  $warn: #cbb701;
+  $help: #673ab7;
+  $error: #f44336;
+  $secondary: #607d8b;
+  $disabled: #c4c4c4;
+  $primary-hover: rgba(color.scale($primary, $lightness: 70%), 0.5);
+  $info-hover: rgba(color.scale($info, $lightness: 70%), 0.5);
+  $success-hover: rgba(color.scale($success, $lightness: 70%), 0.5);
+  $warn-hover: rgba(color.scale($warn, $lightness: 70%), 0.5);
+  $help-hover: rgba(color.scale($help, $lightness: 70%), 0.5);
+  $error-hover: rgba(color.scale($error, $lightness: 70%), 0.5);
+  $secondary-hover: rgba(color.scale($secondary, $lightness: 70%), 0.5);
+  $surface: #fafafd;
+  $surface-100: color.scale($surface, $lightness: -1%);
+  $surface-200: color.scale($surface, $lightness: -3%);
+  $surface-300: color.scale($surface, $lightness: -5%);
+  $surface-400: color.scale($surface, $lightness: -7%);
+  $surface-500: color.scale($surface, $lightness: -9%);
+  $surface-600: color.scale($surface, $lightness: -11%);
+  $surface-700: color.scale($surface, $lightness: -13%);
+  $surface-800: color.scale($surface, $lightness: -15%);
+  $surface-900: color.scale($surface, $lightness: -17%);
+  $surface-1000: color.scale($surface, $lightness: -19%);
+  $surface-1100: color.scale($surface, $lightness: -22%);
+  $surface-1200: color.scale($surface, $lightness: -24%);
+  $surface-1300: color.scale($surface, $lightness: -26%);
+  $surface-border: $surface-800;
+  $maskbg: color.adjust($text, $alpha: -0.2);
+
+  @if ($dark) {
+    $bg: hsl(215, 69%, 9%);
+    $text: #cfd8dc;
+    $primary: color.scale($primary, $lightness: 35%);
+    $info: color.scale($info, $lightness: 22.5%);
+    $success: color.scale($success, $lightness: 22.5%);
+    $warn: color.scale($warn, $lightness: 22.5%);
+    $help: color.scale($help, $lightness: 35%);
+    $error: color.scale($error, $lightness: 22.5%);
+    $secondary: color.scale($secondary, $lightness: 22.5%);
+    $disabled: #576374;
+    $primary-hover: rgba(color.scale($primary, $lightness: -70%), 0.5);
+    $info-hover: rgba(color.scale($info, $lightness: -70%), 0.5);
+    $success-hover: rgba(color.scale($success, $lightness: -70%), 0.5);
+    $warn-hover: rgba(color.scale($warn, $lightness: -70%), 0.5);
+    $help-hover: rgba(color.scale($help, $lightness: -70%), 0.5);
+    $error-hover: rgba(color.scale($error, $lightness: -70%), 0.5);
+    $secondary-hover: rgba(color.scale($secondary, $lightness: -70%), 0.5);
+    $surface-100: color.scale($bg, $lightness: 2%);
+    $surface-200: color.scale($bg, $lightness: 4%);
+    $surface-300: color.scale($bg, $lightness: 6%);
+    $surface-400: color.scale($bg, $lightness: 8%);
+    $surface-500: color.scale($bg, $lightness: 10%);
+    $surface-600: color.scale($bg, $lightness: 12%);
+    $surface-700: color.scale($bg, $lightness: 14%);
+    $surface-800: color.scale($bg, $lightness: 16%);
+    $surface-900: color.scale($bg, $lightness: 18%);
+    $surface-1000: color.scale($bg, $lightness: 20%);
+    $surface-1100: color.scale($bg, $lightness: 22%);
+    $surface-1200: color.scale($bg, $lightness: 24%);
+    $surface-1300: color.scale($bg, $lightness: 26%);
+    $surface-border: $surface-800;
+    $maskbg: color.adjust($surface-600, $alpha: -0.4);
+  }
+
+  $v: (
+    "--bg": $bg,
+    "--text": $text,
+    "--primary": $primary,
+    "--info": $info,
+    "--success": $success,
+    "--warn": $warn,
+    "--help": $help,
+    "--error": $error,
+    "--secondary": $secondary,
+    "--disabled": $disabled,
+    "--primary-hover": $primary-hover,
+    "--info-hover": $info-hover,
+    "--success-hover": $success-hover,
+    "--warn-hover": $warn-hover,
+    "--help-hover": $help-hover,
+    "--error-hover": $error-hover,
+    "--secondary-hover": $secondary-hover,
+    "--surface-100": $surface-100,
+    "--surface-200": $surface-200,
+    "--surface-300": $surface-300,
+    "--surface-400": $surface-400,
+    "--surface-500": $surface-500,
+    "--surface-600": $surface-600,
+    "--surface-700": $surface-700,
+    "--surface-800": $surface-800,
+    "--surface-900": $surface-900,
+    "--surface-1000": $surface-1000,
+    "--surface-1100": $surface-1100,
+    "--surface-1200": $surface-1200,
+    "--surface-1300": $surface-1300,
+    "--surface-border": $surface-border,
+    "--maskbg": $maskbg,
+  );
+
+  @return $v;
+}

package/src/style/src/_gap.scss

@@ -0,0 +1,8 @@
+$space-scales: 0, 0.25, 0.5, 1, 1.5, 2, 3, 4, 5;
+$gap-properties: (
+  "gap": "gap",
+  "row-gap": "row-gap",
+  "column-gap": "column-gap",
+);
+
+@include spacing-class("", $gap-properties, $space-scales);

package/src/style/src/_grid.scss

@@ -0,0 +1,100 @@
+.#{$prefix}grid {
+  display: flex;
+  flex-wrap: wrap;
+  margin-right: -1 * $gutter;
+  margin-left: -1 * $gutter;
+  margin-top: -1 * $gutter;
+}
+
+.#{$prefix}grid > #{$prefix}.col,
+.#{$prefix}grid > [class*="#{$prefix}col"] {
+  box-sizing: border-box;
+}
+
+.#{$prefix}grid-nogutter {
+  margin-right: 0;
+  margin-left: 0;
+  margin-top: 0;
+}
+
+.#{$prefix}grid-nogutter > .#{$prefix}col,
+.#{$prefix}grid-nogutter > [class*="#{$prefix}col-"] {
+  padding: 0;
+}
+
+.#{$prefix}col {
+  flex-grow: 1;
+  flex-basis: 0;
+  padding: $gutter;
+}
+
+.#{$prefix}col-fixed {
+  flex: 0 0 auto;
+  padding: $gutter;
+}
+
+$grid-columns: (
+  "col-1": 8.3333%,
+  "col-2": 16.6667%,
+  "col-3": 25%,
+  "col-4": 33.3333%,
+  "col-5": 41.6667%,
+  "col-6": 50%,
+  "col-7": 58.3333%,
+  "col-8": 66.6667%,
+  "col-9": 75%,
+  "col-10": 83.3333%,
+  "col-11": 91.6667%,
+  "col-12": 100%,
+);
+
+$grid-column-offsets: (
+  "col-offset-0": 0,
+  "col-offset-1": 8.3333%,
+  "col-offset-2": 16.6667%,
+  "col-offset-3": 25%,
+  "col-offset-4": 33.3333%,
+  "col-offset-5": 41.6667%,
+  "col-offset-6": 50%,
+  "col-offset-7": 58.3333%,
+  "col-offset-8": 66.6667%,
+  "col-offset-9": 75%,
+  "col-offset-10": 83.3333%,
+  "col-offset-11": 91.6667%,
+  "col-offset-12": 100%,
+);
+
+@each $col, $width in $grid-columns {
+  .#{$prefix}#{$col} {
+    flex: 0 0 auto;
+    padding: $gutter;
+    width: #{$width};
+  }
+}
+
+@each $key, $val in $breakpoints {
+  @media screen and (min-width: #{$val}) {
+    .#{$key + $separator} {
+      &#{$prefix}col {
+        flex-grow: 1;
+        flex-basis: 0;
+        padding: $gutter;
+      }
+
+      &#{$prefix}col-fixed {
+        flex: 0 0 auto;
+        padding: $gutter;
+      }
+
+      @each $col, $width in $grid-columns {
+        &#{$prefix}#{$col} {
+          flex: 0 0 auto;
+          padding: $gutter;
+          width: #{$width};
+        }
+      }
+    }
+  }
+}
+
+@include style-class("margin-left", $grid-column-offsets, true);