@weavix/cli 0.4.0 → 0.5.0

package/build/templates/_shared/src/themes/yandex-360/_light.scss

@@ -0,0 +1,291 @@
+@mixin ya-360-colors-private-light {
+    --g-color-private-white-50: rgba(255, 255, 255, 0.05);
+    --g-color-private-white-70: rgba(255, 255, 255, 0.07);
+    --g-color-private-white-100: rgba(255, 255, 255, 0.1);
+    --g-color-private-white-150: rgba(255, 255, 255, 0.15);
+    --g-color-private-white-200: rgba(255, 255, 255, 0.2);
+    --g-color-private-white-250: rgba(255, 255, 255, 0.25);
+    --g-color-private-white-300: rgba(255, 255, 255, 0.3);
+    --g-color-private-white-350: rgba(255, 255, 255, 0.35);
+    --g-color-private-white-400: rgba(255, 255, 255, 0.4);
+    --g-color-private-white-450: rgba(255, 255, 255, 0.45);
+    --g-color-private-white-500: rgba(255, 255, 255, 0.5);
+    --g-color-private-white-550: rgba(255, 255, 255, 0.55);
+    --g-color-private-white-600: rgba(255, 255, 255, 0.6);
+    --g-color-private-white-650: rgba(255, 255, 255, 0.65);
+    --g-color-private-white-700: rgba(255, 255, 255, 0.7);
+    --g-color-private-white-750: rgba(255, 255, 255, 0.75);
+    --g-color-private-white-800: rgba(255, 255, 255, 0.8);
+    --g-color-private-white-850: rgba(255, 255, 255, 0.85);
+    --g-color-private-white-900: rgba(255, 255, 255, 0.9);
+    --g-color-private-white-950: rgba(255, 255, 255, 0.95);
+
+    --g-color-private-white-1000-solid: rgb(255, 255, 255);
+
+    --g-color-private-black-50: rgba(0, 0, 0, 0.05);
+    --g-color-private-black-70: rgba(0, 0, 0, 0.07);
+    --g-color-private-black-100: rgba(0, 0, 0, 0.1);
+    --g-color-private-black-150: rgba(0, 0, 0, 0.15);
+    --g-color-private-black-200: rgba(0, 0, 0, 0.2);
+    --g-color-private-black-250: rgba(0, 0, 0, 0.25);
+    --g-color-private-black-300: rgba(0, 0, 0, 0.3);
+    --g-color-private-black-350: rgba(0, 0, 0, 0.35);
+    --g-color-private-black-400: rgba(0, 0, 0, 0.4);
+    --g-color-private-black-450: rgba(0, 0, 0, 0.45);
+    --g-color-private-black-500: rgba(0, 0, 0, 0.5);
+    --g-color-private-black-550: rgba(0, 0, 0, 0.55);
+    --g-color-private-black-600: rgba(0, 0, 0, 0.6);
+    --g-color-private-black-650: rgba(0, 0, 0, 0.65);
+    --g-color-private-black-700: rgba(0, 0, 0, 0.7);
+    --g-color-private-black-750: rgba(0, 0, 0, 0.75);
+    --g-color-private-black-800: rgba(0, 0, 0, 0.8);
+    --g-color-private-black-850: rgba(0, 0, 0, 0.85);
+    --g-color-private-black-900: rgba(0, 0, 0, 0.9);
+    --g-color-private-black-950: rgba(0, 0, 0, 0.95);
+
+    --g-color-private-black-20-solid: rgb(250, 250, 250);
+    --g-color-private-black-50-solid: rgb(242, 242, 242);
+    --g-color-private-black-100-solid: rgb(229, 229, 229);
+    --g-color-private-black-150-solid: rgb(217, 217, 217);
+    --g-color-private-black-200-solid: rgb(204, 204, 204);
+    --g-color-private-black-250-solid: rgb(191, 191, 191);
+    --g-color-private-black-300-solid: rgb(179, 179, 179);
+    --g-color-private-black-350-solid: rgb(166, 166, 166);
+    --g-color-private-black-400-solid: rgb(153, 153, 153);
+    --g-color-private-black-450-solid: rgb(140, 140, 140);
+    --g-color-private-black-500-solid: rgb(128, 128, 128);
+    --g-color-private-black-550-solid: rgb(115, 115, 115);
+    --g-color-private-black-600-solid: rgb(102, 102, 102);
+    --g-color-private-black-650-solid: rgb(89, 89, 89);
+    --g-color-private-black-700-solid: rgb(76, 76, 76);
+    --g-color-private-black-750-solid: rgb(64, 64, 64);
+    --g-color-private-black-800-solid: rgb(51, 51, 51);
+    --g-color-private-black-850-solid: rgb(38, 38, 38);
+    --g-color-private-black-900-solid: rgb(26, 26, 26);
+    --g-color-private-black-950-solid: rgb(13, 13, 13);
+    --g-color-private-black-1000-solid: rgb(0, 0, 0);
+
+    --g-color-private-blue-50: rgba(82, 130, 255, 0.1);
+    --g-color-private-blue-100: rgba(82, 130, 255, 0.15);
+    --g-color-private-blue-150: rgba(82, 130, 255, 0.2);
+    --g-color-private-blue-200: rgba(82, 130, 255, 0.3);
+    --g-color-private-blue-250: rgba(82, 130, 255, 0.4);
+    --g-color-private-blue-300: rgba(82, 130, 255, 0.5);
+    --g-color-private-blue-350: rgba(82, 130, 255, 0.6);
+    --g-color-private-blue-400: rgba(82, 130, 255, 0.7);
+    --g-color-private-blue-450: rgba(82, 130, 255, 0.8);
+    --g-color-private-blue-500: rgba(82, 130, 255, 0.9);
+
+    --g-color-private-blue-50-solid: rgb(238, 243, 255);
+    --g-color-private-blue-100-solid: rgb(229, 236, 255);
+    --g-color-private-blue-150-solid: rgb(220, 230, 255);
+    --g-color-private-blue-200-solid: rgb(203, 218, 255);
+    --g-color-private-blue-250-solid: rgb(186, 205, 255);
+    --g-color-private-blue-300-solid: rgb(168, 193, 255);
+    --g-color-private-blue-350-solid: rgb(151, 180, 255);
+    --g-color-private-blue-400-solid: rgb(134, 168, 255);
+    --g-color-private-blue-450-solid: rgb(116, 155, 255);
+    --g-color-private-blue-500-solid: rgb(99, 143, 255);
+    --g-color-private-blue-550-solid: rgb(82, 130, 255);
+    --g-color-private-blue-600-solid: rgb(78, 121, 235);
+    --g-color-private-blue-650-solid: rgb(74, 113, 214);
+    --g-color-private-blue-700-solid: rgb(71, 104, 194);
+    --g-color-private-blue-750-solid: rgb(67, 96, 173);
+    --g-color-private-blue-800-solid: rgb(63, 87, 153);
+    --g-color-private-blue-850-solid: rgb(60, 79, 133);
+    --g-color-private-blue-900-solid: rgb(56, 70, 112);
+    --g-color-private-blue-950-solid: rgb(52, 61, 92);
+    --g-color-private-blue-1000-solid: rgb(51, 57, 82);
+
+    --g-color-private-green-50: rgba(59, 201, 53, 0.1);
+    --g-color-private-green-100: rgba(59, 201, 53, 0.15);
+    --g-color-private-green-150: rgba(59, 201, 53, 0.2);
+    --g-color-private-green-200: rgba(59, 201, 53, 0.3);
+    --g-color-private-green-250: rgba(59, 201, 53, 0.4);
+    --g-color-private-green-300: rgba(59, 201, 53, 0.5);
+    --g-color-private-green-350: rgba(59, 201, 53, 0.6);
+    --g-color-private-green-400: rgba(59, 201, 53, 0.7);
+    --g-color-private-green-450: rgba(59, 201, 53, 0.8);
+    --g-color-private-green-500: rgba(59, 201, 53, 0.9);
+
+    --g-color-private-green-50-solid: rgb(235, 250, 235);
+    --g-color-private-green-100-solid: rgb(226, 247, 225);
+    --g-color-private-green-150-solid: rgb(216, 244, 215);
+    --g-color-private-green-200-solid: rgb(196, 239, 194);
+    --g-color-private-green-250-solid: rgb(177, 233, 174);
+    --g-color-private-green-300-solid: rgb(157, 228, 154);
+    --g-color-private-green-350-solid: rgb(137, 223, 134);
+    --g-color-private-green-400-solid: rgb(118, 217, 114);
+    --g-color-private-green-450-solid: rgb(98, 212, 93);
+    --g-color-private-green-500-solid: rgb(79, 206, 73);
+    --g-color-private-green-550-solid: rgb(59, 201, 53);
+    --g-color-private-green-600-solid: rgb(58, 185, 53);
+    --g-color-private-green-650-solid: rgb(56, 170, 53);
+    --g-color-private-green-700-solid: rgb(55, 154, 52);
+    --g-color-private-green-750-solid: rgb(53, 138, 52);
+    --g-color-private-green-800-solid: rgb(52, 123, 52);
+    --g-color-private-green-850-solid: rgb(51, 107, 52);
+    --g-color-private-green-900-solid: rgb(49, 91, 52);
+    --g-color-private-green-950-solid: rgb(48, 75, 51);
+    --g-color-private-green-1000-solid: rgb(47, 68, 51);
+
+    --g-color-private-yellow-50: rgba(255, 219, 77, 0.1);
+    --g-color-private-yellow-100: rgba(255, 219, 77, 0.15);
+    --g-color-private-yellow-150: rgba(255, 219, 77, 0.2);
+    --g-color-private-yellow-200: rgba(255, 219, 77, 0.3);
+    --g-color-private-yellow-250: rgba(255, 219, 77, 0.4);
+    --g-color-private-yellow-300: rgba(255, 219, 77, 0.5);
+    --g-color-private-yellow-350: rgba(255, 219, 77, 0.6);
+    --g-color-private-yellow-400: rgba(255, 219, 77, 0.7);
+    --g-color-private-yellow-450: rgba(255, 219, 77, 0.8);
+    --g-color-private-yellow-500: rgba(255, 219, 77, 0.9);
+
+    --g-color-private-yellow-50-solid: rgb(255, 251, 237);
+    --g-color-private-yellow-100-solid: rgb(255, 250, 228);
+    --g-color-private-yellow-150-solid: rgb(255, 248, 219);
+    --g-color-private-yellow-200-solid: rgb(255, 244, 202);
+    --g-color-private-yellow-250-solid: rgb(255, 241, 184);
+    --g-color-private-yellow-300-solid: rgb(255, 237, 166);
+    --g-color-private-yellow-350-solid: rgb(255, 233, 148);
+    --g-color-private-yellow-400-solid: rgb(255, 230, 130);
+    --g-color-private-yellow-450-solid: rgb(255, 226, 113);
+    --g-color-private-yellow-500-solid: rgb(255, 223, 95);
+    --g-color-private-yellow-550-solid: rgb(255, 219, 77);
+    --g-color-private-yellow-600-solid: rgb(234, 201, 74);
+    --g-color-private-yellow-650-solid: rgb(213, 184, 72);
+    --g-color-private-yellow-700-solid: rgb(192, 166, 69);
+    --g-color-private-yellow-750-solid: rgb(171, 149, 67);
+    --g-color-private-yellow-800-solid: rgb(150, 131, 64);
+    --g-color-private-yellow-850-solid: rgb(129, 114, 61);
+    --g-color-private-yellow-900-solid: rgb(108, 96, 59);
+    --g-color-private-yellow-950-solid: rgb(87, 79, 56);
+    --g-color-private-yellow-1000-solid: rgb(77, 70, 55);
+
+    --g-color-private-orange-50: rgba(255, 119, 0, 0.1);
+    --g-color-private-orange-100: rgba(255, 119, 0, 0.15);
+    --g-color-private-orange-150: rgba(255, 119, 0, 0.2);
+    --g-color-private-orange-200: rgba(255, 119, 0, 0.3);
+    --g-color-private-orange-250: rgba(255, 119, 0, 0.4);
+    --g-color-private-orange-300: rgba(255, 119, 0, 0.5);
+    --g-color-private-orange-350: rgba(255, 119, 0, 0.6);
+    --g-color-private-orange-400: rgba(255, 119, 0, 0.7);
+    --g-color-private-orange-450: rgba(255, 119, 0, 0.8);
+    --g-color-private-orange-500: rgba(255, 119, 0, 0.9);
+
+    --g-color-private-orange-50-solid: rgb(255, 241, 230);
+    --g-color-private-orange-100-solid: rgb(255, 235, 217);
+    --g-color-private-orange-150-solid: rgb(255, 228, 204);
+    --g-color-private-orange-200-solid: rgb(255, 214, 179);
+    --g-color-private-orange-250-solid: rgb(255, 201, 153);
+    --g-color-private-orange-300-solid: rgb(255, 187, 128);
+    --g-color-private-orange-350-solid: rgb(255, 173, 102);
+    --g-color-private-orange-400-solid: rgb(255, 160, 76);
+    --g-color-private-orange-450-solid: rgb(255, 146, 51);
+    --g-color-private-orange-500-solid: rgb(255, 133, 26);
+    --g-color-private-orange-550-solid: rgb(255, 119, 0);
+    --g-color-private-orange-600-solid: rgb(234, 112, 5);
+    --g-color-private-orange-650-solid: rgb(213, 104, 10);
+    --g-color-private-orange-700-solid: rgb(192, 96, 15);
+    --g-color-private-orange-750-solid: rgb(171, 89, 20);
+    --g-color-private-orange-800-solid: rgb(150, 81, 25);
+    --g-color-private-orange-850-solid: rgb(129, 74, 31);
+    --g-color-private-orange-900-solid: rgb(108, 67, 36);
+    --g-color-private-orange-950-solid: rgb(87, 59, 41);
+    --g-color-private-orange-1000-solid: rgb(77, 55, 43);
+
+    --g-color-private-red-50: rgba(255, 4, 0, 0.1);
+    --g-color-private-red-100: rgba(255, 4, 0, 0.15);
+    --g-color-private-red-150: rgba(255, 4, 0, 0.2);
+    --g-color-private-red-200: rgba(255, 4, 0, 0.3);
+    --g-color-private-red-250: rgba(255, 4, 0, 0.4);
+    --g-color-private-red-300: rgba(255, 4, 0, 0.5);
+    --g-color-private-red-350: rgba(255, 4, 0, 0.6);
+    --g-color-private-red-400: rgba(255, 4, 0, 0.7);
+    --g-color-private-red-450: rgba(255, 4, 0, 0.8);
+    --g-color-private-red-500: rgba(255, 4, 0, 0.9);
+
+    --g-color-private-red-50-solid: rgb(255, 230, 230);
+    --g-color-private-red-100-solid: rgb(255, 217, 217);
+    --g-color-private-red-150-solid: rgb(255, 205, 204);
+    --g-color-private-red-200-solid: rgb(255, 180, 179);
+    --g-color-private-red-250-solid: rgb(255, 155, 153);
+    --g-color-private-red-300-solid: rgb(255, 130, 128);
+    --g-color-private-red-350-solid: rgb(255, 105, 102);
+    --g-color-private-red-400-solid: rgb(255, 80, 76);
+    --g-color-private-red-450-solid: rgb(255, 55, 51);
+    --g-color-private-red-500-solid: rgb(255, 30, 26);
+    --g-color-private-red-550-solid: rgb(255, 4, 0);
+    --g-color-private-red-600-solid: rgb(234, 8, 5);
+    --g-color-private-red-650-solid: rgb(213, 12, 10);
+    --g-color-private-red-700-solid: rgb(192, 16, 15);
+    --g-color-private-red-750-solid: rgb(171, 20, 20);
+    --g-color-private-red-800-solid: rgb(150, 24, 25);
+    --g-color-private-red-850-solid: rgb(129, 28, 31);
+    --g-color-private-red-900-solid: rgb(108, 32, 36);
+    --g-color-private-red-950-solid: rgb(87, 36, 41);
+    --g-color-private-red-1000-solid: rgb(77, 38, 43);
+
+    --g-color-private-purple-50: rgba(143, 82, 204, 0.1);
+    --g-color-private-purple-100: rgba(143, 82, 204, 0.15);
+    --g-color-private-purple-150: rgba(143, 82, 204, 0.2);
+    --g-color-private-purple-200: rgba(143, 82, 204, 0.3);
+    --g-color-private-purple-250: rgba(143, 82, 204, 0.4);
+    --g-color-private-purple-300: rgba(143, 82, 204, 0.5);
+    --g-color-private-purple-350: rgba(143, 82, 204, 0.6);
+    --g-color-private-purple-400: rgba(143, 82, 204, 0.7);
+    --g-color-private-purple-450: rgba(143, 82, 204, 0.8);
+    --g-color-private-purple-500: rgba(143, 82, 204, 0.9);
+
+    --g-color-private-purple-50-solid: rgb(244, 238, 250);
+    --g-color-private-purple-100-solid: rgb(238, 229, 247);
+    --g-color-private-purple-150-solid: rgb(233, 220, 245);
+    --g-color-private-purple-200-solid: rgb(221, 203, 240);
+    --g-color-private-purple-250-solid: rgb(210, 186, 235);
+    --g-color-private-purple-300-solid: rgb(199, 169, 230);
+    --g-color-private-purple-350-solid: rgb(188, 151, 224);
+    --g-color-private-purple-400-solid: rgb(177, 134, 219);
+    --g-color-private-purple-450-solid: rgb(165, 117, 214);
+    --g-color-private-purple-500-solid: rgb(154, 99, 209);
+    --g-color-private-purple-550-solid: rgb(143, 82, 204);
+    --g-color-private-purple-600-solid: rgb(133, 78, 189);
+    --g-color-private-purple-650-solid: rgb(123, 74, 173);
+    --g-color-private-purple-700-solid: rgb(114, 71, 158);
+    --g-color-private-purple-750-solid: rgb(104, 67, 143);
+    --g-color-private-purple-800-solid: rgb(94, 63, 128);
+    --g-color-private-purple-850-solid: rgb(84, 59, 112);
+    --g-color-private-purple-900-solid: rgb(74, 55, 97);
+    --g-color-private-purple-950-solid: rgb(65, 52, 82);
+    --g-color-private-purple-1000-solid: rgb(60, 50, 74);
+
+    --g-color-private-cool-grey-50: rgba(107, 132, 153, 0.1);
+    --g-color-private-cool-grey-100: rgba(107, 132, 153, 0.15);
+    --g-color-private-cool-grey-150: rgba(107, 132, 153, 0.2);
+    --g-color-private-cool-grey-200: rgba(107, 132, 153, 0.3);
+    --g-color-private-cool-grey-250: rgba(107, 132, 153, 0.4);
+    --g-color-private-cool-grey-300: rgba(107, 132, 153, 0.5);
+    --g-color-private-cool-grey-350: rgba(107, 132, 153, 0.6);
+    --g-color-private-cool-grey-400: rgba(107, 132, 153, 0.7);
+    --g-color-private-cool-grey-450: rgba(107, 132, 153, 0.8);
+    --g-color-private-cool-grey-500: rgba(107, 132, 153, 0.9);
+
+    --g-color-private-cool-grey-50-solid: rgb(240, 243, 245);
+    --g-color-private-cool-grey-100-solid: rgb(233, 237, 240);
+    --g-color-private-cool-grey-150-solid: rgb(225, 230, 235);
+    --g-color-private-cool-grey-200-solid: rgb(211, 218, 224);
+    --g-color-private-cool-grey-250-solid: rgb(196, 206, 214);
+    --g-color-private-cool-grey-300-solid: rgb(181, 193, 204);
+    --g-color-private-cool-grey-350-solid: rgb(166, 181, 194);
+    --g-color-private-cool-grey-400-solid: rgb(151, 169, 184);
+    --g-color-private-cool-grey-450-solid: rgb(137, 157, 173);
+    --g-color-private-cool-grey-500-solid: rgb(122, 144, 163);
+    --g-color-private-cool-grey-550-solid: rgb(107, 132, 153);
+    --g-color-private-cool-grey-600-solid: rgb(101, 123, 143);
+    --g-color-private-cool-grey-650-solid: rgb(95, 114, 133);
+    --g-color-private-cool-grey-700-solid: rgb(88, 106, 122);
+    --g-color-private-cool-grey-750-solid: rgb(82, 97, 112);
+    --g-color-private-cool-grey-800-solid: rgb(76, 88, 102);
+    --g-color-private-cool-grey-850-solid: rgb(70, 79, 92);
+    --g-color-private-cool-grey-900-solid: rgb(64, 70, 82);
+    --g-color-private-cool-grey-950-solid: rgb(57, 62, 71);
+    --g-color-private-cool-grey-1000-solid: rgb(54, 57, 66);
+}

