@topvisor/ui 1.1.0 → 1.2.0

package/src/resources/styles/core/select.css

@@ -0,0 +1,15 @@
+/* TODO: перенести в компонент */
+.top-select_arrow {
+	--top-select_arrow-size: 12px;
+	--top-select_arrow-width: 24px;
+
+	background-image: url("data:image/svg+xml,%3Csvg width='16' height='9' viewBox='0 0 16 9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.293 0.29269L8 6.5857L1.70704 0.29269C1.31679 -0.0975633 0.682937 -0.0975633 0.292687 0.29269C-0.0975624 0.682943 -0.0975624 1.31656 0.292687 1.70682L7.29294 8.70713C7.68343 9.09762 8.31657 9.09762 8.70706 8.70713L15.7073 1.70682C16.0976 1.31656 16.0976 0.682943 15.7073 0.29269C15.3171 -0.0975633 14.6832 -0.0975633 14.293 0.29269Z' fill='%23808A99'/%3E%3C/svg%3E");
+	background-size: 14px;
+	background-position: calc(100% - var(--top-forms-padding)) 50%;
+	background-repeat: no-repeat;
+	padding-right: 32px;
+}
+
+.top-select_arrow ~ .top-cleaner {
+	--top-select_arrow-width: 24px;
+}

package/src/resources/styles/storybook.css

@@ -0,0 +1,11 @@
+:root {
+	font-family: "Open Sans", "Tahoma", "Topvisor-2";
+}
+
+body,
+.docs-story,
+.sb-story {
+	background: var(--color-layout-front-1);
+	color: var(--color-text-1);
+	font-size: var(--top-font-size);
+}

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

@@ -0,0 +1,47 @@
+:root {
+	--color-layout-back: var(--color-theme-100);
+	--color-layout-header: var(--color-theme-225);
+	--color-layout-middle: var(--color-theme-125);
+
+	--color-layout-front-1: var(--color-theme-225);
+	--color-layout-front-2: #222F43;
+	--color-layout-front-3: #253348;
+	--color-layout-front-4: #29374D;
+	--color-layout-front-5: #2C3B52;
+	--color-layout-front-6: #2C3B52;
+
+	--color-layout-front-primary-1: #202C3F;
+	--color-layout-front-primary-2: #232f41;
+	--color-layout-front-primary-3: #243149;
+	--color-layout-front-primary-4: #243450;
+	--color-layout-front-primary-5: #253758;
+	--color-layout-front-primary-6: #253960;
+
+	--color-layout-front-positive-1: #202D3D;
+	--color-layout-front-positive-2: #25333b;
+	--color-layout-front-positive-3: #263a3d;
+	--color-layout-front-positive-4: #284140;
+	--color-layout-front-positive-5: #2a4842;
+	--color-layout-front-positive-6: #2b4f44;
+
+	--color-layout-front-warning-1: #222D3C;
+	--color-layout-front-warning-2: #2b3038;
+	--color-layout-front-warning-3: #343437;
+	--color-layout-front-warning-4: #3c3836;
+	--color-layout-front-warning-5: #453b35;
+	--color-layout-front-warning-6: #4d3f35;
+
+	--color-layout-front-negative-1: #222B3D;
+	--color-layout-front-negative-2: #2b2c3a;
+	--color-layout-front-negative-3: #342d3b;
+	--color-layout-front-negative-4: #3c2d3c;
+	--color-layout-front-negative-5: #452e3d;
+	--color-layout-front-negative-6: #4d2e3e;
+
+	--color-layout-front-info-1: #212B3F;
+	--color-layout-front-info-2: #272c41;
+	--color-layout-front-info-3: #2b2c49;
+	--color-layout-front-info-4: #2f2c50;
+	--color-layout-front-info-5: #332b58;
+	--color-layout-front-info-6: #362b60;
+}

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

