devextreme-cli 1.7.1 → 1.8.0-beta.0

package/src/templates/vue-v3/application/src/variables.scss

@@ -0,0 +1,37 @@
+:root {
+  body {
+    @import "./themes/generated/variables.base.scss";
+
+    --base-text-color:  #{$base-text-color};
+    --base-bg: #{$base-bg};
+    --base-bg-darken-5: #{darken($base-bg, 5)};
+    --base-accent:  #{$base-accent};
+    --base-text-color-alpha-7:  #{rgba($base-text-color, alpha($base-text-color) * 0.7)};
+    --footer-border-color: rgba(224, 224, 224, 1);
+
+    --plus-icon-color: #242424;
+    --devextreme-logo-color: #596C7D;
+    --vue-logo-text-color: #35495E;
+
+    --shadow-color-first: rgba(0, 0, 0, 0.06);
+    --shadow-color-second: rgba(0, 0, 0, 0.12);
+  }
+
+  .dx-swatch-dark, .dx-swatch-additional-dark {
+    @import "./themes/generated/variables.base.dark.scss";
+
+    --base-text-color:  #{$base-text-color};
+    --base-bg: #{$base-bg};
+    --base-bg-darken-5: #{darken($base-bg, 5)};
+    --base-accent:  #{$base-accent};
+    --base-text-color-alpha-7:  #{rgba($base-text-color, alpha($base-text-color) * 0.7)};
+
+    --plus-icon-color: #fff;
+    --devextreme-logo-color: #fff;
+    --vue-logo-text-color: #fff;
+
+    --shadow-color-first: rgba(0, 0, 0, 0.12);
+    --shadow-color-second: rgba(0, 0, 0, 0.24);
+    --footer-border-color: rgba(97, 97, 97, 1);
+  }
+}

package/src/templates/vue-v3/application/src/views/create-account-form.vue

