@inspark/inspark-components 19.0.49 → 19.0.51

package/src/scss/theme-bms-dark.scss

@@ -0,0 +1,92 @@
+@use "@inspark/components-web/src/variables" as *;
+@use "@inspark/components-web/src/mixins" as *;
+@import "./settings/loader.settings";
+
+
+
+// Theme "Dark"
+
+// Theme "Dark" is default theme - see all it variables in ./settings/*.scss, all styles imported to ./main.scss
+
+// SETTINGS
+@import "settings/loader.settings";
+
+.theme-bms-dark {
+  // new variables for bms
+  --bg-accent: #78F4FFFF;
+  --text-primary: #FFFFFFFF;
+  --text-accent: #78F4FFFF;
+  --bg: #202127FF;
+  --icon-accent: #78F4FFFF;
+  --icon-primary: #FFFFFFFF;
+  --text-secondary-50: #FFFFFF80;
+  --text-secondary-70: #FFFFFFB3;
+  --icon-secondary-70: #FFFFFFB3;
+  --color-error: #F95C5DFF;
+  --color-warning: #EE9946FF;
+  --color-success: #31AC51FF;
+  --color-nocontrol: #7E8087FF;
+  --color-falsevalue: #85B3CBBF;
+  --color-critical: #A20000FF;
+  --bglevel5: #0B0E10FF;
+  --bglevel5-hover: #161D20FF;
+  --text-black-button: #FFFFFFFF;
+  --icon-black-button: #FFFFFFFF;
+  --bglevel2: #3D4047CC;
+  --text-on-status: #0B0E10FF;
+  --bglevel1: #30333BCC;
+  --icon-on-status: #0B0E10FF;
+  --icon-secondary-50: #FFFFFF80;
+  --text-secondary-on-status: #000000B3;
+  --bgplan2d: #789CB0FF;
+  --bglevel7: #282A31FF;
+  --icon-inactive: #FFFFFF40;
+  --bglevel8: #00000033;
+  --bglevel8-hover: #00000080;
+  --bglevel10: #FFFFFF33;
+  --bglevel3: #1B1C21FF;
+  --bglevel11: #0B0E10FF;
+  --text-inactive: #FFFFFF40;
+  --bglevel12: #33353E8C;
+  --bglevel4: #0B0C0E80;
+  --summer: #5EC56FFF;
+  --winter: #6CB4EEFF;
+  --auto: #E97F51FF;
+  --color-error-hover: #FA6C6DFF;
+  --bglevel9: #16191BFF;
+  --bglevel13: #2E3239FF;
+  --bgaccent-hover: #2DDCECFF;
+  --bglevel6: #2C3037FF;
+  --bglevel6-hover: #363940FF;
+  --bglevel14: #2C3037FF;
+  --color: #FFFFFFFF;
+  --bglevel14-hover: #363940FF;
+  --bglevel15: #FFFFFF0A;
+  --color-warning-hover: #EF9F51FF;
+  // end of new variables
+
+  --selected-element-background: rgba(255, 255, 255, .1);
+
+  --element-background: #53555C;
+  --main-background: #494C55;
+
+  --input-background: #3B3D45;
+  --input-border: 1px solid #333;
+
+  --body-background: #202127;
+
+  --card-background: rgba(0, 0, 0, 0.3);
+  --card-background-selected: rgba(0, 0, 0, 0.2);
+
+  --contrast-text-color: #fff;
+  --muffled-text-color: #888;
+  --text-color: #aaa;
+
+  // todo Стили ниже должны быть в отдельном компоненте.
+  --button-hover-background: rgba(255, 255, 255, .1);
+
+  @import "./settings/loader.settings";
+  //@import "./patchPrimeng/loader.components.primeng";
+  @import "patchPrimeng/loader.components.primeng.theme-bms-dark";
+
+}

package/src/scss/theme-bms-light.scss

