mediacube-ui-v2 0.0.44 → 0.0.45

package/README.md

@@ -132,6 +132,10 @@ TypeScript cannot handle type information for `.vue` imports by default, so we r
    - Spacing
    - Svg
 
+## Storybook interface support
+
+![info image storybook interface](/npm_preview.jpg)
+
 [//]: # (## Available Types)
 [//]: # (—)
 [//]: # ()

package/README.template.md

@@ -132,6 +132,10 @@ TypeScript cannot handle type information for `.vue` imports by default, so we r
    - Spacing
    - Svg
 
+## Storybook interface support
+
+![info image storybook interface](/npm_preview.jpg)
+
 [//]: # (## Available Types)
 [//]: # ({{types}})
 [//]: # ()

package/dist/assets/fonts/inter/inter.css

@@ -0,0 +1,44 @@
+@font-face {
+  font-family: 'Inter';
+  font-style:  normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url("./Inter-Regular.woff2?v=3.19") format("woff2"),
+       url("./Inter-Regular.woff?v=3.19") format("woff");
+}
+
+@font-face {
+  font-family: 'Inter';
+  font-style:  italic;
+  font-weight: 400;
+  font-display: swap;
+  src: url("./Inter-Italic.woff2?v=3.19") format("woff2"),
+       url("./Inter-Italic.woff?v=3.19") format("woff");
+}
+
+@font-face {
+  font-family: 'Inter';
+  font-style:  normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url("./Inter-Medium.woff2?v=3.19") format("woff2"),
+       url("./Inter-Medium.woff?v=3.19") format("woff");
+}
+
+@font-face {
+  font-family: 'Inter';
+  font-style:  normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url("./Inter-SemiBold.woff2?v=3.19") format("woff2"),
+       url("./Inter-SemiBold.woff?v=3.19") format("woff");
+}
+
+@font-face {
+  font-family: 'Inter';
+  font-style:  normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url("./Inter-Bold.woff2?v=3.19") format("woff2"),
+       url("./Inter-Bold.woff?v=3.19") format("woff");
+}

package/dist/assets/styles/functions.scss

@@ -0,0 +1,187 @@
+/* GLOBAL FUNCTIONS
+--------------------------------------------- */
+
+// Create a tint
+//
+// @param  {Color}  $color to tint
+// @param  {Number} $percentage of `$color` in returned color
+// @return {Color}
+@function tint($color, $percentage) {
+  @return mix(white, $color, $percentage);
+}
+
+// Create a shade
+//
+// @param  {Color}  $color to shade
+// @param  {Number} $percentage of `$color` in returned color
+// @return {Color}
+@function shade($color, $percentage) {
+  @return mix(black, $color, $percentage);
+}
+
+// Calculate color difference
+// See https://www.w3.org/TR/AERT/#color-contrast for algorithm
+//
+// @param  {Color} $color of foreground
+// @param  {Color} $color of background
+// @return {Boolean}
+@function color-difference($foreground, $background) {
+  $r: (max(red($foreground), red($background))) - (min(red($foreground), red($background)));
+  $g: (max(green($foreground), green($background))) - (min(green($foreground), green($background)));
+  $b: (max(blue($foreground), blue($background))) - (min(blue($foreground), blue($background)));
+  $sum-rgb: $r + $g + $b;
+
+  @if $sum-rgb < 350 {
+    @return "false";
+  } @else {
+    @return "true";
+  }
+}
+
+// Set text color based on contrast
+//
+// @param  {Color}  $color to set
+// @param  {Color}  $background color to test
+// @param  {Color}  $fallback color to set in case contrast check fails
+@function set-text-color($color, $background, $fallback: null) {
+  @if $fallback == null {
+    $fallback: #000;
+  }
+  @if (color-difference($color, $background) == "false") {
+    @return $fallback;
+  } @else {
+    @return $color;
+  }
+}
+
+/// Darkens the foreground color by the background color. This is the same as the
+/// “multiply” filter in graphics apps.
+///
+/// @param {Color} $foreground - The color to darken.
+/// @param {Color} $background - The background to base darkening on.
+/// @return {Color} The modified color.
+@function color-multiply($foreground, $background: null) {
+  @if $background == null {
+    $background: #ffffff;
+  }
+
+  @return calc(#{$foreground} * #{$background} / 255);
+}
+
+/// Returns the value in rem for a given pixel value.
+/// @param {Number} $value - The pixel value to be converted.
+/// @return {Number} The converted value in rem.
+@function rem($value) {
+  $unit: unit($value);
+
+  @if $unit == "rem" {
+    @return $value;
+  } @else if $unit == "px" {
+    @return calc((#{$value} / #{$font-size-300}) * 1rem);
+  } @else if $unit == "em" {
+    @return calc((#{$unit} / (1em)) * 1rem);
+  } @else {
+    @error "Value must be in px, em, or rem.";
+  }
+}
+
+/// Returns the value in pixels for a given rem value.
+/// @param {Number} $value - The rem value to be converted.
+/// @return {Number} The converted value in pixels.
+@function px($value) {
+  $unit: unit($value);
+
+  @if $unit == "px" {
+    @return $value;
+  } @else if $unit == "em" {
+    @return calc((#{$value} / (1em)) * #{$font-size-300});
+  } @else if $unit == "rem" {
+    @return calc((#{$value} / (1rem)) * #{$font-size-300});
+  } @else {
+    @error "Value must be in rem, em, or px.";
+  }
+}
+
+/// Returns the list of available names in a given map.
+/// @param {Map} $map - The map of data to list the names from.
+/// @param {Number} $map - The level of depth to get names from.
+/// @return {String} The list of names in the map.
+@function available-names($map, $level: 1) {
+  @if type-of($map) != "map" {
+    @return null;
+  }
+
+  $output: "";
+  $newline: "\A ";
+
+  @if $level == 1 {
+    @each $key, $value in $map {
+      $output: $output + "#{$newline}- #{$key} #{available-names($value, $level + 1)}";
+    }
+  } @else {
+    $output: "(";
+    $i: 1;
+
+    @each $key, $value in $map {
+      $sep: if($i < length($map), ", ", "");
+      $output: $output + "#{$key}#{$sep}#{available-names($value, $level + 1)}";
+      $i: $i + 1;
+    }
+
+    $output: $output + ")";
+  }
+
+  @return $output;
+}
+
+/**
+ * Преобразование пикселей в em на основе переменной с базовым размером шрифта
+ * (указывается в px) проекта.
+ * @param  {number} $px Число без единиц измерения, кол-во пикселей
+ * @param  {string} $font-size Число пикселей, размер конт. шрифта на проекте
+ * @return {string} Результат преобразования $px в em на основе $font-size
+ */
+
+@function px-to-em($px, $font-size) {
+  @return calc(((#{$px} * 100 / calc(#{$font-size} / (1px))) / 100) * 1em);
+}
+
+/**
+ * Преобразование пикселей в множитель
+ * @param  {number} $line-height Число без единиц измерения, высота строки
+ * @param  {number} $font-size Число без единиц измерения, размер шрифта
+ * @return {number} Результат преобразования $line-height в множитель на основе $font-size
+ */
+@function line-height($line-height, $font-size) {
+  @return calc(round(calc((#{$line-height} / #{$font-size}) * 100)) / 100);
+}
+
+@function sum($numbers...) {
+  $sum: 0;
+  @each $number in $numbers {
+    $sum: $sum + $number;
+  }
+
+  @return $sum;
+}
+
+@function diff($from, $numbers...) {
+  @each $number in $numbers {
+    $from: $from - $number;
+  }
+
+  @return $from;
+}
+
+@function multiplication($from, $numbers...) {
+  @each $number in $numbers {
+    $from: $from * $number;
+  }
+
+  @return $from;
+}
+
+@function swapSign($number) {
+
+  @return -$number;
+}

package/dist/assets/styles/main.scss

@@ -0,0 +1,5 @@
+@use 'functions.scss' as *;
+@use 'mixins.scss' as *;
+@use 'tooltip.scss' as *;
+@use 'table.scss' as *;
+@use 'toast.scss' as *;