@vixcom/ui 1.0.0 → 1.2.0

package/{styles → src/styles}/colors.scss

@@ -1,117 +1,118 @@
-@import 'mixins';
-
-/**
-* HSL Darken = level - n; Lighten = level + n.
-** Darken Color = hsl(var(--{color}-hs), calc(var(--{color}-l) - n%))
-** Lighten Color = hsl(var(--{color}-hs), calc(var(--{color}-l) + n%))
-* {color}-hs = The Hue and Saturation level of the color.
-* {color}-l = Lightness level of the color.
-* {color}-a = Alpha level of the color.
-* {color}-c = The corresponding Text color of the color, if it is used as a background.
-*/
-
-@each $k,
-$v in $app-colors-mapped {
-  // Texts
-  @include mapped-color-variant('.text-#{$k}', $k, $v);
-  @include mapped-neon-color-variant('.text-neon-#{$k}', $k, $v);
-  // Background
-  @include mapped-bg-color-variant('.bg-#{$k}', $k, $v);
-  @include mapped-g-color-variant('.bg-g-#{$k}', $k, $v);
-  @include mapped-tabs-variant('.tabs-#{$k}', $k, $v);
-  @include mapped-alert-variant('.alert-#{$k}', $k, $v);
-  @include mapped-outline-variant('.bg-outline-#{$k}', $k, $v);
-  // Buttons
-  @include mapped-bg-color-variant('.btn-#{$k}', $k, $v);
-  @include mapped-g-color-variant('.btn-g-#{$k}', $k, $v);
-  @include mapped-outline-variant('.btn-outline-#{$k}', $k, $v);
-  // Badges
-  @include mapped-bg-color-variant('.badge-#{$k}', $k, $v);
-  @include mapped-outline-variant('.badge-outline-#{$k}', $k, $v);
-
-  .border-#{$k} {
-    border-color: map-get($v, 'bg')
-  }
-}
-
-@each $v in (0, 25, 50, 75, 100) {
-  .opacity-#{$v} {
-    opacity: $v/100;
-  }
-}
-
-button,
-input {
-
-  &.focus,
-  &:focus-within,
-  &:focus {
-    outline: none;
-    box-shadow: none !important
-  }
-}
-
-.bg-transparent,
-.btn-transparent,
-.tabs-transparent,
-.alert-transparent {
-  border: none;
-  background-color: transparent !important;
-  color: currentColor !important;
-}
-
-.bg-current,
-.btn-current,
-.tabs-current,
-.alert-current {
-  border: none;
-  background-color: currentColor;
-  // color: currentColor !important;
-}
-
-.inactive {
-  color: #BCBCCB
-}
-
-
-.shadow- {
-  &1 {
-    &::before {
-      box-shadow: var(--black) 0 3px 9px -3px;
-    }
-  }
-}
-
-.shadow-inset {
-  &-1 {
-    &::before {
-      box-shadow: inset var(--black) 0 3px 9px -3px;
-    }
-  }
-}
-
-[class*=shadow-] {
-  position: relative;
-  z-index: 1;
-
-  &>* {
-    position: relative;
-  }
-
-  @include before-content;
-}
-
-input,
-input::placeholder,
-input::-webkit-input-placeholder {
-  color: currentColor !important
-}
-
-.text-unset,
-.text-color-unset {
-  color: unset
-}
-
-.text-current {
-  color: currentColor
-}
+@use 'sass:math';
+@import 'mixins';
+
+/**
+* HSL Darken = level - n; Lighten = level + n.
+** Darken Color = hsl(var(--{color}-hs), calc(var(--{color}-l) - n%))
+** Lighten Color = hsl(var(--{color}-hs), calc(var(--{color}-l) + n%))
+* {color}-hs = The Hue and Saturation level of the color.
+* {color}-l = Lightness level of the color.
+* {color}-a = Alpha level of the color.
+* {color}-c = The corresponding Text color of the color, if it is used as a background.
+*/
+
+@each $k, $v in $app-colors-mapped {
+  // Texts
+  @include mapped-color-variant('.text-#{$k}', $k, $v);
+  @include mapped-neon-color-variant('.text-neon-#{$k}', $k, $v);
+  // Background
+  @include mapped-bg-color-variant('.bg-#{$k}', $k, $v);
+  @include mapped-g-color-variant('.bg-g-#{$k}', $k, $v);
+  @include mapped-tabs-variant('.tabs-#{$k}', $k, $v);
+  @include mapped-alert-variant('.alert-#{$k}', $k, $v);
+  @include mapped-outline-variant('.bg-outline-#{$k}', $k, $v);
+  // Buttons
+  @include mapped-bg-color-variant('.btn-#{$k}', $k, $v);
+  @include mapped-g-color-variant('.btn-g-#{$k}', $k, $v);
+  @include mapped-outline-variant('.btn-outline-#{$k}', $k, $v);
+  // Badges
+  @include mapped-bg-color-variant('.badge-#{$k}', $k, $v);
+  @include mapped-outline-variant('.badge-outline-#{$k}', $k, $v);
+
+  .border-#{$k} {
+    border-color: map-get($v, 'bg');
+  }
+}
+
+@each $v in (0, 25, 50, 75, 100) {
+  .opacity-#{$v} {
+    opacity: math.div($v, 100);
+  }
+}
+
+button,
+input {
+  &.focus,
+  &:focus-within,
+  &:focus {
+    outline: none;
+    box-shadow: none;
+  }
+}
+
+.bg-transparent,
+.btn-transparent,
+.tabs-transparent,
+.alert-transparent {
+  border: none;
+  background-color: transparent;
+  color: currentColor;
+}
+
+.bg-current,
+.btn-current,
+.tabs-current,
+.alert-current {
+  border: none;
+  background-color: currentColor;
+}
+
+.inactive {
+  color: #bcbccb;
+}
+
+.silhouette {
+  filter: saturate(0%) brightness(500%);
+}
+
+.shadow- {
+  &1 {
+    &::before {
+      box-shadow: var(--black) 0 3px 9px -3px;
+    }
+  }
+}
+
+.shadow-inset {
+  &-1 {
+    &::before {
+      box-shadow: inset var(--black) 0 3px 9px -3px;
+    }
+  }
+}
+
+[class*='shadow-'] {
+  position: relative;
+  z-index: 1;
+
+  & > * {
+    position: relative;
+  }
+
+  @include before-content;
+}
+
+input,
+input::placeholder,
+input::-webkit-input-placeholder {
+  color: currentColor;
+}
+
+.text-unset,
+.text-color-unset {
+  color: unset;
+}
+
+.text-current {
+  color: currentColor;
+}