@mptw/skylens-ui 1.4.43 → 1.4.44

package/assets/css/layout.styl

@@ -17,11 +17,11 @@ label
   --vc-accent-900 theme('colors.primary.800')
 
 .vc-skylens-gray
-  --vc-accent-200 theme('colors.gray.5')
-  --vc-accent-500 theme('colors.gray.4')
-  --vc-accent-600 theme('colors.gray.3')
-  --vc-accent-700 theme('colors.gray.3')
-  --vc-accent-900 theme('colors.gray.2')
+  --vc-accent-200 theme('colors.pgray.5')
+  --vc-accent-500 theme('colors.pgray.4')
+  --vc-accent-600 theme('colors.pgray.3')
+  --vc-accent-700 theme('colors.pgray.3')
+  --vc-accent-900 theme('colors.pgray.2')
 
 .vc-container
   .vc-weeks

package/components/SLAlertModal.vue

@@ -86,7 +86,7 @@ export default defineComponent({
 
   .modal-body
     &-content
-      @apply text-base leading-6 text-gray-2 text-center space-y-4
+      @apply text-base leading-6 text-pgray-2 text-center space-y-4
 
       .icon
         @apply s('text-7.17xl')

package/components/SLButton.vue

@@ -37,8 +37,8 @@ export default defineComponent({
           "highlight-500",
           "third",
           "danger",
-          "gray-5",
-          "gray-2",
+          "pgray-5",
+          "pgray-2",
           "secondary",
           "secondary-600",
           "blue-1",
@@ -139,10 +139,10 @@ export default defineComponent({
         @apply text-sm leading-none
 
   &-white
-    @apply bg-white border-white text-gray-2 s("hover:bg-white") s("hover:border-white")
+    @apply bg-white border-white text-pgray-2 s("hover:bg-white") s("hover:border-white")
 
     &.btn-outline
-      @apply text-gray-2 s("hover:text-gray-2")
+      @apply text-pgray-2 s("hover:text-pgray-2")
 
     .btn-loading
       .loading
@@ -204,27 +204,27 @@ export default defineComponent({
         div
           border-color theme('colors.danger.light') transparent transparent transparent
 
-  &-gray-5
-    @apply bg-gray-5 border-gray-5 text-gray-2 s("hover:bg-gray-4.5") s("hover:border-gray-4.5")
+  &-pgray-5
+    @apply bg-pgray-5 border-pgray-5 text-pgray-2 s("hover:bg-pgray-4.5") s("hover:border-pgray-4.5")
 
     &.btn-outline
-      @apply text-gray-5 s("hover:text-gray-4.5")
+      @apply text-pgray-5 s("hover:text-pgray-4.5")
 
     .btn-loading
       .loading
         div
-          border-color theme('colors.gray[4.5]') transparent transparent transparent
+          border-color theme('colors.pgray[4.5]') transparent transparent transparent
 
-  &-gray-2
-    @apply bg-gray-2 border-gray-2 text-white s("hover:bg-gray-3") s("hover:border-gray-3")
+  &-pgray-2
+    @apply bg-pgray-2 border-pgray-2 text-white s("hover:bg-pgray-3") s("hover:border-pgray-3")
 
     &.btn-outline
-      @apply text-gray-2 s("hover:text-gray-3")
+      @apply text-pgray-2 s("hover:text-pgray-3")
 
     .btn-loading
       .loading
         div
-          border-color theme('colors.gray.3') transparent transparent transparent
+          border-color theme('colors.pgray.3') transparent transparent transparent
 
   &-secondary
     @apply bg-secondary border-secondary text-white s("hover:bg-secondary-800") s("hover:border-secondary-800")
@@ -274,13 +274,13 @@ export default defineComponent({
     @apply bg-transparent border s("hover:bg-white")
 
   &-disabled
-    @apply bg-gray-5 border-gray-5 text-white cursor-default s("hover:bg-gray-5") s("hover:border-gray-5") s("hover:text-white")
+    @apply bg-pgray-5 border-pgray-5 text-white cursor-default s("hover:bg-pgray-5") s("hover:border-pgray-5") s("hover:text-white")
 
     &.btn-outline
-      @apply bg-white border-gray-5 text-gray-5 s("hover:bg-white") s("hover:border-gray-5") s("hover:text-gray-5")
+      @apply bg-white border-pgray-5 text-pgray-5 s("hover:bg-white") s("hover:border-pgray-5") s("hover:text-pgray-5")
 
     &.btn-icon
-      @apply bg-transparent border-transparent text-gray-5  s("hover:bg-transparent") s("hover:border-transparent") s("hover:text-gray-5")
+      @apply bg-transparent border-transparent text-pgray-5  s("hover:bg-transparent") s("hover:border-transparent") s("hover:text-pgray-5")
 
   &.loading
     @apply bg-primary-200 border-primary-200 cursor-default

package/components/SLCalendarButton.vue

@@ -244,7 +244,7 @@ export default defineComponent({
       @apply s('h-[37px]')
 
   .toggle-button
-    @apply inline-flex flex-col justify-center s('h-[58px]') s('px-2.75')  space-y-1 border s('border-white/20') rounded bg-white text-sm leading-normal text-gray-2
+    @apply inline-flex flex-col justify-center s('h-[58px]') s('px-2.75')  space-y-1 border s('border-white/20') rounded bg-white text-sm leading-normal text-pgray-2
 
     .date-range
       @apply flex items-center
@@ -259,7 +259,7 @@ export default defineComponent({
         @apply block s('ml-0.5') px-1 s('py-0.5') bg-primary-50 rounded text-xs text-primary
 
     .compare-date-range
-      @apply pl-1 space-x-2 text-sm text-gray-3
+      @apply pl-1 space-x-2 text-sm text-pgray-3
 
 .calendar-popup
   @apply z-60 absolute invisible pointer-events-none

package/components/SLCalendarPopup.vue

@@ -91,7 +91,7 @@
     .actions
       SLButton(
           size="lg"
-          color="gray-5"
+          color="pgray-5"
           title="取消"
           @click="onClickedCancel"
         )
@@ -762,19 +762,19 @@ export default defineComponent({
   @apply w-auto py-4 border border-primary-100 rounded-lg bg-white shadow-md overflow-hidden
 
   .popup-body
-    @apply flex s('mb-2.5') divide-x divide-gray-4
+    @apply flex s('mb-2.5') divide-x divide-pgray-4
 
   .popup-footer
-    @apply s('mx-3.75') border-t border-gray-4 text-center
+    @apply s('mx-3.75') border-t border-pgray-4 text-center
 
     .compare
-      @apply pt-4 text-base leading-normal text-gray-2
+      @apply pt-4 text-base leading-normal text-pgray-2
 
       .range1
         @apply  text-primary font-bold
 
       .range2
-        @apply text-gray-2 font-bold
+        @apply text-pgray-2 font-bold
 
     .actions
       @apply pt-4 space-x-8
@@ -783,7 +783,7 @@ export default defineComponent({
     @apply relative
 
     .quick-button
-      @apply relative block s('w-[7.4375rem]') s('pl-6.5') s('py-2') space-y-1 bg-white text-gray-3 s('hover:bg-primary-100') s('hover:text-gray-2')
+      @apply relative block s('w-[7.4375rem]') s('pl-6.5') s('py-2') space-y-1 bg-white text-pgray-3 s('hover:bg-primary-100') s('hover:text-pgray-2')
 
       &.selected
         @apply bg-primary-100 text-primary s('hover:text-primary')
@@ -799,7 +799,7 @@ export default defineComponent({
         @apply text-xs
 
     .quicks-divide
-      @apply h-px ml-1 my-1 bg-gray-4
+      @apply h-px ml-1 my-1 bg-pgray-4
       width calc(100% - theme('spacing.1'))
 
     .compare-switch
@@ -813,7 +813,7 @@ export default defineComponent({
 
     &-compare
       .calendar-header
-        @apply text-gray-2
+        @apply text-pgray-2
 
     &-header
       @apply s('pt-1.5') s('pb-1.75') s('space-y-0.5') border-b border-primary text-sm s('leading-4.75') text-primary
@@ -828,5 +828,5 @@ export default defineComponent({
       @apply space-y-2
 
       .data-date
-        @apply text-xs text-gray-2 text-right
+        @apply text-xs text-pgray-2 text-right
 </style>

package/components/SLCard.vue

@@ -91,13 +91,13 @@ export default defineComponent({
         @apply s('h-0.5') rounded-full bg-highlight-500
 
     .card-desc
-      @apply text-base text-gray-2
+      @apply text-base text-pgray-2
 
       .date-range
-        @apply ml-2 text-sm text-gray-3
+        @apply ml-2 text-sm text-pgray-3
 
     .inline-info
-      @apply mt-2 text-sm text-gray-3
+      @apply mt-2 text-sm text-pgray-3
 
   .card-body
     @apply relative
@@ -111,7 +111,7 @@ export default defineComponent({
     .card-header
       .card-title
         &-container
-          @apply mb-0 text-base text-gray-2
+          @apply mb-0 text-base text-pgray-2
 
         &-border
           @apply hidden

package/components/SLCheckbox.vue

@@ -151,7 +151,7 @@ export default defineComponent({
     @apply absolute s("-top-10") s("-left-10")
 
   label
-    @apply relative text-base text-gray-3 cursor-pointer
+    @apply relative text-base text-pgray-3 cursor-pointer
 
     .icon
       @apply hidden
@@ -180,8 +180,8 @@ export default defineComponent({
       @apply inline-block
 
   input:not(:checked):disabled + label
-    @apply text-gray-4 cursor-default pointer-events-none
+    @apply text-pgray-4 cursor-default pointer-events-none
 
   input:checked:disabled + label
-    @apply text-gray-3 cursor-default pointer-events-none
+    @apply text-pgray-3 cursor-default pointer-events-none
 </style>

package/components/SLCollapsableBlock.vue

@@ -113,7 +113,7 @@ export default defineComponent({
       @apply text-sm text-primary
 
     .collapse-block-title
-      @apply text-base text-gray-1 font-bold
+      @apply text-base text-pgray-1 font-bold
 
     .toggle-collapse-button
       @apply inline-flex items-center space-x-2

package/components/SLCollapsableMulitPillSelect.vue

@@ -75,7 +75,7 @@ export default defineComponent({
 <style lang="stylus">
 .collapsable-multi-pill-select
   .toggle-button
-    @apply inline-flex items-center justify-between w-80 p-2 mb-2 border border-primary-500 rounded text-base text-gray-2
+    @apply inline-flex items-center justify-between w-80 p-2 mb-2 border border-primary-500 rounded text-base text-pgray-2
 
     &.active
       .toggle-icon

package/components/SLConfirmModal.vue

@@ -47,7 +47,7 @@ export default defineComponent({
     },
     cancelButtonColor: {
       type: String,
-      default: "gray-5",
+      default: "pgray-5",
     },
     confirmButtonTitle: {
       type: String,

package/components/SLDateInput.vue

@@ -403,7 +403,7 @@ export default defineComponent({
 
 
   & > label
-    @apply mb-2 text-base leading-normal text-gray-2
+    @apply mb-2 text-base leading-normal text-pgray-2
 
   .is-invalid
     .input-group, .input-group.is-focus
@@ -440,10 +440,10 @@ export default defineComponent({
         @apply block absolute top-2 s('right-1.75') bottom-2 w-px bg-primary
 
     .inputs
-      @apply relative flex-grow flex items-center p-2 bg-white rounded-r border border-l-0 border-primary-500 text-base text-gray-2
+      @apply relative flex-grow flex items-center p-2 bg-white rounded-r border border-l-0 border-primary-500 text-base text-pgray-2
 
       input
-        @apply flex-grow bg-transparent text-base text-gray-2 text-left placeholder-gray-4 s('focus:outline-none')
+        @apply flex-grow bg-transparent text-base text-pgray-2 text-left placeholder-pgray-4 s('focus:outline-none')
         width: calc((100% - 25px) / 2)
 
       .date-range-split
@@ -453,7 +453,7 @@ export default defineComponent({
         @apply absolute right-0 mr-2 text-danger-light hidden
 
   .input-info
-    @apply mt-1 text-xs text-gray-3
+    @apply mt-1 text-xs text-pgray-3
 
   .invalid-feedback
     @apply hidden text-danger text-xs

package/components/SLDownloadButton.vue

@@ -390,7 +390,7 @@ export default defineComponent({
 
   &.disabled
     .download-button-toggle
-      @apply border-gray-5 text-gray-5 cursor-default
+      @apply border-pgray-5 text-pgray-5 cursor-default
 
   &-toggle
     @apply inline-flex justify-center items-center s('w-[28px]') s('h-[28px]') bg-white border border-primary-600 rounded text-lg text-primary-600
@@ -405,6 +405,6 @@ export default defineComponent({
     @apply visible pointer-events-auto
 
   .download-option
-    @apply block p-2 bg-white text-sm text-gray-3
+    @apply block p-2 bg-white text-sm text-pgray-3
     @apply s('hover:bg-primary-100') s('hover:text-primary')
 </style>

package/components/SLDropdown.vue

@@ -251,10 +251,10 @@ export default defineComponent({
         @apply text-primary-600 rotate-180
 
   &-toggle
-    @apply flex items-center s('p-1.75') border border-primary-500 rounded bg-white space-x-2 text-base text-gray-2 whitespace-nowrap
+    @apply flex items-center s('p-1.75') border border-primary-500 rounded bg-white space-x-2 text-base text-pgray-2 whitespace-nowrap
 
     .toggle-icon
-      @apply text-xs leading-none text-gray-2 transition-transform transform
+      @apply text-xs leading-none text-pgray-2 transition-transform transform
 
   &-menu
     @apply z-50 flex flex-col max-h-48 border border-primary-500 rounded bg-white shadow-md overflow-hidden invisible pointer-events-none

package/components/SLEyeCheckbox.vue

@@ -132,7 +132,7 @@ export default defineComponent({
     @apply absolute s('-top-10') s('-left-10')
 
   label
-    @apply relative inline-flex items-center text-base text-gray-2 cursor-pointer
+    @apply relative inline-flex items-center text-base text-pgray-2 cursor-pointer
 
     .icon
       @apply hidden text-primary
@@ -149,14 +149,14 @@ export default defineComponent({
       @apply inline-block
 
   input:not(:checked):disabled + label
-    @apply text-gray-4 cursor-default
+    @apply text-pgray-4 cursor-default
 
     .icon-eye-slash
-      @apply inline-block text-gray-4
+      @apply inline-block text-pgray-4
 
   input:checked:disabled + label
-    @apply text-gray-3 cursor-default
+    @apply text-pgray-3 cursor-default
 
     .icon-eye
-      @apply inline-block text-gray-3
+      @apply inline-block text-pgray-3
 </style>

package/components/SLFileInput.vue

@@ -97,5 +97,5 @@ export default defineComponent({
       @apply absolute top-0 left-0
 
   .filename
-    @apply s("p-1.75") border border-primary-300 rounded bg-primary-50 text-base text-gray-2
+    @apply s("p-1.75") border border-primary-300 rounded bg-primary-50 text-base text-pgray-2
 </style>

package/components/SLGenderAgeSelect.vue

@@ -235,7 +235,7 @@ export default defineComponent({
   @apply relative inline-flex
 
   .toggle-button
-    @apply inline-flex items-center justify-between w-full s('p-1.75') border border-primary-500 rounded space-x-4 text-sm text-gray-2
+    @apply inline-flex items-center justify-between w-full s('p-1.75') border border-primary-500 rounded space-x-4 text-sm text-pgray-2
 
     .toggle-title
       @apply flex-grow truncate
@@ -275,5 +275,5 @@ export default defineComponent({
               @apply ml-1
 
   .options-divide
-    @apply flex-grow-0 flex-shrink-0 w-px ml-3 s('mr-2.75') bg-gray-4
+    @apply flex-grow-0 flex-shrink-0 w-px ml-3 s('mr-2.75') bg-pgray-4
 </style>

package/components/SLHourRangeInput.vue

@@ -183,7 +183,7 @@ export default defineComponent({
 
 
   & > label
-    @apply flex items-center mb-2 space-x-2 text-base leading-normal text-gray-2
+    @apply flex items-center mb-2 space-x-2 text-base leading-normal text-pgray-2
 
     .icon
       @apply text-xs leading-none
@@ -198,7 +198,7 @@ export default defineComponent({
       @apply border-danger
 
     input[type=text]
-      @apply flex-grow-0 flex-shrink-0 s('w-4.75') border-0 bg-transparent text-base text-center text-gray-2 outline-none
+      @apply flex-grow-0 flex-shrink-0 s('w-4.75') border-0 bg-transparent text-base text-center text-pgray-2 outline-none
 
     .minutes-label
       @apply flex-grow-0 flex-shrink-0

package/components/SLInfoTip.vue

@@ -211,7 +211,7 @@ export default defineComponent({
               content '\e943'
 
     &-content
-      @apply relative py-5 pl-4 pr-6 border s('border-primary-600/50') rounded-lg bg-white text-sm text-gray-2 text-left font-normal whitespace-normal shadow-popup-sm
+      @apply relative py-5 pl-4 pr-6 border s('border-primary-600/50') rounded-lg bg-white text-sm text-pgray-2 text-left font-normal whitespace-normal shadow-popup-sm
 
       .pin-toggle
         @apply absolute top-0 right-0 mt-2 mr-2 text-base text-primary-600

package/components/SLLegend.vue

@@ -63,10 +63,10 @@ export default defineComponent({
   @apply text-center
 
   &-item
-    @apply inline-flex items-center mx-2 text-base text-gray-2
+    @apply inline-flex items-center mx-2 text-base text-pgray-2
 
     &.unactive
-      @apply text-gray-5
+      @apply text-pgray-5
 
     .item-icon
       @apply mr-1

package/components/SLLink.vue

@@ -155,7 +155,7 @@ export default defineComponent({
     @apply pointer-events-none
 
   &-tooltip
-    @apply p-1 bg-gray-2 text-xs text-white whitespace-nowrap shadow invisible
+    @apply p-1 bg-pgray-2 text-xs text-white whitespace-nowrap shadow invisible
 
     &[data-show]
       @apply visible

package/components/SLMonthCalendarButton.vue

@@ -345,9 +345,9 @@ export default defineComponent({
       .button-title
         @apply space-y-1 text-end
         .current-month
-          @apply text-lg text-gray-2
+          @apply text-lg text-pgray-2
         .compare-month
-          @apply text-xs text-gray-3
+          @apply text-xs text-pgray-3
 .month-calendar-popup
   @apply z-50 s('p-3.75') space-y-4 bg-white border border-primary-100 rounded-lg shadow-md hidden
 
@@ -370,9 +370,9 @@ export default defineComponent({
   .popup-body
     @apply flex
     .calendar-divide
-      @apply w-px s('ml-4') s('mr-3.75') bg-gray-4
+      @apply w-px s('ml-4') s('mr-3.75') bg-pgray-4
   .popup-footer
-    @apply pt-4 space-x-6 border-t border-gray-4 text-center
+    @apply pt-4 space-x-6 border-t border-pgray-4 text-center
     .cancel-button
-      @apply text-base text-gray-3
+      @apply text-base text-pgray-3
 </style>

package/components/SLMonthPicker.vue

@@ -127,25 +127,25 @@ export default defineComponent({
     @apply flex items-center justify-center space-x-10
 
     .prev-button, .next-button
-      @apply inline-flex items-center text-xs text-gray-3
+      @apply inline-flex items-center text-xs text-pgray-3
 
       &.disabled
-        @apply text-gray-5 cursor-default
+        @apply text-pgray-5 cursor-default
 
     .year
-      @apply text-sm text-gray-2
+      @apply text-sm text-pgray-2
 
   .month-select
     &-wrapper
       @apply flex flex-wrap s('-my-2') s('-mx-4')
 
       .month-button
-        @apply flex items-center justify-center s('w-[42px]') s('h-[27px]') s('my-2') s('mx-4') bg-white rounded text-sm text-gray-3
+        @apply flex items-center justify-center s('w-[42px]') s('h-[27px]') s('my-2') s('mx-4') bg-white rounded text-sm text-pgray-3
         @apply s('hover:bg-primary-300') s('hover:text-white')
 
         &.selected
           @apply text-white
 
         &.disabled
-          @apply bg-white text-gray-5
+          @apply bg-white text-pgray-5
 </style>

package/components/SLMultiEmailInput.vue

@@ -5,10 +5,10 @@
       span 與其他使用者共用
       SLInfoTip(placement="top", :pinnable='false')
         .space-y-3
-          .flex.items-center.text-sm.text-gray-2
+          .flex.items-center.text-sm.text-pgray-2
             SLIcon.text-highlight-500(icon="check-circle")
             span.whitespace-nowrap ：確認帳號存在 SKYLENS
-          .flex.items-center.text-sm.text-gray-2
+          .flex.items-center.text-sm.text-pgray-2
             SLIcon.text-danger(icon='exclamation-circle')
             span.whitespace-nowrap ：帳號可能不存在 SKYLENS , 需請帳號管理者新增
     .right-block
@@ -626,7 +626,7 @@ export default defineComponent({
     @apply flex items-center justify-between mb-2 cursor-default
 
     .left-block
-      @apply flex-grow-0 flex-shrink-0 flex items-center text-base text-gray-2
+      @apply flex-grow-0 flex-shrink-0 flex items-center text-base text-pgray-2
 
     .right-block
       @apply flex-grow-0 flex-shrink-0 text-xs hidden
@@ -651,7 +651,7 @@ export default defineComponent({
           @apply flex flex-col items-start space-y-2 overflow-hidden
 
           .email-item
-            @apply inline-flex items-center justify-start max-w-full s('px-1.75') s('py-0.5') space-x-2 bg-white border border-primary-300 rounded-full text-base text-gray-2
+            @apply inline-flex items-center justify-start max-w-full s('px-1.75') s('py-0.5') space-x-2 bg-white border border-primary-300 rounded-full text-base text-pgray-2
 
             &-email
               @apply flex-grow truncate
@@ -672,7 +672,7 @@ export default defineComponent({
               @apply text-xs
 
       textarea
-        @apply flex-grow-0 flex-shrink-0 block w-full p-0 border-0 bg-white text-sm text-gray-2 resize-none s('focus:outline-none')
+        @apply flex-grow-0 flex-shrink-0 block w-full p-0 border-0 bg-white text-sm text-pgray-2 resize-none s('focus:outline-none')
 
     .multi-email-input-role
       @apply flex-grow-0 flex-shrink-0 flex
@@ -703,7 +703,7 @@ export default defineComponent({
   :deep(.swiper-scrollbar-drag)
     @apply bg-primary-300
   .autotcomplete-item
-    @apply block w-full py-1 px-2 bg-white text-sm text-gray-2
+    @apply block w-full py-1 px-2 bg-white text-sm text-pgray-2
     &:hover, &.focused
       @apply bg-primary-100
 </style>

package/components/SLMultiSelect.vue

@@ -10,7 +10,7 @@
       )
         span.option-label {{ option.label }}
         span.btn.btn-apply(v-if='!option.selected') {{ applyTitle }}
-        span.btn.btn-gray-5(v-else) {{ cancelTitle }}
+        span.btn.btn-pgray-5(v-else) {{ cancelTitle }}
 </template>
 
 <script lang="ts">
@@ -114,7 +114,7 @@ export default defineComponent({
             @apply bg-primary
 
       .option-label
-        @apply flex-grow inline-block text-base leading-normal text-gray-2 truncate
+        @apply flex-grow inline-block text-base leading-normal text-pgray-2 truncate
 
       .btn
         @apply flex-grow-0 flex-shrink-0 inline-block px-2 py-1 bg-primary rounded text-base leading-normal text-white opacity-0

package/components/SLNoData.vue

@@ -39,5 +39,5 @@ export default defineComponent({
     @apply text-lg text-primary-500
 
   &-reason
-    @apply text-sm text-gray-3
+    @apply text-sm text-pgray-3
 </style>

package/components/SLPagination.vue

@@ -148,7 +148,7 @@ export default defineComponent({
   @apply flex items-center justify-end
 
   &-info
-    @apply inline-flex items-center mr-4 s('space-x-0.5') text-base text-gray-2
+    @apply inline-flex items-center mr-4 s('space-x-0.5') text-base text-pgray-2
 
     .custom-select
       @apply s('min-w-[2.3125rem]')

package/components/SLPillCheckbox.vue

@@ -186,7 +186,7 @@ export default defineComponent({
 
   label
     @apply inline-flex justify-center items-center relative s('px-1.75') s('py-0.75')
-    @apply bg-white border border-primary-300 rounded-full text-sm s('leading-4.75') text-gray-2 align-top cursor-pointer
+    @apply bg-white border border-primary-300 rounded-full text-sm s('leading-4.75') text-pgray-2 align-top cursor-pointer
 
     .icon
       @apply hidden ml-2
@@ -198,5 +198,5 @@ export default defineComponent({
       @apply inline-block
 
   input:disabled + label
-    @apply bg-white border-gray-5 text-gray-4 font-normal cursor-default
+    @apply bg-white border-pgray-5 text-pgray-4 font-normal cursor-default
 </style>

package/components/SLPillLabel.vue

@@ -74,7 +74,7 @@ export default defineComponent({
     @apply py-px text-sm
 
   &.pill-label-white
-    @apply text-gray-2
+    @apply text-pgray-2
 
   &.pill-label-third-500
     @apply bg-third-500 border-third-500

package/components/SLProjectShareItem.vue

@@ -75,7 +75,7 @@ export default defineComponent({
   @apply flex items-center justify-between space-x-4
 
   .item-info
-    @apply flex-grow text-sm text-gray-2 truncate
+    @apply flex-grow text-sm text-pgray-2 truncate
 
   .item-actions
     @apply flex-grow-0 flex-shrink-0

package/components/SLRadioButton.vue

@@ -78,16 +78,16 @@ export default defineComponent({
     @apply relative inline-flex flex-col items-start space-y-1 cursor-pointer
 
     .radio-button-wrapper
-      @apply inline-flex items-center text-base text-gray-3
+      @apply inline-flex items-center text-base text-pgray-3
 
       .icon
         @apply hidden
 
       span
-        @apply ml-1 text-base text-gray-2
+        @apply ml-1 text-base text-pgray-2
 
     .radio-button-desc
-      @apply pl-5 text-xs text-gray-2
+      @apply pl-5 text-xs text-pgray-2
 
   input:not(:checked) + label
     .radio-button-wrapper
@@ -102,11 +102,11 @@ export default defineComponent({
   input:disabled + label
     .radio-button-wrapper
       span
-        @apply text-gray-3
+        @apply text-pgray-3
 
       .icon-circle
-        @apply text-gray-3
+        @apply text-pgray-3
 
       .icon-dot-circle
-        @apply text-gray-3
+        @apply text-pgray-3
 </style>

package/components/SLRadioButtonGroup.vue

@@ -89,7 +89,7 @@ export default defineComponent({
       @apply block
 
   & > label
-    @apply mb-2 text-base text-gray-2 align-top
+    @apply mb-2 text-base text-pgray-2 align-top
 
   .form-control
     @apply flex flex-col space-y-1

package/components/SLRadioGroup.vue

@@ -188,7 +188,7 @@ export default defineComponent({
           @apply bg-insight-title text-white
 
   &.disabled
-    @apply bg-gray-6 border-gray-6
+    @apply bg-pgray-6 border-pgray-6
 
   .radio
     @apply relative inline-flex
@@ -205,5 +205,5 @@ export default defineComponent({
 
     input:disabled + .element-with-title
       label
-        @apply bg-gray-6 text-gray-4 cursor-default
+        @apply bg-pgray-6 text-pgray-4 cursor-default
 </style>  

package/components/SLRangeInput.vue

@@ -178,13 +178,13 @@ export default defineComponent({
     .input-group
       .input-range-group
         .range-input-accept-values
-          @apply text-gray-4
+          @apply text-pgray-4
 
       input[type=text]
         @apply border-primary-600 bg-primary-100
 
   & > label
-    @apply mb-2 text-base leading-normal text-gray-2
+    @apply mb-2 text-base leading-normal text-pgray-2
 
   .is-invalid
     .invalid-feedback
@@ -198,10 +198,10 @@ export default defineComponent({
       @apply flex-grow
 
       .range-input-accept-values
-        @apply flex justify-between mb-1 text-sm text-gray-3
+        @apply flex justify-between mb-1 text-sm text-pgray-3
 
     input[type=text]
-      @apply flex-grow-0 flex-shrink-0 w-11 bg-white border border-primary-600 rounded text-base text-center text-gray-2
+      @apply flex-grow-0 flex-shrink-0 w-11 bg-white border border-primary-600 rounded text-base text-center text-pgray-2
       @apply s('focus:outline-none')
 
   .invalid-feedback

package/components/SLSearchInput.vue

@@ -94,6 +94,6 @@ export default defineComponent({
       @apply w-px h-full my-px bg-primary-600
 
     .btn
-      @apply p-0 border-0 text-gray-3 s('focus:outline-none') s('active:outline-none')
+      @apply p-0 border-0 text-pgray-3 s('focus:outline-none') s('active:outline-none')
 </style>
     

package/components/SLSelect.vue

@@ -478,13 +478,13 @@ export default defineComponent({
   &.disabled, &.readonly
     .form-control
       label
-        @apply border-primary-600 bg-primary-100 text-gray-4 cursor-default
+        @apply border-primary-600 bg-primary-100 text-pgray-4 cursor-default
 
         .icon
-          @apply text-gray-4
+          @apply text-pgray-4
 
   .input-label
-    @apply mb-2 text-base leading-normal text-gray-2
+    @apply mb-2 text-base leading-normal text-pgray-2
 
   .form-control
     @apply relative block overflow-hidden
@@ -500,16 +500,16 @@ export default defineComponent({
       @apply absolute outline-none
 
     label
-      @apply relative flex items-center s("p-1.75") bg-white border border-primary-600 rounded text-base leading-normal text-gray-4 space-x-2 cursor-pointer
+      @apply relative flex items-center s("p-1.75") bg-white border border-primary-600 rounded text-base leading-normal text-pgray-4 space-x-2 cursor-pointer
 
       &.selected
-        @apply text-gray-2
+        @apply text-pgray-2
 
       .button-title
         @apply flex-grow truncate
 
       .icon
-        @apply flex-grow-0 flex-shrink-0 text-xs text-gray-2
+        @apply flex-grow-0 flex-shrink-0 text-xs text-pgray-2
 
   .invalid-feedback
     @apply hidden text-danger text-xs
@@ -540,7 +540,7 @@ export default defineComponent({
     @apply flex flex-col
 
     .option-button
-      @apply block s("min-w-[10.125rem]") s('p-1.75') bg-white text-base leading-normal text-gray-3 s("hover:bg-primary-100") s("hover:text-primary")
+      @apply block s("min-w-[10.125rem]") s('p-1.75') bg-white text-base leading-normal text-pgray-3 s("hover:bg-primary-100") s("hover:text-primary")
 
       &.selected
         @apply bg-primary-100 text-primary
@@ -552,7 +552,7 @@ export default defineComponent({
           @apply inline-block
 
       &.disabled
-        @apply cursor-default s("hover:bg-white") s("hover:text-gray-3")
+        @apply cursor-default s("hover:bg-white") s("hover:text-pgray-3")
 
       .icon
         @apply mr-2

package/components/SLSidebarNavSectionItem.vue

@@ -55,5 +55,5 @@ export default defineComponent({
   @apply flex flex-col space-y-1
 
   &-header
-    @apply text-xs text-gray-3
+    @apply text-xs text-pgray-3
 </style>

package/components/SLSitePage.vue

@@ -129,7 +129,7 @@ export default defineComponent({
         @apply flex mt-2
 
   &-notice
-    @apply mb-4 pl-2 pr-20 py-3 s('bg-[#FBFCFF]') rounded-lg text-sm text-gray-2
+    @apply mb-4 pl-2 pr-20 py-3 s('bg-[#FBFCFF]') rounded-lg text-sm text-pgray-2
 
   &-content
     @apply flex flex-col flex-grow w-full px-4 pt-4 pb-8 rounded-lg bg-white

package/components/SLSortByDropdown.vue

@@ -183,7 +183,7 @@ export default defineComponent({
       @apply inline-flex
 
     .sort-by-dropdown-item
-      @apply inline-flex p-2 bg-white text-sm text-gray-3
+      @apply inline-flex p-2 bg-white text-sm text-pgray-3
       &.active
         @apply bg-primary-100 text-primary
 </style>

package/components/SLStayRangeInput.vue

@@ -275,7 +275,7 @@ export default defineComponent({
 
 
   & > label
-    @apply mb-2 text-base leading-normal text-gray-2
+    @apply mb-2 text-base leading-normal text-pgray-2
 
   .is-invalid
     .input-group
@@ -293,7 +293,7 @@ export default defineComponent({
     @apply flex-grow flex flex-nowrap space-x-2
 
     input[type=text]
-      @apply flex-grow-0 flex-shrink-0 w-11 border border-primary-600 rounded text-base text-center text-gray-2 outline-none
+      @apply flex-grow-0 flex-shrink-0 w-11 border border-primary-600 rounded text-base text-center text-pgray-2 outline-none
 
     .custom-select
       @apply w-full

package/components/SLTable.vue

@@ -92,7 +92,7 @@
                 .flex.flex-col.items-center.py-8.px-4.space-y-3
                   img(src="~/assets/images/commons/empty-box.png")
                   .text-lg.text-primary-600 {{ noItems }}
-                  .text-sm.text-gray-3(v-if="reason") 可能的原因：{{ reason }}
+                  .text-sm.text-pgray-3(v-if="reason") 可能的原因：{{ reason }}
       SLLoading(
         v-if="loading"
         :boundaries="[{ sides: ['top'], query: 'td' }, { sides: ['bottom'], query: 'tbody' }]"
@@ -425,7 +425,7 @@
               @apply bg-primary-50 text-lg font-bold shadow-inline
 
           td
-            @apply p-2 border-b border-opacity-50 text-base text-gray-2
+            @apply p-2 border-b border-opacity-50 text-base text-pgray-2
 
             &.text-right.sortable
                 @apply pr-8
@@ -440,7 +440,7 @@
       @apply flex flex-col
 
       .table-header-filter-item
-        @apply inline-flex justify-center p-2 bg-white text-sm text-gray-3
+        @apply inline-flex justify-center p-2 bg-white text-sm text-pgray-3
         @apply s('hover:bg-primary-50')
 
         &.active

package/components/SLTableTooltip.vue

@@ -11,7 +11,7 @@
             tr(v-if="formatedDateRanges[index]").date-row
               td(
                 colspan="3"
-                :class="{'text-gray-3': index + 1 < 2, 'text-primary': index + 1 > 1}"
+                :class="{'text-pgray-3': index + 1 < 2, 'text-primary': index + 1 > 1}"
               ) {{ formatedDateRanges[index] }}
             tr.header-row(:class='headerBorderColor')
               th(v-for="field in fields" :key="field.key") {{ field.label }}
@@ -75,21 +75,21 @@ export default defineComponent({
   @apply inline-block p-4 border border-primary-600 rounded bg-white shadow-popup-sm pointer-events-none
 
   &-title
-    @apply mb-4 text-base text-gray-2 font-bold
+    @apply mb-4 text-base text-pgray-2 font-bold
 
     &:not(:last-child)
       @apply mb-1
 
   &-caption
-    @apply mb-2 text-sm text-gray-2
+    @apply mb-2 text-sm text-pgray-2
 
   table
-    @apply w-full text-base text-gray-2
+    @apply w-full text-base text-pgray-2
 
     tbody
       tr
         &.date-row
-          @apply text-gray-3
+          @apply text-pgray-3
 
           td
             @apply pt-4

package/components/SLTabs.vue

@@ -416,10 +416,10 @@ export default defineComponent({
 
           &.disabled
             .tab-nav-item-link
-              @apply text-gray-4 cursor-default
+              @apply text-pgray-4 cursor-default
 
           &-link
-            @apply relative block  px-4 pb-2 text-lg text-gray-2
+            @apply relative block  px-4 pb-2 text-lg text-pgray-2
 
             &-title
               @apply truncate
@@ -438,7 +438,7 @@ export default defineComponent({
         .tabs-nav-left
           &:before
             content ""
-            @apply absolute right-0 bottom-0 left-0 h-1 bg-gray-5
+            @apply absolute right-0 bottom-0 left-0 h-1 bg-pgray-5
 
       .tabs-nav-left
         @apply relative flex-grow-0 flex-shrink-0
@@ -462,7 +462,7 @@ export default defineComponent({
 
           &.disabled
             .tab-nav-item-link
-              @apply text-gray-4 cursor-default
+              @apply text-pgray-4 cursor-default
 
           &-link
             @apply relative block pt-1 px-6 pb-2 text-base text-secondary-500

package/components/SLTextInput.vue

@@ -286,7 +286,7 @@ export default defineComponent({
         @apply border-primary-600 bg-primary-100
 
   & > label
-    @apply w-full mb-2 text-base leading-normal text-gray-2
+    @apply w-full mb-2 text-base leading-normal text-pgray-2
 
     .required
       @apply text-danger
@@ -344,13 +344,13 @@ export default defineComponent({
         @apply rounded-r-none border-r-0
 
       input
-        @apply flex-grow w-full bg-transparent text-gray-2 placeholder-gray-4 s('focus:outline-none')
+        @apply flex-grow w-full bg-transparent text-pgray-2 placeholder-pgray-4 s('focus:outline-none')
 
       .icon
         @apply flex-grow-0 flex-shrink-0 hidden text-danger-light
 
       .float-label
-        @apply hidden absolute top-0 left-0 s('p-1.75') border-t border-b border-transparent text-gray-3 cursor-text
+        @apply hidden absolute top-0 left-0 s('p-1.75') border-t border-b border-transparent text-pgray-3 cursor-text
 
     &-append
       @apply flex-grow-0 flex-shrink-0

package/components/SLTextarea.vue

@@ -108,7 +108,7 @@ export default defineComponent({
       @apply border-primary-600 bg-primary-100
 
   label
-    @apply mb-2 text-base leading-normal text-gray-2
+    @apply mb-2 text-base leading-normal text-pgray-2
 
   .is-invalid
     textarea
@@ -121,13 +121,13 @@ export default defineComponent({
     @apply relative
 
   textarea
-    @apply block w-full p-2 border border-primary-600 rounded bg-white text-base text-gray-2 resize-none s('focus:border-primary') s('focus:outline-none')
+    @apply block w-full p-2 border border-primary-600 rounded bg-white text-base text-pgray-2 resize-none s('focus:border-primary') s('focus:outline-none')
 
   textarea:focus + .textarea-placeholder
     @apply invisible
 
   .form-control-notice
-    @apply inline-block ml-1 text-gray-3 text-xs
+    @apply inline-block ml-1 text-pgray-3 text-xs
 
   .invalid-feedback
     @apply hidden text-danger text-xs

package/components/SLToggleButton.vue

@@ -74,5 +74,5 @@ export default defineComponent({
     @apply bg-primary-600 text-white
 
   &.disabled
-    @apply bg-gray-5 text-white cursor-default
+    @apply bg-pgray-5 text-white cursor-default
 </style>

package/components/SLTwoLayerMultiSelect.vue

@@ -354,16 +354,16 @@ export default defineComponent({
       @apply border-primary-600
 
   .toggle-button
-    @apply relative flex items-center w-full s('p-1.75') s('space-x-1.75') border border-primary-600 rounded text-base text-gray-4
+    @apply relative flex items-center w-full s('p-1.75') s('space-x-1.75') border border-primary-600 rounded text-base text-pgray-4
 
     &.selected
-      @apply text-gray-2
+      @apply text-pgray-2
 
     .button-title
       @apply flex-grow
 
     .icon
-      @apply flex-grow-0 flex-shrink-0 inline-flex text-xs text-gray-2 leading-none
+      @apply flex-grow-0 flex-shrink-0 inline-flex text-xs text-pgray-2 leading-none
 
   .select-menu-popup
     @apply z-10 flex flex-col s("h-67.75") s('min-w-[552px]') w-full s("pt-2.75") s("px-2.75") bg-white border border-primary-100 rounded shadow invisible pointer-events-none
@@ -411,7 +411,7 @@ export default defineComponent({
 
           .list
             .item
-              @apply relative flex items-center justify-start flex-nowrap s('py-1.5') px-2 s('space-x-2.5') text-sm text-gray-3
+              @apply relative flex items-center justify-start flex-nowrap s('py-1.5') px-2 s('space-x-2.5') text-sm text-pgray-3
               @apply s('hover:bg-primary-100')
 
               &.checked
@@ -441,5 +441,5 @@ export default defineComponent({
                 @apply flex-grow block truncate
 
       &-divider
-        @apply flex-grow-0 flex-shrink-0 w-px h-auto mb-3 s("mr-2.75") ml-3 bg-gray-4
+        @apply flex-grow-0 flex-shrink-0 w-px h-auto mb-3 s("mr-2.75") ml-3 bg-pgray-4
 </style>

package/components/SLTwoLayerSelect.vue

@@ -40,7 +40,7 @@
           )
             span {{ layer.name }}
             //- .highlight-dot
-  .select-body-empty.flex.items-center.justify-center.h-full.pb-3.text-sm.text-gray-3(v-else-if='query !== "" && firstLayers.length === 0') {{ emptyMessage }}
+  .select-body-empty.flex.items-center.justify-center.h-full.pb-3.text-sm.text-pgray-3(v-else-if='query !== "" && firstLayers.length === 0') {{ emptyMessage }}
 </template>
 
 <script lang="ts">
@@ -252,7 +252,7 @@ export default defineComponent({
 
         .list
           .item
-            @apply relative block s('py-1.5') px-2 s("hover:bg-primary-50") text-sm text-gray-3 truncate
+            @apply relative block s('py-1.5') px-2 s("hover:bg-primary-50") text-sm text-pgray-3 truncate
 
             &.selected
               @apply bg-primary-100 text-primary
@@ -261,5 +261,5 @@ export default defineComponent({
               @apply absolute top-0 left-0 s('w-1.5') s('h-1.5') mt-2 ml-1 bg-red rounded-full
 
     &-divider
-      @apply flex-grow-0 flex-shrink-0 w-px h-auto mb-3 s("mr-2.75") ml-3 bg-gray-4
+      @apply flex-grow-0 flex-shrink-0 w-px h-auto mb-3 s("mr-2.75") ml-3 bg-pgray-4
 </style>

package/components/SLTwoLayerSingleSelect.vue

@@ -294,16 +294,16 @@ export default defineComponent({
       @apply text-sm
 
   .toggle-button
-    @apply relative flex items-center w-full s('p-1.75') s('space-x-1.75') border border-primary-600 rounded text-base text-gray-4
+    @apply relative flex items-center w-full s('p-1.75') s('space-x-1.75') border border-primary-600 rounded text-base text-pgray-4
 
     &.selected
-      @apply text-gray-2
+      @apply text-pgray-2
 
     .button-title
       @apply flex-grow
 
     .icon
-      @apply flex-grow-0 flex-shrink-0 inline-flex text-xs text-gray-2 leading-none
+      @apply flex-grow-0 flex-shrink-0 inline-flex text-xs text-pgray-2 leading-none
 
   .tw-layer-select
     @apply z-10 invisible pointer-events-none

package/components/SLWarnModal.vue

@@ -68,7 +68,7 @@ export default defineComponent({
 .warn-modal
   .modal-body
     &-content
-      @apply flex flex-col items-center space-y-6 text-base text-gray-2
+      @apply flex flex-col items-center space-y-6 text-base text-pgray-2
 
       .icon
         @apply text-16xl

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mptw/skylens-ui",
   "type": "module",
-  "version": "1.4.43",
+  "version": "1.4.44",
   "main": "./nuxt.config.ts",
   "scripts": {
     "dev": "nuxi dev .playground",

package/tailwind.config.js

@@ -77,7 +77,7 @@ module.exports = {
           2: '#F34141',
           DEFAULT: '#EB5757',
         },
-        gray: {
+        pgray: {
           1: '#2C2D31',
           2: '#4D4F55',
           3: '#858792',
@@ -86,6 +86,14 @@ module.exports = {
           5: '#DFE1E9',
           6: '#ECECF2',
         },
+        gray: {
+          1: '#333333',
+          2: '#4F4F4F',
+          3: '#828282',
+          4: '#BDBDBD',
+          5: '#E0E0E0',
+          6: '#F2F2F2',
+        },
         green: {
           2: '#6EC393',
           DEFAULT: '#27AE60',