ps-toolkit-ui 0.2.18 → 0.2.21

package/src/assets/styles/base.css

@@ -35,59 +35,46 @@ a:focus{outline: none!important;}
 :root {
   --base-dark: #000523;
   --base: #001937;
-  --base-aa: #556579;
-  --base-66: #99a3af;
-  --base-33: #ccd1d7;
-  --base-22: #dde0e4;
-  --base-11: #eeeff1;
+  --base-light: #33475f;
+  --base-white: #eeeff1;
   --green-dark: #006951;
   --green: #007d65;
-  --green-22: #ddeeea;
+  --green-light: #339783;
+  --green-white: #ddeeea;
   --blue-dark: #1874ab;
   --blue: #2c88bf;
-  --blue-22: #e3eff7;
+  --blue-light: #569fcb;
+  --blue-white: #e3eff7;
   --red-dark: #972c5f;
   --red: #ab4073;
-  --red-cc: #bb668f;
-  --red-22: #f4e5ec;
-  --red-88: #d299b4;
-  --comp-dark: #007fa3;
-  --comp: #0093b7;
-  --comp-22: #ddf1f6;
+  --red-light: #bb668f;
+  --red-white: #f4e5ec;
   --yellow-dark: #ebad32;
   --yellow: #ffc146;
-  --yellow-22: #fff7e6;
+  --yellow-light: #ffcd6b;
+  --yellow-white: #fff7e6;
   --black-dark: #1f1f1f;
   --black: #333333;
-  --black-ee: #404040;
-  --black-dd: #4e4e4e;
-  --black-cc: #5b5b5b;
-  --black-bb: #696969;
-  --black-aa: #777777;
-  --black-99: #848484;
-  --black-88: #929292;
-  --black-77: #9f9f9f;
-  --black-66: #adadad;
-  --black-55: #bbbbbb;
+  --black-light: #5b5b5b;
   --black-44: #c8c8c8;
-  --black-t-44: #33333344;
-  --black-33: #d6d6d6;
-  --black-22: #e3e3e3;
-  --black-11: #f1f1f1;
+  --black-white: #e3e3e3;
   --white-dark: #dddddd;
   --white: #ffffff;
-  --box-shadow: 0 1px 3px 0 var(--base-aa);
-  --box-shadow-bottom: 0 1px 15px 1px var(--base-aa);
+  --primary-dark: #007fa3;
+  --primary: #0093b7;
+  --primary-light: #33a8c5;
+  --primary-white: #ddf1f6;
+  --box-shadow: 0 1px 3px 0 var(--base-light);
   --box-shadow-modal: 0 8px 16px 0 rgba(0, 0, 0, 0.1);
-  --box-shadow-table: 0 0 30px 0 var(--black-22);
+  --box-shadow-table: 0 0 30px 0 var(--black-white);
   --box-shadow-header: 0 4px 30px 0 rgba(0, 0, 0, 0.1);
   --box-shadow-footer: 0 -4px 30px 0 rgba(0, 0, 0, 0.1);
-  --border-input: 1px solid var(--black-22);
-  --border-input-dark: 1px solid var(--black-88);
-  --border-input-red: 1px solid var(--red-22);
-  --border-input-red-dark: 1px solid var(--red-88);
-  --border-base: 1px solid var(--black-22);
-  --border-radius-base: 1px solid var(--black-22)
+  --border-input: 1px solid var(--black-white);
+  --border-input-dark: 1px solid var(--black-light);
+  --border-input-red: 1px solid var(--red-white);
+  --border-input-red-dark: 1px solid var(--red-light);
+  --border-base: 1px solid var(--black-white);
+  --border-radius-base: 5px;
 }
 .underline:after, .form-group-title:after{
   content:"";
@@ -103,7 +90,7 @@ a:focus{outline: none!important;}
 
 .report .underline:after, .report .form-group-title:after{
   background-image: none;
-  border-bottom: 1px solid var(--black-44);
+  border-bottom: 1px solid var(--black-light);
 }
 .topline:after{
   content:"";
@@ -143,7 +130,7 @@ a:focus{outline: none!important;}
 .green{color: var(--green)}
 .blue{color: var(--blue)}
 .red{color: var(--red)}
-.comp{color: var(--comp)}
+.comp{color: var(--primary)}
 html{
   writing-mode: rl;
   direction: rtl;
@@ -166,17 +153,17 @@ body{
 }
 .text-label{
   padding: 2px 10px;
-  border-radius: 5px;
+  border-radius: var(--border-radius-base);
   color: var(--black);
-  background-color: var(--black-22);
+  background-color: var(--black-white);
 }
 .text-label.green{
   color: var(--green);
-  background-color: var(--green-22);
+  background-color: var(--green-white);
 }
 .text-label.red{
   color: var(--red);
-  background-color: var(--red-22);
+  background-color: var(--red-white);
 }
 
 * {