@mptw/skylens-ui 1.4.14 → 1.4.16

package/assets/css/layout.styl

@@ -31,7 +31,7 @@ label
   @apply absolute top-0 right-0 bottom-0 w-1 rounded-full
 
   .indicator
-    @apply w-full h-12 bg-primary-lighter rounded-full
+    @apply w-full h-12 bg-primary-300 rounded-full
 
 .markdown-content
   @apply text-base leading-relaxed
@@ -65,11 +65,11 @@ label
 
   /* Handle */
   &::-webkit-scrollbar-thumb
-    @apply bg-primary-lighter rounded
+    @apply bg-primary-300 rounded
 
   /* Handle on hover */
   &::-webkit-scrollbar-thumb:hover
-    @apply bg-primary-light
+    @apply bg-primary-500
 
 .custom-scrollbar-x
   @apply overflow-x-auto overflow-y-hidden
@@ -85,11 +85,11 @@ label
 
   /* Handle */
   &::-webkit-scrollbar-thumb
-    @apply bg-secondary-new rounded
+    @apply bg-secondary rounded
 
   /* Handle on hover */
   &::-webkit-scrollbar-thumb:hover
-    @apply bg-secondary-new
+    @apply bg-secondary
 
 .fade-enter-active, .fade-leave-active
   @apply transition-opacity

package/components/SLAlertModal.vue

