@topvisor/ui 1.1.0 → 1.2.0

package/src/resources/styles/themes/dark-th/dark-th.css

@@ -0,0 +1,400 @@
+:root {
+	color-scheme: dark;
+
+    /* Theme Colors */
+    --color-theme-0: #000000;
+    --color-theme-50: #0E0E11;
+    --color-theme-75: #101013;
+    --color-theme-100: #131316;
+    --color-theme-125: #17171C;
+    --color-theme-150: #1C1C21;
+    --color-theme-175: #212126;
+    --color-theme-200: #26262C;
+    --color-theme-225: #2A2A32;
+    --color-theme-250: #2F2F37;
+    --color-theme-260: #34343D;
+    --color-theme-275: #393942;
+    --color-theme-300: #3D3D47;
+    --color-theme-325: #42424D;
+    --color-theme-350: #464653;
+    --color-theme-360: #4B4B58;
+    --color-theme-375: #50505E;
+    --color-theme-400: #555563;
+    --color-theme-410: #595969;
+    --color-theme-420: #5E5E6E;
+    --color-theme-430: #626274;
+    --color-theme-440: #676779;
+    --color-theme-450: #6C6C7E;
+    --color-theme-460: #717184;
+    --color-theme-465: #75758A;
+    --color-theme-470: #7B7B8E;
+    --color-theme-475: #818193;
+    --color-theme-480: #868698;
+    --color-theme-485: #8B8B9D;
+    --color-theme-500: #9191A1;
+    --color-theme-550: #9696A6;
+    --color-theme-575: #9C9CAA;
+    --color-theme-600: #A1A1AF;
+    --color-theme-625: #A7A7B4;
+    --color-theme-650: #ACACB9;
+    --color-theme-675: #B2B2BD;
+    --color-theme-700: #B8B8C2;
+    --color-theme-710: #BDBDC6;
+    --color-theme-725: #C2C2CB;
+    --color-theme-750: #C8C8D0;
+    --color-theme-800: #CDCDD5;
+    --color-theme-850: #D3D3D9;
+    --color-theme-900: #D9D9DE;
+    --color-theme-925: #DEDEE3;
+    --color-theme-950: #E3E3E8;
+    --color-theme-955: #E9E9EC;
+    --color-theme-960: #EEEEF1;
+    --color-theme-965: #F4F4F5;
+    --color-theme-970: #FAFAFA;
+    --color-theme-1000: #FFFFFF;
+
+    /*base color*/
+    --color-white: rgba(255, 255, 255, 1);
+    --color-black: rgba(0, 0, 0, 1);
+
+    /* Primary Colors */
+    --color-primary-25: #1F232E;
+    --color-primary-50: #1C2736;
+    --color-primary-100: #18293E;
+    --color-primary-125: #142B48;
+    --color-primary-150: #16355A;
+    --color-primary-200: #183E6D;
+    --color-primary-225: #184781;
+    --color-primary-250: #185095;
+    --color-primary-275: #175AAB;
+    --color-primary-300: #1563C1;
+    --color-primary-350: #136BD8;
+    --color-primary-400: #0F74F0;
+    --color-primary-450: #1E7FF6;
+    --color-primary-500: #2D8AFB;
+    --color-primary-550: #3D94FF;
+    --color-primary-600: #52A0FF;
+    --color-primary-650: #66ABFF;
+    --color-primary-700: #7AB6FF;
+    --color-primary-720: #8FC1FF;
+    --color-primary-740: #A3CDFF;
+    --color-primary-760: #B8D8FF;
+    --color-primary-780: #C2DDFF;
+    --color-primary-800: #CCE3FF;
+    --color-primary-825: #D6E9FF;
+    --color-primary-850: #E0EEFF;
+    --color-primary-900: #EBF4FF;
+    --color-primary-950: #F5F9FF;
+
+    /* Positive Colors */
+    --color-positive-25: #232424;
+    --color-positive-50: #282A29;
+    --color-positive-100: #25312C;
+    --color-positive-125: #223A30;
+    --color-positive-150: #274939;
+    --color-positive-200: #2C5940;
+    --color-positive-225: #2F6A46;
+    --color-positive-250: #327B49;
+    --color-positive-275: #348D4A;
+    --color-positive-300: #36A150;
+    --color-positive-350: #36B556;
+    --color-positive-400: #36C95B;
+    --color-positive-450: #41D265;
+    --color-positive-500: #4DDB71;
+    --color-positive-550: #5AE27C;
+    --color-positive-600: #6CE58A;
+    --color-positive-650: #87E89F;
+    --color-positive-700: #8EEBA5;
+    --color-positive-720: #A0EEB3;
+    --color-positive-740: #B1F1C1;
+    --color-positive-760: #BAF3C8;
+    --color-positive-780: #C2F4CF;
+    --color-positive-800: #CBF6D6;
+    --color-positive-825: #D4F7DD;
+    --color-positive-850: #DCF9E3;
+    --color-positive-900: #E5FAEA;
+    --color-positive-950: #EEFCF1;
+
+    /* Warning Colors */
+    --color-warning-25: #322020;
+    --color-warning-50: #39221D;
+    --color-warning-100: #42211A;
+    --color-warning-125: #4C1E15;
+    --color-warning-150: #5E2817;
+    --color-warning-200: #713319;
+    --color-warning-225: #854119;
+    --color-warning-250: #9A5119;
+    --color-warning-275: #AF6418;
+    --color-warning-300: #C56E16;
+    --color-warning-350: #DD7813;
+    --color-warning-400: #F08214;
+    --color-warning-450: #F68C23;
+    --color-warning-500: #FB9632;
+    --color-warning-550: #FFA042;
+    --color-warning-600: #FFAB57;
+    --color-warning-650: #FFB56B;
+    --color-warning-700: #FFBF80;
+    --color-warning-720: #FFC994;
+    --color-warning-740: #FFD3A8;
+    --color-warning-760: #FFDEBD;
+    --color-warning-780: #FFE3C7;
+    --color-warning-800: #FFE8D1;
+    --color-warning-825: #FFEDDB;
+    --color-warning-850: #FFF3E6;
+    --color-warning-900: #FFF7F0;
+    --color-warning-950: #FFFDFA;
+
+    /* Negative Colors */
+    --color-negative-25: #2F2229;
+    --color-negative-50: #371F2D;
+    --color-negative-100: #401C30;
+    --color-negative-125: #4A1733;
+    --color-negative-150: #5B1A3A;
+    --color-negative-200: #6E1C3E;
+    --color-negative-225: #821C40;
+    --color-negative-250: #961D3F;
+    --color-negative-275: #AB1C31;
+    --color-negative-300: #C11A33;
+    --color-negative-350: #D81834;
+    --color-negative-400: #EB1938;
+    --color-negative-450: #F12745;
+    --color-negative-500: #F73652;
+    --color-negative-550: #FF425E;
+    --color-negative-600: #FF576F;
+    --color-negative-650: #FF6B81;
+    --color-negative-700: #FF8092;
+    --color-negative-720: #FF94A4;
+    --color-negative-740: #FFA8B5;
+    --color-negative-760: #FFBDC6;
+    --color-negative-780: #FFC7CF;
+    --color-negative-800: #FFD1D8;
+    --color-negative-825: #FFDBE1;
+    --color-negative-850: #FFE5E9;
+    --color-negative-900: #FFF0F2;
+    --color-negative-950: #FFFAFA;
+
+    /* Info Colors */
+    --color-info-25: #1E1D2B;
+    --color-info-50: #1C1A32;
+    --color-info-100: #1A173B;
+    --color-info-125: #181344;
+    --color-info-150: #201556;
+    --color-info-200: #2A1769;
+    --color-info-225: #36187C;
+    --color-info-250: #441891;
+    --color-info-275: #5517A6;
+    --color-info-300: #5E15BC;
+    --color-info-350: #6612D3;
+    --color-info-400: #6F0FEB;
+    --color-info-450: #7919F5;
+    --color-info-500: #8428FB;
+    --color-info-550: #8F38FF;
+    --color-info-600: #9A4DFF;
+    --color-info-650: #A561FF;
+    --color-info-700: #B175FF;
+    --color-info-720: #BC8AFF;
+    --color-info-740: #C89EFF;
+    --color-info-760: #D4B2FF;
+    --color-info-780: #D9BDFF;
+    --color-info-800: #DFC7FF;
+    --color-info-825: #E5D1FF;
+    --color-info-850: #EBDBFF;
+    --color-info-900: #F1E5FF;
+    --color-info-950: #F6F0FF;
+
+    /* Layer Colors */
+    --color-layer-1: rgba(140, 140, 166, 0.08);
+    --color-layer-2: rgba(140, 140, 166, 0.14);
+    --color-layer-3: rgba(140, 140, 166, 0.18);
+    --color-layer-4: rgba(140, 140, 166, 0.24);
+
+    --color-layer-primary-1: rgba(45, 110, 251, 0.14);
+    --color-layer-primary-2: rgba(45, 110, 251, 0.2);
+    --color-layer-primary-3: rgba(45, 110, 251, 0.3);
+    --color-layer-primary-4: rgba(45, 110, 251, 0.4);
+
+    --color-layer-positive-1: rgba(54, 181, 86, 0.14);
+    --color-layer-positive-2: rgba(54, 181, 86, 0.2);
+    --color-layer-positive-3: rgba(54, 181, 86, 0.3);
+    --color-layer-positive-4: rgba(54, 181, 86, 0.4);
+
+    --color-layer-warning-1: rgba(255, 160, 66, 0.14);
+    --color-layer-warning-2: rgba(255, 160, 66, 0.2);
+    --color-layer-warning-3: rgba(255, 160, 66, 0.3);
+    --color-layer-warning-4: rgba(255, 160, 66, 0.4);
+
+    --color-layer-negative-1: rgba(247, 54, 82, 0.14);
+    --color-layer-negative-2: rgba(247, 54, 82, 0.2);
+    --color-layer-negative-3: rgba(247, 54, 82, 0.3);
+    --color-layer-negative-4: rgba(247, 54, 82, 0.4);
+
+    --color-layer-info-1: rgba(165, 97, 255, 0.14);
+    --color-layer-info-2: rgba(165, 97, 255, 0.2);
+    --color-layer-info-3: rgba(165, 97, 255, 0.3);
+    --color-layer-info-4: rgba(165, 97, 255, 0.4);
+
+    /* top-shadow */
+    --top-shadow-xs: 0px 0px 3px rgba(0, 0, 0, 0.11), 0px 5px 25px rgba(0, 0, 0, 0.08);
+    --top-shadow-s: 0px 0px 3px rgba(0, 0, 0, 0.11), 0px 5px 25px rgba(0, 0, 0, 0.17);
+    --top-shadow: 0px 0px 4px rgba(0, 0, 0, 0.14), 0px 4px 32px rgba(0, 0, 0, 0.2);
+    --top-shadow-b: 0px 0px 4px rgba(0, 0, 0, 0.15), 0px 18px 32px rgba(0, 0, 0, 0.34);
+
+    --top-shadow-darken: inset 1000px 1000px 1000px 1000px rgba(0, 0, 0, 0.03);
+    --top-shadow-darken-2: inset 1000px 1000px 1000px 1000px rgba(0, 0, 0, 0.12);
+    --top-shadow-darken-3: inset 1000px 1000px 1000px 1000px rgba(0, 0, 0, 0.1);
+
+    /* preloader style color */
+    --color-bg-preloader: rgba(255, 255, 255, 0.01);
+}
+
+:root {
+    /* brand colors */
+    --color-brand-1: #FFE500;
+    --color-brand-2: #FFD400;
+    --color-brand-3: #F5BC00;
+
+    /* shading background  */
+    --color-bg-shading-1: var(--color-theme-150);
+    --color-bg-shading-2: var(--color-theme-125);
+    --color-bg-shading-3: var(--color-theme-100);
+    --color-bg-shading-4: var(--color-theme-75);
+    --color-bg-shading-5: var(--color-theme-50);
+    --color-bg-shading-6: var(--color-theme-0);
+
+    /* lightning background  */
+    --color-bg-lightning-1: var(--color-theme-260);
+
+    /* inverted background  */
+    --color-bg-inverted-1: var(--color-theme-970);
+    --color-bg-inverted-2: var(--color-theme-955);
+    --color-bg-inverted-3: var(--color-theme-900);
+    --color-bg-inverted-4: var(--color-theme-850);
+    --color-bg-inverted-5: var(--color-theme-800);
+    --color-bg-inverted-6: var(--color-theme-750);
+    --color-bg-inverted-7: var(--color-theme-725);
+    --color-bg-inverted-8: var(--color-theme-710);
+    --color-bg-inverted-9: var(--color-theme-700);
+    --color-bg-inverted-10: var(--color-theme-675);
+
+    /* primary background  */
+    --color-bg-primary-1: var(--color-primary-550);
+    --color-bg-primary-2: var(--color-primary-650);
+    --color-bg-primary-3: var(--color-primary-720);
+
+    /* positive background  */
+    --color-bg-positive-1: var(--color-positive-400);
+    --color-bg-positive-2: var(--color-positive-600);
+    --color-bg-positive-3: var(--color-positive-740);
+
+    /* warning background  */
+    --color-bg-warning-1: var(--color-warning-450);
+    --color-bg-warning-2: var(--color-warning-600);
+    --color-bg-warning-3: var(--color-warning-700);
+
+    /* negative background  */
+    --color-bg-negative-1: var(--color-negative-550);
+    --color-bg-negative-2: var(--color-negative-650);
+    --color-bg-negative-3: var(--color-negative-720);
+
+    /* info background  */
+    --color-bg-info-1: var(--color-info-650);
+    --color-bg-info-2: var(--color-info-720);
+    --color-bg-info-3: var(--color-info-780);
+
+    /* text colors  */
+    --color-text-1: var(--color-theme-970);
+    --color-text-2: var(--color-theme-750);
+    --color-text-3: var(--color-theme-500);
+    --color-text-4: var(--color-theme-450);
+
+    --color-text-1-inverse: var(--color-theme-100);
+    --color-text-white: var(--color-white);
+
+    /* primary text  */
+    --color-text-primary: var(--color-primary-550);
+    --color-text-primary-alt: var(--color-primary-650);
+
+    /* positive text  */
+    --color-text-positive: var(--color-positive-450);
+    --color-text-positive-alt: var(--color-positive-700);
+
+    /* warning text  */
+    --color-text-warning: var(--color-warning-450);
+    --color-text-warning-alt: var(--color-warning-650);
+
+    /* negative text  */
+    --color-text-negative: var(--color-negative-600);
+    --color-text-negative-alt: var(--color-negative-720);
+
+    /* info text  */
+    --color-text-info: var(--color-info-650);
+    --color-text-info-alt: var(--color-info-740);
+
+    /* line colors  */
+    --color-line-1: var(--color-theme-350);
+    --color-line-2: var(--color-theme-400);
+    --color-line-3: var(--color-theme-485);
+    --color-line-4: var(--color-theme-650);
+
+    --color-line-1-opacity: rgba(193, 203, 215, 0.1);
+    --color-line-2-opacity: rgba(193, 203, 215, 0.15);
+    --color-line-3-opacity: rgba(193, 203, 215, 0.27);
+
+    /* line primary colors  */
+    --color-line-primary-1: var(--color-primary-700);
+    --color-line-primary-2: var(--color-primary-760);
+    --color-line-primary-3: var(--color-primary-850);
+
+    --color-line-primary-1-opacity: rgba(122, 164, 255, 0.14);
+    --color-line-primary-2-opacity: rgba(122, 164, 255, 0.28);
+    --color-line-primary-3-opacity: rgba(122, 164, 255, 0.38);
+
+    /* line positive colors  */
+    --color-line-positive-1: var(--color-positive-450);
+    --color-line-positive-2: var(--color-positive-600);
+    --color-line-positive-3: var(--color-positive-740);
+
+    --color-line-positive-1-opacity: rgba(164, 233, 171, 0.14);
+    --color-line-positive-2-opacity: rgba(164, 233, 171, 0.28);
+    --color-line-positive-3-opacity: rgba(164, 233, 171, 0.38);
+
+    /* line warning colors  */
+    --color-line-warning-1: var(--color-warning-500);
+    --color-line-warning-2: var(--color-warning-650);
+    --color-line-warning-3: var(--color-warning-740);
+
+    --color-line-warning-1-opacity: rgba(255, 191, 128, 0.14);
+    --color-line-warning-2-opacity: rgba(255, 191, 128, 0.28);
+    --color-line-warning-3-opacity: rgba(255, 191, 128, 0.38);
+
+    /* line negative colors  */
+    --color-line-negative-1: var(--color-negative-600);
+    --color-line-negative-2: var(--color-negative-650);
+    --color-line-negative-3: var(--color-negative-740);
+
+    --color-line-negative-1-opacity: rgba(239, 135, 148, 0.14);
+    --color-line-negative-2-opacity: rgba(239, 135, 148, 0.28);
+    --color-line-negative-3-opacity: rgba(239, 135, 148, 0.38);
+
+    /* line info colors  */
+    --color-line-info-1: var(--color-info-650);
+    --color-line-info-2: var(--color-info-720);
+    --color-line-info-3: var(--color-info-780);
+
+    --color-line-info-1-opacity: rgba(168, 120, 247, 0.14);
+    --color-line-info-2-opacity: rgba(168, 120, 247, 0.28);
+    --color-line-info-3-opacity: rgba(168, 120, 247, 0.38);
+
+    /* Scroll */
+    --scroll-track-color: var(--color-theme-225);
+    --scroll-thumb-color: var(--color-theme-250);
+    --scroll-thumb-color-hover: var(--color-theme-300);
+    --scroll-thumb-color-active: var(--color-theme-400);
+
+   /* Page */
+	--body-background-color: var(--color-layout-front-1);
+	--content-background-color: var(--color-layout-front-1);
+
+	--top-forms-option-color: var(--color-primary-500);
+	--top-forms-option-color-hover: var(--color-primary-600);
+}