@@ -0,0 +1,66 @@
+:root {
+	/* summary top */
+	--color-summary-top-3: #5BA8DC;
+	--color-summary-top-10: #1AAD7B;
+	--color-summary-top-30: #4BD2B8;
+	--color-summary-top-50: #68CA63;
+	--color-summary-top-100: #9DAAAA;
+	--color-summary-top-10000: #CAA549;
+
+	/* top's Colors */
+	--color-table-top-1: #435E93;
+	--color-table-top-2: #3F5788;
+	--color-table-top-3: #3B5381;
+	--color-table-top-4: #357550;
+	--color-table-top-5: #336F4E;
+	--color-table-top-6: #326B4D;
+	--color-table-top-7: #31684C;
+	--color-table-top-8: #30624A;
+	--color-table-top-9: #2F5D48;
+	--color-table-top-10: #2D5747;
+
+	/* dynamic Colors */
+	--color-table-move-up-10: #0E6A44;
+	--color-table-move-up-9: #116542;
+	--color-table-move-up-8: #145F40;
+	--color-table-move-up-7: #165A3E;
+	--color-table-move-up-6: #19543C;
+	--color-table-move-up-5: #1B4F3A;
+	--color-table-move-up-4: #1E4938;
+	--color-table-move-up-3: #204335;
+	--color-table-move-up-2: #233E33;
+	--color-table-move-up-1: #263832;
+
+	--color-table-move-0: #313135;
+
+	--color-table-move-down-1: #46303F;
+	--color-table-move-down-2: #4F3040;
+	--color-table-move-down-3: #583142;
+	--color-table-move-down-4: #633244;
+	--color-table-move-down-5: #6C3345;
+	--color-table-move-down-6: #723446;
+	--color-table-move-down-7: #793547;
+	--color-table-move-down-8: #823649;
+	--color-table-move-down-9: #8A364A;
+	--color-table-move-down-10: #93374C;
+
+	--color-table-down: #46303F;
+	--color-table-down-10: #4F3040;
+
+	--color-table-up: #365344;
+	--color-table-up-10: #2C5145;
+
+	--color-table-base: var(--color-layout-front-1);
+	--color-table-featured-snippet: #7D7B45;
+	--color-table-empty: var(--color-layout-front-3);
+	--color-table-not_found: #313638;
+
+	/* snapshot gradiern */
+	--color-snapshot-panel-gradient-1: rgba(35, 44, 77, 0.5);
+	--color-snapshot-panel-gradient-2: rgba(35, 44, 77, 0.8);
+
+	/* top snippet color */
+	--color-snippet-title: #A2C2FA;
+	--color-snippet-title-visited: #BC8CF2;
+	--color-snippet-url: #007700;
+}

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

