@cfx-dev/ui-components 3.0.0 → 3.0.1

package/dist/styles-scss/_ui.scss

@@ -1,359 +1,359 @@
-@use "sass:math";
-@use "sass:map";
-@use "sass:meta";
-@use "colors";
-
-@mixin def($var, $value) {
-  --#{$var}: #{$value};
-}
-@function use($var, $default: initial) {
-  @return var(--#{$var}, $default);
-}
-
-@function color($name, $luminance: 'pure', $alpha: 1.0) {
-  @if $luminance == 'pure' {
-    @return rgba(var(--color-#{$name}), #{$alpha});
-  }
-
-  @return rgba(var(--color-#{$name}-#{$luminance}), #{$alpha});
-}
-
-@function offset($size: 'normal') {
-  @return var(--offset-#{$size});
-}
-
-@function q($multiplier: 1) {
-  @if $multiplier == 1 {
-      @return var(--quant);
-  }
-
-  @return calc(var(--quant) * #{$multiplier});
-}
-
-@function control-height($size: 'normal') {
-  @return var(--control-height-#{$size});
-}
-
-@function font-size($size: 'normal') {
-  @return var(--font-size-#{$size});
-}
-
-@function font-weight($weight: 'normal') {
-  @return var(--font-weight-#{$weight});
-}
-
-@function negative($cssValue) {
-  @return calc(-1 * #{$cssValue});
-}
-
-@function border-radius($size: 'normal') {
-  @return var(--border-radius-#{$size});
-}
-
-@function viewport-width($multiplier: 1.0) {
-  @return calc((var(--width) - var(--offset-safezone) * 2) * #{$multiplier});
-}
-@function viewport-height($multiplier: 1.0) {
-  @return calc((var(--height) - var(--offset-safezone) * 2) * #{$multiplier});
-}
-
-$cfxui-color-luminance: (
-  'pure',
-  950,
-  900,
-  800,
-  700,
-  600,
-  500,
-  400,
-  300,
-  200,
-  100,
-  50,
-);
-
-$cfxui-color-alpha: (
-  '100': 1,
-  '90': 0.9,
-  '80': 0.8,
-  '70': 0.7,
-  '60': 0.6,
-  '50': 0.5,
-  '40': 0.4,
-  '30': 0.3,
-  '20': 0.2,
-  '10': 0.1,
-);
-
-@mixin define-font-size($name, $size, $line-height: 1.3) {
-  @include def('font-size-#{$name}', $size);
-  @include def('line-height-#{$name}', $line-height);
-}
-
-@mixin define-color($name, $color, $bg, $fg) {
-  .cfx-color-#{$name} { color: $color }
-
-  --color-#{$name}: #{colors.color-triplet($color)};
-  --color-#{$name}-50:  #{colors.color-triplet(colors.lab-gradient-step($bg, $color, 1, 7))};
-  --color-#{$name}-100: #{colors.color-triplet(colors.lab-gradient-step($bg, $color, 2, 7))};
-  --color-#{$name}-200: #{colors.color-triplet(colors.lab-gradient-step($bg, $color, 3, 7))};
-  --color-#{$name}-300: #{colors.color-triplet(colors.lab-gradient-step($bg, $color, 4, 7))};
-  --color-#{$name}-400: #{colors.color-triplet(colors.lab-gradient-step($bg, $color, 5, 7))};
-  --color-#{$name}-500: #{colors.color-triplet($color)};
-  --color-#{$name}-600: #{colors.color-triplet(colors.lab-gradient-step($color, $fg, 1, 7))};
-  --color-#{$name}-700: #{colors.color-triplet(colors.lab-gradient-step($color, $fg, 2, 7))};
-  --color-#{$name}-800: #{colors.color-triplet(colors.lab-gradient-step($color, $fg, 3, 7))};
-  --color-#{$name}-900: #{colors.color-triplet(colors.lab-gradient-step($color, $fg, 4, 7))};
-  --color-#{$name}-950: #{colors.color-triplet(colors.lab-gradient-step($color, $fg, 5, 7))};
-}
-
-@mixin define-main-color($bg, $fg) {
-  --color-main: #{colors.color-triplet($bg)};
-  --color-main-50:  #{colors.color-triplet(colors.lab-gradient-step($bg, $fg, 1,  12))};
-  --color-main-100: #{colors.color-triplet(colors.lab-gradient-step($bg, $fg, 2,  12))};
-  --color-main-200: #{colors.color-triplet(colors.lab-gradient-step($bg, $fg, 3,  12))};
-  --color-main-300: #{colors.color-triplet(colors.lab-gradient-step($bg, $fg, 4,  12))};
-  --color-main-400: #{colors.color-triplet(colors.lab-gradient-step($bg, $fg, 5,  12))};
-  --color-main-500: #{colors.color-triplet(colors.lab-gradient-step($bg, $fg, 6,  12))};
-  --color-main-600: #{colors.color-triplet(colors.lab-gradient-step($bg, $fg, 7,  12))};
-  --color-main-700: #{colors.color-triplet(colors.lab-gradient-step($bg, $fg, 8,  12))};
-  --color-main-800: #{colors.color-triplet(colors.lab-gradient-step($bg, $fg, 9,  12))};
-  --color-main-900: #{colors.color-triplet(colors.lab-gradient-step($bg, $fg, 10, 12))};
-  --color-main-950: #{colors.color-triplet(colors.lab-gradient-step($bg, $fg, 11, 12))};
-}
-
-@mixin define-main-colors($bg, $fg, $overrides: ()) {
-  $colors: map-merge((
-    'primary': #f50551,
-    'success': #01a370,
-    'warning': #ffae00,
-    'error': #ff2600,
-    'teal': #007892,
-    'aurum': #aa6f0d,
-    'silver': #a5a5a5
-  ), $overrides);
-
-  @include define-main-color($bg, $fg);
-
-  @each $colorName, $colorValue in $colors {
-    @include define-color($colorName, $colorValue, $bg, $fg);
-  }
-}
-
-@mixin define-theme($bg, $fg, $overrides: ()) {
-  $colors: map-merge((
-    'accent': #F40552,
-    'primary': #F1F1E4,
-    'secondary': #9EA4BD,
-    'tertiary': #FF75AC,
-    'green': #22BF4E,
-    'yellow': #FDA640,
-    'red': #E33131,
-    'argentum': #A3A3A3,
-    'aurum': #BFA45E,
-    'platinum': #F1F1F1,
-    'bg': #11131C,
-    'bg-light': #1C202E,
-    'bg-dark': #1C202E,
-    'bg-dark-grey': #1A1A1A,
-    'bg-black': #000000,
-  ), $overrides);
-
-  @each $colorName, $colorValue in $colors {
-    @include define-color($colorName, $colorValue, $bg, $fg);
-  }
-}
-
-@mixin define-color-token($name, $color) {
-  --color-#{$name}: #{$color};
-}
-@function color-token($name, ) {
-  @return var(--color-#{$name});
-}
-
-
-@mixin border-radius($size: 'normal') {
-  border-radius: var(--border-radius-#{$size});
-}
-
-@mixin font-size($size: 'normal') {
-  font-size: var(--font-size-#{$size});
-}
-@mixin font-family($family: 'primary') {
-  font-family: var(--font-family-#{$family});
-}
-@mixin font-weight($weight: 'normal') {
-  font-weight: var(--font-weight-#{$weight});
-}
-@mixin font-color($colorToken) {
-  color: color-token($colorToken);
-}
-
-@mixin letter-spacing($size: 'normal') {
-  letter-spacing: var(--letter-spacing-#{$size});
-}
-
-@mixin line-height($size: 'normal') {
-  line-height: var(--line-height-#{$size});
-}
-
-@mixin animated($props: 'all', $subClass: '&') {
-  @if type-of($props) == 'list' {
-    $transition: ();
-    @each $property in $props {
-      $transition: append(
-          $transition, ($property .25s ease), $separator: comma
-      );
-    }
-    #{$subClass} {
-      transition: $transition,
-        outline-offset 0s,
-        outline 0s;
-    }
-  } @else {
-    #{$subClass} {
-      transition: #{$props} .25s ease,
-        outline-offset 0s,
-        outline 0s;
-    }
-  }
-}
-
-@mixin fake-backdrop-blur($topLayer: false, $topLayerBlend: false, $topLayerSize: false, $topLayerAttachement: false) {
-  --_backdrop-color: var(--backdrop-color, transparent);
-  --_backdrop-image-blur: var(--backdrop-image-blur, url(assets/images/bg2-blur.png));
-
-  @if not $topLayer {
-    $topLayer: linear-gradient(use('_backdrop-color'), use('_backdrop-color'));
-  }
-
-  @if not $topLayerBlend {
-    $topLayerBlend: normal;
-  }
-
-  @if not $topLayerSize {
-    $topLayerSize: cover;
-  }
-
-  @if not $topLayerAttachement {
-    $topLayerAttachement: scroll;
-  }
-
-  background-color: use('_backdrop-color');
-  background-image:
-    $topLayer,
-    linear-gradient(color-token('backdrop-shader'), color-token('backdrop-shader')),
-    use('_backdrop-image-blur'),
-    use('_backdrop-image-blur');
-  background-blend-mode: $topLayerBlend, normal, overlay;
-  background-size: $topLayerSize, cover, cover, cover;
-  background-attachment: $topLayerAttachement, scroll, fixed, fixed;
-}
-
-$offsets: (
-  'none': 0px,
-  'hairthin': 1px,
-  'thin': 2px,
-  'xxsmall': q(.25),
-  'xsmall': q(.5),
-  'small': q(1),
-  'normal': q(2),
-  'medium': q(2.5),
-  'large': q(4),
-  'xlarge': q(6),
-  'safezone': q(8),
-);
-
-@mixin offset-classes($prefix: 'offset', $property: 'gap') {
-  @each $name, $value in $offsets {
-    &.#{$prefix}-#{$name} {
-      #{$property}: offset('#{$name}');
-    }
-  }
-}
-
-@mixin webkit-scrollbar() {
-  ::-webkit-scrollbar {
-    width: use('scrollable-thumb-size');
-  }
-  ::-webkit-scrollbar:horizontal {
-    height: use('scrollable-thumb-size');
-  }
-  ::-webkit-scrollbar-track {
-    background-color: color-token('scrollbar-track-background');
-  }
-  ::-webkit-scrollbar-thumb {
-    @include border-radius('pill');
-  
-    background-color: color-token('scrollbar');
-  
-    &:hover {
-      background-color: color-token('scrollbar-hover');
-    }
-    &:active {
-      background-color: color-token('scrollbar-active');
-    }
-  }
-  ::-webkit-scrollbar-corner {
-    display: none;
-  }
-}
-
-@mixin placeholder-color($color) {
-  &::placeholder               {color: $color}
-  &::-webkit-input-placeholder {color: $color}
-  &::-moz-placeholder          {color: $color}
-  &:-ms-input-placeholder      {color: $color}
-}
-
-@mixin placeholder-animated($props: 'all', $subClass: '&') {
-  &::placeholder               {@include animated($props, $subClass)}
-  &::-webkit-input-placeholder {@include animated($props, $subClass)}
-  &::-moz-placeholder          {@include animated($props, $subClass)}
-  &:-ms-input-placeholder      {@include animated($props, $subClass)}
-}
-
-$zindexMap: (
-  'zero': 0,
-  'first': 1,
-  'second': 2,
-  'max': 9000,
-);
-
-@function zindex($index) {
-  @return map.get($zindexMap, $index);
-}
-
-$mediaMap: (
-  'initial': 0px,
-  'xxsmall': 360px,
-  'xsmall': 640px,
-  'small': 768px,
-  'medium': 1024px,
-  'large': 1280px,
-  'xlarge': 1536px,
-);
-
-@mixin media-max($size: 'medium', $fix: 'empty') {
-  @if $fix == 'empty' {
-    @if $size == 'initial' {
-      @content;
-    } @else {
-      @media (min-width: calc(map.get($mediaMap, $size) - 1px)) { @content; }
-    }
-  } @else {
-    @media (min-width: $fix) { @content; }
-  }
-}
-
-@mixin media-min($size: 'medium', $fix: 'empty') {
-  @if $fix == 'empty' {
-    @if $size == 'initial' {
-      @content;
-    } @else {
-      @media (min-width: map.get($mediaMap, $size)) { @content; }
-    }
-  } @else {
-    @media (min-width: $fix) { @content; }
-  }
-}
+@use "sass:math";
+@use "sass:map";
+@use "sass:meta";
+@use "colors";
+
+@mixin def($var, $value) {
+  --#{$var}: #{$value};
+}
+@function use($var, $default: initial) {
+  @return var(--#{$var}, $default);
+}
+
+@function color($name, $luminance: 'pure', $alpha: 1.0) {
+  @if $luminance == 'pure' {
+    @return rgba(var(--color-#{$name}), #{$alpha});
+  }
+
+  @return rgba(var(--color-#{$name}-#{$luminance}), #{$alpha});
+}
+
+@function offset($size: 'normal') {
+  @return var(--offset-#{$size});
+}
+
+@function q($multiplier: 1) {
+  @if $multiplier == 1 {
+      @return var(--quant);
+  }
+
+  @return calc(var(--quant) * #{$multiplier});
+}
+
+@function control-height($size: 'normal') {
+  @return var(--control-height-#{$size});
+}
+
+@function font-size($size: 'normal') {
+  @return var(--font-size-#{$size});
+}
+
+@function font-weight($weight: 'normal') {
+  @return var(--font-weight-#{$weight});
+}
+
+@function negative($cssValue) {
+  @return calc(-1 * #{$cssValue});
+}
+
+@function border-radius($size: 'normal') {
+  @return var(--border-radius-#{$size});
+}
+
+@function viewport-width($multiplier: 1.0) {
+  @return calc((var(--width) - var(--offset-safezone) * 2) * #{$multiplier});
+}
+@function viewport-height($multiplier: 1.0) {
+  @return calc((var(--height) - var(--offset-safezone) * 2) * #{$multiplier});
+}
+
+$cfxui-color-luminance: (
+  'pure',
+  950,
+  900,
+  800,
+  700,
+  600,
+  500,
+  400,
+  300,
+  200,
+  100,
+  50,
+);
+
+$cfxui-color-alpha: (
+  '100': 1,
+  '90': 0.9,
+  '80': 0.8,
+  '70': 0.7,
+  '60': 0.6,
+  '50': 0.5,
+  '40': 0.4,
+  '30': 0.3,
+  '20': 0.2,
+  '10': 0.1,
+);
+
+@mixin define-font-size($name, $size, $line-height: 1.3) {
+  @include def('font-size-#{$name}', $size);
+  @include def('line-height-#{$name}', $line-height);
+}
+
+@mixin define-color($name, $color, $bg, $fg) {
+  .cfx-color-#{$name} { color: $color }
+
+  --color-#{$name}: #{colors.color-triplet($color)};
+  --color-#{$name}-50:  #{colors.color-triplet(colors.lab-gradient-step($bg, $color, 1, 7))};
+  --color-#{$name}-100: #{colors.color-triplet(colors.lab-gradient-step($bg, $color, 2, 7))};
+  --color-#{$name}-200: #{colors.color-triplet(colors.lab-gradient-step($bg, $color, 3, 7))};
+  --color-#{$name}-300: #{colors.color-triplet(colors.lab-gradient-step($bg, $color, 4, 7))};
+  --color-#{$name}-400: #{colors.color-triplet(colors.lab-gradient-step($bg, $color, 5, 7))};
+  --color-#{$name}-500: #{colors.color-triplet($color)};
+  --color-#{$name}-600: #{colors.color-triplet(colors.lab-gradient-step($color, $fg, 1, 7))};
+  --color-#{$name}-700: #{colors.color-triplet(colors.lab-gradient-step($color, $fg, 2, 7))};
+  --color-#{$name}-800: #{colors.color-triplet(colors.lab-gradient-step($color, $fg, 3, 7))};
+  --color-#{$name}-900: #{colors.color-triplet(colors.lab-gradient-step($color, $fg, 4, 7))};
+  --color-#{$name}-950: #{colors.color-triplet(colors.lab-gradient-step($color, $fg, 5, 7))};
+}
+
+@mixin define-main-color($bg, $fg) {
+  --color-main: #{colors.color-triplet($bg)};
+  --color-main-50:  #{colors.color-triplet(colors.lab-gradient-step($bg, $fg, 1,  12))};
+  --color-main-100: #{colors.color-triplet(colors.lab-gradient-step($bg, $fg, 2,  12))};
+  --color-main-200: #{colors.color-triplet(colors.lab-gradient-step($bg, $fg, 3,  12))};
+  --color-main-300: #{colors.color-triplet(colors.lab-gradient-step($bg, $fg, 4,  12))};
+  --color-main-400: #{colors.color-triplet(colors.lab-gradient-step($bg, $fg, 5,  12))};
+  --color-main-500: #{colors.color-triplet(colors.lab-gradient-step($bg, $fg, 6,  12))};
+  --color-main-600: #{colors.color-triplet(colors.lab-gradient-step($bg, $fg, 7,  12))};
+  --color-main-700: #{colors.color-triplet(colors.lab-gradient-step($bg, $fg, 8,  12))};
+  --color-main-800: #{colors.color-triplet(colors.lab-gradient-step($bg, $fg, 9,  12))};
+  --color-main-900: #{colors.color-triplet(colors.lab-gradient-step($bg, $fg, 10, 12))};
+  --color-main-950: #{colors.color-triplet(colors.lab-gradient-step($bg, $fg, 11, 12))};
+}
+
+@mixin define-main-colors($bg, $fg, $overrides: ()) {
+  $colors: map-merge((
+    'primary': #f50551,
+    'success': #01a370,
+    'warning': #ffae00,
+    'error': #ff2600,
+    'teal': #007892,
+    'aurum': #aa6f0d,
+    'silver': #a5a5a5
+  ), $overrides);
+
+  @include define-main-color($bg, $fg);
+
+  @each $colorName, $colorValue in $colors {
+    @include define-color($colorName, $colorValue, $bg, $fg);
+  }
+}
+
+@mixin define-theme($bg, $fg, $overrides: ()) {
+  $colors: map-merge((
+    'accent': #F40552,
+    'primary': #F1F1E4,
+    'secondary': #9EA4BD,
+    'tertiary': #FF75AC,
+    'green': #22BF4E,
+    'yellow': #FDA640,
+    'red': #E33131,
+    'argentum': #A3A3A3,
+    'aurum': #BFA45E,
+    'platinum': #F1F1F1,
+    'bg': #11131C,
+    'bg-light': #1C202E,
+    'bg-dark': #1C202E,
+    'bg-dark-grey': #1A1A1A,
+    'bg-black': #000000,
+  ), $overrides);
+
+  @each $colorName, $colorValue in $colors {
+    @include define-color($colorName, $colorValue, $bg, $fg);
+  }
+}
+
+@mixin define-color-token($name, $color) {
+  --color-#{$name}: #{$color};
+}
+@function color-token($name, ) {
+  @return var(--color-#{$name});
+}
+
+
+@mixin border-radius($size: 'normal') {
+  border-radius: var(--border-radius-#{$size});
+}
+
+@mixin font-size($size: 'normal') {
+  font-size: var(--font-size-#{$size});
+}
+@mixin font-family($family: 'primary') {
+  font-family: var(--font-family-#{$family});
+}
+@mixin font-weight($weight: 'normal') {
+  font-weight: var(--font-weight-#{$weight});
+}
+@mixin font-color($colorToken) {
+  color: color-token($colorToken);
+}
+
+@mixin letter-spacing($size: 'normal') {
+  letter-spacing: var(--letter-spacing-#{$size});
+}
+
+@mixin line-height($size: 'normal') {
+  line-height: var(--line-height-#{$size});
+}
+
+@mixin animated($props: 'all', $subClass: '&') {
+  @if type-of($props) == 'list' {
+    $transition: ();
+    @each $property in $props {
+      $transition: append(
+          $transition, ($property .25s ease), $separator: comma
+      );
+    }
+    #{$subClass} {
+      transition: $transition,
+        outline-offset 0s,
+        outline 0s;
+    }
+  } @else {
+    #{$subClass} {
+      transition: #{$props} .25s ease,
+        outline-offset 0s,
+        outline 0s;
+    }
+  }
+}
+
+@mixin fake-backdrop-blur($topLayer: false, $topLayerBlend: false, $topLayerSize: false, $topLayerAttachement: false) {
+  --_backdrop-color: var(--backdrop-color, transparent);
+  --_backdrop-image-blur: var(--backdrop-image-blur, url(assets/images/bg2-blur.png));
+
+  @if not $topLayer {
+    $topLayer: linear-gradient(use('_backdrop-color'), use('_backdrop-color'));
+  }
+
+  @if not $topLayerBlend {
+    $topLayerBlend: normal;
+  }
+
+  @if not $topLayerSize {
+    $topLayerSize: cover;
+  }
+
+  @if not $topLayerAttachement {
+    $topLayerAttachement: scroll;
+  }
+
+  background-color: use('_backdrop-color');
+  background-image:
+    $topLayer,
+    linear-gradient(color-token('backdrop-shader'), color-token('backdrop-shader')),
+    use('_backdrop-image-blur'),
+    use('_backdrop-image-blur');
+  background-blend-mode: $topLayerBlend, normal, overlay;
+  background-size: $topLayerSize, cover, cover, cover;
+  background-attachment: $topLayerAttachement, scroll, fixed, fixed;
+}
+
+$offsets: (
+  'none': 0px,
+  'hairthin': 1px,
+  'thin': 2px,
+  'xxsmall': q(.25),
+  'xsmall': q(.5),
+  'small': q(1),
+  'normal': q(2),
+  'medium': q(2.5),
+  'large': q(4),
+  'xlarge': q(6),
+  'safezone': q(8),
+);
+
+@mixin offset-classes($prefix: 'offset', $property: 'gap') {
+  @each $name, $value in $offsets {
+    &.#{$prefix}-#{$name} {
+      #{$property}: offset('#{$name}');
+    }
+  }
+}
+
+@mixin webkit-scrollbar() {
+  ::-webkit-scrollbar {
+    width: use('scrollable-thumb-size');
+  }
+  ::-webkit-scrollbar:horizontal {
+    height: use('scrollable-thumb-size');
+  }
+  ::-webkit-scrollbar-track {
+    background-color: color-token('scrollbar-track-background');
+  }
+  ::-webkit-scrollbar-thumb {
+    @include border-radius('pill');
+  
+    background-color: color-token('scrollbar');
+  
+    &:hover {
+      background-color: color-token('scrollbar-hover');
+    }
+    &:active {
+      background-color: color-token('scrollbar-active');
+    }
+  }
+  ::-webkit-scrollbar-corner {
+    display: none;
+  }
+}
+
+@mixin placeholder-color($color) {
+  &::placeholder               {color: $color}
+  &::-webkit-input-placeholder {color: $color}
+  &::-moz-placeholder          {color: $color}
+  &:-ms-input-placeholder      {color: $color}
+}
+
+@mixin placeholder-animated($props: 'all', $subClass: '&') {
+  &::placeholder               {@include animated($props, $subClass)}
+  &::-webkit-input-placeholder {@include animated($props, $subClass)}
+  &::-moz-placeholder          {@include animated($props, $subClass)}
+  &:-ms-input-placeholder      {@include animated($props, $subClass)}
+}
+
+$zindexMap: (
+  'zero': 0,
+  'first': 1,
+  'second': 2,
+  'max': 9000,
+);
+
+@function zindex($index) {
+  @return map.get($zindexMap, $index);
+}
+
+$mediaMap: (
+  'initial': 0px,
+  'xxsmall': 360px,
+  'xsmall': 640px,
+  'small': 768px,
+  'medium': 1024px,
+  'large': 1280px,
+  'xlarge': 1536px,
+);
+
+@mixin media-max($size: 'medium', $fix: 'empty') {
+  @if $fix == 'empty' {
+    @if $size == 'initial' {
+      @content;
+    } @else {
+      @media (min-width: calc(map.get($mediaMap, $size) - 1px)) { @content; }
+    }
+  } @else {
+    @media (min-width: $fix) { @content; }
+  }
+}
+
+@mixin media-min($size: 'medium', $fix: 'empty') {
+  @if $fix == 'empty' {
+    @if $size == 'initial' {
+      @content;
+    } @else {
+      @media (min-width: map.get($mediaMap, $size)) { @content; }
+    }
+  } @else {
+    @media (min-width: $fix) { @content; }
+  }
+}