From 43f4bfd896afab25f8b772de1651c36496aad385 Mon Sep 17 00:00:00 2001
From: Qiujia QJ2 Xu <xuqj2@Lenovo.com>
Date: Fri, 3 Jan 2025 15:07:17 +0800
Subject: [PATCH] add open props dependence

---
 package.json                                  |  1 +
 .../modules/carousel/carousel.component.html  | 19 ++++++++++++---
 .../src/modules/navbar/navbar.component.scss  |  2 +-
 .../components/welcome/welcome.component.scss |  3 +++
 src/modules/home/home.component.scss          |  2 ++
 src/styles.scss                               | 24 +++++++++++++++++++
 yarn.lock                                     |  5 ++++
 7 files changed, 52 insertions(+), 4 deletions(-)

diff --git a/package.json b/package.json
index 87383540..2b2ff394 100644
--- a/package.json
+++ b/package.json
@@ -26,6 +26,7 @@
         "animate.css": "^4.1.1",
         "eva-icons": "^1.1.3",
         "ngx-highlightjs": "^12.0.0",
+        "open-props": "^1.7.10",
         "rxjs": "^7.5.7",
         "tslib": "^2.6.2",
         "zone.js": "~0.15.0"
diff --git a/projects/layout/src/modules/carousel/carousel.component.html b/projects/layout/src/modules/carousel/carousel.component.html
index dd445dd2..3aff382c 100644
--- a/projects/layout/src/modules/carousel/carousel.component.html
+++ b/projects/layout/src/modules/carousel/carousel.component.html
@@ -1,5 +1,12 @@
 @if(showPrevArrow){
-<button mat-mini-fab tabindex="-1" aria-hidden="true" aria-label="next" class="docs-carousel-nav docs-carousel-nav-prev" (click)="previous();">
+<button
+    mat-mini-fab
+    tabindex="-1"
+    aria-hidden="true"
+    aria-label="next"
+    class="docs-carousel-nav docs-carousel-nav-prev"
+    (click)="previous()"
+>
     <mat-icon>navigate_before</mat-icon>
 </button>
 }
@@ -10,9 +17,15 @@
     </div>
 </div>
 
-
 @if(showNextArrow) {
-<button mat-mini-fab tabindex="-1" aria-hidden="true" aria-label="next" class="docs-carousel-nav docs-carousel-nav-next" (click)="next();">
+<button
+    mat-mini-fab
+    tabindex="-1"
+    aria-hidden="true"
+    aria-label="next"
+    class="docs-carousel-nav docs-carousel-nav-next"
+    (click)="next()"
+>
     <mat-icon>navigate_next</mat-icon>
 </button>
 }
diff --git a/projects/layout/src/modules/navbar/navbar.component.scss b/projects/layout/src/modules/navbar/navbar.component.scss
index ff41d10c..e6c15230 100644
--- a/projects/layout/src/modules/navbar/navbar.component.scss
+++ b/projects/layout/src/modules/navbar/navbar.component.scss
@@ -9,7 +9,7 @@
     box-shadow: 0 3px 5px -1px rgb(0 0 0 / 20%), 0 6px 10px 0 rgb(0 0 0 / 14%), 0 1px 18px 0 rgb(0 0 0 / 12%);
 
     nav.doc-navbar-header {
-        height: 40px;
+        height: 56px;
         display: flex;
         flex-wrap: wrap;
         align-items: center;
diff --git a/src/app/tank/components/welcome/welcome.component.scss b/src/app/tank/components/welcome/welcome.component.scss
index 2dd1f7bb..e7201dc6 100644
--- a/src/app/tank/components/welcome/welcome.component.scss
+++ b/src/app/tank/components/welcome/welcome.component.scss
@@ -31,6 +31,9 @@
 
     .docs-header-headline {
         color: #ffffff;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
 
         h1 {
             font-size: 56px;
diff --git a/src/modules/home/home.component.scss b/src/modules/home/home.component.scss
index 85a6f6a0..fac60cd3 100644
--- a/src/modules/home/home.component.scss
+++ b/src/modules/home/home.component.scss
@@ -30,6 +30,7 @@
         top: -60px;
 
         &::before {
+            box-sizing: content-box;
             content: "";
             position: absolute;
             width: 100px;
@@ -44,6 +45,7 @@
         }
 
         &::after {
+            box-sizing: content-box;
             content: "";
             position: absolute;
             width: 140px;
diff --git a/src/styles.scss b/src/styles.scss
index 5b6ac71e..58f1415a 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -1,10 +1,28 @@
+// 动画样式
 @import "~animate.css/animate.min.css";
+// 代码高亮样式
 @import "~highlight.js/styles/github-dark.css";
 
+/* the props */
+@import "open-props/open-props.min.css";
+
+/* optional imports that use the props */
+@import "open-props/normalize.min.css";
+@import "open-props/buttons.min.css";
+
+/* individual imports */
+@import "open-props/indigo.min.css";
+@import "open-props/easings.min.css";
+@import "open-props/animations.min.css";
+@import "open-props/sizes.min.css";
+@import "open-props/gradients.min.css";
+/* see PropPacks for the full list */
+
 html,
 body {
     height: 100%;
     --mdc-text-button-label-text-color: #ffffff;
+    --size-0: 0;
 }
 body {
     margin: 0;
@@ -31,3 +49,9 @@ a.docs-link {
 .docs-homepage-promo a {
     text-decoration: none;
 }
+:where(.btn,button,input:is([type=button],[type=submit],[type=reset])), :where(input[type=file])::-webkit-file-upload-button, :where(input[type=file])::file-selector-button {
+    gap: var(--size-0);
+}
+:where(h2) {
+    max-inline-size: var(--size-header-3);
+}
diff --git a/yarn.lock b/yarn.lock
index b94f460f..5efb1fb0 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -9552,6 +9552,11 @@ only@~0.0.2:
   resolved "https://registry.npmmirror.com/only/-/only-0.0.2.tgz#2afde84d03e50b9a8edc444e30610a70295edfb4"
   integrity sha512-Fvw+Jemq5fjjyWz6CpKx6w9s7xxqo3+JCyM0WXWeCSOboZ8ABkyvP8ID4CZuChA/wxSx+XSJmdOm8rGVyJ1hdQ==
 
+open-props@^1.7.10:
+  version "1.7.10"
+  resolved "https://registry.npmmirror.com/open-props/-/open-props-1.7.10.tgz#32eca44c5ad61a41fa238043294818e2a41be66c"
+  integrity sha512-zZPJlr39YbHPou7mQ9GUKz1jiYjWzyZf/0pkPZq4MrtwgZ6FSCnf7hLkvFRGq+RZZ327vGSW3HPc7QMH4FUAZg==
+
 open@10.1.0, open@^10.0.3:
   version "10.1.0"
   resolved "https://registry.npmmirror.com/open/-/open-10.1.0.tgz#a7795e6e5d519abe4286d9937bb24b51122598e1"