@@ -0,0 +1,400 @@
+:root {
+	color-scheme: dark;
+
+	/* Theme Colors */
+	--color-theme-0: #000000;
+	--color-theme-50: #050815;
+	--color-theme-75: #090A18;
+	--color-theme-100: #0E121B;
+	--color-theme-125: #111722;
+	--color-theme-150: #141C29;
+	--color-theme-175: #172130;
+	--color-theme-200: #1B2637;
+	--color-theme-225: #1E2B3E;
+	--color-theme-250: #223044;
+	--color-theme-260: #25344C;
+	--color-theme-275: #293852;
+	--color-theme-300: #2C3E58;
+	--color-theme-325: #2F4360;
+	--color-theme-350: #324867;
+	--color-theme-360: #364D6D;
+	--color-theme-375: #395175;
+	--color-theme-400: #3D557B;
+	--color-theme-410: #405A82;
+	--color-theme-420: #435F89;
+	--color-theme-430: #47648F;
+	--color-theme-440: #4A6996;
+	--color-theme-450: #4D6E9D;
+	--color-theme-460: #5173A4;
+	--color-theme-465: #5476AB;
+	--color-theme-470: #5B7DAE;
+	--color-theme-475: #6281B2;
+	--color-theme-480: #6987B5;
+	--color-theme-485: #708DB8;
+	--color-theme-500: #7692BC;
+	--color-theme-550: #7D97BF;
+	--color-theme-575: #849DC2;
+	--color-theme-600: #8AA2C6;
+	--color-theme-625: #92A7C9;
+	--color-theme-650: #98AECD;
+	--color-theme-675: #9FB3D0;
+	--color-theme-700: #A7B9D3;
+	--color-theme-710: #ADBED6;
+	--color-theme-725: #B3C3DA;
+	--color-theme-750: #BBC9DD;
+	--color-theme-800: #C1CEE1;
+	--color-theme-850: #C8D3E4;
+	--color-theme-900: #CFD9E8;
+	--color-theme-925: #D6DEEB;
+	--color-theme-950: #DDE3EE;
+	--color-theme-955: #E4EAF1;
+	--color-theme-960: #EAEFF5;
+	--color-theme-965: #F1F4F8;
+	--color-theme-970: #F9FAFB;
+	--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: #1F252E;
+	--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: #111311;
+	--color-positive-50: #131612;
+	--color-positive-100: #141A14;
+	--color-positive-125: #161E15;
+	--color-positive-150: #1C2C1C;
+	--color-positive-200: #223A23;
+	--color-positive-225: #27492B;
+	--color-positive-250: #2C5934;
+	--color-positive-275: #2F6A3E;
+	--color-positive-300: #327B44;
+	--color-positive-350: #348D4B;
+	--color-positive-400: #36A150;
+	--color-positive-450: #36B556;
+	--color-positive-500: #36C95B;
+	--color-positive-550: #41D265;
+	--color-positive-600: #4DDB73;
+	--color-positive-650: #5AE27C;
+	--color-positive-700: #6CE58A;
+	--color-positive-720: #7DE898;
+	--color-positive-740: #8EEBA5;
+	--color-positive-760: #A0EEB3;
+	--color-positive-780: #B1F1C1;
+	--color-positive-800: #C2F4CF;
+	--color-positive-825: #D8F8E0;
+	--color-positive-850: #E5FAEA;
+	--color-positive-900: #EEFCF1;
+	--color-positive-950: #F6FDF8;
+
+	/* Warning Colors */
+	--color-warning-25: #3C1F1F;
+	--color-warning-50: #39221B;
+	--color-warning-100: #421B1A;
+	--color-warning-125: #4C2015;
+	--color-warning-150: #5E2517;
+	--color-warning-200: #71321E;
+	--color-warning-225: #7F3D19;
+	--color-warning-250: #9A511A;
+	--color-warning-275: #AF6420;
+	--color-warning-300: #C56D1C;
+	--color-warning-350: #DD780C;
+	--color-warning-400: #F08214;
+	--color-warning-450: #F48B1B;
+	--color-warning-500: #FB9632;
+	--color-warning-550: #FFA042;
+	--color-warning-600: #FFAB57;
+	--color-warning-650: #FFB56B;
+	--color-warning-700: #FFBF80;
+	--color-warning-720: #FFCB94;
+	--color-warning-740: #FFD7A8;
+	--color-warning-760: #FFDEBF;
+	--color-warning-780: #FFE3C7;
+	--color-warning-800: #FFE8CF;
+	--color-warning-825: #FFEDDB;
+	--color-warning-850: #FFF3E6;
+	--color-warning-900: #FFF7F0;
+	--color-warning-950: #FFFDFA;
+
+	/* Negative Colors */
+	--color-negative-25: #2E2229;
+	--color-negative-50: #371F2B;
+	--color-negative-100: #402030;
+	--color-negative-125: #4A1733;
+	--color-negative-150: #5B193A;
+	--color-negative-200: #6E1C2F;
+	--color-negative-225: #8A1C34;
+	--color-negative-250: #9B1D32;
+	--color-negative-275: #AB1A2F;
+	--color-negative-300: #C31A30;
+	--color-negative-350: #D81534;
+	--color-negative-400: #EB1938;
+	--color-negative-450: #F12745;
+	--color-negative-500: #F73652;
+	--color-negative-550: #FF4262;
+	--color-negative-600: #FF576F;
+	--color-negative-650: #FF6B7B;
+	--color-negative-700: #FF8092;
+	--color-negative-720: #FF949F;
+	--color-negative-740: #FFA8B5;
+	--color-negative-760: #FFBFC6;
+	--color-negative-780: #FFC7CF;
+	--color-negative-800: #FFD1D8;
+	--color-negative-825: #FFDDE1;
+	--color-negative-850: #FFE5E9;
+	--color-negative-900: #FFF0F2;
+	--color-negative-950: #FFFAFB;
+
+	/* 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(129, 148, 177, 0.08);
+	--color-layer-2: rgba(129, 148, 177, 0.14);
+	--color-layer-3: rgba(129, 148, 177, 0.18);
+	--color-layer-4: rgba(129, 148, 177, 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-1: 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: var(--color-primary-700);
+	--color-brand-2: var(--color-primary-740);
+	--color-brand-3: var(--color-primary-800);
+
+	/* shading background  */
+	--color-bg-shading-1: var(--color-theme-200);
+	--color-bg-shading-2: var(--color-theme-175);
+	--color-bg-shading-3: var(--color-theme-150);
+	--color-bg-shading-4: var(--color-theme-125);
+	--color-bg-shading-5: var(--color-theme-100);
+	--color-bg-shading-6: var(--color-theme-50);
+
+	/* 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-450);
+	--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-600);
+
+	/* 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-550);
+	--color-text-negative-alt: var(--color-negative-650);
+
+	/* 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-450);
+	--color-line-primary-2: var(--color-primary-600);
+	--color-line-primary-3: var(--color-primary-740);
+
+	--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-450);
+	--color-line-warning-2: var(--color-warning-600);
+	--color-line-warning-3: var(--color-warning-700);
+
+	--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-550);
+	--color-line-negative-2: var(--color-negative-650);
+	--color-line-negative-3: var(--color-negative-720);
+
+	--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-300);
+	--scroll-thumb-color-hover: var(--color-theme-450);
+	--scroll-thumb-color-active: var(--color-theme-550);
+
+	/* Page */
+	--body-background-color: var(--color-layout-front-1);
+	--content-background-color: var(--color-layout-front-1);
+
+	--top-forms-option-color: var(--color-primary-550);
+	--top-forms-option-color-hover: var(--color-primary-650);
+}

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

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

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

