feat(sass-palette): use default theme variable if possible

vuepress-theme-hope · Jan 2, 2023 · 1c98543 · 1c98543
1 parent 8e379be
commit 1c98543
Show file tree

Hide file tree

Showing 22 changed files with 105 additions and 119 deletions.
diff --git a/packages/components/src/client/styles/back-to-top.scss b/packages/components/src/client/styles/back-to-top.scss
@@ -17,8 +17,8 @@
   color: var(--c-brand, #3eaf7c);
   box-shadow: 2px 2px 10px 0 var(--card-shadow);
 
-  transition: background var(--color-transition), color var(--color-transition),
-    box-shadow var(--color-transition);
+  transition: background var(--t-color, 0.3s ease),
+    color var(--t-color, 0.3s ease), box-shadow var(--t-color, 0.3s ease);
 
   @media (max-width: hope-config.$tablet) {
     width: 2.25rem;
@@ -45,7 +45,7 @@
 
 .fade-enter-active,
 .fade-leave-active {
-  transition: opacity var(--color-transition);
+  transition: opacity var(--t-color, 0.3s ease);
 }
 
 .fade-enter,

diff --git a/packages/components/src/client/styles/badge.scss b/packages/components/src/client/styles/badge.scss
@@ -20,7 +20,8 @@
   font-size: 14px;
   line-height: 18px;
 
-  transition: background var(--color-transition), color var(--color-transition);
+  transition: background var(--t-color, 0.3s ease),
+    color var(--t-color, 0.3s ease);
 
   & + & {
     margin-left: 5px;

diff --git a/packages/components/src/client/styles/catalog.scss b/packages/components/src/client/styles/catalog.scss
@@ -32,9 +32,9 @@
   .main-title,
   .child-title,
   .sub-title {
-    margin-top: calc(0.5rem - var(--navbar-height));
+    margin-top: calc(0.5rem - var(--navbar-height, 3.6rem));
     margin-bottom: 0.5rem;
-    padding-top: calc(var(--navbar-height));
+    padding-top: var(--navbar-height, 3.6rem);
     font-weight: 500;
 
     &:first-child {

diff --git a/packages/components/src/client/styles/code-pen.scss b/packages/components/src/client/styles/code-pen.scss
@@ -5,7 +5,8 @@
 
   text-align: center;
 
-  transition: background var(--color-transition), border var(--color-transition);
+  transition: background var(--t-color, 0.3s ease),
+    border var(--t-color, 0.3s ease);
 
   .codepen-button {
     display: block;
@@ -22,8 +23,8 @@
 
     cursor: pointer;
 
-    transition: background var(--color-transition),
-      border var(--color-transition), color var(--color-transition);
+    transition: background var(--t-color, 0.3s ease),
+      border var(--t-color, 0.3s ease), color var(--t-color, 0.3s ease);
 
     &:hover {
       background: var(--c-brand-light, #4abf8a);

diff --git a/packages/md-enhance/src/client/compact/styles/codegroup.scss b/packages/md-enhance/src/client/compact/styles/codegroup.scss
@@ -10,7 +10,7 @@
   background: var(--code-group-nav-bg-color, #3a404c);
   list-style: none;
 
-  transition: background var(--color-transition);
+  transition: background var(--t-color, 0.3s ease);
 
   @media (max-width: hope-config.$mobile) {
     margin-right: -1.5rem;
@@ -38,7 +38,8 @@
 
   cursor: pointer;
 
-  transition: background var(--color-transition), color var(--color-transition);
+  transition: background var(--t-color, 0.3s ease),
+    color var(--t-color, 0.3s ease);
 
   &:hover {
     background: var(--code-group-nav-hover-color, #434a57);

diff --git a/packages/md-enhance/src/client/styles/code-tabs.scss b/packages/md-enhance/src/client/styles/code-tabs.scss
@@ -12,7 +12,7 @@
 
   white-space: nowrap;
 
-  transition: background var(--color-transition);
+  transition: background var(--t-color, 0.3s ease);
 
   @media (max-width: hope-config.$mobile) {
     margin-right: -1.5rem;
@@ -40,7 +40,8 @@
 
   cursor: pointer;
 
-  transition: background var(--color-transition), color var(--color-transition);
+  transition: background var(--t-color, 0.3s ease),
+    color var(--t-color, 0.3s ease);
 
   &:hover {
     background: var(--code-tabs-nav-hover-color, #434a57);

diff --git a/packages/md-enhance/src/client/styles/container/index.scss b/packages/md-enhance/src/client/styles/container/index.scss
@@ -62,8 +62,8 @@
 
 .hint-container {
   position: relative;
-  transition: background var(--color-transition),
-    border-color var(--color-transition), color var(--color-transition);
+  transition: background var(--t-color, 0.3s ease),
+    border-color var(--t-color, 0.3s ease), color var(--t-color, 0.3s ease);
 
   @media print {
     page-break-inside: avoid;
@@ -220,8 +220,8 @@
   background: var(--detail-bg-color);
   color: var(--detail-text-color);
 
-  transition: background var(--transform-transition),
-    color var(--transform-transition);
+  transition: background var(--t-transform, 0.3s ease),
+    color var(--t-transform, 0.3s ease);
 
   @media print {
     display: none;
@@ -279,8 +279,8 @@
     &::before {
       border-radius: 50%;
       background: #ccc;
-      transition: background var(--color-transition),
-        transform var(--transform-transition);
+      transition: background var(--t-color, 0.3s ease),
+        transform var(--t-transform, 0.3s ease);
 
       #{hope-config.$dark-selector} & {
         background: #555;
@@ -290,7 +290,7 @@
     &::after {
       background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='rgba(0,0,0,0.5)' d='M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z'/%3E%3C/svg%3E");
       line-height: normal;
-      transition: transform var(--transform-transition);
+      transition: transform var(--t-transform, 0.3s ease);
       transform: rotate(90deg);
 
       #{hope-config.$dark-selector} & {

diff --git a/packages/md-enhance/src/client/styles/figure.scss b/packages/md-enhance/src/client/styles/figure.scss
@@ -10,7 +10,7 @@
 
     text-align: center;
 
-    transition: transform var(--transform-transition);
+    transition: transform var(--t-transform, 0.3s ease);
 
     img {
       overflow: hidden;

diff --git a/packages/md-enhance/src/client/styles/footnote.scss b/packages/md-enhance/src/client/styles/footnote.scss
@@ -1,7 +1,7 @@
 // footnote anchor position
 .footnote-item {
-  margin-top: calc(0rem - var(--navbar-height));
-  padding-top: calc(var(--navbar-height) + 0.5rem);
+  margin-top: calc(0rem - var(--navbar-height, 3.6rem));
+  padding-top: calc(var(--navbar-height, 3.6rem) + 0.5rem);
 
   > p {
     margin-bottom: 0;
@@ -14,5 +14,5 @@
 
 .footnote-anchor {
   position: absolute;
-  top: calc(-0.5rem - var(--navbar-height));
+  top: calc(-0.5rem - var(--navbar-height, 3.6rem));
 }
diff --git a/packages/md-enhance/src/client/styles/playground.scss b/packages/md-enhance/src/client/styles/playground.scss
@@ -31,8 +31,8 @@
 
     font-weight: 500;
 
-    transition: background var(--color-transition),
-      border-color var(--color-transition);
+    transition: background var(--t-color, 0.3s ease),
+      border-color var(--t-color, 0.3s ease);
   }
 
   .title {
@@ -70,7 +70,7 @@
     position: relative;
     overflow: hidden;
     background: var(--c-bg, #fff);
-    transition: background var(--color-transition);
+    transition: background var(--t-color, 0.3s ease);
 
     iframe {
       display: block;
@@ -91,7 +91,7 @@
 
     background: var(--grey15);
 
-    transition: background var(--color-transition);
+    transition: background var(--t-color, 0.3s ease);
 
     .loading-icon {
       width: 4em;

diff --git a/packages/md-enhance/src/client/styles/tabs.scss b/packages/md-enhance/src/client/styles/tabs.scss
@@ -38,7 +38,7 @@
 
   white-space: nowrap;
 
-  transition: background var(--color-transition);
+  transition: background var(--t-color, 0.3s ease);
 
   @media (max-width: hope-config.$mobile) {
     border-radius: 0;
@@ -64,7 +64,8 @@
 
   cursor: pointer;
 
-  transition: background var(--color-transition), color var(--color-transition);
+  transition: background var(--t-color, 0.3s ease),
+    color var(--t-color, 0.3s ease);
 
   &:hover {
     background: var(--tab-nav-hover-color);
@@ -121,7 +122,7 @@
   display: none;
   padding: 1rem 0.75rem;
   background: var(--tab-bg-color);
-  transition: background var(--color-transition);
+  transition: background var(--t-color, 0.3s ease);
 
   &.active {
     display: block;

diff --git a/packages/md-enhance/src/client/styles/tasklist.scss b/packages/md-enhance/src/client/styles/tasklist.scss
@@ -26,8 +26,8 @@ input[type="checkbox"].task-list-item-checkbox {
 
     visibility: visible;
 
-    transition: background var(--color-transition),
-      border-color var(--color-transition);
+    transition: background var(--t-color, 0.3s ease),
+      border-color var(--t-color, 0.3s ease);
 
     @media print {
       border-color: var(--c-text, #2c3e50);

diff --git a/packages/md-enhance/src/client/styles/vue-playground.scss b/packages/md-enhance/src/client/styles/vue-playground.scss
@@ -73,8 +73,8 @@
 
     font-weight: 500;
 
-    transition: background var(--color-transition) border-color
-      var(--color-transition);
+    transition: background var(--t-color, 0.3s ease) border-color
+      var(--t-color, 0.3s ease);
   }
 
   .title {
@@ -121,7 +121,7 @@
 
     background: var(--grey15);
 
-    transition: background var(--color-transition);
+    transition: background var(--t-color, 0.3s ease);
 
     .loading-icon {
       width: 4em;
@@ -130,7 +130,7 @@
 
       color: var(--c-brand, #3eaf7c);
 
-      transition: color var(--color-transition);
+      transition: color var(--t-color, 0.3s ease);
     }
   }
 
@@ -154,7 +154,7 @@
 
     background: var(--c-bg, #fff);
 
-    transition: background var(--color-transition);
+    transition: background var(--t-color, 0.3s ease);
 
     @media (max-width: hope-config.$tablet) {
       &.show-code {

diff --git a/packages/pwa2/src/client/styles/modal.scss b/packages/pwa2/src/client/styles/modal.scss
@@ -49,7 +49,8 @@
   font-weight: 600;
   line-height: 2.2rem;
 
-  transition: background var(--color-transition), color var(--color-transition);
+  transition: background var(--t-color, 0.3s ease),
+    color var(--t-color, 0.3s ease);
 
   // stylelint-disable media-feature-name-no-unknown
   @media (display-mode: standalone) {
@@ -115,7 +116,7 @@
 
     background: var(--c-bg, #fff);
 
-    transition: background var(--color-transition);
+    transition: background var(--t-color, 0.3s ease);
     animation: 0.15s pwa-opened;
 
     @media (max-width: hope-config.$laptop) {
@@ -148,7 +149,7 @@
       @include reset.button;
       float: right;
       color: var(--grey3);
-      transition: color var(--color-transition);
+      transition: color var(--t-color, 0.3s ease);
 
       &:hover,
       &:focus {
@@ -184,7 +185,7 @@
 
       background: #eee;
 
-      transition: background var(--color-transition);
+      transition: background var(--t-color, 0.3s ease);
 
       @media (max-width: hope-config.$pad) {
         width: 60px;
@@ -288,7 +289,7 @@
       font-size: 16px;
       line-height: 29px;
 
-      transition: color var(--color-transition);
+      transition: color var(--t-color, 0.3s ease);
     }
   }
 
@@ -304,7 +305,7 @@
     button {
       @include reset.button;
       width: 4em;
-      transition: background var(--color-transition);
+      transition: background var(--t-color, 0.3s ease);
 
       &:hover,
       &:focus {
@@ -396,7 +397,7 @@
   .install-button {
     background: var(--c-brand, #3eaf7c);
     color: var(--white);
-    transition: color var(--color-transition);
+    transition: color var(--t-color, 0.3s ease);
 
     @media (max-width: hope-config.$mobile) {
       span {
@@ -439,8 +440,8 @@
     font-size: 14px;
     text-align: center;
 
-    transition: background var(--color-transition),
-      box-shadow var(--color-transition);
+    transition: background var(--t-color, 0.3s ease),
+      box-shadow var(--t-color, 0.3s ease);
 
     &::after {
       content: " ";
@@ -455,7 +456,7 @@
       border-right: 0.8em solid transparent;
       border-left: 0.8em solid transparent;
 
-      transition: border-color var(--color-transition);
+      transition: border-color var(--t-color, 0.3s ease);
     }
 
     p {
@@ -472,7 +473,7 @@
       background: #07c160;
       color: var(--white);
 
-      transition: color var(--color-transition);
+      transition: color var(--t-color, 0.3s ease);
     }
   }
 }