@digi-frontend/dgate-api-documentation 1.0.1 → 1.0.5

package/src/components/_global.scss

@@ -1,338 +1,338 @@
-:root {
-    //---------- Gradient colors ----------\\
-  
-    --white: #fff;
-    --Gray-5: #f1f2f6;
-    --Gray-10: #ebecf2;
-    --Gray-20: #d8dae5;
-    --Gray-30: #babdcc;
-    --Gray-40: #9a9eb2;
-    --Gray-50: #828699;
-    --Gray-60: #696c80;
-    // TODO: will remove unused colors
-    // --Gray-70: #515466;
-    // --Gray-80: #3a3d4d;
-    // --Gray-90: #252833;
-    // --Gray-95: #4d4d4d;
-    --Gray-100: #12131a;
-    --black: #000;
-  
-    // Primary color
-  
-    --primary-static: #4d75d8;
-    --primary-hover: #7c9bea;
-    --primary-active: #2c4fa4;
-    --primary-disabled: #9a9eb2;
-  
-    //--------------------\\
-  
-    // Secondary color
-  
-    --secondary-static: #40e0d0;
-    --secondary-hover: #9efcf2;
-    --secondary-active: #2fa599;
-  
-    //--------------------\\
-  
-    // Error color
-  
-    --error-static: #da3f3f; // #da3f3f
-    --error-hover: #e75d5d; // #e75d5d
-    --error-active: #bb3232; // #bb3232
-  
-    //--------------------\\
-  
-    // Success color
-  
-    --success-static: #3aaa35;
-    --success-hover: #5cda56;
-    --success-active: #2a8a25;
-  
-    //--------------------\\
-  
-    // Info color
-  
-    --info-static: #c6c6c6;
-    --info-hover: #e4e4e4;
-    --info-active: #979797;
-  
-    //--------------------\\
-  
-    // Warning color
-  
-    --warning-static: #faad14;
-    --warning-hover: #f9be4a;
-    --warning-active: #db9711;
-  
-    //--------------------\\
-  
-    // Action color
-  
-    --action-static: #142452;
-    --action-hover: #21387d;
-    --action-active: #000000;
-  
-    --color-info-primary: #3a6cd1;
-  
-    //<<<<<<<<<<<<<<<<()>>>>>>>>>>>>>>>>\\
-  
-    //---------- Font colors ----------\\
-  
-    --primary-font-color: #142452;
-    --placeholder-font-color: #babdcc;
-    --warning-font-color: #ce2828;
-  
-    //<<<<<<<<<<<<<<<<()>>>>>>>>>>>>>>>>\\
-  
-    //---------- Component based colors ----------\\
-  
-    // Alert component Colors
-  
-    --alert-error: #da3f3f;
-    --alert-light-error: #f4c5c5;
-    --alert-success: #3aaa35;
-    --alert-light-success: #c4e5c2;
-    --alert-info: #8eaaf1;
-    --alert-light-info: #c4d3f1;
-    --alert-warning: #faad14;
-    --alert-light-warning: #fde6b8;
-  
-    // Simple Collapse component colors
-    --border-focus: #3a6cd1;
-  
-    // Tooltip component colors
-    --tooltip-background-color: #202f5b;
-  
-    //---------- General status colors ----------\\
-  
-    //******************************************************************
-  
-    --text-color-primary: #142452;
-    --text-color-secondary: #ffff;
-    --text-color-neutral: #828699;
-    --text-color-tertiary: #808080;
-    --text-color-note: #242424;
-    --text-color-quaternary: #142452;
-    --text-color-disabled: #ffff;
-  
-    --background-color-white-primary: #fff;
-    --background-color-light-primary: #8eaaf1;
-    --background-color-white-secondary: #fff;
-    --background-color-primary-dark: #142452;
-    --background-color-gray-5: #f1f2f6;
-    --background-color-gray-30: #ebecf2;
-    --background-color-tertiary-light: #2c4fa4;
-    --background-color-gray-10: #f1f2f6;
-    --background-color-gray-40: #ebecf2;
-    --background-color-light-blue: #dfe7f8; // dark mode
-  
-    --border-color-primary: #babdcc;
-    --border-color-secondary: #d8dae5;
-    --border-color-neutral: #ebecf2;
-    --border-color-tertiary: #ebecf2;
-    --border-color-gray: #ebecf2;
-    --border-color-hover: #142452;
-    --border-color-active: #3a6cd1;
-  
-    --icon-color-main: #142452;
-    --icon-color-secondary: #000;
-    --icon-color-quaternary: #babdcc;
-    --icon-color-disabled: #9a9eb2;
-    --link-btn-primary-color: #3a6cd1;
-    --button-color-static: #4d75d8;
-    --button-color-hover: #7c9bea;
-    --button-color-active: #2c4fa4;
-  
-    --alert-natural: #c4d3f1;
-  }
-  
-  //----------------------------------------------Arena Components Colors--------------------------------//
-  //---------- Gradient colors ----------\\
-  
-  $white: #fff;
-  $Gray-5: #f1f2f6;
-  $Gray-10: #ebecf2;
-  $Gray-20: #d8dae5;
-  $Gray-30: #babdcc;
-  $Gray-40: #9a9eb2;
-  $Gray-50: #828699;
-  $Gray-60: #696c80;
-  $Gray-70: #515466;
-  $Gray-80: #3a3d4d;
-  $Gray-90: #252833;
-  $Gray-95: #4d4d4d;
-  $Gray-100: #12131a;
-  $black: #000;
-  
-  // Function Colors Buttons & Navigations
-  
-  // Primary color
-  
-  $primary-static: var(--primary-static);
-  $primary-hover: var(--primary-hover);
-  $primary-active: var(--primary-active);
-  $primary-disabled: var(--primary-disabled);
-  
-  //--------------------\\
-  
-  // Secondary color
-  
-  $secondary-static: var(--secondary-color-main);
-  $secondary-hover: var(--secondary-color-light);
-  $secondary-active: darken(#40e0d0, 10%);
-  
-  //--------------------\\
-  
-  // Error color
-  
-  $error-static: var(--color-error);
-  $error-hover: var(--hover-error);
-  $error-active: var(--active-error);
-  
-  //--------------------\\
-  
-  // Success color
-  
-  $success-static: var(--color-success);
-  $success-hover: var(--hover-success);
-  $success-active: var(--active-success);
-  
-  //--------------------\\
-  
-  // Info color
-  
-  $info-static: #c6c6c6;
-  $info-hover: #e4e4e4;
-  $info-active: #979797;
-  
-  //--------------------\\
-  
-  // Warning color
-  
-  $warning-static: var(--color-warning);
-  $warning-hover: var(--hover-warning);
-  $warning-active: var(--active-warning);
-  
-  //--------------------\\
-  
-  // Action color
-  
-  $action-static: var(--btn-action-color);
-  $action-hover: var(--btn-action-hover);
-  $action-active: var(--btn-action-active);
-  
-  //<<<<<<<<<<<<<<<<()>>>>>>>>>>>>>>>>\\
-  
-  //---------- Font colors ----------\\
-  
-  $primary-font-color: var(--text-color-primary);
-  $placeholder-font-color: #babdcc;
-  $disabled-font-color: #d8dae5;
-  $warning-font-color: #ce2828;
-  
-  //<<<<<<<<<<<<<<<<()>>>>>>>>>>>>>>>>\\
-  
-  //---------- Component based colors ----------\\
-  
-  // Alert component Colors
-  
-  $alert-error: var(--alert-error);
-  $alert-success: var(--alert-success);
-  $alert-info: var(--alert-info);
-  $alert-warning: var(--alert-warning);
-  $alert-general: var(--alert-general);
-  $alert-light-error: var(--alert-light-error);
-  $alert-light-warning: var(--alert-light-warning);
-  $alert-light-info: var(--alert-light-info);
-  $alert-light-success: var(--alert-light-success);
-  $alert-light-general: var(--alert-light-general);
-  
-  // Chip component colors
-  
-  $chip-blue: #4d75d8;
-  $chip-dark-blue: #142452;
-  $chip-gray: #9a9eb2;
-  $chip-light-gray: #ebecf2;
-  $chip-lighter-gray: #d8dae5;
-  $chip-black: #000;
-  $chip-light-gray-active: #696c80;
-  $color-info-primary: var(--color-info-primary);
-  
-  // Chart component colors
-  
-  $bar-tooltip: #ebecf2ff;
-  
-  // Loader component colors
-  
-  $loader-background: #ffffff00;
-  $loader-color: #0300b9;
-  
-  // Tooltip component colors
-  
-  $tooltip-background-color: #202f5b;
-  
-  // Simple Collapse component colors
-  
-  $simple-collapse-dropdown-background: rgba(235, 236, 242, 0.3);
-  
-  //---------- General status colors ----------\\
-  
-  //******************************************************************
-  
-  $text-color-primary: var(--text-color-primary);
-  $text-color-secondary: var(--text-color-secondary);
-  $text-color-neutral: var(--text-color-neutral);
-  $text-color-tertiary: var(--text-color-tertiary);
-  $text-color-info: var(--text-color-info);
-  $text-color-note: var(--text-color-note);
-  $text-color-quaternary: var(--text-color-quaternary);
-  $text-color-success: var(--text-color-success);
-  $text-color-error: var(--text-color-error);
-  $text-color-warning: var(--text-color-warning);
-  $text-color-info: var(--text-color-info);
-  $text-color-success: var(--text-color-success);
-  $text-color-error: var(--text-color-error);
-  $text-color-warning: var(--text-color-warning);
-  $text-color-info: var(--text-color-info);
-  $text-color-disabled: var(--text-color-disabled);
-  $text-color-gray-dark: var(--text-color-gray-dark);
-  
-  $background-color-white-primary: var(--background-color-white-primary);
-  $background-color-light-primary: var(--background-color-light-primary);
-  $background-color-white-tertiary: var(--background-color-white-tertiary);
-  $background-color-white-secondary: var(--background-color-white-secondary);
-  $background-color-primary-light: var(--background-color-primary-light);
-  $background-color-tertiary-dark: var(--background-color-tertiary-dark);
-  $background-color-gray-50: var(--background-color-gray-50);
-  $background-color-secondary-light: var(--background-color-secondary-light);
-  $background-color-white-tertiary: var(--background-color-gray-40);
-  $background-color-primary-dark: var(--background-color-primary-dark);
-  $background-color--secondary-dark: var(--background-color-10);
-  $background-color-gray-5: var(--background-color-gray-5);
-  $background-color-gray-20: var(--background-color-gray-20);
-  $background-color-black-primary: var(--background-color-black-primary);
-  $background-color-gray-30: var(--background-color-gray-30);
-  $background-color-tertiary-light: var(--background-color-tertiary-light);
-  $background-color-gray-10: var(--background-color-gray-10);
-  $background-color-gray-40: var(--background-color-gray-40);
-  $background-color-white-light: var(--background-color-white-light);
-  $background-color-gray-60: var(--background-color-gray-60);
-  
-  $border-color-primary: var(--border-color-primary);
-  $border-color-secondary: var(--border-color-secondary);
-  $border-color-neutral: var(--border-color-neutral);
-  $border-color-tertiary: var(--border-color-tertiary);
-  $border-color-gray: var(--border-color-gray);
-  $border-color-hover: var(--border-color-hover);
-  $border-color-active: var(--border-color-active);
-  
-  $icon-color-main: var(--icon-color-main);
-  $icon-color-secondary: var(--icon-color-secondary);
-  $icon-color-tertiary: var(--icon-color-tertiary);
-  $icon-color-quaternary: var(--icon-color-quaternary);
-  $icon-color-disabled: var(--icon-color-disabled);
-  $link-btn-primary-color: var(--link-btn-primary-color);
-  $button-color-static: var(--button-color-static);
-  $button-color-hover: var(--button-color-hover);
-  $button-color-active: var(--button-color-active);
+:root {
+    //---------- Gradient colors ----------\\
+  
+    --white: #fff;
+    --Gray-5: #f1f2f6;
+    --Gray-10: #ebecf2;
+    --Gray-20: #d8dae5;
+    --Gray-30: #babdcc;
+    --Gray-40: #9a9eb2;
+    --Gray-50: #828699;
+    --Gray-60: #696c80;
+    // TODO: will remove unused colors
+    // --Gray-70: #515466;
+    // --Gray-80: #3a3d4d;
+    // --Gray-90: #252833;
+    // --Gray-95: #4d4d4d;
+    --Gray-100: #12131a;
+    --black: #000;
+  
+    // Primary color
+  
+    --primary-static: #4d75d8;
+    --primary-hover: #7c9bea;
+    --primary-active: #2c4fa4;
+    --primary-disabled: #9a9eb2;
+  
+    //--------------------\\
+  
+    // Secondary color
+  
+    --secondary-static: #40e0d0;
+    --secondary-hover: #9efcf2;
+    --secondary-active: #2fa599;
+  
+    //--------------------\\
+  
+    // Error color
+  
+    --error-static: #da3f3f; // #da3f3f
+    --error-hover: #e75d5d; // #e75d5d
+    --error-active: #bb3232; // #bb3232
+  
+    //--------------------\\
+  
+    // Success color
+  
+    --success-static: #3aaa35;
+    --success-hover: #5cda56;
+    --success-active: #2a8a25;
+  
+    //--------------------\\
+  
+    // Info color
+  
+    --info-static: #c6c6c6;
+    --info-hover: #e4e4e4;
+    --info-active: #979797;
+  
+    //--------------------\\
+  
+    // Warning color
+  
+    --warning-static: #faad14;
+    --warning-hover: #f9be4a;
+    --warning-active: #db9711;
+  
+    //--------------------\\
+  
+    // Action color
+  
+    --action-static: #142452;
+    --action-hover: #21387d;
+    --action-active: #000000;
+  
+    --color-info-primary: #3a6cd1;
+  
+    //<<<<<<<<<<<<<<<<()>>>>>>>>>>>>>>>>\\
+  
+    //---------- Font colors ----------\\
+  
+    --primary-font-color: #142452;
+    --placeholder-font-color: #babdcc;
+    --warning-font-color: #ce2828;
+  
+    //<<<<<<<<<<<<<<<<()>>>>>>>>>>>>>>>>\\
+  
+    //---------- Component based colors ----------\\
+  
+    // Alert component Colors
+  
+    --alert-error: #da3f3f;
+    --alert-light-error: #f4c5c5;
+    --alert-success: #3aaa35;
+    --alert-light-success: #c4e5c2;
+    --alert-info: #8eaaf1;
+    --alert-light-info: #c4d3f1;
+    --alert-warning: #faad14;
+    --alert-light-warning: #fde6b8;
+  
+    // Simple Collapse component colors
+    --border-focus: #3a6cd1;
+  
+    // Tooltip component colors
+    --tooltip-background-color: #202f5b;
+  
+    //---------- General status colors ----------\\
+  
+    //******************************************************************
+  
+    --text-color-primary: #142452;
+    --text-color-secondary: #ffff;
+    --text-color-neutral: #828699;
+    --text-color-tertiary: #808080;
+    --text-color-note: #242424;
+    --text-color-quaternary: #142452;
+    --text-color-disabled: #ffff;
+  
+    --background-color-white-primary: #fff;
+    --background-color-light-primary: #8eaaf1;
+    --background-color-white-secondary: #fff;
+    --background-color-primary-dark: #142452;
+    --background-color-gray-5: #f1f2f6;
+    --background-color-gray-30: #ebecf2;
+    --background-color-tertiary-light: #2c4fa4;
+    --background-color-gray-10: #f1f2f6;
+    --background-color-gray-40: #ebecf2;
+    --background-color-light-blue: #dfe7f8; // dark mode
+  
+    --border-color-primary: #babdcc;
+    --border-color-secondary: #d8dae5;
+    --border-color-neutral: #ebecf2;
+    --border-color-tertiary: #ebecf2;
+    --border-color-gray: #ebecf2;
+    --border-color-hover: #142452;
+    --border-color-active: #3a6cd1;
+  
+    --icon-color-main: #142452;
+    --icon-color-secondary: #000;
+    --icon-color-quaternary: #babdcc;
+    --icon-color-disabled: #9a9eb2;
+    --link-btn-primary-color: #3a6cd1;
+    --button-color-static: #4d75d8;
+    --button-color-hover: #7c9bea;
+    --button-color-active: #2c4fa4;
+  
+    --alert-natural: #c4d3f1;
+  }
+  
+  //----------------------------------------------Arena Components Colors--------------------------------//
+  //---------- Gradient colors ----------\\
+  
+  $white: #fff;
+  $Gray-5: #f1f2f6;
+  $Gray-10: #ebecf2;
+  $Gray-20: #d8dae5;
+  $Gray-30: #babdcc;
+  $Gray-40: #9a9eb2;
+  $Gray-50: #828699;
+  $Gray-60: #696c80;
+  $Gray-70: #515466;
+  $Gray-80: #3a3d4d;
+  $Gray-90: #252833;
+  $Gray-95: #4d4d4d;
+  $Gray-100: #12131a;
+  $black: #000;
+  
+  // Function Colors Buttons & Navigations
+  
+  // Primary color
+  
+  $primary-static: var(--primary-static);
+  $primary-hover: var(--primary-hover);
+  $primary-active: var(--primary-active);
+  $primary-disabled: var(--primary-disabled);
+  
+  //--------------------\\
+  
+  // Secondary color
+  
+  $secondary-static: var(--secondary-color-main);
+  $secondary-hover: var(--secondary-color-light);
+  $secondary-active: darken(#40e0d0, 10%);
+  
+  //--------------------\\
+  
+  // Error color
+  
+  $error-static: var(--color-error);
+  $error-hover: var(--hover-error);
+  $error-active: var(--active-error);
+  
+  //--------------------\\
+  
+  // Success color
+  
+  $success-static: var(--color-success);
+  $success-hover: var(--hover-success);
+  $success-active: var(--active-success);
+  
+  //--------------------\\
+  
+  // Info color
+  
+  $info-static: #c6c6c6;
+  $info-hover: #e4e4e4;
+  $info-active: #979797;
+  
+  //--------------------\\
+  
+  // Warning color
+  
+  $warning-static: var(--color-warning);
+  $warning-hover: var(--hover-warning);
+  $warning-active: var(--active-warning);
+  
+  //--------------------\\
+  
+  // Action color
+  
+  $action-static: var(--btn-action-color);
+  $action-hover: var(--btn-action-hover);
+  $action-active: var(--btn-action-active);
+  
+  //<<<<<<<<<<<<<<<<()>>>>>>>>>>>>>>>>\\
+  
+  //---------- Font colors ----------\\
+  
+  $primary-font-color: var(--text-color-primary);
+  $placeholder-font-color: #babdcc;
+  $disabled-font-color: #d8dae5;
+  $warning-font-color: #ce2828;
+  
+  //<<<<<<<<<<<<<<<<()>>>>>>>>>>>>>>>>\\
+  
+  //---------- Component based colors ----------\\
+  
+  // Alert component Colors
+  
+  $alert-error: var(--alert-error);
+  $alert-success: var(--alert-success);
+  $alert-info: var(--alert-info);
+  $alert-warning: var(--alert-warning);
+  $alert-general: var(--alert-general);
+  $alert-light-error: var(--alert-light-error);
+  $alert-light-warning: var(--alert-light-warning);
+  $alert-light-info: var(--alert-light-info);
+  $alert-light-success: var(--alert-light-success);
+  $alert-light-general: var(--alert-light-general);
+  
+  // Chip component colors
+  
+  $chip-blue: #4d75d8;
+  $chip-dark-blue: #142452;
+  $chip-gray: #9a9eb2;
+  $chip-light-gray: #ebecf2;
+  $chip-lighter-gray: #d8dae5;
+  $chip-black: #000;
+  $chip-light-gray-active: #696c80;
+  $color-info-primary: var(--color-info-primary);
+  
+  // Chart component colors
+  
+  $bar-tooltip: #ebecf2ff;
+  
+  // Loader component colors
+  
+  $loader-background: #ffffff00;
+  $loader-color: #0300b9;
+  
+  // Tooltip component colors
+  
+  $tooltip-background-color: #202f5b;
+  
+  // Simple Collapse component colors
+  
+  $simple-collapse-dropdown-background: rgba(235, 236, 242, 0.3);
+  
+  //---------- General status colors ----------\\
+  
+  //******************************************************************
+  
+  $text-color-primary: var(--text-color-primary);
+  $text-color-secondary: var(--text-color-secondary);
+  $text-color-neutral: var(--text-color-neutral);
+  $text-color-tertiary: var(--text-color-tertiary);
+  $text-color-info: var(--text-color-info);
+  $text-color-note: var(--text-color-note);
+  $text-color-quaternary: var(--text-color-quaternary);
+  $text-color-success: var(--text-color-success);
+  $text-color-error: var(--text-color-error);
+  $text-color-warning: var(--text-color-warning);
+  $text-color-info: var(--text-color-info);
+  $text-color-success: var(--text-color-success);
+  $text-color-error: var(--text-color-error);
+  $text-color-warning: var(--text-color-warning);
+  $text-color-info: var(--text-color-info);
+  $text-color-disabled: var(--text-color-disabled);
+  $text-color-gray-dark: var(--text-color-gray-dark);
+  
+  $background-color-white-primary: var(--background-color-white-primary);
+  $background-color-light-primary: var(--background-color-light-primary);
+  $background-color-white-tertiary: var(--background-color-white-tertiary);
+  $background-color-white-secondary: var(--background-color-white-secondary);
+  $background-color-primary-light: var(--background-color-primary-light);
+  $background-color-tertiary-dark: var(--background-color-tertiary-dark);
+  $background-color-gray-50: var(--background-color-gray-50);
+  $background-color-secondary-light: var(--background-color-secondary-light);
+  $background-color-white-tertiary: var(--background-color-gray-40);
+  $background-color-primary-dark: var(--background-color-primary-dark);
+  $background-color--secondary-dark: var(--background-color-10);
+  $background-color-gray-5: var(--background-color-gray-5);
+  $background-color-gray-20: var(--background-color-gray-20);
+  $background-color-black-primary: var(--background-color-black-primary);
+  $background-color-gray-30: var(--background-color-gray-30);
+  $background-color-tertiary-light: var(--background-color-tertiary-light);
+  $background-color-gray-10: var(--background-color-gray-10);
+  $background-color-gray-40: var(--background-color-gray-40);
+  $background-color-white-light: var(--background-color-white-light);
+  $background-color-gray-60: var(--background-color-gray-60);
+  
+  $border-color-primary: var(--border-color-primary);
+  $border-color-secondary: var(--border-color-secondary);
+  $border-color-neutral: var(--border-color-neutral);
+  $border-color-tertiary: var(--border-color-tertiary);
+  $border-color-gray: var(--border-color-gray);
+  $border-color-hover: var(--border-color-hover);
+  $border-color-active: var(--border-color-active);
+  
+  $icon-color-main: var(--icon-color-main);
+  $icon-color-secondary: var(--icon-color-secondary);
+  $icon-color-tertiary: var(--icon-color-tertiary);
+  $icon-color-quaternary: var(--icon-color-quaternary);
+  $icon-color-disabled: var(--icon-color-disabled);
+  $link-btn-primary-color: var(--link-btn-primary-color);
+  $button-color-static: var(--button-color-static);
+  $button-color-hover: var(--button-color-hover);
+  $button-color-active: var(--button-color-active);