@@ -0,0 +1,47 @@
+:root {
+	--color-layout-back: var(--color-theme-50);
+	--color-layout-header: var(--color-theme-175);
+	--color-layout-middle: var(--color-theme-125);
+
+	--color-layout-front-1: var(--color-theme-175);
+	--color-layout-front-2: var(--color-theme-200);
+	--color-layout-front-3: var(--color-theme-225);
+	--color-layout-front-4: var(--color-theme-250);
+	--color-layout-front-5: var(--color-theme-260);
+	--color-layout-front-6: var(--color-theme-275);
+
+	--color-layout-front-primary-1: #232F41;
+	--color-layout-front-primary-2: #232F41;
+	--color-layout-front-primary-3: #243149;
+	--color-layout-front-primary-4: #243450;
+	--color-layout-front-primary-5: #253758;
+	--color-layout-front-primary-6: #253960;
+
+	--color-layout-front-positive-1: #25333B;
+	--color-layout-front-positive-2: #25333B;
+	--color-layout-front-positive-3: #263A3D;
+	--color-layout-front-positive-4: #284140;
+	--color-layout-front-positive-5: #2A4842;
+	--color-layout-front-positive-6: #2B4F44;
+
+	--color-layout-front-warning-1: #2B3038;
+	--color-layout-front-warning-2: #2B3038;
+	--color-layout-front-warning-3: #343437;
+	--color-layout-front-warning-4: #3C3836;
+	--color-layout-front-warning-5: #453B35;
+	--color-layout-front-warning-6: #4D3F35;
+
+	--color-layout-front-negative-1: #2B2C3A;
+	--color-layout-front-negative-2: #2B2C3A;
+	--color-layout-front-negative-3: #342D3B;
+	--color-layout-front-negative-4: #3C2D3C;
+	--color-layout-front-negative-5: #452E3D;
+	--color-layout-front-negative-6: #4D2E3E;
+
+	--color-layout-front-info-1: #272C41;
+	--color-layout-front-info-2: #272C41;
+	--color-layout-front-info-3: #2B2C49;
+	--color-layout-front-info-4: #2F2C50;
+	--color-layout-front-info-5: #332B58;
+	--color-layout-front-info-6: #362B60;
+}

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

@@ -0,0 +1,67 @@
+:root {
+	/* summary top */
+	--color-summary-top-3: #5BA8DC;
+	--color-summary-top-10: #1AAD7B;
+	--color-summary-top-30: #4BD2B8;
+	--color-summary-top-50: #68CA63;
+	--color-summary-top-100: #9DAAAA;
+	--color-summary-top-10000: #CAA549;
+
+	/* top's Colors */
+	--color-table-top-1: #425C8F;
+	--color-table-top-2: #384E7A;
+	--color-table-top-3: #394660;
+	--color-table-top-4: #357550;
+	--color-table-top-5: #336F4E;
+	--color-table-top-6: #326B4D;
+	--color-table-top-7: #31684C;
+	--color-table-top-8: #30624A;
+	--color-table-top-9: #2F5D48;
+	--color-table-top-10: #2D5747;
+
+	/* dynamic Colors */
+	--color-table-move-up-10: #0E6A44;
+	--color-table-move-up-9: #116542;
+	--color-table-move-up-8: #145F40;
+	--color-table-move-up-7: #165A3E;
+	--color-table-move-up-6: #19543C;
+	--color-table-move-up-5: #1B4F3A;
+	--color-table-move-up-4: #1E4938;
+	--color-table-move-up-3: #204335;
+	--color-table-move-up-2: #233E33;
+	--color-table-move-up-1: #263832;
+
+	--color-table-move-0: #313135;
+
+	--color-table-move-down-1: #46303F;
+	--color-table-move-down-2: #4F3040;
+	--color-table-move-down-3: #583142;
+	--color-table-move-down-4: #633244;
+	--color-table-move-down-5: #6C3345;
+	--color-table-move-down-6: #723446;
+	--color-table-move-down-7: #793547;
+	--color-table-move-down-8: #823649;
+	--color-table-move-down-9: #8A364A;
+	--color-table-move-down-10: #93374C;
+
+	--color-table-down: #46303F;
+	--color-table-down-10: #4F3040;
+
+	--color-table-up: #365344;
+	--color-table-up-10: #2C5145;
+
+	--color-table-base: var(--color-layout-front-1);
+	--color-table-featured-snippet: #878742;
+	--color-table-empty: var(--color-layout-front-3);
+	--color-table-not_found: #FFF6C6;
+
+
+	/* snapshot gradiern */
+	--color-snapshot-panel-gradient-1: rgba(35, 44, 77, 0.5);
+	--color-snapshot-panel-gradient-2: rgba(35, 44, 77, 0.8);
+
+	/* top snippet color */
+	--color-snippet-title: #A2C2FA;
+	--color-snippet-title-visited: #BC8CF2;
+	--color-snippet-url: #007700;
+}