package/build/templates/_shared/src/themes/yandex-360.scss

@@ -0,0 +1,197 @@
+@use './yandex-360/light' as *;
+@use './yandex-360/light-hc' as *;
+@use './yandex-360/dark' as *;
+@use './yandex-360/dark-hc' as *;
+
+@mixin ya-360-colors-light {
+    @include ya-360-colors-private-light;
+
+    --g-color-base-background: rgb(255, 255, 255);
+    --g-color-base-brand: var(--g-color-private-blue-550-solid);
+    --g-color-base-brand-hover: var(--g-color-private-blue-600-solid);
+    --g-color-base-selection: var(--g-color-private-blue-100);
+    --g-color-base-selection-hover: var(--g-color-private-blue-200);
+    --g-color-line-brand: var(--g-color-private-blue-550-solid);
+    --g-color-text-brand: var(--g-color-private-blue-600-solid);
+    --g-color-text-brand-heavy: var(--g-color-private-blue-700-solid);
+    --g-color-text-brand-contrast: var(--g-color-text-light-primary);
+    --g-color-text-link: var(--g-color-private-blue-600-solid);
+    --g-color-text-link-hover: var(--g-color-private-blue-800-solid);
+
+    --gn-aside-header-decoration-collapsed-background-color: var(--g-color-private-blue-100);
+    --gn-aside-header-decoration-expanded-background-color: var(--g-color-private-blue-100);
+    --gn-aside-header-item-background-color-hover: var(--g-color-private-black-50);
+    --gn-aside-header-item-current-background-color: var(--g-color-private-blue-100);
+
+    --gil-color-object-base: var(--g-color-private-blue-550-solid);
+    --gil-color-object-accent-heavy: var(--g-color-private-blue-750-solid);
+    --gil-color-object-hightlight: var(--g-color-private-blue-350-solid);
+    --gil-color-shadow-over-object: var(--g-color-private-blue-700-solid);
+    --gil-color-background-lines: var(--g-color-private-black-450-solid);
+    --gil-color-background-shapes: var(--g-color-private-black-50-solid);
+    --gil-color-object-accent-light: var(--g-color-private-white-1000-solid);
+    --gil-color-object-danger: var(--g-color-private-red-550-solid);
+}
+
+@mixin ya-360-colors-light-hc {
+    @include ya-360-colors-private-light-hc;
+
+    --g-color-base-background: rgb(255, 255, 255);
+    --g-color-base-brand: var(--g-color-private-blue-600-solid);
+    --g-color-base-brand-hover: var(--g-color-private-blue-800-solid);
+    --g-color-base-selection: var(--g-color-private-blue-250);
+    --g-color-base-selection-hover: var(--g-color-private-blue-350);
+    --g-color-line-brand: var(--g-color-private-blue-600-solid);
+    --g-color-text-brand: var(--g-color-private-blue-650-solid);
+    --g-color-text-brand-heavy: var(--g-color-private-blue-900-solid);
+    --g-color-text-brand-contrast: var(--g-color-text-light-primary);
+    --g-color-text-link: var(--g-color-private-blue-650-solid);
+    --g-color-text-link-hover: var(--g-color-private-blue-850-solid);
+
+    --gn-aside-header-decoration-collapsed-background-color: var(--g-color-private-blue-250);
+    --gn-aside-header-decoration-expanded-background-color: var(--g-color-private-blue-250);
+    --gn-aside-header-item-current-background-color: var(--g-color-private-blue-250);
+    --gn-aside-header-item-background-color-hover: var(--g-color-private-black-150);
+
+    --gil-color-object-base: var(--g-color-private-blue-550-solid);
+    --gil-color-object-accent-heavy: var(--g-color-private-blue-750-solid);
+    --gil-color-object-hightlight: var(--g-color-private-blue-350-solid);
+    --gil-color-shadow-over-object: var(--g-color-private-blue-700-solid);
+    --gil-color-background-lines: var(--g-color-private-black-450-solid);
+    --gil-color-background-shapes: var(--g-color-private-black-50-solid);
+    --gil-color-object-accent-light: var(--g-color-private-white-1000-solid);
+    --gil-color-object-danger: var(--g-color-private-red-550-solid);
+}
+
+@mixin ya-360-colors-dark {
+    @include ya-360-colors-private-dark;
+
+    --g-color-base-background: rgb(45, 44, 51);
+    --g-color-base-brand: var(--g-color-private-blue-450-solid);
+    --g-color-base-brand-hover: var(--g-color-private-blue-600-solid);
+    --g-color-base-selection: var(--g-color-private-blue-150);
+    --g-color-base-selection-hover: var(--g-color-private-blue-200);
+    --g-color-line-brand: var(--g-color-private-blue-550-solid);
+    --g-color-text-brand: var(--g-color-private-blue-550-solid);
+    --g-color-text-brand-heavy: var(--g-color-private-blue-600-solid);
+    --g-color-text-brand-contrast: var(--g-color-text-light-primary);
+    --g-color-text-link: var(--g-color-private-blue-550-solid);
+    --g-color-text-link-hover: var(--g-color-private-blue-700-solid);
+
+    --gn-aside-header-decoration-collapsed-background-color: var(--g-color-private-blue-150);
+    --gn-aside-header-decoration-expanded-background-color: var(--g-color-private-blue-150);
+    --gn-aside-header-item-current-background-color: var(--g-color-private-blue-150);
+    --gn-aside-header-item-background-color-hover: var(--g-color-private-white-100);
+
+    --gil-color-object-base: var(--g-color-private-blue-550-solid);
+    --gil-color-object-accent-heavy: var(--g-color-private-blue-350-solid);
+    --gil-color-object-hightlight: var(--g-color-private-blue-650-solid);
+    --gil-color-shadow-over-object: var(--g-color-private-blue-300-solid);
+    --gil-color-background-lines: var(--g-color-private-white-550-solid);
+    --gil-color-background-shapes: var(--g-color-private-white-200-solid);
+    --gil-color-object-accent-light: var(--g-color-private-white-1000-solid);
+    --gil-color-object-danger: var(--g-color-private-red-550-solid);
+}
+
+@mixin ya-360-colors-dark-hc {
+    @include ya-360-colors-private-dark-hc;
+
+    --g-color-base-background: rgb(34, 35, 38);
+    --g-color-base-brand: var(--g-color-private-blue-450-solid);
+    --g-color-base-brand-hover: var(--g-color-private-blue-650-solid);
+    --g-color-base-selection: var(--g-color-private-blue-250);
+    --g-color-base-selection-hover: var(--g-color-private-blue-400);
+    --g-color-line-brand: var(--g-color-private-blue-550-solid);
+    --g-color-text-brand: var(--g-color-private-blue-650-solid);
+    --g-color-text-brand-heavy: var(--g-color-private-blue-850-solid);
+    --g-color-text-brand-contrast: var(--g-color-text-light-primary);
+    --g-color-text-link: var(--g-color-private-blue-650-solid);
+    --g-color-text-link-hover: var(--g-color-private-blue-800-solid);
+
+    --gn-aside-header-decoration-collapsed-background-color: var(--g-color-private-blue-250);
+    --gn-aside-header-decoration-expanded-background-color: var(--g-color-private-blue-250);
+    --gn-aside-header-item-current-background-color: var(--g-color-private-blue-250);
+    --gn-aside-header-item-background-color-hover: var(--g-color-private-white-250);
+
+    --gil-color-object-base: var(--g-color-private-blue-550-solid);
+    --gil-color-object-accent-heavy: var(--g-color-private-blue-750-solid);
+    --gil-color-object-hightlight: var(--g-color-private-blue-350-solid);
+    --gil-color-shadow-over-object: var(--g-color-private-blue-300-solid);
+    --gil-color-background-lines: var(--g-color-private-white-550-solid);
+    --gil-color-background-shapes: var(--g-color-private-white-200-solid);
+    --gil-color-object-accent-light: var(--g-color-private-white-1000-solid);
+    --gil-color-object-danger: var(--g-color-private-red-550-solid);
+}
+
+.g-root {
+    --g-font-family-sans: 'YS Text', 'Helvetica Neue', 'Arial', 'Helvetica', sans-serif;
+    --g-font-family-monospace:
+        'Menlo', 'Monaco', 'Consolas', 'Liberation Mono', 'Ubuntu Mono', 'DejaVu Sans Mono',
+        'Courier New', 'Courier', monospace;
+
+    --g-text-header-font-family:
+        'YS Display Wide', 'Helvetica Neue', 'Arial', 'Helvetica', sans-serif;
+    --g-text-subheader-font-family:
+        'YS Display Wide', 'Helvetica Neue', 'Arial', 'Helvetica', sans-serif;
+
+    --g-text-header-font-weight: 500;
+    --g-text-subheader-font-weight: 500;
+    --g-text-display-font-weight: 500;
+    --g-text-accent-font-weight: 500;
+
+    --g-text-body-1-font-size: 14px;
+    --g-text-body-1-line-height: 18px;
+
+    --g-text-body-2-font-size: 14px;
+    --g-text-body-2-line-height: 20px;
+
+    --g-text-body-3-font-size: 16px;
+    --g-text-body-3-line-height: 24px;
+
+    --g-text-body-short-font-size: 14px;
+    --g-text-body-short-line-height: 18px;
+
+    --g-text-caption-1-font-size: 11px;
+    --g-text-caption-1-line-height: 12px;
+
+    --g-text-caption-2-font-size: 12px;
+    --g-text-caption-2-line-height: 16px;
+
+    --g-text-subheader-1-font-size: 14px;
+    --g-text-subheader-1-line-height: 18px;
+
+    --g-text-subheader-2-font-size: 16px;
+    --g-text-subheader-2-line-height: 20px;
+
+    --g-text-subheader-3-font-size: 16px;
+    --g-text-subheader-3-line-height: 24px;
+
+    --g-text-subheader-3-font: 700 var(--g-text-subheader-3-font-size) /
+        var(--g-text-subheader-3-font-size) var(--g-text-subheader-font-family);
+
+    --g-border-radius-xs: 1000px;
+    --g-border-radius-s: 8px;
+    --g-border-radius-m: 10px;
+    --g-border-radius-l: 12px;
+    --g-border-radius-xl: 16px;
+    --g-border-radius-2xl: 24px;
+
+    --gn-aside-header-background-color: var(--g-color-base-background);
+    --gn-aside-header-item-icon-color: var(--g-color-text-misc);
+
+    &_theme_light {
+        @include ya-360-colors-light;
+    }
+
+    &_theme_light-hc {
+        @include ya-360-colors-light-hc;
+    }
+
+    &_theme_dark {
+        @include ya-360-colors-dark;
+    }
+
+    &_theme_dark-hc {
+        @include ya-360-colors-dark-hc;
+    }
+}

