@epam/assets 4.5.0 → 4.5.4

package/build/less/loveship-color-vars.less

@@ -0,0 +1,172 @@
+@import (reference) 'loveship-colors.less';
+
+&.color-sky {
+    --uui-color-500: #E1F4FA;
+    --uui-color-600: #C4EAF5;
+    --uui-color-700: #30B6DD;
+    --uui-color-800: #16A2D9;
+    --uui-color-900: #0088CC;
+    --uui-contrast-color-700: contrast(#30B6DD, @night700, white, 65%);
+}
+
+&.color-grass {
+    --uui-color-500: #EBF3D8;
+    --uui-color-600: #D6E6B2;
+    --uui-color-700: #9BC837;
+    --uui-color-800: #6FAD2F;
+    --uui-color-900: #428024;
+    --uui-contrast-color-700: contrast(#9BC837, @night700, white, 65%);
+}
+
+&.color-sun {
+    --uui-color-500: #FFEDC9;
+    --uui-color-600: #FFDD96;
+    --uui-color-700: #FCAA00;
+    --uui-color-800: #F67E00;
+    --uui-color-900: #E64C00;
+    --uui-contrast-color-700: contrast(#FCAA00, @night700, white, 65%);
+}
+
+&.color-fire {
+    --uui-color-500: #FDE1E1;
+    --uui-color-600: #FCC8C8;
+    --uui-color-700: #FA4B4B;
+    --uui-color-800: #CC2929;
+    --uui-color-900: #B32424;
+    --uui-contrast-color-700: contrast(#FA4B4B, @night700, white, 65%);
+}
+
+&.color-carbon {
+    --uui-color-500: #6C6E7A;
+    --uui-color-600: #4F515C;
+    --uui-color-700: #3D404D;
+    --uui-color-800: #272933;
+    --uui-color-900: #17181F;
+    --uui-contrast-color-700: contrast(#3D404D, @night700, white, 65%);
+}
+
+&.color-night {
+    --uui-color-500: #ACAFBF;
+    --uui-color-600: #6C6F80;
+    --uui-color-700: #474A59;
+    --uui-color-800: #303240;
+    --uui-color-900: #1D1E26;
+    --uui-contrast-color-700: contrast(#474A59, @night700, white, 65%);
+}
+
+&.color-cobalt {
+    --uui-color-500: #32B2FB;
+    --uui-color-600: #2196F3;
+    --uui-color-700: #0E74E2;
+    --uui-color-800: #0453C7;
+    --uui-color-900: #003399;
+    --uui-contrast-color-700: contrast(#0E74E2, @night700, white, 65%);
+}
+
+&.color-lavanda {
+    --uui-color-500: #6362C9;
+    --uui-color-600: #3F51B5;
+    --uui-color-700: #2E3A9D;
+    --uui-color-800: #21288D;
+    --uui-color-900: #191980;
+    --uui-contrast-color-700: contrast(#2E3A9D, @night700, white, 65%);
+}
+
+&.color-fuchsia {
+    --uui-color-500: #F5527B;
+    --uui-color-600: #E91E63;
+    --uui-color-700: #CD0053;
+    --uui-color-800: #B00052;
+    --uui-color-900: #94004C;
+    --uui-contrast-color-700: contrast(#CD0053, @night700, white, 65%);
+}
+
+&.color-white {
+    --uui-color-500: lighten(@white, 20%);
+    --uui-color-600: lighten(@white, 10%);
+    --uui-color-700: @white;
+    --uui-color-800: darken(@white, 10%);
+    --uui-color-900: darken(@white, 20%);
+    --uui-contrast-color-700: contrast(@white, @night700, white, 65%);
+}
+
+&.color-night50 {
+    --uui-color-500: lighten(@night50, 20%);
+    --uui-color-600: lighten(@night50, 10%);
+    --uui-color-700: @night50;
+    --uui-color-800: darken(@night50, 10%);
+    --uui-color-900: darken(@night50, 20%);
+    --uui-contrast-color-700: contrast(@night50, @night700, white, 65%);
+}
+
+&.color-night100 {
+    --uui-color-500: lighten(@night100, 20%);
+    --uui-color-600: lighten(@night100, 10%);
+    --uui-color-700: @night100;
+    --uui-color-800: darken(@night100, 10%);
+    --uui-color-900: darken(@night100, 20%);
+    --uui-contrast-color-700: contrast(@night100, @night700, white, 65%);
+}
+
+&.color-night200 {
+    --uui-color-500: lighten(@night200, 20%);
+    --uui-color-600: lighten(@night200, 10%);
+    --uui-color-700: @night200;
+    --uui-color-800: darken(@night200, 10%);
+    --uui-color-900: darken(@night200, 20%);
+    --uui-contrast-color-700: contrast(@night200, @night700, white, 65%);
+}
+
+&.color-night300 {
+    --uui-color-500: lighten(@night300, 20%);
+    --uui-color-600: lighten(@night300, 10%);
+    --uui-color-700: @night300;
+    --uui-color-800: darken(@night300, 10%);
+    --uui-color-900: darken(@night300, 20%);
+    --uui-contrast-color-700: contrast(@night300, @night700, white, 65%);
+}
+
+&.color-night400 {
+    --uui-color-500: lighten(@night400, 20%);
+    --uui-color-600: lighten(@night400, 10%);
+    --uui-color-700: @night400;
+    --uui-color-800: darken(@night400, 10%);
+    --uui-color-900: darken(@night400, 20%);
+    --uui-contrast-color-700: contrast(@night400, @night700, white, 65%);
+}
+
+&.color-night500 {
+    --uui-color-500: lighten(@night500, 20%);
+    --uui-color-600: lighten(@night500, 10%);
+    --uui-color-700: @night500;
+    --uui-color-800: darken(@night500, 10%);
+    --uui-color-900: darken(@night500, 20%);
+    --uui-contrast-color-700: contrast(@night500, @night700, white, 65%);
+}
+
+&.color-night600 {
+    --uui-color-500: lighten(@night600, 20%);
+    --uui-color-600: lighten(@night600, 10%);
+    --uui-color-700: @night600;
+    --uui-color-800: darken(@night600, 10%);
+    --uui-color-900: darken(@night600, 20%);
+    --uui-contrast-color-700: contrast(@night600, @night700, white, 65%);
+}
+
+&.color-night700 {
+    --uui-color-500: lighten(@night700, 20%);
+    --uui-color-600: lighten(@night700, 10%);
+    --uui-color-700: @night700;
+    --uui-color-800: darken(@night700, 10%);
+    --uui-color-900: darken(@night700, 20%);
+    --uui-contrast-color-700: contrast(@night700, @night700, white, 65%);
+}
+
+&.color-night900 {
+    --uui-color-500: lighten(@night900, 20%);
+    --uui-color-600: lighten(@night900, 10%);
+    --uui-color-700: @night900;
+    --uui-color-800: darken(@night900, 10%);
+    --uui-color-900: darken(@night900, 20%);
+    --uui-contrast-color-700: contrast(@night900, @night700, white, 65%);
+}

package/build/less/loveship-colors.less

@@ -0,0 +1,37 @@
+// Main Colors
+@sky: #30B6DD;
+@grass: #9BC837;
+@sun: #FCAA00;
+@fire: #FA4B4B;
+
+// Secondary Colors
+@cobalt: #0E74E2;
+@lavanda: #2E3A9D;
+@fuchsia: #CD0053;
+@white: #FFFFFF;
+
+/* Carbon scale */
+@carbon50: #F5F6FA;
+@carbon100: #D7D9E0;
+@carbon200: #B6B8C2;
+@carbon300: #9698A3;
+@carbon400: #81838F;
+@carbon500: #6C6E7A;
+@carbon600: #4F515C;
+@carbon700: #3D404D;
+@carbon800: #272933;
+@carbon900: #17181F;
+
+/* Night scale */
+@night50: #FAFAFC;
+@night100: #F5F6FA;
+@night200: #EBEDF5;
+@night300: #E1E3EB;
+@night400: #CED0DB;
+@night500: #ACAFBF;
+@night600: #6C6F80;
+@night700: #474A59;
+@night800: #303240;
+@night900: #1D1E26;
+
+@loveship-epam-colors: sky, grass, sun, fire, carbon, night, cobalt, lavanda, fuchsia, white, night50, night100, night200, night300, night400, night500, night600, night700, night900;

package/build/less/text-size.less

@@ -0,0 +1,49 @@
+.text-size(@size, @border-width: 0px) {
+    & when (@size = 18) {
+        @vpadding: 3px - @border-width;
+        padding-top: @vpadding;
+        padding-bottom: @vpadding;
+        line-height: 12px;
+        font-size: 10px;
+    }
+
+    & when (@size = 24) {
+        @vpadding: 3px - @border-width;
+        padding-top: @vpadding;
+        padding-bottom: @vpadding;
+        line-height: 18px;
+        font-size: 12px;
+    }
+
+    & when (@size = 30) {
+        @vpadding: 6px - @border-width;
+        padding-top: @vpadding;
+        padding-bottom: @vpadding;
+        line-height: 18px;
+        font-size: 14px;
+    }
+
+    & when (@size = 36) {
+        @vpadding: 9px - @border-width;
+        padding-top: @vpadding;
+        padding-bottom: @vpadding;
+        line-height: 18px;
+        font-size: 14px;
+    }
+
+    & when (@size = 42) {
+        @vpadding: 9px - @border-width;
+        padding-top: @vpadding;
+        padding-bottom: @vpadding;
+        line-height: 24px;
+        font-size: 16px;
+    }
+
+    & when (@size = 48) {
+        @vpadding: 12px - @border-width;
+        padding-top: @vpadding;
+        padding-bottom: @vpadding;
+        line-height: 24px;
+        font-size: 16px;
+    }
+}

package/build/less/typography.less

@@ -0,0 +1,196 @@
+@import './loveship-colors.less';
+@import './fonts.less';
+
+.overflow-ellipsis() {
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.typography-header() {
+    :global(.hero-header), h1, h2, h3, h4, h5, h6 {
+        margin: 0;
+    }
+
+    :global(.hero-header), h2 {
+        font-family: @font-sans-bold;
+    }
+
+    h3, h4, h5, h6 {
+        font-family: @font-sans-semibold;
+    }
+
+    h4, h5, h6 {
+        margin: 12px 0;
+        line-height: 24px;
+    }
+
+    :global(.hero-header) {
+        margin: 30px 0;
+        font-size: 72px;
+        line-height: 72px;
+    }
+
+    h1 {
+        margin: 24px 0;
+        font-size: 42px;
+        line-height: 48px;
+    }
+
+    h2 {
+        margin: 18px 0;
+        font-size: 30px;
+        line-height: 36px;
+    }
+
+    h3 {
+        margin: 12px 0;
+        font-size: 24px;
+        line-height: 30px;
+    }
+
+    h4 {
+        font-size: 18px;
+    }
+
+    h5 {
+        font-size: 16px;
+    }
+
+    h6 {
+        font-size: 14px;
+    }
+}
+
+.typography-inline() {
+    b, strong {
+        font-family: @font-sans-semibold;
+    }
+
+    i, em {
+        font-family: @font-sans-italic;
+    }
+
+    a {
+        display: inline-flex;
+        align-items: center;
+        color: @sky;
+
+        &:hover {
+            text-decoration: none;
+            color: darken(@sky, 10%);
+        }
+    }
+
+    code {
+        margin: 0 4px;
+        padding: 2px 4px;
+        color: @night50;
+        background-color: @night700;
+        border-radius: 3px;
+        font-family: @font-roboto-mono;
+        white-space: pre-wrap;
+        word-wrap: normal;
+    }
+}
+
+.typography-block() {
+    p {
+        margin: 12px 0;
+    }
+
+    ol, ul {
+        padding: 0;
+        margin-block-start: 0;
+        margin-block-end: 0;
+
+        ol, ul {
+            margin-left: 18px;
+        }
+    }
+
+    li {
+        // padding-top: 3px;
+        // padding-bottom: 3px;
+    }
+
+    ul li {
+        margin-left: 18px;
+    }
+
+    ol li {
+        margin-left: 14px;
+    }
+
+    pre {
+        margin: 12px 0;
+        padding: 12px 18px;
+        color: @night50;
+        background-color: @night700;
+        border-radius: 3px;
+        font-family: monospace;
+        white-space: pre-wrap;
+        word-wrap: normal;
+    }
+
+    figure {
+        margin: 12px 0;
+    }
+}
+
+.typography-12() {
+    font-size: 12px;
+    line-height: 18px;
+
+    b, strong {
+        color: @night900;
+    }
+
+    p {
+        margin: 6px 0;
+    }
+}
+
+.typography-14() {
+    font-size: 14px;
+    line-height: 24px;
+}
+
+.typography-16() {
+    font-size: 16px;
+    line-height: 24px;
+}
+
+:local(.typography-header) {
+    .typography-header();
+}
+
+:local(.typography-block) {
+    .typography-block();
+}
+
+:local(.typography-inline) {
+    .typography-inline();
+}
+
+:local(.typography-16) {
+    .typography-16();
+}
+
+:local(.typography-14) {
+    .typography-14();
+}
+
+:local(.typography-12) {
+    .typography-12();
+}
+
+:local(.typography-loveship) {
+    font-family: @font-sans;
+    color: @night700;
+    composes: typography-header;
+    composes: typography-block;
+    composes: typography-inline;
+}
+
+
+

package/build/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "@epam/assets",
+  "version": "4.5.3",
+  "description": "EPAM Assets Library",
+  "author": "EPAM",
+  "license": "MIT",
+  "scripts": {
+    "build": "node ../uui-build/scripts/buildModule",
+    "prepublish": "yarn build"
+  },
+  "dependencies": {
+    "normalize.css": "^7.0.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/epam/UUI"
+  },
+  "gitHead": "a46206079e94ed85069ae90a59cc4ba48b9bc9eb",
+  "publishConfig": {
+    "directory": "build"
+  }
+}

package/build/readme.md

@@ -0,0 +1,7 @@
+# UUI Assets package
+
+This package is a part of [EPAM UUI](https://github.com/epam/UUI) library.
+
+@epam/assets contains variety of assets, which are usable without React:
+- icons set
+- SCSS and LESS styles and mixins

package/build/scss/contrast.scss

@@ -0,0 +1,39 @@
+@use "sass:math";
+
+@function pow($base, $exponent) {
+    $result: 1;
+    @for $_ from 1 through $exponent {
+        $result: $result * $base;
+    }
+
+    @return $result;
+}
+
+@function de-gamma($n) {
+    @if $n <= 0.03928 {
+        @return math.div($n, 12.92);
+    } @else {
+        @return pow(math.div(($n + 0.055), 1.055), 2);
+    }
+}
+
+@function brightness($c) {
+    $rlin: de-gamma(math.div(red($c), 255));
+    $glin: de-gamma(math.div(green($c), 255));
+    $blin: de-gamma(math.div(blue($c), 255));
+    @return (0.2126 * $rlin + 0.7152 * $glin + 0.0722 * $blin) * 100;
+}
+
+@function contrast($color, $dark: #000000, $light: #FFFFFF) {
+    @if $color == null {
+        @return null;
+    }
+
+    @else {
+        $color-brightness: brightness($color);
+        $light-text-brightness: brightness($light);
+        $dark-text-brightness: brightness($dark);
+
+        @return if(abs($color-brightness - $light-text-brightness) > abs($color-brightness - $dark-text-brightness), $light, $dark);
+    }
+}

package/build/scss/control-layout.scss

@@ -0,0 +1,2 @@
+$panel-border-radius: 6px;
+$control-border-radius: 3px;

package/build/scss/control-mods.scss

@@ -0,0 +1,51 @@
+@use './effects' as *;
+@use './loveship-color-vars' as *;
+@use './control-layout' as *;
+
+@mixin control-form-mode() {
+    background-color: $white;
+    border-color: $night200;
+    border-style: solid;
+    border-radius: $control-border-radius;
+
+    &:hover {
+        border-color: $night200;
+    }
+
+    &:global(.uui-focus) {
+        @include control-focus-effect($sky);
+        border-color: darken($sky, 10%);
+    }
+}
+
+@mixin control-inline-mode() {
+    background-color: transparent;
+    border-color: transparent;
+    border-style: solid;
+    border-radius: $control-border-radius;
+
+    &:hover {
+        border-color: $night200;
+    }
+
+    &:global(.uui-focus) {
+        @include control-focus-effect($sky);
+        border-color: darken($sky, 10%);
+    }
+}
+
+@mixin control-cell-mode() {
+    background-color: transparent;
+    border-color: transparent;
+    border-style: solid;
+    border-radius: 0;
+
+    &:hover {
+        border-color: $night200;
+    }
+
+    &:global(.uui-focus) {
+        border-color: fade-out($sky, 0.6);
+        box-shadow: inset 0 0 0 1px fade-out($sky, 0.6);
+    }
+}

package/build/scss/control-size.scss

@@ -0,0 +1,7 @@
+@use 'sass:math';
+@mixin control-size($size, $borderWidth) {
+    $padding: math.div($size, 6) - $borderWidth;
+    min-width: $size;
+    padding-left: $padding;
+    padding-right: $padding;
+}

package/build/scss/dnd.scss

@@ -0,0 +1,9 @@
+@mixin dnd-cursor-style {
+    &:hover {
+        cursor: grab;
+    }
+
+    &:active {
+        cursor: grabbing;
+    }
+}

package/build/scss/effects.scss

@@ -0,0 +1,25 @@
+@mixin panel-shadow() { box-shadow: 0 1px 3px 0 rgba(51, 51, 51, 0.2); }
+
+@mixin panel-top-shadow() { box-shadow: inset 0 10px 5px -10px rgba(51, 51, 51, 0.2); }
+
+@mixin button-focus-shadow() { box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1); }
+
+@mixin dnd-ghost-shadow() { box-shadow: 0 1px 3px 0 rgba(51, 51, 51, 0.2); }
+
+@mixin control-focus-effect($name) { box-shadow: 0 0 0 2px fade-out($name, 0.6); }
+
+$scroll-shadow-size: 10px;
+$scroll-shadow-opacity: 0.2;
+
+@mixin scroll-shadow-base() {
+    position: absolute;
+}
+
+@mixin scroll-shadow-top() {
+    @include scroll-shadow-base();
+    top: 0;
+    left: 0;
+    right: 0;
+    height: $scroll-shadow-size;
+    background: 'linear-gradient(to bottom, rgba(0, 0, 0, #{$scroll-shadow-opacity}) 0%, rgba(0, 0, 0, 0) 100%)';
+}