bfg-common 1.4.579 → 1.4.580

package/assets/scss/common/theme.scss

@@ -1,321 +1,321 @@
-@import 'variables.scss';
-:root {
-  --scrollbar-thumb: #bbb;
-  --scrollbar-track: #eee;
-
-  --global-font-color: #{$--grey-200};
-  --global-font-color2: #{$light-black};
-  --global-font-color3: #{$--grey-200};
-  --global-font-color4: #{$--grey-100};
-  --global-font-color5: #{$light-black};
-  --global-font-color6: #{$--grey-800};
-  --global-font-color7: #{$--grey-900};
-  --global-font-color8: #{$--grey-100};
-  --global-font-color9: #{$--grey-200};
-  --global-border-color: #ccc;
-  --global-border-colo2: #{$--grey-100};
-  --global-bg-color: #{$white};
-  --global-bg-color2: #{$light-grey-100};
-  --global-text-color: #5659b8;
-  --global-text-color2: #{$--blue-150};
-  --global-text-color3: #{$--grey-100};
-  --block-view-bg-color: #{$light-grey};
-  --block-view-bg-color2: #{$white};
-  --block-view-bg-color3: #{$white};
-  --block-view-bg-color4: #{$light-grey};
-  --block-view-bg-color5: #{$white};
-  --block-view-bg-color6: #{$light-grey-150};
-  --block-border-color: #{$--grey-850};
-  --block-border-color2: #{$--grey-850};
-
-  --main-color-mode: #{$black};
-
-  --modal-bg-color: #fff;
-  --modal-other-bg-color: #fff;
-
-  --close-icon: #8c8c8c;
-  --arrows-icon: #000;
-  --info-icon: #{$--blue-150};
-  --title-color: #e9ecef;
-  --triger-icon-color: #{$--grey-200}; //#666
-  --ellipsis-vertical-icon-color: #{$--grey-100};
-
-  --progress-color: #{$--blue-100};
-  --progress-bg-color: #{$--grey-900};
-  --progress-value-bg-color: #61b715; // equal in dark and white modes
-
-  --dropdown-bg-color: #fff;
-  --dropdown-item-color: #0072a3;
-
-  /*  UI_I_Button Variables light mode  */
-  /* outline */
-  --btn-outline-border-color: #0079b8;
-  --btn-outline-hover-bg-color: #e1f1f6;
-  --btn-outline-hover-color: #004d8a;
-  --btn-outline-box-shadow-color: #0095d3;
-  /* primary */
-  --btn-primary-color: #{$white};
-  --btn-primary-border-color: #{$--blue-100};
-  --btn-primary-hover-bg-color: #004d8a;
-  --btn-primary-hover-color: #e1f1f6;
-  --btn-primary-box-shadow-color: #0095d3;
-  --btn-primary-disabled-color: #666;
-  --btn-primary-disabled-bg-color: #ccc;
-  /* warning */
-  --btn-warning-color: #{$white};
-  --btn-warning-bg-color: #{$--red-200};
-  --btn-warning-hover-bg-color: #{$--red-150};
-  --btn-warning-box-shadow-color: #{$--red-50};
-  /* link */
-  --btn-link-color: #0079b8;
-  --btn-link-hover-color: #004d8a;
-  --btn-link-disabled: #{$--grey-150};
-
-  /*  Form Input Label Variables light mode  */
-  --form-label-color: #000;
-  --form-input-color: #000;
-  --form-input-border-color: #9a9a9a;
-
-  /*  Checkbox Variables light mode  */
-  --checkbox-label-color: #454545;
-  --checkbox-background-color: #0079b8;
-  --checkbox-border-color: #575757;
-  --checkbox-mark-color: #fff;
-  --checkbox-mark-background-color: #737373;
-  --checkbox-value-active-color: #61b715;
-
-  /*  Select Variables light mode  */
-  --select-color: #000;
-
-  /*  NavBar Variables light mode  */
-  --nav-link-color: #454545;
-  --nav-link-active-color: #000;
-  --nav-active-box-shadow-color: #0079b8;
-  --nav-link-hover-color: #666666;
-  --nav-panel-border-color: #ccc;
-
-  //--gutter-bg-color: #eee; // for old
-  --gutter-bg-color: #e9ebed; // for new
-  //--gutter-hover-bg-color: #0079b8; // for old
-  --gutter-hover-bg-color: #008fb6; // for new
-  //--gutter-active-bg-color: #a6d8e7; // for old
-  --gutter-active-bg-color: #66bce6; // for new
-  --gutter-before-bg: #9da6ad;
-
-  /*  Items Row Variables light mode  */
-  --row-hover-bg-color: #{$light-grey-100};
-  --row-hover-border-color: #{$--grey-200};
-  --row-selected-text-color: #{$white};
-  --row-selected-bg-color: #{$--blue-800};
-
-  /*  Vertical Steps Variables light mode  */
-  --vertical-steps-active-color: #fff;
-  --vertical-steps-complete-color: #454545;
-  --vertical-steps-active-bg-color: #{$--blue-800};
-  --vertical-steps-complete-bg-color: #{$light-grey-100};
-  --vertical-steps-hover-border-color: #{$--grey-200};
-  --vertical-nav-active-item-color: #fff;
-  --vertical-nav-active-bg-color: #29414e;
-  --vertical-nav-hover-item-color: #29414e;
-
-  /*  Tooltip Variables light mode  */
-  --tooltip-content-text-color: #{$white};
-  --tooltip-content-bg-color: #{$black};
-  --tooltip-content-error-bg-color: #{#c92100};
-
-  /*  Select File Variables light mode  */
-  --select-file-text-color: #182531;
-  --select-file-selected-text-color: #ffffff;
-  --select-file-selected-bg: #213444;
-  --select-file-hover-bg: #e9ebed66;
-  --select-file-sprt-color: #e9ebed;
-  --select-file-sprt-handler-color: #9da6ad;
-  --select-file-sprt-handler-hover-color: #4d5d69;
-  --select-file-sprt-handler-selected-color: #008fd6;
-  --select-file-header-bg: #e9ebed66;
-  --select-file-header-arrow-color: #008fd6;
-  --select-file-info-color: #4d5d69;
-
-  /*  Table Action  */
-  --table-actions-icon: #4d5d69;
-  --table-actions-icon-hover: #008fd6;
-  --table-actions-view: #182531;
-  --table-actions-remove: #ea3223;
-  --table-actions-bg-hover: #e9ebed66;
-
-  // Diagram new view
-  --diagram-container-bg: #ffffff;
-  --diagram-central-panel-bg: #e9ebed66;
-  --diagram-block-stroke: #d3d6da;
-  --diagram-block-bg: #ffffff;
-  --diagram-connect-line: #d3d6da;
-  --diagram-selection-line: #008fd6;
-  --diagram-selection-bg: #ebf6fc;
-  --diagram-highlight-line: #fbce28;
-  --diagram-highlight-bg: #fff9e5;
-  --diagram-content-text: #4d5d69;
-  --diagram-content-text-hover: #182531;
-  --diagram-content-text-selected: #008fd6;
-  --diagram-content-second-text: #182531;
-  --diagram-content-second-disabled-text: #bdc3c7;
-  --diagram-content-third-text: #9da6ad;
-  --diagram-info-text: #4d5d69;
-  --diagram-info-second-text: #9da6ad;
-}
-
-:root.dark-theme {
-  --scrollbar-thumb: #29414e;
-  --scrollbar-track: #17242b;
-
-  --global-font-color: #{$--grey-800};
-  --global-font-color2: #{#eaedf0};
-  --global-font-color3: #{$light-white-100};
-  --global-font-color4: #{$light-white-100};
-  --global-font-color5: #{$light-black};
-  --global-font-color8: #{$white};
-  --global-font-color9: #{$light-blue-100};
-  --global-border-color: #495865;
-  --global-border-colo2: #{$light-white-100};
-  --global-bg-color: #17242b;
-  --global-bg-color2: #{$--blue-950};
-  --global-text-color: #{$--blue-200};
-  --global-text-color2: #{$--blue-200};
-  --global-text-color3: #{$--grey-700};
-  --block-view-bg-color: #{$--blue-800};
-  --block-view-bg-color2: #{$--blue-750};
-  --block-view-bg-color3: #{$--blue-800};
-  --block-view-bg-color4: #{$--blue-700};
-  --block-view-bg-color5: #{$--blue-700};
-  --block-view-bg-color6: #{$--blue-700};
-  --block-border-color: #{$black};
-  --block-border-color2: #{$--blue-960};
-
-  --main-color-mode: #{$light-white};
-
-  --modal-bg-color: #{$--blue-800};
-  --modal-other-bg-color: #22343c;
-
-  --close-icon: #{$light-grey};
-  --arrows-icon: #e9ecef;
-  --info-icon: #{$--grey-800};
-  --title-color: #565656;
-  --triger-icon-color: #fff;
-  --ellipsis-vertical-icon-color: #{$light-white-100};
-
-  --progress-color: #{$--blue-250};
-  --progress-bg-color: #{$--blue-900};
-
-  --dropdown-bg-color: #1b2a32;
-  --dropdown-item-color: #79c6e6;
-
-  /*  Button Variables dark mode  */
-  /* outline */
-  --btn-outline-border-color: #89cbdf;
-  --btn-outline-hover-bg-color: hsla(0, 0%, 100%, 0.1);
-  --btn-outline-hover-color: #57c8ea;
-  --btn-outline-box-shadow-color: #000;
-  /* primary */
-  --btn-primary-color: #{$black};
-  --btn-primary-border-color: #{$--blue-250};
-  --btn-primary-hover-bg-color: #57c8ea;
-  --btn-primary-hover-color: #000;
-  --btn-primary-box-shadow-color: #0065ad;
-  --btn-primary-disabled-bg-color: #fff;
-  --btn-primary-disabled-color: #000;
-  /* warning */
-  --btn-warning-color: #{$black};
-  --btn-warning-bg-color: #{$--red-300};
-  --btn-warning-hover-bg-color: #{$--red-400};
-  --btn-warning-box-shadow-color: #{$--red-100};
-  /* link */
-  --btn-link-color: #89cbdf;
-  --btn-link-hover-color: #57c8ea;
-  --btn-link-disabled: #{$white};
-
-  /*  Form Input Label Variables dark mode  */
-  --form-label-color: #adbbc4;
-  --form-input-color: #e9ecef;
-  --form-input-border-color: #adbbc4;
-
-  /*  Checkbox Variables dark mode  */
-  --checkbox-label-color: #acbac3;
-  --checkbox-background-color: #4aaed9;
-  --checkbox-border-color: #e9ecef;
-  --checkbox-mark-color: #000;
-  --checkbox-mark-background-color: #fff;
-  --checkbox-value-active-color: #61b715;
-
-  /*  Select Variables light mode  */
-  --select-color: #000;
-
-  /*  NavBar Variables dark mode  */
-  --nav-link-color: #acbac3;
-  --nav-link-active-color: #fff;
-  --nav-active-box-shadow-color: #4aaed9;
-  --nav-link-hover-color: #acbac3;
-  --nav-panel-border-color: #495865;
-
-  --gutter-bg-color: #25333d;
-  --gutter-hover-bg-color: #495a67;
-  --gutter-active-bg-color: #495a67;
-  --gutter-before-bg: rgba(157, 166, 173, 0.32);
-
-  /*  Items Row Variables light mode  */
-  --row-hover-bg-color: #{$--blue-950};
-  --row-hover-border-color: #{$white};
-  --row-selected-text-color: #{$black};
-  --row-selected-bg-color: #{$light-blue};
-
-  /*  Vertical Steps Variables dark mode  */
-  --vertical-steps-active-color: #000;
-  --vertical-steps-complete-color: #acbac3;
-  --vertical-steps-active-bg-color: #{$light-blue};
-  --vertical-steps-complete-bg-color: #{$--blue-950};
-  --vertical-steps-hover-border-color: #{$white};
-  --vertical-nav-active-item-color: #{$black};
-  --vertical-nav-active-bg-color: #d8e3e9;
-  --vertical-nav-hover-item-color: #d8e3e9;
-
-  /*  Tooltip Variables light mode  */
-  --tooltip-content-text-color: #{$black};
-  --tooltip-content-bg-color: #{$white};
-
-  /*  Select File Variables dark mode  */
-  --select-file-text-color: #e9eaec;
-  --select-file-selected-text-color: #182531;
-  --select-file-selected-bg: #e9eaec;
-  --select-file-hover-bg: #e9eaec1f;
-  --select-file-sprt-color: #e9ebed1f;
-  --select-file-sprt-handler-color: #9da6ad;
-  --select-file-sprt-handler-hover-color: #e9eaec;
-  --select-file-sprt-handler-selected-color: #2ba2de;
-  --select-file-header-bg: #e9ebed0f;
-  --select-file-header-arrow-color: #2ba2de;
-  --select-file-info-color: #e9eaec;
-
-  /*  Table Action  */
-  --table-actions-icon: #e9eaec;
-  --table-actions-icon-hover: #ffffff;
-  --table-actions-view: #ffffff;
-  --table-actions-remove: #ea3223;
-  --table-actions-bg-hover: #e9ebed0f;
-
-  // Diagram new view
-  --diagram-container-bg: #334453;
-  --diagram-central-panel-bg: #e9ebed0f;
-  --diagram-block-stroke: #5c6a76;
-  --diagram-block-bg: #304150;
-  --diagram-connect-line: #5c6a76;
-  --diagram-selection-line: #2ba2de;
-  --diagram-selection-bg: #2f5167;
-  --diagram-highlight-line: #fbce28;
-  --diagram-highlight-bg: #48524b;
-  --diagram-content-text: #e9eaec;
-  --diagram-content-text-hover: #ffffff;
-  --diagram-content-text-selected: #2ba2de;
-  --diagram-content-second-text: #e9eaec;
-  --diagram-content-second-disabled-text: #4d5d69;
-  --diagram-content-third-text: #9da6ad;
-  --diagram-info-text: #e9eaec;
-  --diagram-info-second-text: #9da6ad;
-}
+@import 'variables.scss';
+:root {
+  --scrollbar-thumb: #bbb;
+  --scrollbar-track: #eee;
+
+  --global-font-color: #{$--grey-200};
+  --global-font-color2: #{$light-black};
+  --global-font-color3: #{$--grey-200};
+  --global-font-color4: #{$--grey-100};
+  --global-font-color5: #{$light-black};
+  --global-font-color6: #{$--grey-800};
+  --global-font-color7: #{$--grey-900};
+  --global-font-color8: #{$--grey-100};
+  --global-font-color9: #{$--grey-200};
+  --global-border-color: #ccc;
+  --global-border-colo2: #{$--grey-100};
+  --global-bg-color: #{$white};
+  --global-bg-color2: #{$light-grey-100};
+  --global-text-color: #5659b8;
+  --global-text-color2: #{$--blue-150};
+  --global-text-color3: #{$--grey-100};
+  --block-view-bg-color: #{$light-grey};
+  --block-view-bg-color2: #{$white};
+  --block-view-bg-color3: #{$white};
+  --block-view-bg-color4: #{$light-grey};
+  --block-view-bg-color5: #{$white};
+  --block-view-bg-color6: #{$light-grey-150};
+  --block-border-color: #{$--grey-850};
+  --block-border-color2: #{$--grey-850};
+
+  --main-color-mode: #{$black};
+
+  --modal-bg-color: #fff;
+  --modal-other-bg-color: #fff;
+
+  --close-icon: #8c8c8c;
+  --arrows-icon: #000;
+  --info-icon: #{$--blue-150};
+  --title-color: #e9ecef;
+  --triger-icon-color: #{$--grey-200}; //#666
+  --ellipsis-vertical-icon-color: #{$--grey-100};
+
+  --progress-color: #{$--blue-100};
+  --progress-bg-color: #{$--grey-900};
+  --progress-value-bg-color: #61b715; // equal in dark and white modes
+
+  --dropdown-bg-color: #fff;
+  --dropdown-item-color: #0072a3;
+
+  /*  UI_I_Button Variables light mode  */
+  /* outline */
+  --btn-outline-border-color: #0079b8;
+  --btn-outline-hover-bg-color: #e1f1f6;
+  --btn-outline-hover-color: #004d8a;
+  --btn-outline-box-shadow-color: #0095d3;
+  /* primary */
+  --btn-primary-color: #{$white};
+  --btn-primary-border-color: #{$--blue-100};
+  --btn-primary-hover-bg-color: #004d8a;
+  --btn-primary-hover-color: #e1f1f6;
+  --btn-primary-box-shadow-color: #0095d3;
+  --btn-primary-disabled-color: #666;
+  --btn-primary-disabled-bg-color: #ccc;
+  /* warning */
+  --btn-warning-color: #{$white};
+  --btn-warning-bg-color: #{$--red-200};
+  --btn-warning-hover-bg-color: #{$--red-150};
+  --btn-warning-box-shadow-color: #{$--red-50};
+  /* link */
+  --btn-link-color: #0079b8;
+  --btn-link-hover-color: #004d8a;
+  --btn-link-disabled: #{$--grey-150};
+
+  /*  Form Input Label Variables light mode  */
+  --form-label-color: #000;
+  --form-input-color: #000;
+  --form-input-border-color: #9a9a9a;
+
+  /*  Checkbox Variables light mode  */
+  --checkbox-label-color: #454545;
+  --checkbox-background-color: #0079b8;
+  --checkbox-border-color: #575757;
+  --checkbox-mark-color: #fff;
+  --checkbox-mark-background-color: #737373;
+  --checkbox-value-active-color: #61b715;
+
+  /*  Select Variables light mode  */
+  --select-color: #000;
+
+  /*  NavBar Variables light mode  */
+  --nav-link-color: #454545;
+  --nav-link-active-color: #000;
+  --nav-active-box-shadow-color: #0079b8;
+  --nav-link-hover-color: #666666;
+  --nav-panel-border-color: #ccc;
+
+  //--gutter-bg-color: #eee; // for old
+  --gutter-bg-color: #e9ebed; // for new
+  //--gutter-hover-bg-color: #0079b8; // for old
+  --gutter-hover-bg-color: #008fb6; // for new
+  //--gutter-active-bg-color: #a6d8e7; // for old
+  --gutter-active-bg-color: #66bce6; // for new
+
+  /*  Items Row Variables light mode  */
+  --row-hover-bg-color: #{$light-grey-100};
+  --row-hover-border-color: #{$--grey-200};
+  --row-selected-text-color: #{$white};
+  --row-selected-bg-color: #{$--blue-800};
+
+  /*  Vertical Steps Variables light mode  */
+  --vertical-steps-active-color: #fff;
+  --vertical-steps-complete-color: #454545;
+  --vertical-steps-active-bg-color: #{$--blue-800};
+  --vertical-steps-complete-bg-color: #{$light-grey-100};
+  --vertical-steps-hover-border-color: #{$--grey-200};
+  --vertical-nav-active-item-color: #fff;
+  --vertical-nav-active-bg-color: #29414e;
+  --vertical-nav-hover-item-color: #29414e;
+
+  /*  Tooltip Variables light mode  */
+  --tooltip-content-text-color: #{$white};
+  --tooltip-content-bg-color: #{$black};
+  --tooltip-content-error-bg-color: #{#c92100};
+
+  /*  Select File Variables light mode  */
+  --select-file-text-color: #182531;
+  --select-file-selected-text-color: #ffffff;
+  --select-file-selected-bg: #213444;
+  --select-file-hover-bg: #e9ebed66;
+  --select-file-sprt-color: #e9ebed;
+  --select-file-sprt-handler-color: #9da6ad;
+  --select-file-sprt-handler-hover-color: #4d5d69;
+  --select-file-sprt-handler-selected-color: #008fd6;
+  --select-file-header-bg: #e9ebed66;
+  --select-file-header-arrow-color: #008fd6;
+  --select-file-info-color: #4d5d69;
+
+  /*  Table Action  */
+  --table-actions-icon: #4d5d69;
+  --table-actions-icon-hover: #008fd6;
+  --table-actions-view: #182531;
+  --table-actions-remove: #ea3223;
+  --table-actions-bg-hover: #e9ebed66;
+
+  // Diagram new view
+  --diagram-container-bg: #ffffff;
+  --diagram-central-panel-bg: #e9ebed66;
+  --diagram-block-stroke: #d3d6da;
+  --diagram-block-bg: #ffffff;
+  --diagram-connect-line: #d3d6da;
+  --diagram-selection-line: #008fd6;
+  --diagram-selection-bg: #ebf6fc;
+  --diagram-highlight-line: #fbce28;
+  --diagram-highlight-bg: #fff9e5;
+  --diagram-content-text: #4d5d69;
+  --diagram-content-text-hover: #182531;
+  --diagram-content-text-selected: #008fd6;
+  --diagram-content-text-selected-hover: #0081c1;
+  --diagram-content-second-text: #182531;
+  --diagram-content-second-disabled-text: #bdc3c7;
+  --diagram-content-third-text: #9da6ad;
+  --diagram-info-text: #4d5d69;
+  --diagram-info-second-text: #9da6ad;
+}
+
+:root.dark-theme {
+  --scrollbar-thumb: #29414e;
+  --scrollbar-track: #17242b;
+
+  --global-font-color: #{$--grey-800};
+  --global-font-color2: #{#eaedf0};
+  --global-font-color3: #{$light-white-100};
+  --global-font-color4: #{$light-white-100};
+  --global-font-color5: #{$light-black};
+  --global-font-color8: #{$white};
+  --global-font-color9: #{$light-blue-100};
+  --global-border-color: #495865;
+  --global-border-colo2: #{$light-white-100};
+  --global-bg-color: #17242b;
+  --global-bg-color2: #{$--blue-950};
+  --global-text-color: #{$--blue-200};
+  --global-text-color2: #{$--blue-200};
+  --global-text-color3: #{$--grey-700};
+  --block-view-bg-color: #{$--blue-800};
+  --block-view-bg-color2: #{$--blue-750};
+  --block-view-bg-color3: #{$--blue-800};
+  --block-view-bg-color4: #{$--blue-700};
+  --block-view-bg-color5: #{$--blue-700};
+  --block-view-bg-color6: #{$--blue-700};
+  --block-border-color: #{$black};
+  --block-border-color2: #{$--blue-960};
+
+  --main-color-mode: #{$light-white};
+
+  --modal-bg-color: #{$--blue-800};
+  --modal-other-bg-color: #22343c;
+
+  --close-icon: #{$light-grey};
+  --arrows-icon: #e9ecef;
+  --info-icon: #{$--grey-800};
+  --title-color: #565656;
+  --triger-icon-color: #fff;
+  --ellipsis-vertical-icon-color: #{$light-white-100};
+
+  --progress-color: #{$--blue-250};
+  --progress-bg-color: #{$--blue-900};
+
+  --dropdown-bg-color: #1b2a32;
+  --dropdown-item-color: #79c6e6;
+
+  /*  Button Variables dark mode  */
+  /* outline */
+  --btn-outline-border-color: #89cbdf;
+  --btn-outline-hover-bg-color: hsla(0, 0%, 100%, 0.1);
+  --btn-outline-hover-color: #57c8ea;
+  --btn-outline-box-shadow-color: #000;
+  /* primary */
+  --btn-primary-color: #{$black};
+  --btn-primary-border-color: #{$--blue-250};
+  --btn-primary-hover-bg-color: #57c8ea;
+  --btn-primary-hover-color: #000;
+  --btn-primary-box-shadow-color: #0065ad;
+  --btn-primary-disabled-bg-color: #fff;
+  --btn-primary-disabled-color: #000;
+  /* warning */
+  --btn-warning-color: #{$black};
+  --btn-warning-bg-color: #{$--red-300};
+  --btn-warning-hover-bg-color: #{$--red-400};
+  --btn-warning-box-shadow-color: #{$--red-100};
+  /* link */
+  --btn-link-color: #89cbdf;
+  --btn-link-hover-color: #57c8ea;
+  --btn-link-disabled: #{$white};
+
+  /*  Form Input Label Variables dark mode  */
+  --form-label-color: #adbbc4;
+  --form-input-color: #e9ecef;
+  --form-input-border-color: #adbbc4;
+
+  /*  Checkbox Variables dark mode  */
+  --checkbox-label-color: #acbac3;
+  --checkbox-background-color: #4aaed9;
+  --checkbox-border-color: #e9ecef;
+  --checkbox-mark-color: #000;
+  --checkbox-mark-background-color: #fff;
+  --checkbox-value-active-color: #61b715;
+
+  /*  Select Variables light mode  */
+  --select-color: #000;
+
+  /*  NavBar Variables dark mode  */
+  --nav-link-color: #acbac3;
+  --nav-link-active-color: #fff;
+  --nav-active-box-shadow-color: #4aaed9;
+  --nav-link-hover-color: #acbac3;
+  --nav-panel-border-color: #495865;
+
+  --gutter-bg-color: #25333d;
+  --gutter-hover-bg-color: #495a67;
+  --gutter-active-bg-color: #495a67;
+
+  /*  Items Row Variables light mode  */
+  --row-hover-bg-color: #{$--blue-950};
+  --row-hover-border-color: #{$white};
+  --row-selected-text-color: #{$black};
+  --row-selected-bg-color: #{$light-blue};
+
+  /*  Vertical Steps Variables dark mode  */
+  --vertical-steps-active-color: #000;
+  --vertical-steps-complete-color: #acbac3;
+  --vertical-steps-active-bg-color: #{$light-blue};
+  --vertical-steps-complete-bg-color: #{$--blue-950};
+  --vertical-steps-hover-border-color: #{$white};
+  --vertical-nav-active-item-color: #{$black};
+  --vertical-nav-active-bg-color: #d8e3e9;
+  --vertical-nav-hover-item-color: #d8e3e9;
+
+  /*  Tooltip Variables light mode  */
+  --tooltip-content-text-color: #{$black};
+  --tooltip-content-bg-color: #{$white};
+
+  /*  Select File Variables dark mode  */
+  --select-file-text-color: #e9eaec;
+  --select-file-selected-text-color: #182531;
+  --select-file-selected-bg: #e9eaec;
+  --select-file-hover-bg: #e9eaec1f;
+  --select-file-sprt-color: #e9ebed1f;
+  --select-file-sprt-handler-color: #9da6ad;
+  --select-file-sprt-handler-hover-color: #e9eaec;
+  --select-file-sprt-handler-selected-color: #2ba2de;
+  --select-file-header-bg: #e9ebed0f;
+  --select-file-header-arrow-color: #2ba2de;
+  --select-file-info-color: #e9eaec;
+
+  /*  Table Action  */
+  --table-actions-icon: #e9eaec;
+  --table-actions-icon-hover: #ffffff;
+  --table-actions-view: #ffffff;
+  --table-actions-remove: #ea3223;
+  --table-actions-bg-hover: #e9ebed0f;
+
+  // Diagram new view
+  --diagram-container-bg: #334453;
+  --diagram-central-panel-bg: #e9ebed0f;
+  --diagram-block-stroke: #5c6a76;
+  --diagram-block-bg: #304150;
+  --diagram-connect-line: #5c6a76;
+  --diagram-selection-line: #2ba2de;
+  --diagram-selection-bg: #2f5167;
+  --diagram-highlight-line: #fbce28;
+  --diagram-highlight-bg: #48524b;
+  --diagram-content-text: #e9eaec;
+  --diagram-content-text-hover: #ffffff;
+  --diagram-content-text-selected: #2ba2de;
+  --diagram-content-text-selected-hover: #008fd6;
+  --diagram-content-second-text: #e9eaec;
+  --diagram-content-second-disabled-text: #4d5d69;
+  --diagram-content-third-text: #9da6ad;
+  --diagram-info-text: #e9eaec;
+  --diagram-info-second-text: #9da6ad;
+}

package/components/common/browse/blocks/lib/models/types.ts

@@ -1 +1 @@
-export type UI_T_BlocksWidth = [number, number, number]
+export type UI_T_BlocksWidth = [number, number, number]

package/components/common/browse/lib/models/interfaces.ts

@@ -1,5 +1,5 @@
-export interface UI_I_FileInfo {
-  type: string
-  title: string
-  value: string | number
-}
+export interface UI_I_FileInfo {
+  type: string
+  title: string
+  value: string | number
+}