@mptw/skylens-ui 1.4.15 → 1.4.17

package/components/SLLoading.vue

@@ -27,7 +27,7 @@ export default defineComponent({
     color: {
       type: String,
       default: "primary",
-      validator: (value: string) => ["primary", "secondary"].includes(value),
+      validator: (value: string) => ["primary", "highlight-500"].includes(value),
     },
     bgAlpha: {
       type: Number,
@@ -89,18 +89,18 @@ export default defineComponent({
   @apply z-10
 
   &-primary
-    @apply s('bg-primary-lighter/20')
+    @apply s('bg-primary-300/20')
 
     .loading
       div
         border-color theme('colors.primary.DEFAULT') transparent transparent transparent
 
-  &-secondary
-    @apply s('bg-secondary/20')
+  &-highlight-500
+    @apply s('bg-highlight-500/20')
 
     .loading
       div
-        border-color theme('colors.secondary.DEFAULT') transparent transparent transparent
+        border-color theme('colors.highlight.500') transparent transparent transparent
 
   .loading
     @apply relative inline-block w-12 h-12

package/components/SLModal.vue

@@ -299,7 +299,7 @@ export default defineComponent({
     @apply absolute top-0 left-0 w-full h-full
 
     &.show
-      @apply s('bg-backdrop/80')
+      @apply s('bg-mask/80')
 
   .modal-dialog
     @apply relative w-full my-7 mx-auto

package/components/SLMonthCalendarButton.vue

@@ -335,7 +335,7 @@ export default defineComponent({
   @apply inline-flex
 
   &-toggle
-    @apply inline-flex items-center justify-center s('min-w-[163px]') s('min-h-[58px]') py-1 px-4 bg-white border border-primary-light rounded shadow
+    @apply inline-flex items-center justify-center s('min-w-[163px]') s('min-h-[58px]') py-1 px-4 bg-white border border-primary-500 rounded shadow
     .toggle-wrapper
       @apply inline-flex items-center
       .icon
@@ -349,7 +349,7 @@ export default defineComponent({
         .compare-month
           @apply text-xs text-gray-3
 .month-calendar-popup
-  @apply z-50 s('p-3.75') space-y-4 bg-white border border-bg rounded-lg shadow-md hidden
+  @apply z-50 s('p-3.75') space-y-4 bg-white border border-primary-100 rounded-lg shadow-md hidden
 
   &[data-show]
     @apply block
@@ -358,7 +358,7 @@ export default defineComponent({
     .compare-switch
       @apply inline-flex items-center space-x-px
       .compare-switch-button
-        @apply block s('py-0.75') s('px-3.75') bg-white border border-primary-lighter text-sm text-insight-title
+        @apply block s('py-0.75') s('px-3.75') bg-white border border-primary-300 text-sm text-insight-title
 
         &:first-child
           @apply rounded-l s('rounded-r-[1px]')

package/components/SLMonthPicker.vue

@@ -141,11 +141,11 @@ export default defineComponent({
 
       .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 s('hover:bg-primary-lighter') s('hover:text-white')
+        @apply s('hover:bg-primary-300') s('hover:text-white')
 
         &.selected
           @apply text-white
 
         &.disabled
-          @apply bg-white text-cancel
+          @apply bg-white text-gray-5
 </style>

package/components/SLMultiEmailInput.vue

@@ -6,7 +6,7 @@
       SLInfoTip(placement="top", :pinnable='false')
         .space-y-3
           .flex.items-center.text-sm.text-gray-2
-            SLIcon.text-secondary(icon="check-circle")
+            SLIcon.text-highlight-500(icon="check-circle")
             span.whitespace-nowrap ：確認帳號存在 SKYLENS
           .flex.items-center.text-sm.text-gray-2
             SLIcon.text-danger(icon='exclamation-circle')
@@ -639,7 +639,7 @@ export default defineComponent({
       @apply flex items-start space-x-4
 
     .emails-input
-      @apply flex-grow flex items-center s('p-1.75') space-x-4 bg-white border border-primary-light rounded overflow-hidden
+      @apply flex-grow flex items-center s('p-1.75') space-x-4 bg-white border border-primary-500 rounded overflow-hidden
 
       &-wrapper
         @apply flex-grow space-y-2 overflow-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-lighter 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-gray-2
 
             &-email
               @apply flex-grow truncate
@@ -660,10 +660,10 @@ export default defineComponent({
               @apply flex-grow-0 flex-shrink-0
 
               .icon-loading
-                @apply text-third
+                @apply text-third-500
 
               .icon-success
-                @apply text-secondary
+                @apply text-highlight-500
 
               .icon-warn
                 @apply text-danger
@@ -701,11 +701,11 @@ export default defineComponent({
     @apply top-0 right-0 h-full bg-transparent
 
   :deep(.swiper-scrollbar-drag)
-    @apply bg-primary-lighter
+    @apply bg-primary-300
   .autotcomplete-item
     @apply block w-full py-1 px-2 bg-white text-sm text-gray-2
     &:hover, &.focused
-      @apply bg-bg
+      @apply bg-primary-100
 </style>
 
 <style lang="stylus">

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-cancel(v-else) {{ cancelTitle }}
+        span.btn.btn-gray-5(v-else) {{ cancelTitle }}
 </template>
 
 <script lang="ts">
@@ -87,7 +87,7 @@ export default defineComponent({
 
 <style lang="stylus">
 .custom-multi-select
-  @apply px-3 py-1 border border-primary-light rounded
+  @apply px-3 py-1 border border-primary-500 rounded
 
   .options-wrapper
     @apply relative overflow-auto
@@ -96,7 +96,7 @@ export default defineComponent({
     @apply flex flex-col
 
     .option-button
-      @apply flex justify-between items-center px-2 py-1 bg-white shadow-inline s("hover:bg-card-primary-light")
+      @apply flex justify-between items-center px-2 py-1 bg-white shadow-inline s("hover:bg-primary-25")
 
       &:hover
         .btn

package/components/SLNoData.vue

@@ -36,7 +36,7 @@ export default defineComponent({
       @apply text-sm
 
   &-title
-    @apply text-lg text-primary-light
+    @apply text-lg text-primary-500
 
   &-reason
     @apply text-sm text-gray-3

package/components/SLPillCheckbox.vue

@@ -65,14 +65,13 @@ export default defineComponent({
       validator: (value: string) =>
         [
           "",
+          "third-500",
           "third",
-          "third-7",
           "primary",
-          "primary-hover",
-          "secondary-line",
+          "primary-600",
+          "highlight",
           "blue-1",
-          "blue-2",
-          "secondary-new-300",
+          "secondary-400",
         ].includes(value),
     },
   },
@@ -154,44 +153,40 @@ export default defineComponent({
     label
       @apply py-px text-xs
 
-  &.pill-checkbox-third
+  &.pill-checkbox-third-500
     input:checked + label
-      @apply bg-third border-third
+      @apply bg-third-500 border-third-500
 
-  &.pill-checkbox-third-7
+  &.pill-checkbox-third
     input:checked + label
-      @apply bg-third-7 border-third-7
+      @apply bg-third border-third
 
   &.pill-checkbox-primary
     input:checked + label
       @apply bg-primary border-primary
 
-  &.pill-checkbox-primary-hover
+  &.pill-checkbox-primary-600
     input:checked + label
-      @apply bg-primary-hover border-primary-hover
+      @apply bg-primary-600 border-primary-600
 
-  &.pill-checkbox-secondary-line
+  &.pill-checkbox-highlight
     input:checked + label
-      @apply bg-secondary-line border-secondary-line
+      @apply bg-highlight border-highlight
 
   &.pill-checkbox-blue-1
     input:checked + label
       @apply bg-blue-1 border-blue-1
 
-  &.pill-checkbox-blue-2
-    input:checked + label
-      @apply bg-blue-2 border-blue-2
-
-  &.pill-checkbox-secondary-new-300
+  &.pill-checkbox-secondary-400
     input:checked + label
-      @apply bg-secondary-new-300 border-secondary-new-300
+      @apply bg-secondary-400 border-secondary-400
 
   input
     @apply absolute s('left-1/2') s('top-1/2') transform s('-translate-x-1/2') s('-translate-y-1/2')
 
   label
     @apply inline-flex justify-center items-center relative s('px-1.75') s('py-0.75')
-    @apply bg-white border border-primary-lighter 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-gray-2 align-top cursor-pointer
 
     .icon
       @apply hidden ml-2
@@ -203,5 +198,5 @@ export default defineComponent({
       @apply inline-block
 
   input:disabled + label
-    @apply bg-white border-cancel text-gray-4 font-normal cursor-default
+    @apply bg-white border-gray-5 text-gray-4 font-normal cursor-default
 </style>

package/components/SLPillLabel.vue

@@ -28,15 +28,15 @@ export default defineComponent({
       validator: (value: string) =>
         [
           "",
+          "third-500",
+          "third-600",
           "third",
-          "third-7",
           "primary",
-          "primary-hover",
-          "secondary-line",
+          "primary-600",
+          "highlight",
           "blue-1",
-          "blue-2",
           "white",
-          "secondary-new",
+          "secondary",
         ].includes(value),
     },
   },
@@ -76,29 +76,29 @@ export default defineComponent({
   &.pill-label-white
     @apply text-gray-2
 
+  &.pill-label-third-500
+    @apply bg-third-500 border-third-500
+
+  &.pill-label-third-600
+    @apply bg-third-600 border-third-600
+
   &.pill-label-third
     @apply bg-third border-third
 
-  &.pill-label-third-7
-    @apply bg-third-7 border-third-7
-
   &.pill-label-primary
     @apply bg-primary border-primary
 
-  &.pill-label-primary-hover
-    @apply bg-primary-hover border-primary-hover
+  &.pill-label-primary-600
+    @apply bg-primary-600 border-primary-600
 
-  &.pill-label-secondary-line
-    @apply bg-secondary-line border-secondary-line
+  &.pill-label-highlight
+    @apply bg-highlight border-highlight
 
   &.pill-label-blue-1
     @apply bg-blue-1 border-blue-1
 
-  &.pill-label-blue-2
-    @apply bg-blue-2 border-blue-2
-
-  &.pill-label-secondary-new
-    @apply bg-secondary-new border-secondary-new
+  &.pill-label-secondary
+    @apply bg-secondary border-secondary
 
   .icon
     @apply inline-block ml-2

package/components/SLPopupMenuButton.vue

@@ -138,7 +138,7 @@ export default defineComponent({
   @apply inline-block relative
 
 .buttons-popup
-  @apply z-60 flex-col items-stretch border border-primary-lighter rounded bg-white shadow-md hidden
+  @apply z-60 flex-col items-stretch border border-primary-300 rounded bg-white shadow-md hidden
 
   &[data-show]
     @apply flex
@@ -153,6 +153,6 @@ export default defineComponent({
       @apply pb-2
 
   .menu-button-splitter
-    @apply h-px mx-auto my-1 bg-bg
+    @apply h-px mx-auto my-1 bg-primary-100
     width calc(100% - theme("spacing.4"))
 </style>

package/components/SLProfileButton.vue

@@ -167,10 +167,10 @@ export default defineComponent({
 <style lang="stylus">
 .profile-button
   .toggle-button
-    @apply inline-flex items-center justify-center w-10 h-10 p-0 rounded-full s('bg-primary/80') s('text-2.67xl') s('leading-9.25') text-card-primary-light font-bold
+    @apply inline-flex items-center justify-center w-10 h-10 p-0 rounded-full s('bg-primary/80') s('text-2.67xl') s('leading-9.25') text-card-primary-600 font-bold
 
 .profile-nav-popup
-  @apply z-60 absolute s('min-w-[10.25rem]') p-4 border border-primary bg-bg-middle rounded shadow-popup-lg pointer-events-none invisible
+  @apply z-60 absolute s('min-w-[10.25rem]') p-4 border border-primary bg-primary-50 rounded shadow-popup-lg pointer-events-none invisible
 
   &[data-show]
     @apply visible pointer-events-auto
@@ -182,5 +182,5 @@ export default defineComponent({
     @apply inline-flex items-center space-x-2 text-base text-primary-hover s('hover:text-primary')
 
   .profile-nav-divider
-    @apply w-full h-px bg-border
+    @apply w-full h-px bg-primary-600
 </style>

package/components/SLProjectShareItem.vue

@@ -81,13 +81,13 @@ export default defineComponent({
     @apply flex-grow-0 flex-shrink-0
 
     :deep(.dropdown-menu)
-      @apply border-primary-light
+      @apply border-primary-600
       .dropdown-list-wrapper
         .dropdown-list
-          @apply s('min-w-[74px]') divide-y divide-bg
+          @apply s('min-w-[74px]') divide-y divide-primary-100
 
     :deep(.dropdown-toggle)
-      @apply s('py-0.75') border-primary-light bg-white text-sm
+      @apply s('py-0.75') border-primary-600 bg-white text-sm
 
     .dropdown-item
       @apply text-center

package/components/SLRadioGroup.vue

@@ -106,7 +106,7 @@ export default defineComponent({
 
 <style lang="stylus">
 .radio-group
-  @apply inline-flex s('p-0.5') bg-bg border border-line rounded
+  @apply inline-flex s('p-0.5') bg-primary-100 border border-primary-200 rounded
 
   &.radio-group--sm
     .radio
@@ -132,56 +132,56 @@ export default defineComponent({
       label
         @apply px-2 py-px text-sm
 
-  &.radio-group--third-hover
-    @apply bg-third-hover border-third
+  &.radio-group--third-600
+    @apply bg-third-600 border-third-500
 
     .radio
       label
-        @apply bg-third-hover text-white
+        @apply bg-third-600 text-white
 
       input:checked + .element-with-title
         label
-          @apply text-third-7
+          @apply text-third
 
-  &.radio-group--edit-purple
-    @apply bg-edit-purple border-primary
+  &.radio-group--edit
+    @apply bg-edit border-primary
 
     &.color-invert
-      @apply bg-card-lightpr-bg border-primary-lighter
+      @apply bg-card-lightpr-bg border-primary-300
 
       .radio
         label
-          @apply bg-card-lightpr-bg text-primary-light
+          @apply bg-card-lightpr-bg text-primary-600
 
         input:checked + .element-with-title
           label
-            @apply bg-edit-purple text-white
+            @apply bg-edit text-white
 
     .radio
       label
-        @apply bg-edit-purple text-white
+        @apply bg-edit text-white
 
       input:checked + .element-with-title
         label
           @apply text-primary
 
   &.radio-group--insight-title
-    @apply bg-bg border-bg
+    @apply bg-primary-100 border-primary-100
 
     &.color-invert
-      @apply bg-card-lightpr-bg border-primary-lighter
+      @apply bg-card-lightpr-bg border-primary-300
 
       .radio
         label
-          @apply bg-card-lightpr-bg text-primary-light
+          @apply bg-card-lightpr-bg text-primary-600
 
         input:checked + .element-with-title
           label
-            @apply bg-edit-purple text-white
+            @apply bg-edit text-white
 
     .radio
       label
-        @apply bg-bg text-primary
+        @apply bg-primary-100 text-primary
 
       input:checked + .element-with-title
         label
@@ -197,7 +197,7 @@ export default defineComponent({
       @apply absolute s('left-1/2') s('top-1/2') transform s('-translate-x-1/2') s('-translate-y-1/2')
 
     label
-      @apply inline-flex justify-center items-center relative px-3 s('py-1.25') bg-bg rounded text-base leading-normal text-primary-hover cursor-pointer transition
+      @apply inline-flex justify-center items-center relative px-3 s('py-1.25') bg-primary-100 rounded text-base leading-normal text-primary-hover cursor-pointer transition
 
     input:checked + .element-with-title
       label

package/components/SLRangeInput.vue

@@ -181,7 +181,7 @@ export default defineComponent({
           @apply text-gray-4
 
       input[type=text]
-        @apply border-primary-light bg-bg
+        @apply border-primary-600 bg-primary-100
 
   & > label
     @apply mb-2 text-base leading-normal text-gray-2
@@ -201,7 +201,7 @@ export default defineComponent({
         @apply flex justify-between mb-1 text-sm text-gray-3
 
     input[type=text]
-      @apply flex-grow-0 flex-shrink-0 w-11 bg-white border border-primary-light 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-gray-2
       @apply s('focus:outline-none')
 
   .invalid-feedback

package/components/SLRightSider.vue

@@ -212,10 +212,10 @@ export default defineComponent({
       @apply block
 
   &-modal
-    @apply fixed top-0 left-0 w-full h-full s('bg-backdrop/70') hidden
+    @apply fixed top-0 left-0 w-full h-full s('bg-mask/70') hidden
 
   &-content
-    @apply absolute top-4 left-0 flex p-6 bg-white border-t border-l border-b border-border rounded-l-lg shadow-popup-lg transition-margin
+    @apply absolute top-4 left-0 flex p-6 bg-white border-t border-l border-b border-primary-600 rounded-l-lg shadow-popup-lg transition-margin
     max-width calc(100vw - 16px)
     max-height calc(100% - theme('spacing.8'))
 
@@ -225,10 +225,10 @@ export default defineComponent({
       margin-left -44px
 
       &-third
-        @apply bg-third-hover
+        @apply bg-third-600
 
       &-purple
-        @apply bg-edit-purple
+        @apply bg-edit
 
     &-wrapper
       @apply flex max-w-full overflow-hidden
@@ -237,6 +237,6 @@ export default defineComponent({
       @apply absolute top-0 right-0 inline-flex mt-6 mr-6 text-base text-primary
 
   &-addition-content
-    @apply absolute top-4 right-0 flex bg-white border border-border rounded-lg overflow-hidden shadow-popup-lg transition-margin
+    @apply absolute top-4 right-0 flex bg-white border border-primary-600 rounded-lg overflow-hidden shadow-popup-lg transition-margin
     max-height calc(100% - theme('spacing.8'))
 </style>

package/components/SLSearchInput.vue

@@ -85,13 +85,13 @@ export default defineComponent({
         @apply text-sm
 
   .input-group-append
-    @apply inline-flex border-t border-r border-b border-primary-light rounded-r bg-white
+    @apply inline-flex border-t border-r border-b border-primary-600 rounded-r bg-white
 
   .button-group
     @apply inline-flex items-center s('py-1.75') s('pr-1.75') s('space-x-1.75')
 
     &-divider
-      @apply w-px h-full my-px bg-primary-light
+      @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')

package/components/SLSelect.vue

@@ -478,7 +478,7 @@ export default defineComponent({
   &.disabled, &.readonly
     .form-control
       label
-        @apply border-primary-light bg-bg text-gray-4 cursor-default
+        @apply border-primary-600 bg-primary-100 text-gray-4 cursor-default
 
         .icon
           @apply text-gray-4
@@ -491,7 +491,7 @@ export default defineComponent({
 
     &.is-invalid
       .toggle-button
-        @apply border-danger-hover
+        @apply border-danger-light
 
       .invalid-feedback
         @apply block
@@ -500,7 +500,7 @@ export default defineComponent({
       @apply absolute outline-none
 
     label
-      @apply relative flex items-center s("p-1.75") bg-white border border-primary-light 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-gray-4 space-x-2 cursor-pointer
 
       &.selected
         @apply text-gray-2
@@ -515,7 +515,7 @@ export default defineComponent({
     @apply hidden text-danger text-xs
 
 .select-options
-  @apply flex flex-col z-60 absolute invisible border border-primary-light rounded bg-white overflow-hidden pointer-events-none
+  @apply flex flex-col z-60 absolute invisible border border-primary-600 rounded bg-white overflow-hidden pointer-events-none
 
   &.select-options--xs
     .option-list
@@ -540,10 +540,10 @@ 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-bg") s("hover:text-primary")
+      @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")
 
       &.selected
-        @apply bg-bg text-primary
+        @apply bg-primary-100 text-primary
 
         .icon-square
           @apply hidden

package/components/SLSelectAllToggle.vue

@@ -29,9 +29,9 @@ export default defineComponent({
     },
     color: {
       type: String,
-      default: "primary-light",
+      default: "primary-600",
       validator: (val: string) =>
-        ["primary-light", "secondary-new"].includes(val),
+        ["primary-600", "secondary"].includes(val),
     },
   },
   emits: ["select:all", "select:none"],
@@ -77,29 +77,29 @@ export default defineComponent({
     .select-all-option
       @apply s('py-1.25') text-xs
 
-  &.select-all-toggle-primary-light
-    @apply border-border
+  &.select-all-toggle-primary-600
+    @apply border-primary-600
 
     .select-all-option
-      @apply text-primary-light
+      @apply text-primary-600
 
       &.active
         @apply bg-primary
 
     .select-all-divider
-      @apply bg-primary-light
+      @apply bg-primary-600
 
-  &.select-all-toggle-secondary-new
-    @apply border-secondary-new-300
+  &.select-all-toggle-secondary
+    @apply border-secondary-400
 
     .select-all-option
-      @apply text-secondary-new-300
+      @apply text-secondary-400
 
       &.active
-        @apply bg-secondary-new
+        @apply bg-secondary
 
     .select-all-divider
-      @apply bg-primary-light
+      @apply bg-primary-600
 
   .select-all-option
     @apply block py-1 bg-white text-sm