package/build/templates/_shared/src/themes/ys-text.scss

@@ -0,0 +1,79 @@
+@font-face {
+    font-family: 'YS Text';
+    src:
+        url('https://yastatic.net/s3/home/fonts/ys/4/text-light.woff2') format('woff2'),
+        url('https://yastatic.net/s3/home/fonts/ys/4/text-light.woff') format('woff');
+    font-weight: 300;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'YS Text';
+    src:
+        url('https://yastatic.net/s3/home/fonts/ys/4/text-light-italic.woff2') format('woff2'),
+        url('https://yastatic.net/s3/home/fonts/ys/4/text-light-italic.woff') format('woff');
+    font-weight: 300;
+    font-style: italic;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'YS Text';
+    src:
+        url('https://yastatic.net/s3/home/fonts/ys/4/text-regular.woff2') format('woff2'),
+        url('https://yastatic.net/s3/home/fonts/ys/4/text-regular.woff') format('woff');
+    font-weight: 400;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'YS Text';
+    src:
+        url('https://yastatic.net/s3/home/fonts/ys/4/text-regular-italic.woff2') format('woff2'),
+        url('https://yastatic.net/s3/home/fonts/ys/4/text-regular-italic.woff') format('woff');
+    font-weight: 400;
+    font-style: italic;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'YS Text';
+    src:
+        url('https://yastatic.net/s3/home/fonts/ys/4/text-medium.woff2') format('woff2'),
+        url('https://yastatic.net/s3/home/fonts/ys/4/text-medium.woff') format('woff');
+    font-weight: 500;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'YS Text';
+    src:
+        url('https://yastatic.net/s3/home/fonts/ys/4/text-medium-italic.woff2') format('woff2'),
+        url('https://yastatic.net/s3/home/fonts/ys/4/text-medium-italic.woff') format('woff');
+    font-weight: 500;
+    font-style: italic;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'YS Text';
+    src:
+        url('https://yastatic.net/s3/home/fonts/ys/4/text-bold.woff2') format('woff2'),
+        url('https://yastatic.net/s3/home/fonts/ys/4/text-bold.woff') format('woff');
+    font-weight: 700;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'YS Text';
+    src:
+        url('https://yastatic.net/s3/home/fonts/ys/4/text-bold-italic.woff2') format('woff2'),
+        url('https://yastatic.net/s3/home/fonts/ys/4/text-bold-italic.woff') format('woff');
+    font-weight: 700;
+    font-style: italic;
+    font-display: swap;
+}