@@ -12,11 +12,11 @@ SLModal(
     SLIcon(
         v-if="color === 'primary'"
         icon="check-circle"
-      ).text-secondary
+      ).text-highlight-500
     SLIcon(
         v-else
         icon="exclamation-triangle"
-        :class="color === '' ? '' : `text-${color}-hover`"
+        :class="{ 'text-primary-600': text === 'primary-600', 'text-highlight-500': text === 'highlight-500', 'text-danger-light': text === 'danger-light' }"
       )
     p(v-html='message')
   template(#footer)
@@ -47,9 +47,9 @@ export default defineComponent({
     },
     color: {
       type: String,
-      default: "secondary",
+      default: "highlight-500",
       validator: (value: string) =>
-        ["", "primary", "secondary", "danger"].includes(value),
+        ["", "primary-600", "highlight-500", "danger-light"].includes(value),
     },
     message: {
       type: String,

package/components/SLButton.vue

@@ -33,13 +33,13 @@ export default defineComponent({
           "",
           "white",
           "primary",
-          "primary-hover",
-          "secondary",
+          "primary-600",
+          "highlight-500",
           "third",
           "danger",
-          "cancel",
+          "gray-5",
           "gray-2",
-          "secondary-new",
+          "secondary",
           "blue-1",
           "insight-title-line",
         ].includes(val),
@@ -140,32 +140,32 @@ export default defineComponent({
           border-color white transparent transparent transparent
 
   &-primary
-    @apply bg-primary border-primary text-gray s("hover:bg-primary-hover") s("hover:border-primary-hover")
+    @apply bg-primary border-primary text-white s("hover:bg-primary-600") s("hover:border-primary-600")
 
     &.btn-outline
-      @apply text-primary s("hover:text-primary-hover")
+      @apply text-primary s("hover:text-primary-600")
 
     .btn-loading
       .loading
         div
           border-color theme('colors.primary.DEFAULT') transparent transparent transparent
 
-  &-primary-hover
-    @apply bg-primary-hover border-primary-hover text-gray s("hover:bg-primary-lighter") s("hover:border-primary-lighter")
+  &-primary-600
+    @apply bg-primary-600 border-primary-600 text-white s("hover:bg-primary-300") s("hover:border-primary-300")
 
     &.btn-outline
-      @apply text-primary-hover s("hover:text-primary-lighter")
+      @apply text-primary-600 s("hover:text-primary-300")
 
     .btn-loading
       .loading
         div
           border-color theme('colors.primary.hover') transparent transparent transparent
 
-  &-secondary
-    @apply bg-secondary border-secondary text-gray s("hover:bg-secondary-hover") s("hover:text-white") s("hover:border-secondary-hover")
+  &-highlight-500
+    @apply bg-highlight-500 border-highlight-500 text-white s("hover:bg-highlight-400") s("hover:text-white") s("hover:border-highlight-400")
 
     &.btn-outline
-      @apply text-secondary s("hover:text-secondary-hover")
+      @apply text-highlight-500 s("hover:text-highlight-400")
 
     .btn-loading
       .loading
@@ -173,10 +173,10 @@ export default defineComponent({
           border-color theme('colors.secondary.hover') transparent transparent transparent
 
   &-third
-    @apply bg-third-7 border-third-7 text-white s("hover:bg-third-hover") s("hover:text-white") s("hover:border-third-hover")
+    @apply bg-third border-third text-white s("hover:bg-third-600") s("hover:text-white") s("hover:border-third-600")
 
     &.btn-outline
-      @apply text-third-7 s("hover:text-third-hover")
+      @apply text-third s("hover:text-third-600")
 
     .btn-loading
       .loading
@@ -184,26 +184,26 @@ export default defineComponent({
           border-color theme('colors.third.hover') transparent transparent transparent
 
   &-danger
-    @apply bg-danger border-danger text-white s("hover:bg-danger-hover") s("hover:border-danger-hover")
+    @apply bg-danger border-danger text-white s("hover:bg-danger-light") s("hover:border-danger-light")
 
     &.btn-outline
-      @apply text-danger s("hover:text-danger-hover")
+      @apply text-danger s("hover:text-danger-light")
 
     .btn-loading
       .loading
         div
           border-color theme('colors.danger.hover') transparent transparent transparent
 
-  &-cancel
-    @apply bg-cancel border-cancel text-gray-2 s("hover:bg-cancel-hover") s("hover:border-cancel-hover")
+  &-gray-5
+    @apply bg-gray-5 border-gray-5 text-gray-2 s("hover:bg-gray-4.5") s("hover:border-gray-4.5")
 
     &.btn-outline
-      @apply text-cancel s("hover:text-cancel-hover")
+      @apply text-gray-5 s("hover:text-gray-4.5")
 
     .btn-loading
       .loading
         div
-          border-color theme('colors.cancel.hover') transparent transparent transparent
+          border-color theme('colors.cancel["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")
@@ -216,19 +216,19 @@ export default defineComponent({
         div
           border-color theme('colors.gray.3') transparent transparent transparent
 
-  &-secondary-new
-    @apply bg-secondary-new border-secondary-new text-white s("hover:bg-secondary-new") s("hover:border-secondary-new")
+  &-secondary
+    @apply bg-secondary border-secondary text-white s("hover:bg-secondary") s("hover:border-secondary")
 
     &.btn-outline
-      @apply text-secondary-new s("hover:text-secondary-new")
+      @apply text-secondary s("hover:text-secondary")
 
     .btn-loading
       .loading
         div
-          border-color theme('colors.secondary.new') transparent transparent transparent
+          border-color theme('colors.secondary.DEFAULT') transparent transparent transparent
 
   &-blue-1
-    @apply bg-secondary-new border-secondary-new text-white s("hover:bg-blue-1") s("hover:border-blue-1")
+    @apply bg-secondary border-secondary text-white s("hover:bg-blue-1") s("hover:border-blue-1")
 
     &.btn-outline
       @apply text-blue-1 s("hover:text-blue-1")
@@ -253,16 +253,16 @@ export default defineComponent({
     @apply bg-transparent border s("hover:bg-white")
 
   &-disabled
-    @apply bg-cancel border-cancel text-white cursor-default s("hover:bg-cancel") s("hover:border-cancel") s("hover:text-white")
+    @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")
 
     &.btn-outline
-      @apply bg-cancel border-cancel text-white s("hover:bg-cancel") s("hover:border-cancel") s("hover:text-white")
+      @apply bg-gray-5 border-gray-5 text-white s("hover:bg-gray-5") s("hover:border-gray-5") s("hover:text-white")
 
     &.btn-icon
-      @apply bg-transparent border-transparent text-cancel  s("hover:bg-transparent") s("hover:border-transparent") s("hover:text-cancel")
+      @apply bg-transparent border-transparent text-gray-5  s("hover:bg-transparent") s("hover:border-transparent") s("hover:text-gray-5")
 
   &.loading
-    @apply bg-line border-line cursor-default
+    @apply bg-primary-200 border-primary-200 cursor-default
 
     .btn-content
       @apply opacity-0

package/components/SLCalendarButton.vue

@@ -256,7 +256,7 @@ export default defineComponent({
         @apply flex-grow-0 flex-shrink-0 block w-px s('h-4.75') ml-2 s('mr-1.75') bg-primary
 
       .range-days
-        @apply block s('ml-0.5') px-1 s('py-0.5') bg-bg-middle rounded text-xs text-primary
+        @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

package/components/SLCalendarPopup.vue

@@ -91,7 +91,7 @@
     .actions
       SLButton(
           size="lg"
-          color="cancel"
+          color="gray-5"
           title="取消"
           @click="onClickedCancel"
         )
@@ -759,7 +759,7 @@ export default defineComponent({
 
 <style lang="stylus">
 .calendar-popup
-  @apply w-auto py-4 border border-bg rounded-lg bg-white shadow-md overflow-hidden
+  @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
@@ -783,10 +783,10 @@ 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-bg') 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-gray-3 s('hover:bg-primary-100') s('hover:text-gray-2')
 
       &.selected
-        @apply bg-bg text-primary s('hover:text-primary')
+        @apply bg-primary-100 text-primary s('hover:text-primary')
 
         &:before
           content ''

package/components/SLCard.vue

@@ -67,13 +67,13 @@ export default defineComponent({
       @apply border-0 rounded-none shadow-none
 
   .card
-    @apply rounded-lg border-primary-lighter shadow-md
+    @apply rounded-lg border-primary-300 shadow-md
 
     .card
       @apply border-0 rounded-none shadow-none
 
 .card
-  @apply p-4 border border-border rounded bg-white shadow
+  @apply p-4 border border-primary-600 rounded bg-white shadow
 
   .card-header
     @apply flex justify-between mb-4
@@ -88,7 +88,7 @@ export default defineComponent({
           @apply ml-2
 
       &-border
-        @apply s('h-0.5') rounded-full bg-secondary
+        @apply s('h-0.5') rounded-full bg-highlight-500
 
     .card-desc
       @apply text-base text-gray-2
@@ -103,10 +103,10 @@ export default defineComponent({
     @apply relative
 
   .card-footer
-    @apply mt-4 pb-2 border-b s('border-primary-lighter/30')
+    @apply mt-4 pb-2 border-b s('border-primary-300/30')
 
   .card
-    @apply border-primary-lighter rounded-lg shadow-md
+    @apply border-primary-300 rounded-lg shadow-md
 
     .card-header
       .card-title

package/components/SLCircleButton.vue

@@ -19,7 +19,7 @@ export default defineComponent({
     },
     color: {
       type: String,
-      default: "secondary-hover",
+      default: "highlight-400",
     },
     icon: {
       type: String,
@@ -81,15 +81,15 @@ export default defineComponent({
     .badge
       @apply s('top-1.75') right-3 w-1 h-1
 
-  &&-secondary-hover
-    @apply bg-secondary-hover
+  &&-highlight-400
+    @apply bg-highlight-400
 
     &.shadow
       @apply shadow-md
 
     &.active
-      @apply border border-secondary-line text-secondary-line
+      @apply border border-highlight text-highlight
 
   .badge
-    @apply absolute s('top-1.5') right-2 block s('w-0.75') s('h-0.75') rounded-full bg-secondary-line
+    @apply absolute s('top-1.5') right-2 block s('w-0.75') s('h-0.75') rounded-full bg-highlight
 </style>

package/components/SLCollapsableBlock.vue

@@ -97,7 +97,7 @@ export default defineComponent({
 
 <style lang="stylus">
 .sl-collapsable-block
-  @apply s('p-3.75') border border-secondary-new-300 rounded-lg
+  @apply s('p-3.75') border border-secondary-400 rounded-lg
 
   &.collapsed
     .sl-collapsable-block-header

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-light 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-gray-2
 
     &.active
       .toggle-icon
@@ -85,7 +85,7 @@ export default defineComponent({
       @apply transform origin-center
 
   .pills
-    @apply s('-mx-1') mb-4 border-b border-primary-lighter
+    @apply s('-mx-1') mb-4 border-b border-primary-300
 
     .pill-checkbox
       @apply mx-1 mb-2

package/components/SLConfirmModal.vue

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

package/components/SLDateInput.vue

@@ -399,7 +399,7 @@ export default defineComponent({
   &.disabled, &.readonly
     .input-group
       .input-group-prepend, .inputs
-        @apply border-primary-light bg-bg
+        @apply border-primary-500 bg-primary-100
 
 
   & > label
@@ -408,10 +408,10 @@ export default defineComponent({
   .is-invalid
     .input-group, .input-group.is-focus
       .input-group-prepend
-        @apply border-danger-hover
+        @apply border-danger-light
 
       .inputs
-        @apply border-danger-hover
+        @apply border-danger-light
 
         .icon
           @apply inline-block
@@ -433,14 +433,14 @@ export default defineComponent({
           @apply s('ml-1.5') s('-mt-2.25') py-0 s('px-0.5') bg-white text-primary text-xs transition-input-focus
 
     &-prepend
-      @apply flex-grow-0 flex-shrink-0 flex items-center relative pl-4 pr-6 rounded-l border border-r-0 border-primary-light bg-white text-base leading-none
+      @apply flex-grow-0 flex-shrink-0 flex items-center relative pl-4 pr-6 rounded-l border border-r-0 border-primary-500 bg-white text-base leading-none
 
       &:after
         content ''
         @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-light 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-gray-2
 
       input
         @apply flex-grow bg-transparent text-base text-gray-2 text-left placeholder-gray-4 s('focus:outline-none')
@@ -450,7 +450,7 @@ export default defineComponent({
         @apply flex-grow-0 flex-shrink-0 s('mx-0.5')
 
       .icon
-        @apply absolute right-0 mr-2 text-danger-hover hidden
+        @apply absolute right-0 mr-2 text-danger-light hidden
 
   .input-info
     @apply mt-1 text-xs text-gray-3

package/components/SLDownloadButton.vue

@@ -390,7 +390,7 @@ export default defineComponent({
 
   &.disabled
     .download-button-toggle
-      @apply border-cancel text-cancel cursor-default
+      @apply border-gray-5 text-gray-5 cursor-default
 
   &-toggle
     @apply inline-flex justify-center items-center s('w-[28px]') s('h-[28px]') bg-white border border-primary-hover rounded text-lg text-primary-hover
@@ -399,12 +399,12 @@ export default defineComponent({
       @apply bg-primary-hover text-white
 
 .download-button-popup
-  @apply z-60 absolute flex flex-col bg-white border border-primary-light rounded overflow-hidden shadow invisible pointer-events-none
+  @apply z-60 absolute flex flex-col bg-white border border-primary-500 rounded overflow-hidden shadow invisible pointer-events-none
 
   &[data-show]
     @apply visible pointer-events-auto
 
   .download-option
     @apply block p-2 bg-white text-sm text-gray-3
-    @apply s('hover:bg-bg') s('hover:text-primary')
+    @apply s('hover:bg-primary-100') s('hover:text-primary')
 </style>

package/components/SLDropdown.vue

@@ -251,13 +251,13 @@ export default defineComponent({
         @apply text-primary-hover rotate-180
 
   &-toggle
-    @apply flex items-center s('p-1.75') border border-primary-light 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-gray-2 whitespace-nowrap
 
     .toggle-icon
       @apply text-xs leading-none text-gray-2 transition-transform transform
 
   &-menu
-    @apply z-50 flex flex-col max-h-48 border border-primary-light rounded bg-white shadow-md overflow-hidden invisible pointer-events-none
+    @apply z-50 flex flex-col max-h-48 border border-primary-500 rounded bg-white shadow-md overflow-hidden invisible pointer-events-none
 
     &[data-show]
       @apply visible pointer-events-auto

package/components/SLDropdownItem.vue

@@ -24,8 +24,8 @@ export default defineComponent({
 
 <style lang="stylus">
 .dropdown-item
-  @apply block p-2 bg-white text-sm text-primary whitespace-nowrap s('hover:text-primary') s('hover:bg-bg-middle') s('focus:text-primary') s('focus:bg-bg-middle') s('active:text-primary') s('active:bg-bg-middle')
+  @apply block p-2 bg-white text-sm text-primary whitespace-nowrap s('hover:text-primary') s('hover:bg-primary-50') s('focus:text-primary') s('focus:bg-primary-50') s('active:text-primary') s('active:bg-primary-50')
 
   &.active
-    @apply text-primary bg-bg-middle
+    @apply text-primary bg-primary-50
 </style>

package/components/SLElementWithTitle.vue

@@ -174,7 +174,7 @@ export default defineComponent({
   @apply inline-flex
 
   &-tooltip
-    @apply s('z-[10]') p-2 s('bg-backdrop/70') rounded text-xs text-white whitespace-pre shadow invisible pointer-events-none
+    @apply s('z-[10]') p-2 s('bg-mask/70') rounded text-xs text-white whitespace-pre shadow invisible pointer-events-none
 
     &[data-show]
       @apply visible

package/components/SLFileInput.vue

@@ -91,11 +91,11 @@ export default defineComponent({
 
     label
       @apply relative inline-block s("py-1.75") s("px-3.75") border border-transparent rounded bg-transparent text-base leading-normal space-x-2 cursor-pointer s("focus:outline-none")
-      @apply bg-primary border-primary text-gray s("hover:bg-primary-hover") s("hover:border-primary-hover")
+      @apply bg-primary border-primary text-white s("hover:bg-primary-hover") s("hover:border-primary-hover")
 
     input[type="file"]
       @apply absolute top-0 left-0
 
   .filename
-    @apply s("p-1.75") border border-primary-lighter rounded bg-bg-middle text-base text-gray-2
+    @apply s("p-1.75") border border-primary-300 rounded bg-primary-50 text-base text-gray-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-light 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-gray-2
 
     .toggle-title
       @apply flex-grow truncate
@@ -244,7 +244,7 @@ export default defineComponent({
       @apply flex-grow-0 flex-shrink-0 text-xs leading-none
 
 .options-popup
-  @apply z-60 absolute flex s('max-h-[196px]') s('p-2.75') bg-white border border-primary-light rounded shadow pointer-events-none invisible
+  @apply z-60 absolute flex s('max-h-[196px]') s('p-2.75') bg-white border border-primary-500 rounded shadow pointer-events-none invisible
 
   &[data-show]
     @apply pointer-events-auto visible
@@ -269,7 +269,7 @@ export default defineComponent({
         .checkbox
           label
             @apply w-full s('py-1.5') px-2 text-sm
-            @apply s('hover:bg-bg')
+            @apply s('hover:bg-primary-100')
 
             span
               @apply ml-1

package/components/SLHourRangeInput.vue

@@ -179,7 +179,7 @@ export default defineComponent({
 
   &.disabled, &.readonly
     .input-group
-      @apply border-primary-light bg-bg
+      @apply border-primary-500 bg-primary-100
 
 
   & > label
@@ -192,7 +192,7 @@ export default defineComponent({
     @apply flex items-center space-x-2
 
   .input-group
-    @apply flex items-center flex-nowrap p-2 bg-white border border-primary-light rounded text-base space-x-1
+    @apply flex items-center flex-nowrap p-2 bg-white border border-primary-500 rounded text-base space-x-1
 
     &.invalid
       @apply border-danger

package/components/SLIOSSwitch.vue

@@ -206,7 +206,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 relative min-w-full s('h-[2.3125rem]') bg-bg border border-line rounded-full text-base leading-normal align-top cursor-pointer transition-colors
+    @apply relative min-w-full s('h-[2.3125rem]') bg-primary-100 border border-primary-200 rounded-full text-base leading-normal align-top cursor-pointer transition-colors
 
     &:before
       content ''
@@ -222,7 +222,7 @@ export default defineComponent({
       @apply s('pl-[35px]') pr-2 text-primary-hover opacity-100
 
   input:checked + label
-    @apply bg-primary border-primary-heavy
+    @apply bg-primary border-primary-800
 
     &:before
       @apply left-auto s('right-0.75')

package/components/SLIconButton.vue

@@ -25,7 +25,7 @@ export default defineComponent({
       type: String,
       default: "",
       validator: (val: string) =>
-        ["", "primary", "secondary-new"].includes(val),
+        ["", "primary", "secondary"].includes(val),
     },
     variant: {
       type: String,
@@ -113,11 +113,11 @@ export default defineComponent({
     &.icon-btn--outline
       @apply text-primary
 
-  &.icon-btn--secondary-new
-    @apply bg-secondary-new border-secondary-new
+  &.icon-btn--secondary
+    @apply bg-secondary border-secondary
 
     &.icon-btn--outline
-      @apply text-secondary-new
+      @apply text-secondary
 
   &.icon-btn--outline
     @apply bg-transparent

package/components/SLInfoTip.vue

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

package/components/SLInsightSitePage.vue

@@ -23,5 +23,5 @@ export default {
     @apply s('-mx-4')
 
   &-content
-    @apply flex flex-col flex-grow w-full p-4 rounded bg-bg-middle
+    @apply flex flex-col flex-grow w-full p-4 rounded bg-primary-50
 </style>

package/components/SLLegend.vue

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

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