@epam/assets 5.0.0-alpha.3 → 5.0.0

package/theme/theme_vanilla_thunder.scss

@@ -1,6 +1,6 @@
 /*  Name convention  */
 /* --uui-'component name or group of components name'-'styled part name'-'states(optional)'-'hover/active/focus(optional)' */
-:global(.uui-theme-vanilla_thunder) {
+.uui-theme-vanilla_thunder {
     --font-regular: 'Sans Regular', 'Arial', sans-serif;
     --font-semibold: 'Sans Semibold', 'Arial', sans-serif;
     --font-italic: 'Sans Italic', 'Arial', sans-serif;
@@ -691,22 +691,22 @@
 
     /* ------------------------------------ */
 
-    :global(.tooltip-contrast) {
+    .tooltip-contrast {
         --uui-tooltip-bg: var(--uui-surface-inverted);
         --uui-tooltip-text: var(--uui-contrast);
     }
 
-    :global(.tooltip-default) {
+    .tooltip-default {
         --uui-tooltip-bg: var(--uui-surface);
         --uui-tooltip-text: var(--uui-text-primary);
     }
 
-    :global(.tooltip-critical) {
+    .tooltip-critical {
         --uui-tooltip-bg: var(--uui-error-dark);
         --uui-tooltip-text: var(--uui-contrast);
     }
 
-    :global(.button-primary) {
+    .button-primary {
         --uui-btn-bg: var(--uui-primary);
         --uui-btn-bg-hover: var(--uui-primary-dark);
         --uui-btn-bg-active: var(--uui-primary-darkest);
@@ -723,7 +723,7 @@
         --uui-btn-caption-disabled: var(--uui-button-caption-disabled);
     }
 
-    :global(.button-accent) {
+    .button-accent {
         --uui-btn-bg: var(--uui-accent);
         --uui-btn-bg-hover: var(--uui-accent-dark);
         --uui-btn-bg-active: var(--uui-accent-darkest);
@@ -740,7 +740,7 @@
         --uui-btn-caption-disabled: var(--uui-button-caption-disabled);
     }
 
-    :global(.button-negative) {
+    .button-negative {
         --uui-btn-bg: var(--uui-negative);
         --uui-btn-bg-hover: var(--uui-negative-dark);
         --uui-btn-bg-active: var(--uui-negative-darkest);
@@ -757,7 +757,7 @@
         --uui-btn-caption-disabled: var(--uui-button-caption-disabled);
     }
 
-    :global(.button-secondary) {
+    .button-secondary {
         --uui-btn-bg: var(--uui-secondary);
         --uui-btn-bg-hover: var(--uui-secondary-dark);
         --uui-btn-bg-active: var(--uui-secondary-darkest);
@@ -774,105 +774,105 @@
         --uui-btn-caption-disabled: var(--uui-button-caption-disabled);
     }
 
-    :global(.icon-button-info) {
+    .icon-button-info {
         --uui-icon-btn: var(--uui-info);
         --uui-icon-btn-hover: var(--uui-info-dark);
         --uui-icon-btn-active: var(--uui-info-darkest);
         --uui-icon-btn-disabled: var(--uui-icon-disabled);
     }
 
-    :global(.icon-button-success) {
+    .icon-button-success {
         --uui-icon-btn: var(--uui-success);
         --uui-icon-btn-hover: var(--uui-success-dark);
         --uui-icon-btn-active: var(--uui-success-darkest);
         --uui-icon-btn-disabled: var(--uui-icon-disabled);
     }
 
-    :global(.icon-button-warning) {
+    .icon-button-warning {
         --uui-icon-btn: var(--uui-warning);
         --uui-icon-btn-hover: var(--uui-warning-dark);
         --uui-icon-btn-active: var(--uui-warning-darkest);
         --uui-icon-btn-disabled: var(--uui-icon-disabled);
     }
 
-    :global(.icon-button-error) {
+    .icon-button-error {
         --uui-icon-btn: var(--uui-error);
         --uui-icon-btn-hover: var(--uui-error-dark);
         --uui-icon-btn-active: var(--uui-error-darkest);
         --uui-icon-btn-disabled: var(--uui-icon-disabled);
     }
 
-    :global(.icon-button-secondary) {
+    .icon-button-secondary {
         --uui-icon-btn: var(--gray50);
         --uui-icon-btn-hover: var(--uui-color-night500-800);
         --uui-icon-btn-active: var(--uui-color-night500-900);
         --uui-icon-btn-disabled: var(--uui-icon-disabled);
     }
 
-    :global(.icon-button-default) {
+    .icon-button-default {
         --uui-icon-btn: var(--gray60);
         --uui-icon-btn-hover: var(--uui-color-night600-800);
         --uui-icon-btn-active: var(--uui-color-night600-900);
         --uui-icon-btn-disabled: var(--uui-icon-disabled);
     }
 
-    :global(.notification-card-warning) {
+    .notification-card-warning {
         --uui-notification-card-fill: var(--uui-warning);
         --uui-notification-card-border: var(--uui-warning);
         --uui-notification-card-bg: var(--uui-surface);
         --uui-notification-card-text: var(--uui-text-primary);
     }
 
-    :global(.notification-card-success) {
+    .notification-card-success {
         --uui-notification-card-fill: var(--uui-success);
         --uui-notification-card-border: var(--uui-success);
         --uui-notification-card-bg: var(--uui-surface);
         --uui-notification-card-text: var(--uui-text-primary);
     }
 
-    :global(.notification-card-info) {
+    .notification-card-info {
         --uui-notification-card-fill: var(--uui-info);
         --uui-notification-card-border: var(--uui-info);
         --uui-notification-card-bg: var(--uui-surface);
         --uui-notification-card-text: var(--uui-text-primary);
     }
 
-    :global(.notification-card-error) {
+    .notification-card-error {
         --uui-notification-card-fill: var(--uui-error);
         --uui-notification-card-border: var(--uui-error);
         --uui-notification-card-bg: var(--uui-surface);
         --uui-notification-card-text: var(--uui-text-primary);
     }
 
-    :global(.alert-error) {
+    .alert-error {
         --uui-alert-text: var(--uui-text-primary);
         --uui-alert-bg: #F5E5E9;
         --uui-alert-border: var(--uui-error);
         --uui-alert-icon: var(--uui-error);
     }
 
-    :global(.alert-warning) {
+    .alert-warning {
         --uui-alert-text: var(--uui-text-primary);
         --uui-alert-bg: #F6EEE1;
         --uui-alert-border: var(--uui-warning);
         --uui-alert-icon: var(--uui-warning);
     }
 
-    :global(.alert-success) {
+    .alert-success {
         --uui-alert-text: var(--uui-text-primary);
         --uui-alert-bg: #E7EEE1;
         --uui-alert-border: var(--uui-success);
         --uui-alert-icon: var(--uui-success);
     }
 
-    :global(.alert-info) {
+    .alert-info {
         --uui-alert-text: var(--uui-text-primary);
         --uui-alert-bg: #DCEDF6;
         --uui-alert-border: var(--uui-info);
         --uui-alert-icon: var(--uui-info);
     }
 
-    :global(.badge-default) {
+    .badge-default {
         --uui-badge-bg: var(--night300);
         --uui-badge-bg-hover: var(--night400);
         --uui-badge-caption-solid: var(--uui-text-primary);
@@ -885,7 +885,7 @@
         --uui-badge-caption-halftone: var(--uui-text-primary);
     }
 
-    :global(.badge-info) {
+    .badge-info {
         --uui-badge-bg: var(--uui-info);
         --uui-badge-bg-hover: var(--uui-info-dark);
         --uui-badge-caption-solid: var(--white);
@@ -898,7 +898,7 @@
         --uui-badge-caption-halftone: var(--uui-info-darkest);
     }
 
-    :global(.badge-success) {
+    .badge-success {
         --uui-badge-bg: var(--uui-success);
         --uui-badge-bg-hover: var(--uui-success-dark);
         --uui-badge-caption-solid: var(--white);
@@ -911,7 +911,7 @@
         --uui-badge-caption-halftone: var(--uui-success-darkest);
     }
 
-    :global(.badge-warning) {
+    .badge-warning {
         --uui-badge-bg: var(--uui-warning);
         --uui-badge-bg-hover: var(--uui-warning-dark);
         --uui-badge-caption-solid: var(--uui-text-primary);
@@ -924,7 +924,7 @@
         --uui-badge-caption-halftone: var(--uui-warning-darkest);
     }
 
-    :global(.badge-error) {
+    .badge-error {
         --uui-badge-bg: var(--uui-error);
         --uui-badge-bg-hover: var(--uui-error-dark);
         --uui-badge-caption-solid: var(--white);
@@ -937,38 +937,38 @@
         --uui-badge-caption-halftone: var(--uui-error-darkest);
     }
 
-    :global(.informer-default) {
+    .informer-default {
         --uui-informer-bg: var(--uui-secondary-light);
         --uui-informer-caption: var(--uui-text-secondary);
     }
 
-    :global(.informer-focus) {
+    .informer-focus {
         --uui-informer-bg: var(--uui-negative);
         --uui-informer-caption: var(--uui-caption);
     }
 
-    :global(.informer-white) {
+    .informer-white {
         --uui-informer-bg: var(--uui-surface);
         --uui-informer-caption: var(--uui-text-secondary);
     }
 
-    :global(.uui-text-brand) {
+    .uui-text-brand {
         --uui-text: var(--uui-text-brand);
     }
 
-    :global(.uui-text-primary) {
+    .uui-text-primary {
         --uui-text: var(--uui-text-primary);
     }
 
-    :global(.uui-text-secondary) {
+    .uui-text-secondary {
         --uui-text: var(--uui-text-secondary);
     }
 
-    :global(.uui-text-disabled) {
+    .uui-text-disabled {
         --uui-text: var(--uui-text-disabled);
     }
 
-    :global(.uui-text-contrast) {
+    .uui-text-contrast {
         --uui-text: var(--uui-text-contrast);
     }
 
@@ -985,35 +985,35 @@
         --uui-text-font-weight: 700;
     }
 
-    :global(.dropdown-container-white) {
+    .dropdown-container-white {
         --uui-dropdown-container-bg: var(--white);
     }
 
-    :global(.dropdown-container-night700) {
+    .dropdown-container-night700 {
         --uui-dropdown-container-bg: var(--night700);
     }
 
-    :global(.flex-row-background-white) {
+    .flex-row-background-white {
         --uui-flex-row-bg: var(--uui-surface);
     }
 
-    :global(.flex-row-background-night50) {
+    .flex-row-background-night50 {
         --uui-flex-row-bg: var(--night50);
     }
 
-    :global(.flex-row-background-night100) {
+    .flex-row-background-night100 {
         --uui-flex-row-bg: var(--night100);
     }
 
-    :global(.flex-row-background-none) {
+    .flex-row-background-none {
         --uui-flex-row-bg: transparent;
     }
 
-    :global(.panel-white) {
+    .panel-white {
         --uui-panel-bg: var(--uui-surface);
     }
 
-    :global(.panel-night50) {
+    .panel-night50 {
         --uui-panel-bg: var(--night50);
     }
 }

package/less/control-mods.less

@@ -1,52 +0,0 @@
-@import './effects.less';
-@import './loveship-color-vars.less';
-
-@control-border-radius: 3px;
-
-.control-form-mode() {
-    background-color: @white;
-    border-color: @night200;
-    border-style: solid;
-    border-radius: @control-border-radius;
-
-    &:hover {
-        border-color: @night200;
-    }
-
-    &:global(.uui-focus) {
-        border-color: darken(@sky, 10%);
-        .control-focus-effect(@sky);
-    }
-}
-
-.control-inline-mode() {
-    background-color: transparent;
-    border-color: transparent;
-    border-style: solid;
-    border-radius: @control-border-radius;
-
-    &:hover {
-        border-color: @night200;
-    }
-
-    &:global(.uui-focus) {
-        border-color: darken(@sky, 10%);
-        .control-focus-effect(@sky);
-    }
-}
-
-.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(@sky, 40%);
-        box-shadow: inset 0 0 0 1px fade(@sky, 40%);
-    }
-}

package/less/control-size.less

@@ -1,43 +0,0 @@
-.control-size(@size, @borderWidth) {
-    & when (@size = 18) {
-        min-width: 18px;
-        padding-left: 3px - @borderWidth;
-        padding-right: 3px - @borderWidth;
-    }
-
-    & when (@size = 24) {
-        min-width: 24px;
-        padding-left: 4px - @borderWidth;
-        padding-right: 4px - @borderWidth;
-    }
-
-    & when (@size = 30) {
-        min-width: 30px;
-        padding-left: 5px - @borderWidth;
-        padding-right: 5px - @borderWidth;
-    }
-
-    & when (@size = 36) {
-        min-width: 36px;
-        padding-left: 6px - @borderWidth;
-        padding-right: 6px - @borderWidth;
-    }
-
-    & when (@size = 42) {
-        min-width: 42px;
-        padding-left: 7px - @borderWidth;
-        padding-right: 7px - @borderWidth;
-    }
-
-    & when (@size = 48) {
-        min-width: 48px;
-        padding-left: 8px - @borderWidth;
-        padding-right: 8px - @borderWidth;
-    }
-
-    & when (@size = 60) {
-        min-width: 60px;
-        padding-left: 10px - @borderWidth;
-        padding-right: 10px - @borderWidth;
-    }
-}

package/less/effects.less

@@ -1,25 +0,0 @@
-.panel-shadow() { box-shadow: 0 1px 3px 0 rgba(51, 51, 51, 0.2); }
-
-.panel-top-shadow() { box-shadow: inset 0 10px 5px -10px rgba(51, 51, 51, 0.2); }
-
-.button-focus-shadow() { box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1); }
-
-.dnd-ghost-shadow() { box-shadow: 0 1px 3px 0 rgba(51, 51, 51, 0.2); }
-
-.control-focus-effect(@name) { box-shadow: 0 0 0 2px fade(@name, 40%); }
-
-@scroll-shadow-size: 10px;
-@scroll-shadow-opacity: 0.2;
-
-.scroll-shadow-base() {
-    position: absolute;
-}
-
-.scroll-shadow-top() {
-    .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%)';
-}

package/less/fonts.less

@@ -1,13 +0,0 @@
-@import (reference) './font-faces.less';
-
-@font-sans: 'Sans Regular', Arial, sans-serif;
-@font-sans-light: 'Sans Light', Arial, sans-serif;
-@font-sans-bold: 'Sans Bold', Arial, sans-serif;
-@font-sans-semibold: 'Sans Semibold', Arial, sans-serif;
-@font-sans-italic: 'Sans Italic', Arial, sans-serif;
-@font-oswald: 'Oswald Regular', Arial, sans-serif;
-@font-oswald-light: 'Oswald Light', Arial, sans-serif;
-@font-oswald-bold: 'Oswald Bold', Arial, sans-serif;
-@font-roboto-condensed: 'Roboto Condensed', Arial, sans-serif;
-@font-roboto-mono: 'Roboto Mono', Arial, sans-serif;
-@font-redacted: 'Redacted';

package/less/globals.less

@@ -1,11 +0,0 @@
-@import 'font-faces.less';
-@import '~normalize.css/normalize.css';
-@import (reference) 'loveship-colors';
-
-.-(@i: length(@loveship-epam-colors)) when (@i > 0) {
-    @name: extract(@loveship-epam-colors, @i);
-    :global(.ls-color-@{name}) {
-        color: @@name;
-    }
-    .-((@i - 1));
-} .-;

package/less/index.less

@@ -1,7 +0,0 @@
-@import (reference) './fonts.less';
-@import (reference) './typography.less';
-@import (reference) './effects.less';
-@import (reference) './text-size.less';
-@import (reference) './control-size.less';
-@import (reference) './loveship-colors';
-@import (reference) './control-mods';

package/less/loveship-color-vars.less

@@ -1,172 +0,0 @@
-@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/less/loveship-colors.less

@@ -1,37 +0,0 @@
-// 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;