@@ -96,7 +96,7 @@ export default {
   },
   setup() {
     const router = useRouter();
-    
+
     const loading = ref(false);
     const formData = reactive({
       email:"",
@@ -120,7 +120,7 @@ export default {
     function confirmPassword(e) {
       return e.value === formData.password;
     }
-    
+
     return {
         formData,
         loading,
@@ -132,22 +132,20 @@ export default {
 </script>
 
 <style lang="scss">
-@import "../themes/generated/variables.base.scss";
-
 .create-account-form {
   .policy-info {
     margin: 10px 0;
-    color: rgba($base-text-color, alpha($base-text-color) * 0.7);
+    color: var(--base-text-color-alpha-7);
     font-size: 14px;
     font-style: normal;
 
     a {
-      color: rgba($base-text-color, alpha($base-text-color) * 0.7);
+      color: var(--base-text-color-alpha-7);
     }
   }
 
   .login-link {
-    color: $base-accent;
+    color: var(--base-accent);
     font-size: 16px;
     text-align: center;
   }

package/src/templates/vue-v3/application/src/views/login-form.vue

@@ -125,8 +125,6 @@ export default {
 </script>
 
 <style lang="scss">
-@import "../themes/generated/variables.base.scss";
-
 .login-form {
   .link {
     text-align: center;
@@ -140,7 +138,7 @@ export default {
 
   .form-text {
     margin: 10px 0;
-    color: rgba($base-text-color, alpha($base-text-color) * 0.7);
+    color: var(--base-text-color-alpha-7);
   }
 }
 </style>

package/src/templates/vue-v3/application/src/views/reset-password-form.vue

@@ -91,7 +91,7 @@ export default {
       }
     }
 
-    return { 
+    return {
       loading,
       formData,
       onSubmit
@@ -101,15 +101,13 @@ export default {
 </script>
 
 <style lang="scss">
-@import "../themes/generated/variables.base.scss";
-
 .reset-password-form {
   .submit-button {
     margin-top: 10px;
   }
 
   .login-link {
-    color: $base-accent;
+    color: var(--base-accent);
     font-size: 16px;
     text-align: center;
   }

package/src/templates/vue-v3/page/page.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <h2 class="content-block"><%=title%></h2>
+    <h2><%=title%></h2>
     <div class="content-block">
       <div class="dx-card responsive-paddings">
         Put your content here

package/src/templates/vue-v3/sample-pages/home-page.vue

@@ -1,30 +1,61 @@
 <template>
   <div>
-    <h2 class="content-block">Home</h2>
+    <h2>Home</h2>
     <div class="content-block">
       <div class="dx-card responsive-paddings">
         <div class="logos-container">
-          <svg
-            class="devextreme-logo"
-            viewBox="0 0 200 34"
-            fill="none"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M21.269 16.6304C21.269 21.9331 20.1851 25.9907 18.0171 28.8032C15.8638 31.6011 12.7583 33 8.70068 33H0.834473V0.875977H9.42578C13.1611 0.875977 16.0688 2.26025 18.1489 5.02881C20.229 7.78271 21.269 11.6499 21.269 16.6304ZM15.1387 16.8062C15.1387 9.62842 13.1611 6.03955 9.20605 6.03955H6.81104V27.7705H8.74463C10.9272 27.7705 12.5386 26.8623 13.5786 25.0459C14.6187 23.2148 15.1387 20.4683 15.1387 16.8062ZM33.7504 33.4395C30.6889 33.4395 28.2719 32.3555 26.4994 30.1875C24.7416 28.0049 23.8627 24.9214 23.8627 20.937C23.8627 16.894 24.661 13.7373 26.2577 11.4668C27.8544 9.19629 30.081 8.06104 32.9374 8.06104C35.6034 8.06104 37.7055 9.03516 39.2436 10.9834C40.7816 12.917 41.5507 15.6343 41.5507 19.1353V22.2554H29.7953C29.8393 24.438 30.286 26.064 31.1356 27.1333C31.9853 28.188 33.1571 28.7153 34.6513 28.7153C36.5556 28.7153 38.5038 28.1221 40.496 26.9355V31.7476C38.621 32.8755 36.3725 33.4395 33.7504 33.4395ZM32.8935 12.5654C32.0585 12.5654 31.37 13.0122 30.828 13.9058C30.286 14.7847 29.9711 16.1543 29.8832 18.0146H35.8158C35.7865 16.2275 35.5155 14.8726 35.0028 13.9497C34.4901 13.0269 33.787 12.5654 32.8935 12.5654ZM48.429 33L42.035 8.52246H48.0994L51.2195 22.6948C51.3514 23.354 51.5052 24.3208 51.681 25.5952C51.8714 26.855 51.9886 27.7632 52.0325 28.3198H52.1204C52.1351 27.8804 52.1937 27.2505 52.2962 26.4302C52.4134 25.6099 52.5306 24.8555 52.6478 24.167C52.7649 23.4785 53.8929 18.2637 56.0315 8.52246H62.096L55.68 33H48.429ZM78.5324 33H64.0524V0.875977H78.5324V6.03955H70.029V13.686H77.9172V18.8716H70.029V27.7705H78.5324V33ZM86.1798 20.4976L80.0714 8.52246H86.1358L89.3878 15.9932L92.398 8.52246H98.4186L92.2662 20.4976L98.6822 33H92.5738L89.1021 25.1777L85.8722 33H79.7857L86.1798 20.4976ZM109.12 28.4956C109.94 28.4956 110.827 28.2905 111.779 27.8804V32.4507C110.827 33.1099 109.398 33.4395 107.494 33.4395C105.37 33.4395 103.795 32.8096 102.77 31.5498C101.745 30.2754 101.232 28.3711 101.232 25.8369V13.1587H98.8589V10.5439L101.913 8.43457L103.407 3.24902H107.143V8.52246H111.581V13.1587H107.143V26.0347C107.143 27.6753 107.802 28.4956 109.12 28.4956ZM124.744 8.06104C125.461 8.06104 126.164 8.1709 126.853 8.39062L126.172 14.0596C125.762 13.9131 125.227 13.8398 124.568 13.8398C123.147 13.8398 122.056 14.4038 121.294 15.5317C120.532 16.645 120.151 18.271 120.151 20.4097V33H114.307V8.52246H119.119L119.778 12.3457H119.975C120.62 10.8076 121.323 9.70898 122.085 9.0498C122.847 8.39062 123.733 8.06104 124.744 8.06104ZM137.598 33.4395C134.537 33.4395 132.12 32.3555 130.347 30.1875C128.59 28.0049 127.711 24.9214 127.711 20.937C127.711 16.894 128.509 13.7373 130.106 11.4668C131.702 9.19629 133.929 8.06104 136.785 8.06104C139.451 8.06104 141.554 9.03516 143.092 10.9834C144.63 12.917 145.399 15.6343 145.399 19.1353V22.2554H133.643C133.687 24.438 134.134 26.064 134.984 27.1333C135.833 28.188 137.005 28.7153 138.499 28.7153C140.404 28.7153 142.352 28.1221 144.344 26.9355V31.7476C142.469 32.8755 140.221 33.4395 137.598 33.4395ZM136.742 12.5654C135.907 12.5654 135.218 13.0122 134.676 13.9058C134.134 14.7847 133.819 16.1543 133.731 18.0146H139.664C139.635 16.2275 139.364 14.8726 138.851 13.9497C138.338 13.0269 137.635 12.5654 136.742 12.5654ZM172.668 33V18.4102C172.668 14.8213 171.781 13.0269 170.009 13.0269C168.72 13.0269 167.797 13.6714 167.24 14.9604C166.684 16.2349 166.405 18.2856 166.405 21.1128V33H160.517V18.4102C160.517 14.8213 159.616 13.0269 157.814 13.0269C156.554 13.0269 155.639 13.6641 155.068 14.9385C154.496 16.2129 154.211 18.3149 154.211 21.2446V33H148.366V8.52246H153.002L153.705 11.6646H154.079C154.665 10.4194 155.463 9.51123 156.474 8.93994C157.499 8.354 158.591 8.06104 159.748 8.06104C162.736 8.06104 164.728 9.47461 165.724 12.3018H165.944C167.189 9.47461 169.189 8.06104 171.943 8.06104C174.111 8.06104 175.751 8.82275 176.864 10.3462C177.992 11.8696 178.556 14.0962 178.556 17.0259V33H172.668ZM191.433 33.4395C188.372 33.4395 185.955 32.3555 184.182 30.1875C182.424 28.0049 181.546 24.9214 181.546 20.937C181.546 16.894 182.344 13.7373 183.941 11.4668C185.537 9.19629 187.764 8.06104 190.62 8.06104C193.286 8.06104 195.388 9.03516 196.926 10.9834C198.464 12.917 199.233 15.6343 199.233 19.1353V22.2554H187.478C187.522 24.438 187.969 26.064 188.818 27.1333C189.668 28.188 190.84 28.7153 192.334 28.7153C194.238 28.7153 196.187 28.1221 198.179 26.9355V31.7476C196.304 32.8755 194.055 33.4395 191.433 33.4395ZM190.576 12.5654C189.741 12.5654 189.053 13.0122 188.511 13.9058C187.969 14.7847 187.654 16.1543 187.566 18.0146H193.499C193.469 16.2275 193.198 14.8726 192.686 13.9497C192.173 13.0269 191.47 12.5654 190.576 12.5654Z"
-              fill="#F05B41"
-            ></path>
+          <svg class="devextreme-logo" width="255" height="60" viewBox="0 0 255 60" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <g clip-path="url(#clip0_93_1163)">
+              <mask id="mask0_93_1163" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="60" height="60">
+                <path d="M60 0H0V60H60V0Z" fill="white"/>
+              </mask>
+              <g mask="url(#mask0_93_1163)">
+                <path fill-rule="evenodd" clip-rule="evenodd" d="M4.68 60.0006H55.305C57.9 60.0006 59.985 57.9012 59.985 55.3218V15.7017C30.93 20.7705 13.38 36.4564 4.155 48.0036C2.535 49.8481 1.38 51.6927 0.69 53.0724C0.465 53.5222 0.015 54.6619 0 55.3518C0.03 57.9162 2.115 59.9856 4.68 59.9856V60.0006Z" fill="#596C7D"/>
+                <path fill-rule="evenodd" clip-rule="evenodd" d="M4.68 0C2.1 0 0 2.09947 0 4.67883V35.2861C10.62 24.219 29.4 12.9418 57.69 8.98275C58.74 8.8328 59.49 8.72783 60 8.63784V4.67883C60 2.08448 57.9 0 55.32 0H4.68Z" fill="#2190F7"/>
+                <path d="M49.2449 40.235C50.3699 41.1947 51.3299 42.2894 52.0799 43.4891L52.0949 43.4591C52.6649 44.5089 52.9349 45.6636 52.8899 46.8183C52.9499 48.4229 52.3349 50.0126 51.1649 51.2571C50.5949 51.8271 49.9199 52.262 49.1549 52.5618C48.4349 52.8318 47.6549 52.9818 46.8899 52.9818H46.6199C45.2849 52.9818 43.9649 52.5768 42.8999 51.8421L42.7349 51.7372V47.898L43.3349 48.3329C44.1899 48.9777 45.2399 49.3377 46.3649 49.4127C46.7099 49.4127 47.0699 49.3677 47.3849 49.2477C47.6999 49.1277 47.9849 48.9477 48.2099 48.7229C48.6899 48.198 48.9299 47.5232 48.8849 46.8333C48.8999 46.1285 48.7199 45.4386 48.3449 44.8388C48.1199 44.4939 47.8499 44.1639 47.5649 43.8491C47.2049 43.4591 46.7549 43.0242 46.2299 42.5594C45.2699 41.7045 44.6099 41.0897 44.1149 40.5798C43.6499 40.13 39.4199 35.6012 43.6199 31.4022C44.1749 30.8474 44.8649 30.4274 45.6149 30.1425C46.3649 29.8575 47.2049 29.7375 47.9999 29.7675H48.0449C49.2449 29.7675 50.4599 30.0375 51.5399 30.5324L51.7499 30.6374V34.5063L51.1649 34.0865C50.4149 33.5616 49.5149 33.2468 48.5549 33.2018C48.1949 33.2018 47.8499 33.2616 47.5199 33.3816C47.1899 33.5016 46.9049 33.6966 46.6799 33.9215C46.1699 34.4165 45.0599 36.186 47.4449 38.5704C47.8799 39.0053 48.4649 39.5451 49.2449 40.235Z" fill="white"/>
+                <path d="M34.035 30.0981H38.115V47.2688C38.115 51.3927 36.045 52.3226 35.265 52.6374C34.635 52.8924 33.945 53.0273 33.24 53.0273C33.165 53.0273 33.0937 53.0235 33.0225 53.0198C32.9512 53.016 32.88 53.0123 32.805 53.0123H32.64C31.68 53.0123 30.72 52.8024 29.85 52.4124L29.625 52.3076V48.4535L30.195 48.7983C30.795 49.1733 31.5 49.3983 32.235 49.4732C33.885 49.4732 34.035 47.9286 34.035 47.1038V30.0981Z" fill="white"/>
+              </g>
+            </g>
+            <path d="M89.71 19.6538C89.71 24.2495 88.7705 27.7661 86.8916 30.2036C85.0254 32.6284 82.334 33.8408 78.8174 33.8408H72V6H79.4458C82.6831 6 85.2031 7.19971 87.0059 9.59912C88.8086 11.9858 89.71 15.3374 89.71 19.6538ZM84.397 19.8062C84.397 13.5854 82.6831 10.4751 79.2554 10.4751H77.1797V29.3086H78.8555C80.7471 29.3086 82.1436 28.5215 83.0449 26.9473C83.9463 25.3604 84.397 22.98 84.397 19.8062Z" fill="#596C7D"/>
+            <path d="M101.307 34.2217C98.6538 34.2217 96.5591 33.2822 95.0229 31.4033C93.4995 29.5117 92.7378 26.8394 92.7378 23.3862C92.7378 19.8823 93.4297 17.1465 94.8135 15.1787C96.1973 13.2109 98.127 12.2271 100.603 12.2271C102.913 12.2271 104.735 13.0713 106.068 14.7598C107.401 16.4355 108.067 18.7905 108.067 21.8247V24.5288H97.8794C97.9175 26.4204 98.3047 27.8296 99.041 28.7563C99.7773 29.6704 100.793 30.1274 102.088 30.1274C103.738 30.1274 105.427 29.6133 107.153 28.585V32.7554C105.528 33.7329 103.58 34.2217 101.307 34.2217ZM100.564 16.1309C99.8408 16.1309 99.2441 16.5181 98.7744 17.2925C98.3047 18.0542 98.0317 19.2412 97.9556 20.8535H103.097C103.072 19.3047 102.837 18.1304 102.393 17.3306C101.948 16.5308 101.339 16.1309 100.564 16.1309Z" fill="#596C7D"/>
+            <path d="M114.809 33.8408L109.267 12.627H114.523L117.227 24.9097C117.341 25.481 117.475 26.3188 117.627 27.4233C117.792 28.5151 117.894 29.3022 117.932 29.7847H118.008C118.021 29.4038 118.071 28.8579 118.16 28.147C118.262 27.436 118.363 26.7822 118.465 26.1855C118.566 25.5889 119.544 21.0693 121.397 12.627H126.653L121.093 33.8408H114.809Z" fill="#596C7D"/>
+            <path d="M141.678 33.8408H129.129V6H141.678V10.4751H134.309V17.1021H141.145V21.5962H134.309V29.3086H141.678V33.8408Z" fill="#596C7D"/>
+            <path d="M149.086 23.0054L143.792 12.627H149.048L151.866 19.1016L154.475 12.627H159.693L154.361 23.0054L159.921 33.8408H154.627L151.619 27.0615L148.819 33.8408H143.544L149.086 23.0054Z" fill="#596C7D"/>
+            <path d="M169.748 29.937C170.458 29.937 171.227 29.7593 172.052 29.4038V33.3647C171.227 33.936 169.989 34.2217 168.338 34.2217C166.498 34.2217 165.133 33.6758 164.244 32.584C163.355 31.4795 162.911 29.8291 162.911 27.6328V16.645H160.854V14.3789L163.501 12.5508L164.796 8.05664H168.034V12.627H171.88V16.645H168.034V27.8042C168.034 29.2261 168.605 29.937 169.748 29.937Z" fill="#596C7D"/>
+            <path d="M184.068 12.2271C184.69 12.2271 185.299 12.3223 185.896 12.5127L185.306 17.4258C184.95 17.2988 184.487 17.2354 183.916 17.2354C182.684 17.2354 181.738 17.7241 181.078 18.7017C180.418 19.6665 180.088 21.0757 180.088 22.9292V33.8408H175.022V12.627H179.193L179.764 15.9404H179.936C180.494 14.6074 181.104 13.6553 181.764 13.084C182.424 12.5127 183.192 12.2271 184.068 12.2271Z" fill="#596C7D"/>
+            <path d="M195.989 34.2217C193.335 34.2217 191.241 33.2822 189.705 31.4033C188.181 29.5117 187.419 26.8394 187.419 23.3862C187.419 19.8823 188.111 17.1465 189.495 15.1787C190.879 13.2109 192.809 12.2271 195.284 12.2271C197.595 12.2271 199.417 13.0713 200.75 14.7598C202.083 16.4355 202.749 18.7905 202.749 21.8247V24.5288H192.561C192.599 26.4204 192.986 27.8296 193.723 28.7563C194.459 29.6704 195.475 30.1274 196.77 30.1274C198.42 30.1274 200.108 29.6133 201.835 28.585V32.7554C200.21 33.7329 198.261 34.2217 195.989 34.2217ZM195.246 16.1309C194.522 16.1309 193.926 16.5181 193.456 17.2925C192.986 18.0542 192.713 19.2412 192.637 20.8535H197.779C197.753 19.3047 197.519 18.1304 197.074 17.3306C196.63 16.5308 196.021 16.1309 195.246 16.1309Z" fill="#596C7D"/>
+            <path d="M227.162 33.8408V21.1963C227.162 18.0859 226.394 16.5308 224.858 16.5308C223.741 16.5308 222.941 17.0894 222.458 18.2065C221.976 19.311 221.735 21.0884 221.735 23.5386V33.8408H216.631V21.1963C216.631 18.0859 215.851 16.5308 214.289 16.5308C213.197 16.5308 212.404 17.083 211.909 18.1875C211.414 19.292 211.166 21.1138 211.166 23.6528V33.8408H206.101V12.627H210.119L210.728 15.3501H211.052C211.56 14.271 212.251 13.4839 213.127 12.9888C214.016 12.481 214.962 12.2271 215.965 12.2271C218.555 12.2271 220.281 13.4521 221.145 15.9023H221.335C222.414 13.4521 224.147 12.2271 226.534 12.2271C228.413 12.2271 229.834 12.8872 230.799 14.2075C231.777 15.5278 232.266 17.4575 232.266 19.9966V33.8408H227.162Z" fill="#596C7D"/>
+            <path d="M244.206 34.2217C241.552 34.2217 239.458 33.2822 237.921 31.4033C236.398 29.5117 235.636 26.8394 235.636 23.3862C235.636 19.8823 236.328 17.1465 237.712 15.1787C239.096 13.2109 241.025 12.2271 243.501 12.2271C245.812 12.2271 247.633 13.0713 248.966 14.7598C250.299 16.4355 250.966 18.7905 250.966 21.8247V24.5288H240.778C240.816 26.4204 241.203 27.8296 241.939 28.7563C242.676 29.6704 243.691 30.1274 244.986 30.1274C246.637 30.1274 248.325 29.6133 250.052 28.585V32.7554C248.427 33.7329 246.478 34.2217 244.206 34.2217ZM243.463 16.1309C242.739 16.1309 242.143 16.5181 241.673 17.2925C241.203 18.0542 240.93 19.2412 240.854 20.8535H245.996C245.97 19.3047 245.735 18.1304 245.291 17.3306C244.847 16.5308 244.237 16.1309 243.463 16.1309Z" fill="#596C7D"/>
+            <g class="by-devexpress" opacity="0.5">
+              <path d="M76.7893 44.2302C77.7542 44.2302 78.5127 44.7095 79.0649 45.668C79.6172 46.6265 79.8933 47.9753 79.8933 49.7146C79.8933 51.4729 79.614 52.8313 79.0554 53.7898C78.5032 54.7483 77.7351 55.2275 76.7512 55.2275C76.2751 55.2275 75.853 55.126 75.4849 54.9229C75.123 54.7134 74.7803 54.3484 74.4565 53.8279H74.2947L73.8662 55.0371H72V40.2217H74.5327V43.6875C74.5327 43.8335 74.5295 43.9858 74.5232 44.1445C74.5168 44.3032 74.4756 44.8586 74.3994 45.8108H74.5327C74.8438 45.2268 75.1802 44.8174 75.542 44.5825C75.9038 44.3477 76.3196 44.2302 76.7893 44.2302ZM75.9133 46.3821C75.4309 46.3821 75.0818 46.6074 74.866 47.0581C74.6565 47.5088 74.5454 48.3022 74.5327 49.4385V49.6956C74.5327 50.927 74.6406 51.7935 74.8564 52.2949C75.0786 52.7964 75.4373 53.0471 75.9324 53.0471C76.8464 53.0471 77.3035 51.9236 77.3035 49.6765C77.3035 47.4802 76.8401 46.3821 75.9133 46.3821Z" fill="#596C7D"/>
+              <path d="M80.5979 44.4302H83.2258L84.6921 50.4192C84.8381 50.9524 84.9556 51.6982 85.0444 52.6567H85.1016C85.1079 52.5044 85.1365 52.2346 85.1873 51.8474C85.238 51.4539 85.2793 51.146 85.311 50.9238C85.3428 50.7017 85.7808 48.5371 86.625 44.4302H89.291L86.2537 55.7988C85.8855 57.1953 85.3967 58.1982 84.7874 58.8076C84.178 59.417 83.3655 59.7217 82.3499 59.7217C81.8484 59.7217 81.4009 59.6677 81.0073 59.5598V57.4365C81.2676 57.5127 81.5596 57.5508 81.8833 57.5508C82.7339 57.5508 83.2925 56.9922 83.5591 55.875L83.74 55.2085L80.5979 44.4302Z" fill="#596C7D"/>
+              <path d="M104.202 47.9436C104.202 50.2415 103.732 51.9998 102.792 53.2185C101.859 54.4309 100.514 55.0371 98.7554 55.0371H95.3467V41.1167H99.0696C100.688 41.1167 101.948 41.7166 102.85 42.9163C103.751 44.1096 104.202 45.7854 104.202 47.9436ZM101.545 48.0198C101.545 44.9094 100.688 43.3542 98.9744 43.3542H97.9365V52.771H98.7744C99.7202 52.771 100.418 52.3774 100.869 51.5903C101.32 50.7969 101.545 49.6067 101.545 48.0198Z" fill="#596C7D"/>
+              <path d="M110 55.2275C108.674 55.2275 107.626 54.7578 106.858 53.8184C106.096 52.8726 105.716 51.5364 105.716 49.8098C105.716 48.0579 106.062 46.6899 106.753 45.7061C107.445 44.7222 108.41 44.2302 109.648 44.2302C110.803 44.2302 111.714 44.6523 112.381 45.4966C113.047 46.3345 113.38 47.512 113.38 49.0291V50.3811H108.286C108.305 51.3269 108.499 52.0315 108.867 52.4949C109.235 52.9519 109.743 53.1804 110.391 53.1804C111.216 53.1804 112.06 52.9233 112.923 52.4092V54.4944C112.111 54.9832 111.136 55.2275 110 55.2275ZM109.629 46.1821C109.267 46.1821 108.969 46.3757 108.734 46.7629C108.499 47.1438 108.363 47.7373 108.324 48.5435H110.895C110.883 47.769 110.765 47.1819 110.543 46.782C110.321 46.3821 110.016 46.1821 109.629 46.1821Z" fill="#596C7D"/>
+              <path d="M116.751 55.0371L113.98 44.4302H116.608L117.96 50.5715C118.017 50.8572 118.084 51.2761 118.16 51.8284C118.243 52.3743 118.293 52.7678 118.312 53.009H118.351C118.357 52.8186 118.382 52.5457 118.427 52.1902C118.478 51.8347 118.528 51.5078 118.579 51.2095C118.63 50.9111 119.119 48.6514 120.045 44.4302H122.673L119.893 55.0371H116.751Z" fill="#596C7D"/>
+              <path d="M130.186 55.0371H123.911V41.1167H130.186V43.3542H126.501V46.6677H129.919V48.9148H126.501V52.771H130.186V55.0371Z" fill="#596C7D"/>
+              <path d="M133.89 49.6194L131.243 44.4302H133.871L135.28 47.6675L136.584 44.4302H139.193L136.527 49.6194L139.307 55.0371H136.66L135.156 51.6475L133.756 55.0371H131.119L133.89 49.6194Z" fill="#596C7D"/>
+              <path d="M145.268 55.2275C144.811 55.2275 144.405 55.126 144.049 54.9229C143.7 54.7134 143.373 54.3484 143.068 53.8279H142.935C143.037 54.6912 143.087 55.2117 143.087 55.3894V59.7217H140.536V44.4302H142.497L142.935 45.8108H143.049C143.576 44.7571 144.341 44.2302 145.344 44.2302C146.309 44.2302 147.064 44.7095 147.61 45.668C148.156 46.6201 148.429 47.969 148.429 49.7146C148.429 51.4348 148.146 52.7837 147.582 53.7612C147.017 54.7388 146.245 55.2275 145.268 55.2275ZM144.487 46.3821C143.992 46.3821 143.633 46.6138 143.411 47.0771C143.195 47.5342 143.081 48.2959 143.068 49.3623V49.6956C143.068 50.8635 143.179 51.7141 143.402 52.2473C143.624 52.7805 143.992 53.0471 144.506 53.0471C145.395 53.0471 145.839 51.9236 145.839 49.6765C145.839 48.572 145.728 47.7468 145.506 47.2009C145.29 46.655 144.95 46.3821 144.487 46.3821Z" fill="#596C7D"/>
+              <path d="M154.732 44.2302C155.043 44.2302 155.348 44.2778 155.646 44.373L155.351 46.8296C155.173 46.7661 154.942 46.7344 154.656 46.7344C154.04 46.7344 153.567 46.9788 153.237 47.4675C152.907 47.95 152.742 48.6545 152.742 49.5813V55.0371H150.209V44.4302H152.295L152.58 46.0869H152.666C152.945 45.4204 153.25 44.9443 153.58 44.6587C153.91 44.373 154.294 44.2302 154.732 44.2302Z" fill="#596C7D"/>
+              <path d="M160.693 55.2275C159.366 55.2275 158.319 54.7578 157.551 53.8184C156.789 52.8726 156.408 51.5364 156.408 49.8098C156.408 48.0579 156.754 46.6899 157.446 45.7061C158.138 44.7222 159.103 44.2302 160.34 44.2302C161.496 44.2302 162.406 44.6523 163.073 45.4966C163.74 46.3345 164.073 47.512 164.073 49.0291V50.3811H158.979C158.998 51.3269 159.191 52.0315 159.56 52.4949C159.928 52.9519 160.436 53.1804 161.083 53.1804C161.908 53.1804 162.752 52.9233 163.616 52.4092V54.4944C162.803 54.9832 161.829 55.2275 160.693 55.2275ZM160.321 46.1821C159.959 46.1821 159.661 46.3757 159.426 46.7629C159.191 47.1438 159.055 47.7373 159.017 48.5435H161.588C161.575 47.769 161.458 47.1819 161.235 46.782C161.013 46.3821 160.708 46.1821 160.321 46.1821Z" fill="#596C7D"/>
+              <path d="M171.442 51.9331C171.442 52.9678 171.138 53.7771 170.528 54.3611C169.925 54.9387 169.033 55.2275 167.853 55.2275C166.805 55.2275 165.939 55.0212 165.253 54.6086V52.4092C165.603 52.6504 166.009 52.8503 166.472 53.009C166.942 53.1677 167.354 53.2471 167.71 53.2471C168.104 53.2471 168.402 53.1519 168.605 52.9614C168.814 52.7646 168.919 52.5076 168.919 52.1902C168.919 51.8665 168.811 51.584 168.595 51.3428C168.38 51.1016 167.983 50.8064 167.405 50.4573C166.637 50.0002 166.085 49.5146 165.749 49.0005C165.418 48.48 165.253 47.8674 165.253 47.1628C165.253 46.2615 165.561 45.5474 166.177 45.0205C166.799 44.4937 167.65 44.2302 168.729 44.2302C169.668 44.2302 170.554 44.4778 171.385 44.9729L170.557 46.7915C169.878 46.4233 169.281 46.2393 168.767 46.2393C168.443 46.2393 168.199 46.325 168.034 46.4963C167.875 46.6677 167.796 46.8772 167.796 47.1248C167.796 47.4104 167.894 47.6643 168.091 47.8865C168.294 48.1086 168.668 48.3848 169.214 48.7148C169.875 49.1147 170.338 49.4543 170.604 49.7336C170.871 50.0129 171.077 50.3303 171.223 50.6858C171.369 51.0413 171.442 51.457 171.442 51.9331Z" fill="#596C7D"/>
+              <path d="M178.736 51.9331C178.736 52.9678 178.431 53.7771 177.822 54.3611C177.219 54.9387 176.327 55.2275 175.146 55.2275C174.099 55.2275 173.232 55.0212 172.547 54.6086V52.4092C172.896 52.6504 173.302 52.8503 173.766 53.009C174.235 53.1677 174.648 53.2471 175.003 53.2471C175.397 53.2471 175.695 53.1519 175.898 52.9614C176.108 52.7646 176.213 52.5076 176.213 52.1902C176.213 51.8665 176.105 51.584 175.889 51.3428C175.673 51.1016 175.276 50.8064 174.699 50.4573C173.931 50.0002 173.378 49.5146 173.042 49.0005C172.712 48.48 172.547 47.8674 172.547 47.1628C172.547 46.2615 172.855 45.5474 173.47 45.0205C174.093 44.4937 174.943 44.2302 176.022 44.2302C176.962 44.2302 177.847 44.4778 178.679 44.9729L177.85 46.7915C177.171 46.4233 176.574 46.2393 176.06 46.2393C175.737 46.2393 175.492 46.325 175.327 46.4963C175.168 46.6677 175.089 46.8772 175.089 47.1248C175.089 47.4104 175.188 47.6643 175.384 47.8865C175.587 48.1086 175.962 48.3848 176.508 48.7148C177.168 49.1147 177.631 49.4543 177.898 49.7336C178.165 50.0129 178.371 50.3303 178.517 50.6858C178.663 51.0413 178.736 51.457 178.736 51.9331Z" fill="#596C7D"/>
+            </g>
+            <defs>
+              <clipPath id="clip0_93_1163">
+                <rect width="60" height="60" fill="white"/>
+              </clipPath>
+            </defs>
           </svg>
-          <svg
-            class="plus"
-            viewBox="0 0 22 22"
-            fill="none"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M21.6309 13.3433H13.1714V21.8027H8.73291V13.3433H0.229492V8.88281H8.73291V0.379395H13.1714V8.88281H21.6309V13.3433Z"
-              fill="#BCBCBC"
-            ></path>
+
+          <svg class="plus" width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <g opacity="0.6" clip-path="url(#clip0_93_1176)">
+             <path d="M21.6309 13.3433H13.1714V21.8027H8.73291V13.3433H0.229492V8.88281H8.73291V0.379395H13.1714V8.88281H21.6309V13.3433Z" fill="#242424"/>
+            </g>
+            <defs>
+              <clipPath id="clip0_93_1176">
+                <rect width="22" height="22" fill="white"/>
+              </clipPath>
+            </defs>
           </svg>
 
           <svg
@@ -40,22 +71,22 @@
               style="fill:#35495E;"
               points="44.3,0 36,14.3 27.7,0 14.4,0 36,37.2 57.6,0 "
             />
-            <g>
+            <g class="vue-logo-text">
               <path
-                style="fill:#35495E;"
+                style="fill:currentColor;"
                 d="M77.2,15c0-0.4,0.2-0.8,0.7-1c0.5-0.3,0.9-0.4,1.4-0.4c0.7,0,1.1,0.3,1.3,0.8l7.2,24.4L95,14.4
                 c0.2-0.5,0.6-0.8,1.2-0.8c0.5,0,1,0.1,1.4,0.4c0.4,0.3,0.7,0.6,0.7,1c0,0,0,0.1,0,0.1c0,0.1,0,0.1,0,0.2l-8.3,27.3
                 c-0.3,0.8-1,1.2-2.1,1.2s-1.8-0.4-2.1-1.2l-8.4-27.3C77.2,15.2,77.2,15.1,77.2,15z"
               />
               <path
-                style="fill:#35495E;"
+                style="fill:currentColor;"
                 d="M99.8,36V25.4c0-0.3,0.2-0.6,0.5-0.9c0.3-0.2,0.7-0.4,1.2-0.4c0.4,0,0.8,0.1,1.2,0.4
                 s0.5,0.5,0.5,0.8V36c0,1.2,0.5,2.3,1.4,3.3c0.9,1,2,1.5,3.3,1.5c1.3,0,2.4-0.5,3.3-1.5c0.9-1,1.4-2.1,1.4-3.3V25.3
                 c0-0.3,0.2-0.6,0.5-0.8c0.3-0.2,0.7-0.4,1.2-0.4c0.5,0,0.9,0.1,1.2,0.3c0.3,0.2,0.5,0.5,0.5,0.8V36c0,2.1-0.8,3.9-2.4,5.5
                 c-1.6,1.6-3.5,2.4-5.7,2.4c-2.2,0-4.1-0.8-5.7-2.4C100.6,40,99.8,38.1,99.8,36z"
               />
               <path
-                style="fill:#35495E;"
+                style="fill:currentColor;"
                 d="M119.9,35.9v-4.3c0-2.1,0.8-3.9,2.4-5.5c1.6-1.5,3.5-2.3,5.8-2.3c2.1,0,4,0.7,5.5,2.1
                 s2.3,3.2,2.3,5.4c0,0.8-0.1,1.4-0.3,1.9s-0.5,0.8-0.9,1c-0.4,0.2-0.8,0.3-1.1,0.4s-0.8,0.1-1.4,0.1h-9v1.2c0,1.5,0.5,2.7,1.6,3.6
                 c1.1,0.9,2.5,1.4,4.2,1.4c0.9,0,1.7-0.1,2.4-0.4c0.7-0.3,1.2-0.5,1.6-0.8c0.4-0.3,0.7-0.4,1-0.4c0.4,0,0.7,0.2,1,0.5
@@ -64,12 +95,12 @@
                 c-0.9,0.9-1.4,1.9-1.4,3.2V32.5z"
               />
               <path
-                style="fill:#35495E;"
+                style="fill:currentColor;"
                 d="M138.8,41.9c0-0.5,0.2-1,0.6-1.4c0.4-0.4,0.9-0.6,1.5-0.6c0.6,0,1.1,0.2,1.5,0.6
                 c0.4,0.4,0.6,0.8,0.6,1.4c0,0.5-0.2,1-0.6,1.4s-0.9,0.6-1.5,0.6c-0.6,0-1.1-0.2-1.5-0.6S138.8,42.4,138.8,41.9z"
               />
               <path
-                style="fill:#35495E;"
+                style="fill:currentColor;"
                 d="M143,51.4c0-0.5,0.1-0.8,0.4-1.1c0.3-0.3,0.6-0.4,1-0.4c1.1,0,1.8-0.4,2.1-1.2
                 c0.3-0.8,0.5-2,0.5-3.6V25.3c0-0.4,0.2-0.6,0.5-0.9c0.3-0.2,0.7-0.3,1.2-0.3c0.5,0,0.9,0.1,1.2,0.3c0.3,0.2,0.5,0.5,0.5,0.9v19.9
                 c0,2.4-0.5,4.3-1.4,5.7c-0.9,1.4-2.3,2.1-4.2,2.1C143.6,53,143,52.4,143,51.4z M147.2,18.2c-0.4-0.4-0.6-0.9-0.6-1.4
@@ -77,7 +108,7 @@
                 c-0.4,0.4-0.9,0.6-1.5,0.6C148.1,18.8,147.6,18.6,147.2,18.2z"
               />
               <path
-                style="fill:#35495E;"
+                style="fill:currentColor;"
                 d="M154.1,40.8c0-0.4,0.1-0.7,0.3-1c0.2-0.3,0.5-0.5,0.8-0.5c0.2,0,0.5,0.2,0.9,0.5s1,0.7,1.8,1
                 c0.8,0.3,1.7,0.5,2.7,0.5c1.4,0,2.4-0.2,3-0.7s0.9-1.1,0.9-1.9c0-0.9-0.3-1.6-1-2.2c-0.7-0.5-1.5-0.9-2.5-1.2c-1-0.3-2-0.6-3-0.9
                 s-1.8-0.9-2.5-1.7c-0.7-0.8-1-1.8-1-3.1c0-1.5,0.6-2.9,1.7-4c1.1-1.1,2.8-1.7,5.1-1.7c1.4,0,2.8,0.2,4,0.7c1.2,0.4,1.8,0.9,1.8,1.5
@@ -92,7 +123,7 @@
         <p>
           Thanks for using the DevExtreme Vue App Template.
         </p>
-        <p>This application was built using <a href="https://cli.vuejs.org/" target="_blank" rel="noopener noreferrer">Vue CLI</a> 
+        <p>This application was built using <a href="https://cli.vuejs.org/" target="_blank" rel="noopener noreferrer">Vue CLI</a>
           and <a href="https://js.devexpress.com/Documentation/Guide/Common/DevExtreme_CLI/" target="_blank" rel="noopener noreferrer">DevExtreme CLI</a>
           and includes the following DevExtreme components:</p>
         <ul>
@@ -126,7 +157,7 @@
           </li>
         </ul>
          <p>
-          For technical content related to DevExtreme Vue components, feel free to explore 
+          For technical content related to DevExtreme Vue components, feel free to explore
           our <a href="https://js.devexpress.com/documentation/" target="_blank" rel="noopener noreferrer">online documentation</a>
           and <a href="https://js.devexpress.com/Demos/Widgetsgallery/" target="_blank" rel="noopener noreferrer">technical demos</a>.
         </p>
@@ -136,38 +167,48 @@
 </template>
 
 <style lang="scss">
+@use "../variables.scss" as *;
+
 .logos-container {
-  margin: 20px 0 40px 0;
-  text-align: center;
+  margin: 0 0 40px 0;
   svg {
     display: inline-block;
   }
 }
 
 .devextreme-logo {
-  width: 200px;
-  height: 34px;
-  margin-bottom: 17px;
+  width: 255px;
+  height: 60px;
+
+  > path {
+    fill: var(--devextreme-logo-color);
+  }
+
+  .by-devexpress {
+    path {
+      fill: var(--devextreme-logo-color);
+    }
+  }
 }
 
 .vue-logo {
   width: 180px;
-  height: 62px;
+  height: 60px;
+
+  .vue-logo-text {
+    path {
+      fill: var(--vue-logo-text-color);
+    }
+  }
 }
 
 .plus {
-  margin: 20px 10px;
+  margin: 20px;
   width: 22px;
   height: 22px;
-}
 
-.screen-x-small .logos-container {
-  svg {
-    width: 100%;
-    display: block;
-    &.plus {
-      margin: 0;
-    }
+  path {
+    fill:  var(--plus-icon-color);
   }
 }
 </style>

package/src/templates/vue-v3/sample-pages/profile-page.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <h2 class="content-block">Profile</h2>
+    <h2>Profile</h2>
 
     <div class="content-block dx-card responsive-paddings">
       <div class="form-avatar">

package/src/templates/vue-v3/sample-pages/tasks-page.vue

@@ -1,9 +1,9 @@
 <template>
   <div>
-    <h2 class="content-block">Tasks</h2>
+    <h2>Tasks</h2>
 
     <dx-data-grid
-      class="dx-card wide-card"
+      class="dx-card content-block"
       :data-source="dataSourceConfig"
       :focused-row-index="0"
       :show-borders="false"
@@ -132,3 +132,8 @@ export default {
   }
 };
 </script>
+<style lang="scss">
+.dx-datagrid-filter-row {
+  background-color: transparent;
+}
+</style>

package/src/utility/latest-versions.js

@@ -1,8 +1,8 @@
 const packageJson = require('../../package.json');
 module.exports = {
-    'devextreme': '24.1.4',
-    'devextreme-react': '24.1.4',
-    'devextreme-vue': '24.1.4',
+    'devextreme': '24.2.2-beta',
+    'devextreme-react': '24.2.2-beta',
+    'devextreme-vue': '24.2.2-beta',
     'devextreme-cli': packageJson.version,
     'devextreme-schematics': 'latest'
 };