Merge pull request #92 from appscode-cloud/riyad/node22

Update node version to 22.x

.github/workflows/ci.yml

@@ -20,10 +20,10 @@ jobs:
     steps:
       - uses: actions/checkout@v1
 
-      - name: Use Node.js 16.x
+      - name: Use Node.js 22.x
         uses: actions/setup-node@v1
         with:
-          node-version: 16.x
+          node-version: 22.x
 
       - name: Build
         env:

.github/workflows/release.yml

@@ -19,7 +19,7 @@ jobs:
       - name: Use Node.js
         uses: actions/setup-node@v1
         with:
-          node-version: 16.x
+          node-version: 22.x
 
       - name: Install Firebase CLI
         run: |

package.json

@@ -17,7 +17,7 @@
     "deploy": "firebase use default && firebase deploy"
   },
   "dependencies": {
-    "@appscode/design-system": "^2.0.40",
+    "@appscode/design-system": "^2.6.0",
     "@appscode/design-system-images": "0.0.13",
     "@vee-validate/rules": "^4.5.11",
     "bulma": "^0.9.4",
@@ -66,7 +66,7 @@
     "vue": "^3.0.5"
   },
   "engines": {
-    "node": ">=16"
+    "node": ">=22"
   },
   "description": "A Vue component to generate html form using OpenAPI v3 schema",
   "repository": {

src/assets/scss/_ui-builder.scss

@@ -92,7 +92,7 @@
     top: 10px;
     width: 1px;
     height: calc(100% - 20px);
-    border: 1px dashed $primary-90;
+    border: 1px dashed $color-border;
     z-index: -1;
   }
 
@@ -103,7 +103,7 @@
     bottom: 6px;
     width: 12px;
     height: 12px;
-    background-color: $primary-90;
+    background-color: $color-border;
     border-radius: 50%;
     z-index: -1;
   }
@@ -126,7 +126,7 @@
         display: inline-block;
         text-align: center;
         font-size: 10px;
-        border: 1px solid $primary-90;
+        border: 1px solid $color-border;
         border-radius: 50%;
         margin-right: 10px;
         cursor: pointer;
@@ -155,7 +155,7 @@
 //     min-width: 630px;
 
 //     .thead {
-//       background-color: $primary-90;
+//       background-color: $color-border;
 
 //       .tr {
 //         .th {
@@ -184,7 +184,7 @@
 
 //     .tbody {
 //       .tr {
-//         border-bottom: 1px solid $primary-90;
+//         border-bottom: 1px solid $color-border;
 //       }
 //     }
 //   }
@@ -375,7 +375,7 @@
     cursor: pointer;
     border: none;
     color: $primary;
-    background-color: $primary-90;
+    background-color: $color-border;
     transition: 0.3s ease-in-out;
     &:hover {
       background-color: $primary-80;
@@ -428,7 +428,7 @@ span.is-error {
 .circle-list-shape {
   width: 6px;
   height: 6px;
-  background-color: $black-40;
+  background-color: $gray-40;
   display: flex;
   border-radius: 50%;
 }

src/assets/scss/_vue-open-api.scss

@@ -229,7 +229,7 @@
 
         &.show-label {
           font-size: 12px;
-          color: $black-40;
+          color: $gray-40;
           top: -9px;
           font-weight: 500;
           background-color: $white-100;
@@ -283,7 +283,7 @@
           font-size: 12px;
           top: -9px;
           font-weight: 500;
-          color: $black-40;
+          color: $gray-40;
 
           &.is-required {
             &:after {
@@ -408,7 +408,7 @@
         left: 10px;
         padding: 0 5px;
         font-size: 13px;
-        color: $black-40;
+        color: $gray-40;
 
         &:after {
           position: absolute;
@@ -464,7 +464,7 @@
 
     .ac-dropdown-content {
       position: absolute;
-      background-color: $primary-90;
+      background-color: $color-border;
       width: 100%;
       height: auto;
       box-shadow: 0px 4px 16px rgba(132, 147, 168, 0.6);