@nu-art/ts-styles 0.200.68 → 0.200.70

package/index.scss

@@ -1 +1 @@
-@forward "./styles/functions-and-mixins";
+@forward "styles";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nu-art/ts-styles",
-  "version": "0.200.68",
+  "version": "0.200.70",
   "author": "nu-art",
   "description": "Styles by Cipher",
   "main": "dist/index.js",
@@ -13,7 +13,7 @@
     "linkDirectory": true
   },
   "dependencies": {
-    "@nu-art/ts-common": "0.200.68",
+    "@nu-art/ts-common": "0.200.70",
     "react": "^18.2.0"
   },
   "devDependencies": {

package/styles/consts.scss

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

package/styles/index.scss

@@ -0,0 +1,6 @@
+@forward "palette";
+@forward "mouse-interaction";
+@forward "scroll-bar";
+@forward "shapes";
+@forward "text";
+@forward "transitioning";

package/styles/mouse-interaction/index.scss

@@ -0,0 +1 @@
+@forward "mouse-interactive-colors";

package/styles/mouse-interaction/mouse-interactive-colors.scss

@@ -0,0 +1,45 @@
+@use '../consts' as consts;
+
+/// Sets backgrounds for element based on mouse interaction
+///
+/// @param $bg - base background
+/// @param $bgh - background when mouse hover
+/// @param $bga - background when mouse click
+///
+@mixin mouse-interactive-background($bg, $bg-h: $bg ,$bg-a: $bg-h) {
+  background: $bg;
+  &:hover {
+    background: $bg-h;
+  }
+  &:active {
+    background: $bg-a;
+  }
+}
+
+/// 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 consts.$svg-prop-rules {
+    @include setIconProp($rule, $color);
+    &:hover {
+      @include setIconProp($rule, $color-h);
+    }
+    &:active {
+      @include setIconProp($rule, $color-a);
+    }
+  }
+}
+
+@mixin setIconProp($prop,$value) {
+  *:not([data-no-#{$prop}="true"]):not(g) {
+    #{$prop}: $value;
+  }
+}

package/styles/palette/_palette.scss

@@ -0,0 +1,12 @@
+@use 'sass:math';
+@use 'sass:list';
+
+@function paletteBuilder($baseColor,$steps:7) {
+  $colorsList: ();
+  @for $i from 0 to $steps {
+    $lightness: math.percentage(math.div($i, $steps));
+    $newColor: scale-color($baseColor, $lightness: $lightness);
+    $colorsList: list.append($colorsList, #{$newColor});
+  }
+  @return $colorsList
+}

package/styles/palette/index.scss

@@ -0,0 +1,2 @@
+@forward "palette";
+@forward "palettes";

package/styles/{functions-and-mixins/_palette.scss → palette/palettes.scss}

@@ -1,20 +1,20 @@
 @use 'sass:list';
-@use 'node_modules/@nu-art/thunderstorm/styles' as ts;
+@use './_palette' as *;
 
 $colorChunks: 7;
-$_black: ts.buildPalette(#000000, $colorChunks);
-$_gray-blue: ts.buildPalette(#2C3541, $colorChunks);
-$_dark-blue: ts.buildPalette(#004A72, $colorChunks);
-$_dark-green: ts.buildPalette(#2E5651, $colorChunks);
-$_purple: ts.buildPalette(#401F5C, $colorChunks);
-$_pink: ts.buildPalette(#8F1657, $colorChunks);
-$_ochre: ts.buildPalette(#876019, $colorChunks);
-$_orange: ts.buildPalette(#B94804, $colorChunks);
-$_red: ts.buildPalette(#D8042E, $colorChunks);
-$_gray: ts.buildPalette(#808080, $colorChunks);
-$_light-gray: ts.buildPalette(#D3D3D3, $colorChunks);
-$_monochromatic: ts.buildPalette(#9CAEB7, $colorChunks);
-$_green: ts.buildPalette(#2AA10F, $colorChunks);
+$_black: paletteBuilder(#000000, $colorChunks);
+$_gray-blue: paletteBuilder(#2C3541, $colorChunks);
+$_dark-blue: paletteBuilder(#004A72, $colorChunks);
+$_dark-green: paletteBuilder(#2E5651, $colorChunks);
+$_purple: paletteBuilder(#401F5C, $colorChunks);
+$_pink: paletteBuilder(#8F1657, $colorChunks);
+$_ochre: paletteBuilder(#876019, $colorChunks);
+$_orange: paletteBuilder(#B94804, $colorChunks);
+$_red: paletteBuilder(#D8042E, $colorChunks);
+$_gray: paletteBuilder(#808080, $colorChunks);
+$_light-gray: paletteBuilder(#D3D3D3, $colorChunks);
+$_monochromatic: paletteBuilder(#9CAEB7, $colorChunks);
+$_green: paletteBuilder(#2AA10F, $colorChunks);
 
 @function monochromatic($i) {
   @return #{list.nth($_monochromatic,$i)}

package/styles/scroll-bar/custom-scroll-bar.scss

@@ -0,0 +1,66 @@
+@use '../palette' as palette;
+
+@mixin customScrollbar($direction,$showOnlyOnHover: false) {
+  $trackBG: palette.gray(7);
+  $thumbBG: palette.dark-blue(1);
+  //Scrollbar
+  &::-webkit-scrollbar {
+    background-color: $trackBG;
+  }
+
+  //Scrollbar Handle
+  &::-webkit-scrollbar-thumb {
+    background-color: $thumbBG;
+    border: 2px solid $trackBG;
+    border-radius: 4px;
+  }
+
+  //Direction Diff
+  @if $direction == 'horizontal' {
+    overflow-x: auto;
+    //noinspection ALL
+    @supports (overflow-x: overlay) {
+      overflow-x: overlay;
+    }
+    &::-webkit-scrollbar {
+      height: 12px;
+    }
+  }
+
+  @if $direction == 'vertical' {
+    overflow-y: auto;
+    //noinspection ALL
+    @supports (overflow-y: overlay) {
+      overflow-y: overlay;
+    }
+    &::-webkit-scrollbar {
+      width: 9px;
+    }
+  }
+
+  @if $direction == 'both' {
+    overflow: auto;
+    //noinspection ALL
+    @supports (overflow: overlay) {
+      overflow: overlay;
+    }
+    &::-webkit-scrollbar {
+      width: 9px;
+      height: 12px;
+    }
+  }
+
+  @if $showOnlyOnHover {
+    &::-webkit-scrollbar,
+    &::-webkit-scrollbar-thumb {
+      visibility: hidden;
+    }
+
+    &:hover {
+      &::-webkit-scrollbar,
+      &::-webkit-scrollbar-thumb {
+        visibility: visible;
+      }
+    }
+  }
+}

package/styles/scroll-bar/index.scss

@@ -0,0 +1 @@
+@forward "custom-scroll-bar";

package/styles/shapes/circles.scss

@@ -0,0 +1,6 @@
+@mixin circleElement($radius) {
+  width: #{$radius * 2};
+  height: #{$radius * 2};
+  border-radius: 50%;
+  overflow: hidden;
+}

package/styles/shapes/index.scss

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

package/styles/text/index.scss

@@ -0,0 +1 @@
+@forward "text-wrapping";

package/styles/text/text-wrapping.scss

@@ -0,0 +1,5 @@
+@mixin text-ellipsis {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}

package/styles/transitioning/color-transitions.scss

@@ -0,0 +1,23 @@
+@use 'sass:list';
+@use '../consts' as consts;
+@use './general' as general;
+
+@function background-transition($time: 200, $style: ease-out) {
+  @return background #{$time}ms $style;
+}
+
+@function svg-color-transition($time:200 , $style: ease-out) {
+  $transitions: ();
+  @each $rule in consts.$svg-prop-rules {
+    $transitions: append($transitions, $rule #{$time}ms $style, comma);
+  }
+
+  @return $transitions;
+}
+
+@mixin set-svg-color-transition($time:200 , $style: ease-out) {
+  $transitions: svg-color-transition($time, $style);
+  *:not(g):not(svg) {
+    @include general.set-transitions($transitions)
+  }
+}

package/styles/transitioning/general.scss

@@ -0,0 +1,6 @@
+@mixin set-transitions($transitions) {
+  -moz-transition: #{$transitions};
+  -webkit-transition: #{$transitions};
+  -o-transition: #{$transitions};
+  transition: #{$transitions};
+}

package/styles/transitioning/index.scss

@@ -0,0 +1,2 @@
+@forward "general";
+@forward "color-transitions";

package/defaults.scss

@@ -1,18 +0,0 @@
-@import "./styles/components/TS_Dropdown/default";
-@import "./styles/components/TS_Input/default";
-@import "./styles/components/TS_Button/default";
-@import "./styles/components/TS_TextArea/default";
-@import "./styles/components/TS_Tabs/default";
-@import "./styles/components/TS_Table/default";
-@import "./styles/components/TS_Tooltip/default";
-@import "./styles/components/Dialogs/default";
-@import "./styles/components/TS_Radio/default";
-@import "./styles/components/TS_BusyButton/default";
-@import "./styles/components/TS_Checkbox/default";
-@import "./styles/components/TS_Tree/default";
-@import "./styles/components/TS_EditableText/default";
-@import "./styles/components/TS_PropRenderer/default";
-@import "./styles/components/QScrollWrapper/default";
-@import "./styles/components/TS_Workspace/default";
-@import "./styles/components/TS_Dialog/default";
-@import "./styles/components/TS_Toast/default";

package/styles/functions-and-mixins/_colors.scss

@@ -1,27 +0,0 @@
-@use 'sass:math';
-@use 'sass:list';
-
-//(Dir en) Grey
-$darker_grey: #504c4c;
-$almost-pure-grey: #707070;
-$sidewalk_grey: #8A959B;
-$very-light-grey: #F7F7F7;
-$scroll-track-background-grey: #eeeeee;
-$scroll-thumb-grey: #cccccc;
-
-//Others
-$white: white;
-$very_pastel_teal: #d2e0e2;
-$very-light-cyan: #f2f8ff;
-$near_white: #f0f0f0;
-$very_pastel_grey: #e5e9ee;
-
-//Uniques
-$unique_light_blue: #88DFFF;
-$unique_green: #4FC63C;
-$unique_orange: #FFA808;
-$unique_red: #F35B5B;
-$unique_glowing_red: #FF3D64;
-$unique_turquoise: #1DDBC6;
-$unique_green_select: #D6EEF0;
-$unique_light_blue_select: #F2F8FF;

package/styles/functions-and-mixins/advisor.scss

@@ -1,50 +0,0 @@
-@use 'palette' as palette;
-@use 'components' as components;
-
-@mixin advisor-button-colors {
-  @include components.mouseInteractiveBackground(palette.gray(7), white);
-  border: 1px solid #CFD4D8;
-}
-
-@mixin advisor-rule-out-item {
-  cursor: pointer;
-  width: 100%;
-  height: 26px;
-  background: #EDF1F3;
-  border: 1px solid #CFD4D8;
-  padding: 0 10px;
-  justify-content: space-between;
-  border-radius: 1px;
-  margin: 4px 0;
-  color: black;
-
-  .rule-out-action__name {
-    font: {
-      size: 14px;
-      family: Arial;
-    }
-  }
-
-  &:hover {
-    background: #F5F7F8;
-  }
-
-  &:active {
-    background: #D6DBDF;
-  }
-
-  &.pending {
-    box-shadow: inset 1px 1px 0px #00000029;
-    background: #F5F7F8;
-
-    .rule-out-action__name {
-      color: #001E95;
-    }
-
-    .icon--wrapper {
-      svg path {
-        fill: #001E95;
-      }
-    }
-  }
-}

package/styles/functions-and-mixins/buttons.scss

@@ -1,14 +0,0 @@
-@mixin circleButton {
-  width: 25px;
-  height: 25px;
-  border: 3px solid black;
-  border-radius: 50%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  font: {
-    size: 20px;
-    weight: 600;
-  }
-  cursor: pointer;
-}

package/styles/functions-and-mixins/components.scss

@@ -1,181 +0,0 @@
-@use 'palette' as palette;
-@use 'sass:list';
-
-@mixin customScrollbar($direction,$showOnlyOnHover: false) {
-  $trackBG: palette.gray(7);
-  $thumbBG: palette.dark-blue(1);
-  //Scrollbar
-  &::-webkit-scrollbar {
-    background-color: $trackBG;
-  }
-
-  //Scrollbar Handle
-  &::-webkit-scrollbar-thumb {
-    background-color: $thumbBG;
-    border: 2px solid $trackBG;
-    border-radius: 4px;
-  }
-
-  //Direction Diff
-  @if $direction == 'horizontal' {
-    overflow-x: auto;
-    //noinspection ALL
-    @supports (overflow-x: overlay) {
-      overflow-x: overlay;
-    }
-    &::-webkit-scrollbar {
-      height: 12px;
-    }
-  }
-
-  @if $direction == 'vertical' {
-    overflow-y: auto;
-    //noinspection ALL
-    @supports (overflow-y: overlay) {
-      overflow-y: overlay;
-    }
-    &::-webkit-scrollbar {
-      width: 9px;
-    }
-  }
-
-  @if $direction == 'both' {
-    overflow: auto;
-    //noinspection ALL
-    @supports (overflow: overlay) {
-      overflow: overlay;
-    }
-    &::-webkit-scrollbar {
-      width: 9px;
-      height: 12px;
-    }
-  }
-
-  @if $showOnlyOnHover {
-    &::-webkit-scrollbar,
-    &::-webkit-scrollbar-thumb {
-      visibility: hidden;
-    }
-
-    &:hover {
-      &::-webkit-scrollbar,
-      &::-webkit-scrollbar-thumb {
-        visibility: visible;
-      }
-    }
-  }
-}
-
-@mixin fancyDropDown {
-  .ts-overlay {
-    background: transparent;
-  }
-
-  .ts-dropdown__header {
-    border: 2px solid black;
-    border-radius: 10px;
-    position: relative;
-
-    .ts-input {
-      background: transparent;
-      padding: 0 5px;
-      border: none;
-      font: {
-        size: 13px;
-        weight: bold;
-      }
-    }
-  }
-
-  .ts-dropdown__items-container {
-    @include customScrollbar('both');
-    border: 2px solid black;
-    border-top: none;
-    padding-top: 18px;
-    transform: translateY(-18px);
-
-    .ts-dropdown__unselect-item {
-      font-size: 13px;
-    }
-
-    .ts-dropdown__items {
-      overflow-y: visible;
-      border: none
-    }
-
-    .ts-tree__node {
-      .node-data {
-        font-size: 13px;
-      }
-    }
-
-    &.inverted {
-      border-top: 2px solid black;
-      border-bottom: none;
-      padding-top: 0;
-      padding-bottom: 18px;
-      transform: translateY(18px);
-    }
-  }
-}
-
-@mixin mouseInteractiveBackground($background,$hoverBackground: $background, $activeBackground: $hoverBackground) {
-  background: $background;
-  cursor: pointer;
-
-  &:hover {
-    background: $hoverBackground;
-  }
-
-  &:active {
-    background: $activeBackground;
-  }
-}
-
-@mixin setRule($rule,$value) {
-  $rule: $value;
-}
-
-@mixin setIconProp($prop,$value) {
-  *:not([data-no-#{$prop}="true"]):not(g) {
-    #{$prop}: $value;
-  }
-}
-
-@mixin mouseInteractiveIcon($color,$hoverColor:$color,$activeColor:$hoverColor,$transition: 0) {
-  $rules: fill, stroke;
-  cursor: pointer;
-
-  @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};
-    }
-  }
-
-  @each $rule in $rules {
-    @include setIconProp($rule, $color);
-    &:hover {
-      @include setIconProp($rule, $hoverColor)
-    }
-    &:active {
-      @include setIconProp($rule, $activeColor)
-    }
-    //*:not([data-no-#{$rule}="true"]):not(g) {
-    //  #{$rule}: $color;
-    //}
-    //&:hover *:not([data-no-#{$rule}="true"]):not(g) {
-    //  #{$rule}: $hoverColor;
-    //}
-    //&:active *:not([data-no-#{$rule}="true"]):not(g) {
-    //  #{$rule}: $activeColor;
-    //}
-  }
-}

package/styles/functions-and-mixins/icons.scss

@@ -1,63 +0,0 @@
-@use 'palette' as palette;
-
-@mixin categoryPathItem {
-  font-size: 12px;
-  font-weight: 600;
-  background: palette.dark-green(3);
-  color: white;
-  border-radius: 10px;
-  padding: 2px 10px;
-  width: 120px;
-  text-align: center;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  overflow: hidden;
-}
-
-@mixin disease-profile-initials-icon {
-  //Dimensions
-  height: 16px;
-  width: fit-content;
-  min-width: 16px;
-  max-width: 36px;
-  padding: 0 4px;
-
-  //Font
-  font-size: 10px !important;
-  font-weight: 400;
-
-  //Display
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border-radius: 3px;
-}
-
-@mixin tag($lightColor,$darkColor) {
-  background: $lightColor;
-  border: 2px solid $darkColor;
-  border-radius: 10px;
-  min-width: 50px;
-  height: 28px;
-  padding: 0 10px;
-  flex-shrink: 0;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-@mixin disease-value-count {
-  flex-shrink: 0;
-  font: {
-    size: var(--workspace__default-font-size);
-    weight: bold;
-  }
-  color: var(--color__background__general-panel);
-  background: var(--color__disease-value-count__background);
-  width: 25px;
-  height: 25px;
-  border-radius: 50%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}

package/styles/functions-and-mixins/index.scss

@@ -1,11 +0,0 @@
-//Core Functionality
-@forward "palette";
-@forward "colors";
-@forward "fonts";
-
-//Useful shit
-@forward "text";
-@forward "buttons";
-@forward "icons";
-@forward "components";
-@forward "advisor";

package/styles/functions-and-mixins/text.scss

@@ -1,31 +0,0 @@
-@use 'palette' as palette;
-
-@mixin text-ellipsis {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-@mixin form-title {
-  font-size: 13px;
-  color: palette.gray-blue(3);
-}
-
-@mixin placeholderMessage {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-
-  font: {
-    size: 60px;
-    weight: 600;
-  }
-  white-space: pre-wrap;
-  text-align: center;
-
-  color: #616161;
-  background: #bababa;
-  text-shadow: #e0e0e0 1px 1px 0;
-}