@nu-art/ts-styles 0.400.4 → 0.400.6

package/icons/icons.d.ts

@@ -38,6 +38,9 @@ export declare const TS_Icons: {
     x: {
         component: (props: IconAttributes) => import("react/jsx-runtime").JSX.Element;
     };
+    dash: {
+        component: (props: IconAttributes) => import("react/jsx-runtime").JSX.Element;
+    };
     gear: {
         component: (props: IconAttributes) => import("react/jsx-runtime").JSX.Element;
     };

package/icons/icons.js

@@ -8,9 +8,11 @@ import { ReactComponent as Bell } from './svgs/icon__bell.svg';
 import { ReactComponent as Bin } from './svgs/icon__bin.svg';
 import { ReactComponent as X } from './svgs/icon__x.svg';
 import { ReactComponent as V } from './svgs/icon__v.svg';
+import { ReactComponent as Dash } from './svgs/icon__dash.svg';
 import { ReactComponent as More } from './svgs/icon__more.svg';
 import { ReactComponent as Collapse } from './svgs/icon__treeCollapse.svg';
 import { ReactComponent as Gear } from './svgs/icon__gear.svg';
+import { ReactComponent as User } from './svgs/icon__user.svg';
 import { ReactComponent as Information } from './svgs/icon__information.svg';
 import { ReactComponent as FilterStop } from './svgs/icon__filter-stop.svg';
 import { ReactComponent as Clear } from './svgs/icon__clear.svg';
@@ -20,7 +22,6 @@ import { ReactComponent as Google } from './svgs/icon__google.svg';
 import { ReactComponent as Download } from './svgs/icon__download.svg';
 import { ReactComponent as Copy } from './svgs/icon__copy.svg';
 import { ReactComponent as AddImage } from './svgs/icon__add-image.svg';
-import { ReactComponent as User } from './svgs/icon__user.svg';
 class RenderIcon extends React.Component {
     render() {
         const className = 'icon--wrapper ' + (this.props.className ?? '');
@@ -43,6 +44,7 @@ export const TS_Icons = {
     treeCollapse: { component: genIcon(Collapse) },
     v: { component: genIcon(V) },
     x: { component: genIcon(X) },
+    dash: { component: genIcon(Dash) },
     gear: { component: genIcon(Gear) },
     information: { component: genIcon(Information) },
     filterStop: { component: genIcon(FilterStop) },

package/icons/svgs/icon__dash.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" stroke-width="0">
+    <path stroke="#000" stroke-width="1.5" stroke-linecap="round" d="M1.5,5 L8.5,5"/>
+</svg>

package/icons/svgs/icon__v.svg

@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 24" stroke-width="0">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 24" stroke-width="0" class="v">
     <path fill="#000" fill-rule="evenodd" stroke="#000" stroke-width="1"
           d="M24.71 1.084a.844.844 0 0 0-1.192.208L9.978 20.81l-7.59-7.75a.842.842 0 0 0-1.209 0 .886.886 0 0 0 0 1.236l8.114 8.285a.839.839 0 0 0 .766.495.85.85 0 0 0 .698-.368L24.914 2.3a.886.886 0 0 0-.203-1.217"/>
 </svg>

package/icons/svgs/icon__x.svg

@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" stroke-width="0">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" stroke-width="0" class="x">
     <path fill="#000" fill-rule="evenodd"
           d="M8.3.757L5 4.057 1.7.757a.667.667 0 0 0-.943.943l3.3 3.3-3.3 3.3a.667.667 0 0 0 .943.943l3.3-3.3 3.3 3.3a.667.667 0 0 0 .943-.943L5.943 5l3.3-3.3A.667.667 0 0 0 8.3.757"/>
 </svg>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nu-art/ts-styles",
-  "version": "0.400.4",
+  "version": "0.400.6",
   "author": "nu-art",
   "description": "Styles by Cipher",
   "type": "module",
@@ -13,7 +13,7 @@
     "linkDirectory": true
   },
   "dependencies": {
-    "@nu-art/ts-common": "0.400.4",
+    "@nu-art/ts-common": "0.400.6",
     "react": "^18.0.0"
   },
   "devDependencies": {

package/styles/index.scss

@@ -1,5 +1,4 @@
 @forward "mixin";
-@forward "colors";
 @forward "palette";
 @forward "scroll-bar";
 @forward "shapes";

package/styles/mixin/index.scss

@@ -1,2 +1,3 @@
 @forward "grid";
-@forward "mouse";
+@forward "mouse";
+@forward "svgs";

package/styles/mixin/mouse.scss

@@ -1,100 +1,50 @@
-@use "../colors" as colors;
+@use './svgs' as *;
 
-@mixin mouseInteractiveBackground($background, $hoverBackground: $background, $activeBackground: $hoverBackground) {
+@mixin mouse-interactive-background($background, $hoverBackground: $background, $activeBackground: $hoverBackground) {
   & {
     background: $background;
-    cursor: pointer;
   }
-
   &:hover {
     background: $hoverBackground;
   }
-
   &:active {
     background: $activeBackground;
   }
 }
 
-@mixin mouseInteractiveBorder($border, $hoverBorder: $border, $activeBorder: $hoverBorder) {
+@mixin mouse-interactive-text($c,$c-h: $c,$c-a:$c-h) {
   & {
-    border: $border;
-    cursor: pointer;
+    color: $c;
   }
-
   &:hover {
-    border: $hoverBorder;
+    color: $c-h;
   }
-
   &:active {
-    border: $activeBorder;
+    color: $c-a;
   }
 }
 
-@mixin mouseInteractiveColor($color, $hoverColor:$color,$activeColor:$hoverColor) {
+@mixin mouse-interactive-border-color($border, $hoverBorder: $border, $activeBorder: $hoverBorder) {
   & {
-    color: $color;
-    cursor: pointer;
+    border: $border;
   }
-
   &:hover {
-    color: $hoverColor;
+    border: $hoverBorder;
   }
   &:active {
-    color: $activeColor
-  }
-}
-
-// Sets color for vector elements based on mouse interaction
-//
-// Will work on any vector element that doesn't have a corresponding "data-no-{rule}" attribute.
-// To avoid coloring the fill of the element set data-no-fill=true attribute
-// To avoid coloring the stroke of the element set data-no-stroke=true attribute
-//
-// @param $color - base background
-// @param $hoverColor - background when mouse hover
-// @param $activeColor - background when mouse click
-//
-@mixin mouseInteractiveIcon($color,$hoverColor:$color,$activeColor:$hoverColor,$transition: 0) {
-  $rules: fill, stroke;
-
-  @if $transition != 0 {
-    $transitionRules: '';
-    @each $rule in $rules {
-      $i: index($rules, $rule);
-      $transitionRules: $transitionRules + #{$rule $transition};
-      @if $i != length($rules) {
-        $transitionRules: $transitionRules + ', ';
-      }
-    }
-    *:not(g) {
-      transition: #{$transitionRules};
-    }
-  }
-
-  & {
-    cursor: pointer;
-  }
-
-  @each $rule in $rules {
-    @include colors.setIconProp($rule, $color);
-    &:hover {
-      @include colors.setIconProp($rule, $hoverColor)
-    }
-    &:active {
-      @include colors.setIconProp($rule, $activeColor)
-    }
+    border: $activeBorder;
   }
 }
 
-@mixin mouseInteractiveText($color, $hoverColor:$color, $activeColor:$hoverColor) {
-  & {
-    color: $color;
-  }
-
-  &:hover {
-    color: $hoverColor;
-  }
-  &:active {
-    color: $activeColor;
-  }
+@mixin edge-fade($girth, $color) {
+  mask-image: linear-gradient(to top, transparent, #{$color} #{$girth}),
+  linear-gradient(to bottom, transparent, #{$color} #{$girth}),
+  linear-gradient(to left, transparent, #{$color} #{$girth}),
+  linear-gradient(to right, transparent, #{$color} #{$girth});
+  mask-composite: intersect;
+  -webkit-mask-image: linear-gradient(to top, transparent, #{$color} #{$girth}),
+  linear-gradient(to bottom, transparent, #{$color} #{$girth}),
+  linear-gradient(to left, transparent, #{$color} #{$girth}),
+  linear-gradient(to right, transparent, #{$color} #{$girth});
+  -webkit-mask-composite: destination-in;
 }

package/styles/mixin/svgs.scss

@@ -0,0 +1,36 @@
+$svg-prop-rules: fill, stroke;
+
+@mixin setIconProp($prop,$value) {
+  *:not([data-no-#{$prop}="true"]):not(g):not(svg) {
+    #{$prop}: $value;
+  }
+}
+
+@mixin color-svg($color) {
+  @each $rule in $svg-prop-rules {
+    @include setIconProp($rule, $color);
+  }
+}
+
+/// Sets color for vector elements based on mouse interaction
+///
+/// Will work on any vector element that doesn't have a corresponding "data-no-{rule}" attribute.
+/// To avoid coloring the fill of the element set data-no-fill=true attribute
+/// To avoid coloring the stroke of the element set data-no-stroke=true attribute
+///
+/// @param $bg - base background
+/// @param $bgh - background when mouse hover
+/// @param $bga - background when mouse click
+///
+
+@mixin mouse-interactive-icon($color, $color-h: $color, $color-a: $color-h) {
+  @each $rule in $svg-prop-rules {
+    @include setIconProp($rule, $color);
+    &:hover {
+      @include setIconProp($rule, $color-h);
+    }
+    &:active {
+      @include setIconProp($rule, $color-a);
+    }
+  }
+}

package/styles/palette/_palette.scss

@@ -1,13 +1,31 @@
 @use 'sass:math';
 @use 'sass:color';
 @use 'sass:list';
+@use 'sass:meta';
 
 @function paletteBuilder($baseColor, $steps) {
   $colorsList: ();
   @for $i from 0 to $steps {
     $lightness: math.percentage(math.div($i, $steps));
     $newColor: color.scale($baseColor, $lightness: $lightness);
-    $colorsList: list.append($colorsList, #{$newColor});
+    $colorsList: list.append($colorsList, $newColor);
   }
   @return $colorsList
+}
+
+/// Returns the color with the given alpha (0..1)
+/// Accepts any Sass color: hex, rgb(), hsl(), etc.
+@function colorWithAlpha($color, $alpha: 1) {
+  @if meta.type-of($color) != 'color' {
+    @error "Expected a color, got #{meta.type-of($color)}: #{$color}";
+  }
+
+  @if meta.type-of($alpha) != 'number' or not ($alpha >= 0 and $alpha <= 1) {
+    @error "Alpha must be a number between 0 and 1. Got: #{$alpha}.";
+  }
+
+  $r: color.channel($color, "red", $space: rgb);
+  $g: color.channel($color, "green", $space: rgb);
+  $b: color.channel($color, "blue", $space: rgb);
+  @return rgba($r, $g, $b, $alpha);
 }

package/styles/palette/palettes.scss

@@ -17,53 +17,53 @@ $_monochromatic: paletteBuilder(#9CAEB7, $colorChunks);
 $_green: paletteBuilder(#2AA10F, $colorChunks);
 
 @function monochromatic($i) {
-  @return #{list.nth($_monochromatic,$i)}
+  @return list.nth($_monochromatic, $i);
 }
 
 @function black($i) {
-  @return #{list.nth($_black, $i)}
+  @return list.nth($_black, $i);
 }
 
 @function gray-blue($i) {
-  @return #{list.nth($_gray-blue, $i)}
+  @return list.nth($_gray-blue, $i);
 }
 
 @function dark-blue($i) {
-  @return #{list.nth($_dark-blue, $i)}
+  @return list.nth($_dark-blue, $i);
 }
 
 @function dark-green($i) {
-  @return #{list.nth($_dark-green, $i)}
+  @return list.nth($_dark-green, $i);
 }
 
 @function green($i) {
-  @return #{list.nth($_green,$i)}
+  @return list.nth($_green, $i);
 }
 
 @function purple($i) {
-  @return #{list.nth($_purple, $i)}
+  @return list.nth($_purple, $i);
 }
 
 @function pink($i) {
-  @return #{list.nth($_pink, $i)}
+  @return list.nth($_pink, $i);
 }
 
 @function ochre($i) {
-  @return #{list.nth($_ochre, $i)}
+  @return list.nth($_ochre, $i);
 }
 
 @function orange($i) {
-  @return #{list.nth($_orange, $i)}
+  @return list.nth($_orange, $i);
 }
 
 @function red($i) {
-  @return #{list.nth($_red, $i)}
+  @return list.nth($_red, $i);
 }
 
 @function gray($i) {
-  @return #{list.nth($_gray,$i)}
+  @return list.nth($_gray, $i);
 }
 
 @function light-gray($i) {
-  @return #{list.nth($_light-gray,$i)}
+  @return list.nth($_light-gray, $i);
 }

package/styles/transitioning/color-transitions.scss

@@ -1,5 +1,5 @@
 @use 'sass:list';
-@use '../consts' as consts;
+@use '../mixin' as M;
 @use './general' as general;
 
 @function background-transition($time: 200, $style: ease-out) {
@@ -8,7 +8,7 @@
 
 @function svg-color-transition($time:200 , $style: ease-out) {
   $transitions: ();
-  @each $rule in consts.$svg-prop-rules {
+  @each $rule in M.$svg-prop-rules {
     $transitions: list.append($transitions, $rule #{$time}ms $style, comma);
   }
 

package/styles/colors/index.scss

@@ -1 +0,0 @@
-@forward "svgs";

package/styles/colors/svgs.scss

@@ -1,13 +0,0 @@
-@use '../consts' as consts;
-
-@mixin setIconProp($prop,$value) {
-  *:not(svg):not(g):not([data-no-#{$prop}="true"]) {
-    #{$prop}: $value;
-  }
-}
-
-@mixin color-svg($color) {
-  @each $rule in consts.$svg-prop-rules {
-    @include setIconProp($rule, $color);
-  }
-}

package/styles/consts.scss

@@ -1 +0,0 @@
-$svg-prop-rules: fill, stroke;