@vixcom/ui 1.1.0 → 1.2.0

package/src/styles/_mixins.scss

@@ -0,0 +1,445 @@
+// /* All color definition for buttons, inputs, filter-effects */
+@use 'sass:selector';
+
+@mixin unify-selector($a, $b) {
+  @at-root #{selector.unify($a, $b)} {
+    @content;
+  }
+}
+
+@mixin append-selector($a, $b) {
+  @at-root #{selector.append($a, $b)} {
+    @content;
+  }
+}
+
+@mixin flex-center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+@mixin absolute-content {
+  &:not(img::before, img::after) {
+    // HACK: Safari Fix.
+    content: '';
+  }
+
+  content: '';
+  @include flex-center;
+  height: 100%;
+  width: 100%;
+  position: absolute;
+  border-radius: inherit;
+  top: 0;
+  left: 0;
+  z-index: 0;
+}
+
+@mixin before-content {
+  & {
+    position: relative;
+  }
+
+  & > * {
+    /* position: relative; */
+    z-index: 1;
+  }
+
+  &::before {
+    @include absolute-content();
+  }
+}
+
+@mixin after-content {
+  & {
+    position: relative;
+  }
+
+  & > * {
+    // position: relative;
+    z-index: 1;
+  }
+
+  &::after {
+    @include absolute-content();
+  }
+}
+
+// @mixin check-child-state($child) {
+//   @at-root #{selector.unify($child, &)} {
+//     @content;
+//   }
+// }
+
+$default: #5b5b5b !default;
+$accent: #bfbfbf !default;
+$primary: #34a853 !default;
+$secondary: #5c2b6d !default;
+$white: #ffffff !default;
+$light: #f8f9fa !default;
+$black: #000000 !default;
+$dark: #343a40 !default;
+$green: #1d5c2e !default;
+$orange: #f58220 !default;
+$purple: #561843 !default;
+$red: #c54646 !default;
+$blue: #0365a3 !default;
+$yellow: #c4c400 !default;
+$gold: #ffdf00 !default;
+$silver: #bfbfbf !default;
+$pink: #ed028c !default;
+$cyan: #16f1d9 !default;
+$lemon: #62ffb1 !default;
+$success: #24b624 !default;
+$warn: #ffa500 !default;
+$error: #dc3545 !default;
+$info: #17a2b8 !default;
+$muted: #7d7d7d !default;
+$background-color: #ffffff !default;
+$border-color: #e4e4e4 !default;
+$card-shadow: 0 1px 30px -10px transparentize($black, 0.5) !default;
+$font-size: 0.75rem !default;
+
+$app-colors-mapped: () !default;
+
+$app-colors-mapped: map-merge(
+  (
+    // ===
+    'default':
+      (
+        bg: $default,
+        c: $white,
+      ),
+    'accent': (
+      bg: $accent,
+      c: darken($accent, 45%),
+    ),
+    'primary': (
+      bg: $primary,
+      c: $white,
+    ),
+    'secondary': (
+      bg: $secondary,
+      c: $white,
+    ),
+    'white': (
+      bg: $white,
+      c: $default,
+    ),
+    'light': (
+      bg: $light,
+      c: $dark,
+    ),
+    'black': (
+      bg: $black,
+      c: $white,
+    ),
+    'dark': (
+      bg: $dark,
+      c: $light,
+    ),
+    'silver': (
+      bg: $silver,
+      c: $white,
+    ),
+    'gold': (
+      bg: $gold,
+      c: $white,
+    ),
+    'info': (
+      bg: $info,
+      c: $white,
+    ),
+    'error': (
+      bg: $error,
+      c: $white,
+    ),
+    // 'failed': (bg: $error, c: $white),
+    // 'danger': (bg: $error, c: $white),
+    'success':
+      (
+        bg: $success,
+        c: $white,
+      ),
+    // 'successful': (bg: $success, c: $white),
+    'warn':
+      (
+        bg: $warn,
+        c: $black,
+      ),
+    // 'warning': (bg: $warn, c: $black),
+    // 'pending': (bg: $warn, c: $black),
+    'red':
+      (
+        bg: $red,
+        c: $white,
+      ),
+    'orange': (
+      bg: $orange,
+      c: $black,
+    ),
+    'yellow': (
+      bg: $yellow,
+      c: $black,
+    ),
+    'green': (
+      bg: $green,
+      c: $white,
+    ),
+    'blue': (
+      bg: $blue,
+      c: $white,
+    ),
+    'cyan': (
+      bg: $cyan,
+      c: $white,
+    ),
+    'purple': (
+      bg: $purple,
+      c: $white,
+    ),
+    // 'pink': (bg: $pink, c: $white),
+    // 'lemon': (bg: $lemon, c: $white),
+    'muted':
+      (
+        bg: $muted,
+        c: $white,
+      ),
+    // 'color-1': (bg: $primary, c: $white),
+    // 'color-2': (bg: $secondary, c: $white),
+    // 'transparent': (bg: transparent, c: $default)
+    // ===
+  ),
+  $app-colors-mapped
+);
+
+// /* Functions and Mixins */
+
+@mixin mapped-bg-color-variant($selector, $k, $v) {
+  #{$selector} {
+    background-color: hsla(
+      var(--#{$k}-hs),
+      var(--#{$k}-l),
+      var(--#{$k}-a)
+    ) !important;
+    color: var(--#{$k}-c, map-get($v, 'c')) !important;
+    border-color: hsla(
+      var(--#{$k}-hs),
+      calc(var(--#{$k}-l) - 20%),
+      var(--#{$k}-a)
+    );
+
+    &.is-blur {
+      background-color: hsla(var(--#{$k}-hs), var(--#{$k}-l), 0.5) !important;
+
+      &:hover {
+        background-color: hsla(
+          var(--#{$k}-hs),
+          var(--#{$k}-l),
+          0.75
+        ) !important;
+      }
+    }
+
+    // [class*=-#{$k}] {
+    //   --#{$k}-hs: var(--#{$k}-c-hs);
+    // }
+  }
+
+  a#{$selector},
+  #{$selector}.link,
+  button#{$selector} {
+    &:hover {
+      background-color: hsla(
+        var(--#{$k}-hs),
+        calc(var(--#{$k}-l) - 10%),
+        var(--#{$k}-a)
+      ) !important;
+      border-color: hsla(var(--#{$k}-hs), var(--#{$k}-l), var(--#{$k}-a));
+      color: var(--#{$k}-c, map-get($v, 'c'));
+    }
+
+    &:active {
+      background-color: hsla(
+        var(--#{$k}-hs),
+        calc(var(--#{$k}-l) - 20%),
+        var(--#{$k}-a)
+      ) !important;
+    }
+  }
+}
+
+@mixin mapped-tabs-variant($selector, $k, $v) {
+  #{$selector} {
+    // &:hover .tab.active {
+    //   background-color: hsla(var(--#{$k}-hs), var(--#{$k}-l), 0.275);
+    // }
+
+    .tab {
+      color: currentColor;
+
+      &:not(.active) {
+        &:hover {
+          background-color: hsla(var(--#{$k}-hs), var(--#{$k}-l), 0.075);
+        }
+      }
+
+      &.active {
+        background-color: hsla(var(--#{$k}-hs), var(--#{$k}-l), 0.125);
+        color: hsla(
+          var(--#{$k}-hs),
+          calc(var(--#{$k}-l) - 10%),
+          var(--#{$k}-a)
+        );
+      }
+    }
+
+    &.fill,
+    &.prefill {
+      .tab {
+        &:hover {
+          background-color: hsla(var(--#{$k}-hs), var(--#{$k}-l), 0.25);
+        }
+
+        &.active {
+          background-color: hsla(
+            var(--#{$k}-hs),
+            var(--#{$k}-l),
+            var(--#{$k}-a)
+          );
+          color: var(--#{$k}-c, map-get($v, 'c'));
+        }
+      }
+    }
+
+    &.prefill {
+      .tab {
+        background-color: hsla(var(--#{$k}-hs), var(--#{$k}-l), 0.125);
+      }
+    }
+  }
+}
+
+@mixin mapped-neon-color-variant($selector, $k, $v) {
+  #{$selector} {
+    /* color: var(--white) !important; */
+    text-shadow: 0 0 20px var(--#{$k}, map-get($v, 'bg')), 0 0 10px var(--white);
+  }
+}
+
+@mixin mapped-color-variant($selector, $k, $v) {
+  #{$selector} {
+    color: var(--#{$k}, map-get($v, 'bg')) !important;
+  }
+
+  a#{$selector},
+  button#{$selector} {
+    &:hover {
+      color: hsla(var(--#{$k}-hs), calc(var(--#{$k}-l) - 10%), var(--#{$k}-a));
+    }
+
+    &:active {
+      color: hsla(var(--#{$k}-hs), calc(var(--#{$k}-l) - 20%), var(--#{$k}-a));
+    }
+  }
+}
+
+@mixin mapped-g-color-variant($selector, $k, $v) {
+  #{$selector} {
+    background-image: linear-gradient(
+      var(--#{$k}, map-get($v, 'bg')),
+      hsla(var(--#{$k}-hs), calc(var(--#{$k}-l) - 20%), var(--#{$k}-a))
+    ) !important;
+    color: var(--#{$k}-c, map-get($v, 'c'));
+    border: none;
+  }
+
+  a#{$selector},
+  button#{$selector} {
+    &:hover {
+      background-image: linear-gradient(
+        hsla(var(--#{$k}-hs), calc(var(--#{$k}-l) + 20%), var(--#{$k}-a)),
+        var(--#{$k}, map-get($v, 'bg'))
+      ) !important;
+      color: var(--#{$k}-c, map-get($v, 'c'));
+    }
+
+    &:active {
+      background-image: linear-gradient(
+        hsla(var(--#{$k}-hs), calc(var(--#{$k}-l) - 20%), var(--#{$k}-a)),
+        var(--#{$k}, map-get($v, 'bg'))
+      ) !important;
+    }
+  }
+}
+
+@mixin mapped-alert-variant($selector, $k, $v) {
+  #{$selector} {
+    background-color: hsla(
+      var(--#{$k}-hs),
+      calc(var(--#{$k}-l) + 45%),
+      var(--#{$k}-a)
+    ) !important;
+    color: hsla(
+      var(--#{$k}-hs),
+      calc(var(--#{$k}-l) - 45%),
+      var(--#{$k}-a)
+    ) !important;
+    border-color: hsla(
+      var(--#{$k}-hs),
+      var(--#{$k}-l),
+      var(--#{$k}-a)
+    ) !important;
+
+    &.is-blur:not(:hover) {
+      background-color: hsla(
+        var(--#{$k}-hs),
+        calc(var(--#{$k}-l) + 45%),
+        0.5
+      ) !important;
+    }
+  }
+}
+
+@mixin mapped-outline-variant($selector, $k, $v) {
+  #{$selector} {
+    background-color: transparent !important;
+    color: hsla(var(--#{$k}-hs), var(--#{$k}-l), var(--#{$k}-a)) !important;
+    border: thin solid;
+    // border-color: currentColor !important;
+
+    &.is-blur {
+      background-color: hsla(
+        var(--#{$k}-hs),
+        calc(var(--#{$k}-l) - 45%),
+        0.5
+      ) !important;
+    }
+  }
+
+  a#{$selector},
+  #{$selector}.link,
+  button#{$selector},
+  #{$selector}:focus,
+  #{$selector}:focus-within {
+    &:hover {
+      background-color: hsla(
+        var(--#{$k}-hs),
+        calc(var(--#{$k}-l) - 10%),
+        var(--#{$k}-a)
+      ) !important;
+      color: var(--#{$k}-c, map-get($v, 'c')) !important;
+    }
+
+    &.active,
+    &:active {
+      background-color: hsla(
+        var(--#{$k}-hs),
+        calc(var(--#{$k}-l) - 20%),
+        var(--#{$k}-a)
+      ) !important;
+      color: var(--#{$k}-c, map-get($v, 'c')) !important;
+    }
+  }
+}