package/src/resources/styles/themes/dark-th-positions.ts

@@ -0,0 +1 @@
+// import './dark-th/dark-th-positions.css';

package/src/resources/styles/themes/dark-th.ts

@@ -0,0 +1,3 @@
+import './dark-th/dark-th.css';
+import './dark-th/dark-th-layout.css';
+import './dark-th/dark-th-positions.css';

package/src/resources/styles/themes/dark.ts

@@ -0,0 +1,3 @@
+import './dark/dark.css';
+import './dark/dark-layout.css';
+import './dark/dark-positions.css';

package/src/resources/styles/themes/light/light-layout.css

@@ -0,0 +1,47 @@
+:root {
+	--color-layout-back: var(--color-theme-200);
+	--color-layout-header: var(--color-theme-0);
+	--color-layout-middle: var(--color-theme-125);
+
+	--color-layout-front-1: var(--color-theme-0);
+	--color-layout-front-2: #FCFCFD;
+	--color-layout-front-3: #F6F6F8;
+	--color-layout-front-4: #EBEDF1;
+	--color-layout-front-5: #E2E5EA;
+	--color-layout-front-6: #D8DCE2;
+
+	--color-layout-front-primary-1: #FFFFFF;
+	--color-layout-front-primary-2: #F7F9FF;
+	--color-layout-front-primary-3: #EEF3FF;
+	--color-layout-front-primary-4: #E6EEFF;
+	--color-layout-front-primary-5: #DDE8FE;
+	--color-layout-front-primary-6: #D5E2FE;
+
+	--color-layout-front-positive-1: #FFFFFF;
+	--color-layout-front-positive-2: #F8FEF9;
+	--color-layout-front-positive-3: #F1FCF4;
+	--color-layout-front-positive-4: #EAFBEF;
+	--color-layout-front-positive-5: #E3F9E8;
+	--color-layout-front-positive-6: #DBF8E3;
+
+	--color-layout-front-warning-1: #FFFFFF;
+	--color-layout-front-warning-2: #FFFBF7;
+	--color-layout-front-warning-3: #FFF7F0;
+	--color-layout-front-warning-4: #FFF4E8;
+	--color-layout-front-warning-5: #FFF0E1;
+	--color-layout-front-warning-6: #FFECDA;
+
+	--color-layout-front-negative-1: #FFFFFF;
+	--color-layout-front-negative-2: #FFF7F8;
+	--color-layout-front-negative-3: #FEF0F1;
+	--color-layout-front-negative-4: #FEE7E9;
+	--color-layout-front-negative-5: #FEDFE3;
+	--color-layout-front-negative-6: #FDD7DC;
+
+	--color-layout-front-info-1: #FFFFFF;
+	--color-layout-front-info-2: #FAF6FF;
+	--color-layout-front-info-3: #F5EEFF;
+	--color-layout-front-info-4: #F0E5FF;
+	--color-layout-front-info-5: #EBDBFE;
+	--color-layout-front-info-6: #E6D4FE;
+}