@@ -0,0 +1,500 @@
+@use "@inspark/components-web/src/variables" as *;
+@use "@inspark/components-web/src/mixins" as *;
+@import "./settings/loader.settings";
+
+//@import "~@angular/material/prebuilt-themes/deeppurple-amber.css";
+
+// Theme "Light"
+
+// Set a variable containing current brand
+$theme-name: 'theme-bms-light';
+
+// SETTINGS
+@import "settings/loader.settings";
+
+// Reset theme-specific variables
+
+/*
+Colors
+*/
+
+/*
+Brand colors
+*/
+
+/**
+ * Primary
+ */
+$ids-theme-primary: #387382;
+// todo(turchaninov): отрефакторить названия переменных
+
+/**
+ * Secondary
+ */
+$ids-theme-secondary: #1F5F81;
+
+/*
+Status colors
+*/
+$ids-theme-status-active: $ids-theme-primary;
+$ids-theme-status-highlight: $color-blue-dark;
+$ids-theme-status-success: #31AC51;
+$ids-theme-status-warning: #EE9946;
+$ids-theme-status-error: #F95C5D;
+$ids-theme-status-pending: $color-blue;
+$ids-theme-status-critical: $ids-theme-status-error;
+$ids-theme-status-disabled: #848484;
+$ids-theme-status-falsevalue: #85B3CB;
+
+/*
+Functional colors
+*/
+$component-active-color: $color-base-white;
+$component-active-bg: $ids-theme-primary;
+$component-active-box-shadow: inset 0 0 0 1px transparent;
+$state-success-bg: $ids-theme-status-success;
+$state-success-text: $color-base-white;
+$state-warning-bg: $ids-theme-status-warning;
+$state-warning-text: $color-base-white;
+$state-error-bg: $ids-theme-status-error;
+$state-error-text: $color-base-white;
+$state-pending-bg: $ids-theme-status-pending;
+$state-pending-text: $color-base-white;
+$state-critical-bg: $ids-theme-status-critical;
+$state-critical-text: $color-base-white;
+$state-falsevalue-bg: $ids-theme-status-falsevalue;
+$state-falsevalue-text: $text-muted;
+
+///* ========================================================================
+//   #GLOBAL
+//   ======================================================================== */
+
+// Body
+//
+// Settings for the `<body>` element.
+
+$body-bg: $color-gray-5;
+$body-color: $color-base-black;
+
+// Scroll customization
+
+$webkit-scrollbar-track-bg: #f1f1f1;
+$webkit-scrollbar-thumb-bg: $color-gray-10;
+$webkit-scrollbar-corner-bg: $color-gray-5;
+
+//
+// Typography
+//
+
+//== Typography
+//
+//## Font, line-height, and color for body text, headings, and more.
+
+$text-color: $color-base-black;
+$text-color-gray: $color-gray-40;
+
+$paragraph-color: $text-color;
+
+//** By default, this inherits from the `<body>`.
+$headings-color: $color-gray-90;
+$headings-small-color: $color-base-black;
+
+$text-muted: $color-gray-80;
+
+$abbr-border-color: $color-gray-80;
+
+$blockquote-small-color: $color-gray-80;
+$blockquote-border-color: $color-gray-80;
+
+$hr-border-color: rgba($color-base-black, 0.1);
+
+$kbd-box-shadow: inset 0 -0.1rem 0 rgba($color-base-black, 0.25);
+
+//** Global color for active items (e.g., navs or dropdowns).
+$component-active-color: $color-base-white;
+//** Global background color for active items (e.g., navs or dropdowns).
+$component-active-bg: $ids-theme-primary;
+
+// Tables
+//
+// Customizes the `.table` component with basic values, each used across all table variations.
+
+$table-bg: transparent;
+$table-th-color: $color-gray-90;
+$table-bg-accent: rgba($color-base-black, 0.05);
+$table-bg-hover: rgba($color-base-black, 0.075);
+$table-bg-active: $table-bg-hover;
+
+$table-head-bg: $color-gray-10;
+$table-head-color: $color-gray-90;
+
+$table-border-color: $color-gray-20;
+$table-bg-primary: var(--ids-theme-primary, $ids-theme-primary);
+
+$table-th-bg: rgba($color-base-black, 0.2);
+
+// Buttons
+
+$btn-disabled-border-color: transparent;
+$btn-disabled-background: $color-gray-5;
+$btn-disabled-color: rgba($color-base-black, 0.4);
+
+$btn-default-background: $color-gray-5;
+$btn-default-background--hover: darken($btn-default-background, 20%);
+$btn-default-background--pressed: darken($btn-default-background, 40%);
+$btn-default-color: $text-color;
+
+$btn-shadow: none;
+
+$btn-bare-color--visited: $color-gray-90;
+$btn-bare-color--hover: $color-blue-dark-800;
+$btn-bare-color--pressed: var(--ids-theme-secondary, $ids-theme-secondary);
+
+$btn-primary-color: $color-base-white;
+$btn-primary-border-color: transparent;
+$btn-primary-background: $ids-theme-primary;
+$btn-primary-background--hover: darken($btn-primary-background, 20%);
+$btn-primary-background--pressed: darken($btn-primary-background, 40%);
+$btn-primary-background--disabled: $btn-disabled-background;
+$btn-primary-color--disabled: $btn-disabled-color;
+
+$btn-secondary-color: $color-base-white;
+$btn-secondary-border-color: transparent;
+$btn-secondary-background: $ids-theme-secondary;
+$btn-secondary-background--hover: darken($btn-secondary-background, 20%);
+$btn-secondary-background--pressed: darken($btn-secondary-background, 40%);
+
+$btn-tertiary-color: $color-base-black;
+$btn-tertiary-border-color: transparent;
+$btn-tertiary-background: $color-gray-40;
+$btn-tertiary-background--hover: darken($btn-tertiary-background, 20%);
+$btn-tertiary-background--pressed: darken($btn-tertiary-background, 40%);
+
+$btn-menu-toggle: $color-gray-90;
+
+$btn-destroy-border-color: $ids-theme-status-error;
+$btn-destroy-background: $ids-theme-status-error;
+$btn-destroy-color: $color-base-white;
+
+$btn-rounded-border-radius: $global-radius-rounded;
+
+$btn-datepicker-current-color: $ids-theme-primary;
+$btn-datepicker-current-background: none;
+
+$btn-datepicker-selected-color: $color-base-white;
+$btn-datepicker-selected-color--hover: $color-base-white;
+$btn-datepicker-selected-color-current: $color-base-white;
+$btn-datepicker-selected-color-current--hover: $color-base-white;
+
+// Checkbox
+$checkbox-border-color: $color-gray-10;
+
+// Switch
+$checkbox-swith-color-off: $color-gray-20;
+
+
+$menu-ddl-menu-bg: $color-gray-35;
+$main-menu-item-a-color-hover: $color-base-white;
+$main-menu-submenu-item-bg: $color-black-tertiary;
+$main-menu-item-title-color: $color-gray-10;
+
+//== Dropdowns
+//
+//## Dropdown menu container and contents.
+
+//** Background for the dropdown menu.
+$dropdown-bg: $color-gray-5;
+//** Dropdown menu `border-color`.
+$dropdown-border: rgba(255, 255, 255, 0.5);
+
+$dropdown-focused-box-shadow: $component-active-box-shadow;
+//** Dropdown menu `border-color` **for IE8**.
+$dropdown-fallback-border: $color-gray-35;
+//** Divider color for between dropdown items.
+$dropdown-divider-bg: #e5e5e5;
+
+//** Dropdown link text color.
+$dropdown-link-color: $color-base-black;
+//** Hover color for dropdown links.
+$dropdown-link-hover-color: $color-base-black;
+//** Hover background for dropdown links.
+$dropdown-link-hover-bg: rgba($color-gray-10, 0.8);
+
+//** Active dropdown menu item text color.
+$dropdown-link-active-color: $color-base-black;
+//** Active dropdown menu item background color.
+$dropdown-link-active-bg: rgba($component-active-bg, 0.4);
+
+//** Disabled dropdown menu item background color.
+$dropdown-link-disabled-color: $color-gray-80;
+$dropdown-link-disabled-bg: $color-gray-35;
+
+//** Text color for headers within dropdown menus.
+$dropdown-header-color: $color-gray-90;
+
+//** Deprecated `$dropdown-caret-color` as of v3.1.0
+$dropdown-caret-color: $color-base-black;
+
+// Main content
+$main-content-bg: $color-gray-5;
+$main-section-bg: $color-gray-5;
+
+// Modal
+
+//** Background color of modal content area
+$modal-content-bg: $color-base-white;
+//** Modal content border color
+$modal-content-border-color: rgba($color-gray-10, 0.2);
+//** Modal content border color **for IE8**
+$modal-content-fallback-border-color: #ddd;
+
+//** Modal backdrop background color
+$modal-backdrop-bg: $color-base-black;
+//** Modal backdrop opacity
+$modal-backdrop-opacity: 0.5;
+//** Modal header border color
+$modal-header-border-color: $color-gray-40;
+//** Modal footer border color
+$modal-footer-border-color: $modal-header-border-color;
+
+//== Footer
+$footer-bg: $color-base-white;
+
+//== Tabs
+$nav-tabs-border-color: $color-gray-40;
+
+$nav-tabs-link-hover-border-color: $color-gray-80;
+
+$nav-tabs-active-link-hover-bg: $body-bg;
+$nav-tabs-active-link-hover-color: $body-color;
+$nav-tabs-active-link-hover-border-color: $ids-theme-primary;
+
+$nav-tabs-justified-link-border-color: $color-gray-40;
+$nav-tabs-justified-active-link-border-color: $body-bg;
+
+$nav-tabs-tab-pane-active-background: $color-gray-5;
+
+//== Pills
+$nav-pills-active-link-hover-bg: $component-active-bg;
+$nav-pills-active-link-hover-color: $component-active-color;
+
+// Spinner
+$spinner-loader-color: $color-gray-40;
+
+// Login
+$login-form-bg: $color-base-white;
+
+// NVD3 Charts
+$nvd3-box-shadow: $component-active-box-shadow;
+$nvd3-border-radius: $global-radius;
+$nvd3-font-family: $font-family-base;
+$nvd3-font-size-base: $font-size-base;
+$nvd3-text-color: $text-color;
+$nvd3-text-color-fill: $nvd3-text-color;
+$nvd3-text-color-stroke: $nvd3-text-color;
+
+$nvd3-background-fill: $body-bg;
+$nvd3-background-fill-opacity: 0;
+$nvd3-nv-brush-resize-fill: $color-gray-5;
+$nvd3-nv-brush-resize-stroke: $color-gray-40;
+$nvd3-nv-brush-background-stroke: $color-base-black;
+$nvd3-nv-brush-background-fill: $color-base-white;
+$nvd3-axis-path-stroke: $color-base-black;
+$nvd3-axis-line: rgba($color-gray-10, 0.6);
+
+// NVD3 Controls
+$nvd3-controls-fill: $color-base-black;
+
+// NVD3 Transitions
+$nvd3-transition-duration-default: 250ms;
+$nvd3-transition-duration-short: 50ms;
+$nvd3-transition-function-default: linear;
+$nvd3-transition-delay-default: 200ms;
+$nvd3-transition-default: $nvd3-transition-duration-default $nvd3-transition-function-default;
+
+// Bars
+$nvd3-bars-react-hover: $ids-theme-primary;
+
+// Boxplot
+$nvd3-boxplot-median-stroke: $color-base-black;
+
+// Bullet
+$nvd3-bullet-marker-stroke: $color-base-black;
+$nvd3-bullet-marker-triangle-stroke: $nvd3-bullet-marker-stroke;
+$nvd3-bullet-marker-triangle-fill: $color-base-white;
+$nvd3-bullet-marker-line-stroke: $nvd3-bullet-marker-stroke;
+$nvd3-bullet-tick-line-stroke: $color-gray-40;
+$nvd3-bullet-range-s0-fill: $color-gray-5;
+$nvd3-bullet-range-s1-fill: $color-gray-10;
+$nvd3-bullet-range-s2-fill: $color-gray-20;
+$nvd3-bullet-subtitle-fill: $color-gray-10;
+$nvd3-bullet-range-fill: $color-gray-5;
+
+// Candlestick Bar
+$nvd3-candlestickbar-tick-positive-rect-stroke: $ids-theme-status-success;
+$nvd3-candlestickbar-tick-positive-rect-fill: $nvd3-candlestickbar-tick-positive-rect-stroke;
+$nvd3-candlestickbar-tick-negative-rect-stroke: $ids-theme-status-error;
+$nvd3-candlestickbar-tick-negative-rect-fill: $nvd3-candlestickbar-tick-negative-rect-stroke;
+$nvd3-candlestickbar-ticks-line-stroke: $color-gray-40;
+
+// Force Directed Graph
+$nvd3-force-node-stroke: $color-base-white;
+$nvd3-force-link-stroke: $color-gray-20;
+
+// Lines
+$nvd3-lines-groups-line-fill: none;
+$nvd3-lines-groups-area-stroke: none;
+$nvd3-lines-point-paths-stroke: $color-gray-10;
+$nvd3-lines-point-paths-fill: $color-gray-5;
+
+// OHLC
+$nvd3-ohlcbar-tick-positive-stroke: $ids-theme-status-success;
+$nvd3-ohlcbar-tick-negative-stroke: $ids-theme-status-error;
+
+// Parallel Coordinates
+$nvd3-background-path-fill: none;
+$nvd3-background-path-stroke: $color-gray-5;
+$nvd3-foreground-path-fill: none;
+$nvd3-parallelcoordinates-brush-extent-fill: $color-base-white;
+$nvd3-parallelcoordinates-brush-extent-stroke: $color-gray-40;
+$nvd3-missingvaluesline-line-fill: none;
+$nvd3-missingvaluesline-line-stroke: $color-base-black;
+
+// Pie
+$nvd3-pie-title-font-size: $inuit-font-size-h3;
+$nvd3-pie-title-fill: $ids-theme-primary;
+$nvd3-pie-slice-text-stroke: $color-base-black;
+$nvd3-pie-path: $color-base-white;
+
+// Sparkline
+$nvd3-sparkline-path-fill: none;
+$nvd3-sparklineplus-hovervalue-stroke: $color-gray-80;
+$nvd3-sparklineplus-yvalue-stroke: lighten($ids-theme-status-error, 20%);
+$nvd3-sparklineplus-maxvalue-stroke: $ids-theme-status-success;
+$nvd3-sparklineplus-maxvalue-fill: $ids-theme-status-success;
+$nvd3-sparklineplus-minvalue-stroke: $ids-theme-status-error;
+$nvd3-sparklineplus-minvalue-fill: $ids-theme-status-error;
+$nvd3-sparklineplus-currentvalue-font-size: $inuit-font-size-large;
+
+// NVD3 Tooltip
+$nvd3-tooltip-zindex: $zindex-tooltip;
+$nvd3-tooltip-font-size: $inuit-font-size-small;
+$nvd3-tooltip-background: $body-bg;
+$nvd3-tooltip-border: $text-color;
+$nvd3-tooltip-color: $text-color;
+$nvd3-tooltip-x-y-tooltip-padding: $unit-small;
+$nvd3-tooltip-xy-tooltip-background: $nvd3-tooltip-background;
+$nvd3-tooltip-h3-background: $body-bg;
+$nvd3-tooltip-h3-color: $text-color;
+$nvd3-tooltip-h3-border-bottom-color: $nvd3-tooltip-h3-background;
+$nvd3-tooltip-table-percent: $color-gray-35;
+$nvd3-tooltip-table-legend-color-guide-border: $color-gray-40;
+$nvd3-guideline-stroke: $color-gray-40;
+
+$nvd3-color-1: #007A4B;
+$nvd3-color-2: #3477DB;
+$nvd3-color-3: #D252B2;
+$nvd3-color-4: #708090;
+$nvd3-color-5: #AF851A;
+$nvd3-color-6: #BB671C;
+$nvd3-color-7: #E00000;
+$nvd3-color-8: #005031;
+$nvd3-color-9: #34415E;
+$nvd3-color-10: #58007E;
+$nvd3-color-11: #2E343B;
+
+// Logout
+$logout-link-color: $dropdown-link-color;
+
+// PrimeNG tables
+
+// $pm-table-padding-vertical: $unit-tiny;
+// $pm-table-padding-horizontal: $unit-small;
+
+$pm-table-head-background: rgba($color-base-black, 0.1);
+$pm-table-head-border: rgba($color-base-white, 0.5);
+
+// PrimeNG treetables
+
+$pm-treetable-head-background: rgba($color-base-black, 0.1);
+$pm-treetable-head-border: rgba($color-base-white, 0.5);
+
+// PrimeNG multiselect
+
+$pm-multiselect-panel-background: $color-gray-5;
+
+//$theme-light-class: ".theme-light";
+
+// NGX-Bootstrap datepicker
+
+$bs-datepicker-main-bg:         $color-gray-5;
+$bs-datepicker-custom-range-bg: #eee;
+
+$bs-datepicker-main-box-shadow: $component-active-box-shadow;
+
+$bs-datepicker-font-color-01:   $body-color;
+$bs-datepicker-font-color-02:   rgba($body-color, 0.8);
+$bs-datepicker-font-color-03:   $body-color;
+$bs-datepicker-font-color-hover: $color-base-white;
+$bs-datepicker-font-color-secondary: rgba($body-color, 0.5);
+$bs-datepicker-font-color-is-other-month: rgba($body-color, 0.25);
+$bs-datepicker-font-color-selected: rgba($body-color, 0.5);
+//$bs-datepicker-font-color-disabled: rgba($color-base-black, 0.25);
+
+$bs-datepicker-border-color:    $dropdown-border;
+
+$bs-datepicker-highlighted-color: $color-base-white;
+$bs-datepicker-highlighted-background: rgba($color-gray-80, 0.5);
+
+$bs-datepicker-btn-bg:          #e9edf0;
+$bs-datepicker-btn-bg-hover:    #d5dadd;
+
+$bs-datepicker-btn-bg2:         #9aaec1;
+$bs-datepicker-btn-bg2-hover:   #54708b;
+
+$bs-datepicker-disabled-background:  rgba(221, 221, 221, 0.3);
+$bs-datepicker-disabled-color:  rgba($color-base-black, 0.6);
+
+$bs-datepicker-selected-background: $ids-theme-primary;
+$bs-datepicker-selected-color:       $color-base-white;
+
+// Datatime Picker
+
+$owl-dt-timer-input-border: 1px solid rgba($color-base-white, .1);
+$owl-dt-container-bg: $color-gray-35;
+$owl-theme-color: $ids-theme-primary;
+$owl-dt-calendar-cell-selected-color: rgba($color-base-black, .85);
+
+// Map
+$map-tooolbar-bg: $color-gray-5;
+
+.#{$theme-name} {
+  --selected-element-background: rgba(0, 0, 0, .1);
+
+  --element-background: #D6D6D7;
+  --main-background: #B3B3B3;
+
+  --input-background: #D6D6D7;
+  --input-border: 1px solid #888;
+
+  --body-background: #EBEBEB;
+
+  --card-background: #DFDFDF;
+  --card-background-selected: rgba(0, 0, 0, 0.2);
+
+  --contrast-text-color: #000;
+  --muffled-text-color: #555;
+  --text-color: #333;
+
+
+  @import "./settings/loader.settings";
+  //@import "./patchPrimeng/loader.components.primeng";
+  @import "patchPrimeng/loader.components.primeng.theme-bms-light";
+
+}
+
+// styles for elements whitch are neighbor to body
+.#{$theme-name} +  {
+  // SEM-1329 @import "../../../../../src/app/AngularJS/common/charts-nvd3/tooltip/components.tooltip.themes";
+}
+