package/build/templates/_shared/vite.config.ts

@@ -14,6 +14,8 @@ export default defineConfig(() => {
     return {
         base: './',
         server: {
+            port: 5173,
+            strictPort: true,
             cors: true,
             headers: {
                 'Access-Control-Allow-Origin': '*',

package/build/templates/attachment.viewer.action/index.html

@@ -4,7 +4,7 @@
         <meta charset="utf-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1" />
         <meta name="description" content="Web site created using vite" />
-        <title>Default Plugin</title>
+        <title>Attachment Viewer Action Plugin</title>
     </head>
     <body class="g-root g-root_theme_dark">
         <noscript>You need to enable JavaScript to run this app.</noscript>

package/build/templates/attachment.viewer.action/src/App.tsx

@@ -1,8 +1,7 @@
 import { useCallback } from 'react';
 
-import { Card, DefinitionList, ThemeProvider, Text as Typography } from '@gravity-ui/uikit';
+import { Button, Card, DefinitionList, ThemeProvider, Text as Typography } from '@gravity-ui/uikit';
 import {
-    getField,
     hostApi,
     trackerApi,
     useTrackerPluginContext,
@@ -26,30 +25,25 @@ const App = () => {
         return null;
     }
 
-    const attachmentBlob = getField<string>(slotContext, 'attachmentBlob');
-
-    const id = getField<string>(slotContext, 'meta.id', 'Без идентификатора');
-    const mimetype = getField<string>(slotContext, 'meta.mimetype', 'Без типа');
-    const url = getField<string>(slotContext, 'meta.url', 'Без ссылки');
-    const name = getField<string>(slotContext, 'meta.name', 'Без названия');
-    const size = getField<number>(slotContext, 'meta.size', 0);
-    const date = getField<string>(slotContext, 'meta.date', 'Без даты');
-
     return (
         <ThemeProvider theme={theme}>
-            <div style={{ width: '800px', padding: '50px' }}>
+            <div>
                 <Card style={{ padding: '20px' }}>
                     <Typography variant="header-1" as="div" style={{ marginBottom: '16px' }}>
-                        Текущий контекст в проде
+                        Базовый контекст (contextLevel: basic)
                     </Typography>
                     <DefinitionList>
-                        <DefinitionList.Item name="Идентификатор">{id}</DefinitionList.Item>
-                        <DefinitionList.Item name="Название">{name}</DefinitionList.Item>
-                        <DefinitionList.Item name="Тип">{mimetype}</DefinitionList.Item>
-                        <DefinitionList.Item name="Адрес">{url}</DefinitionList.Item>
-                        <DefinitionList.Item name="Размер">{size}</DefinitionList.Item>
-                        <DefinitionList.Item name="Дата">{date}</DefinitionList.Item>
+                        <DefinitionList.Item name="ID вложения">
+                            {slotContext.id}
+                        </DefinitionList.Item>
                     </DefinitionList>
+                    <Button
+                        view="action"
+                        style={{ marginTop: '16px' }}
+                        onClick={() => save(new Blob(['Hello from plugin']), 'hello.txt')}
+                    >
+                        Добавить пример файла
+                    </Button>
                 </Card>
             </div>
         </ThemeProvider>

package/build/templates/board.tab/index.html

@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <meta name="description" content="Web site created using vite" />
+        <title>Board Tab Plugin</title>
+    </head>
+    <body class="g-root g-root_theme_dark">
+        <noscript>You need to enable JavaScript to run this app.</noscript>
+        <div id="root"></div>
+        <script type="module" src="/src/main.tsx"></script>
+    </body>
+</html>