KYAN-340 update kyanite to ensure high lighthouse score

.java-version

@@ -0,0 +1 @@
+17

README.md

@@ -32,6 +32,9 @@ To use this project on existing environment you have to use a command from secti
 ## Development
 
 ### Build
+> [!WARNING]
+> During installation, the application requires a connection to localhost:8080, which is run by Docker. Run Docker (as mentioned in the How to run section below) before running the install command.
+
 ```bash
 ./mvnw clean install
 ```
@@ -62,7 +65,7 @@ Please check the community support section in [WebSight Starter](https://github.
 Kyanite components is `open-source` project with `Apache License 2.0` license.
 
 ## Light and dark mode
-Kyanite does not support light and dark system mode, it forces one of each with class from space template on `html` tag: `theme-dark` and `theme-light`. It can be used as a base color system for any new theme. 
+Kyanite does not support light and dark system mode, it forces one of each with class from space template on `html` tag: `theme-dark` and `theme-light`. It can be used as a base color system for any new theme.
 
 ## Creating a New Theme for Kyanite
 
@@ -143,7 +146,7 @@ Other global variables (for others, check `:root`):
 ```
 
 If you wish to customize components, use css variables inside top level component's name class:
-``` 
+```
   .card {
     --kyanite-card-background-color: #ffffff;
     --kyanite-card-footer-border-top: #ededed;
@@ -153,7 +156,7 @@ If you wish to customize components, use css variables inside top level componen
 ### 3. Add the Style File to the Bundle
 
 Ensure that the style file is included in the bundle by adding the following lines to your configuration:
-``` 
+```
 Sling-Bundle-Resources: /apps/my-project/webroot
 WebSight-Apps-WebRoot: /apps/my-project/webroot
 ```

applications/common/frontend/README.md

@@ -27,10 +27,14 @@ Front-End files are deployed as a part of `core` package.
 CSS Variables are generated automatically in 'global-variables.scss'. These variables can be `used` or `redefined` in your project.
 
 Places where the data necessary to generate css variables are located:
-1. `/atomic-design-system/00-token/` - Contain folders named and arranged according to the purpose of css attributes. 
+1. `/atomic-design-system/00-token/` - Contain folders named and arranged according to the purpose of css attributes.
 2. `/bulma-overwrite/_variables.scss` - Contain defined spacing names and values.
 
 Important files:
 1. `global-variables.scss` - File responsible for generating css variables base on sass maps imported from '/atomic-design-system/00-token/*' and '/bulma-overwrite/_variables.scss'.
 
 IMPORTANT: The names of maps defined in the '/atomic-design-system/00-token/' and '/bulma-overwrite/_variables.scss' can't be changed because the rest of 'atomic-design-system' uses css variables from 'global-variables.scss'.
+
+## Bulma css size
+
+We use at least one component from every Bulma module, which forces us to import the entire framework. As a result, the final CSS bundle is around 900 KB. Bulma doesn’t offer granular tree‑shaking or modular builds that would allow us to reduce the output size based on actual usage.

applications/common/frontend/src/components/Image/Image.scss

@@ -40,7 +40,7 @@ $color-shadow-end: rgba(#605e78, 0.07);
   }
 }
 
-.viewer-backdrop {
+.viewer-container.viewer-backdrop {
   background-color: rgba(0, 0, 0, .9);
 }
 

applications/common/frontend/src/global.scss

@@ -16,6 +16,46 @@
 
 @use 'src/atomic-design-system/00-token/t.border' as border;
 
+/* Be Vietnam Pro */
+@font-face {
+  font-display: swap;
+  font-family: 'Be Vietnam Pro';
+  font-style: normal;
+  font-weight: 400;
+  src: url('./fonts/be-vietnam-pro-v12-latin-regular.woff2') format('woff2');
+}
+
+@font-face {
+  font-display: swap;
+  font-family: 'Be Vietnam Pro';
+  font-style: normal;
+  font-weight: 500;
+  src: url('./fonts/be-vietnam-pro-v12-latin-500.woff2') format('woff2');
+}
+
+@font-face {
+  font-display: swap;
+  font-family: 'Be Vietnam Pro';
+  font-style: normal;
+  font-weight: 600;
+  src: url('./fonts/be-vietnam-pro-v12-latin-600.woff2') format('woff2');
+}
+
+@font-face {
+  font-display: swap;
+  font-family: 'Be Vietnam Pro';
+  font-style: normal;
+  font-weight: 700;
+  src: url('./fonts/be-vietnam-pro-v12-latin-700.woff2') format('woff2');
+}
+
+@font-face {
+  font-display: swap;
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 400;
+  src: url('./fonts/roboto-v51-latin-regular.woff2') format('woff2');
+}
 
 .navbar-link:not(.is-arrowless)::after,
 .select:not(.is-multiple, .is-loading)::after {
@@ -52,8 +92,8 @@ a:not(.button, .link) {
 }
 
 input:-webkit-autofill,
-input:-webkit-autofill:hover, 
-input:-webkit-autofill:focus, 
+input:-webkit-autofill:hover,
+input:-webkit-autofill:focus,
 input:-webkit-autofill:active {
     -webkit-box-shadow: 0 0 0 30px var(--kyanite-body-background-color) inset;
     -webkit-text-fill-color: var(--kyanite-body-color);

applications/common/frontend/tsconfig.json

@@ -1,6 +1,6 @@
 {
     "compilerOptions": {
-        "target": "es5",
+        "target": "es2022",
         "module": "es6",
         "baseUrl": "../frontend",
         "removeComments": true,

pom.xml

@@ -160,6 +160,7 @@
                 <exclude>**/*.svg</exclude>
                 <exclude>**/.content.xml</exclude>
                 <exclude>**/sitemap.xml/**/*</exclude>
+                <exclude>**/.java-version</exclude>
               </excludes>
             </configuration>
           </execution>