package/src/resources/styles/themes/light/light-positions.css

@@ -0,0 +1,66 @@
+:root {
+	/* summary top */
+	--color-summary-top-3: #3198DD;
+	--color-summary-top-10: #21936C;
+	--color-summary-top-30: #1ABC9C;
+	--color-summary-top-50: #94DA90;
+	--color-summary-top-100: #BCC8C8;
+	--color-summary-top-10000: #FCC53B;
+
+	/* top's Colors */
+	--color-table-top-1: #B3D2FF;
+	--color-table-top-2: #CCE0FF;
+	--color-table-top-3: #CCE0FF;
+	--color-table-top-4: #8AF3B7;
+	--color-table-top-5: #98F5C1;
+	--color-table-top-6: #A2F7C8;
+	--color-table-top-7: #ACF9CE;
+	--color-table-top-8: #B6FBD5;
+	--color-table-top-9: #BFFDDB;
+	--color-table-top-10: #CCFFE4;
+
+	/* dynamic Colors */
+	--color-table-move-up-10: #8AF3B7;
+	--color-table-move-up-9: #8AF3B7;
+	--color-table-move-up-8: #A2F7C8;
+	--color-table-move-up-7: #A2F7C8;
+	--color-table-move-up-6: #B6FBD5;
+	--color-table-move-up-5: #B6FBD5;
+	--color-table-move-up-4: #BFFDDB;
+	--color-table-move-up-3: #BFFDDB;
+	--color-table-move-up-2: #CCFFE4;
+	--color-table-move-up-1: #CCFFE4;
+
+	--color-table-move-0: #FCFEFD;
+
+	--color-table-move-down-1: #FFF1F0;
+	--color-table-move-down-2: #FFF1F0;
+	--color-table-move-down-3: #FFF1F0;
+	--color-table-move-down-4: #FFF1F0;
+	--color-table-move-down-5: #FFE7E6;
+	--color-table-move-down-6: #FFE7E6;
+	--color-table-move-down-7: #FFE7E6;
+	--color-table-move-down-8: #FFD5D4;
+	--color-table-move-down-9: #FFD5D4;
+	--color-table-move-down-10: #FFD5D4;
+
+	--color-table-down: #FFF1F0;
+	--color-table-up: #CCFFE4;
+
+	--color-table-down-10: #FFE7E6;
+	--color-table-up-10: #BFFDDB;
+
+	--color-table-base: var(--color-layout-front-1);
+	--color-table-featured-snippet: #F6F2A0;
+	--color-table-empty: var(--color-layout-front-3);
+	--color-table-not_found: #FFF6C6;
+
+	/* snapshot gradiern */
+	--color-snapshot-panel-gradient-1: rgba(255, 255, 255, 0.5);
+	--color-snapshot-panel-gradient-2: rgba(255, 255, 255, 0.8);
+
+	/* top snippet color */
+	--color-snippet-title: #1A0DAB;
+	--color-snippet-title-visited: #660099;
+	--color-snippet-url: #007700;
+}