@mptw/skylens-ui 1.4.18 → 1.4.20

package/components/SLButton.vue

@@ -203,7 +203,7 @@ export default defineComponent({
     .btn-loading
       .loading
         div
-          border-color theme('colors.gray["4.5"]') transparent transparent transparent
+          border-color theme('colors.gray[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")

package/components/SLCollapsableBlock.vue

@@ -122,7 +122,7 @@ export default defineComponent({
         @apply text-sm text-primary
 
       .icon
-        @apply text-xs leading-none text-primary-hover rotate-180 transition-transform
+        @apply text-xs leading-none text-primary-600 rotate-180 transition-transform
 
   &-body
     @apply relative pt-4 overflow-hidden transition-all

package/components/SLDownloadButton.vue

@@ -393,10 +393,10 @@ export default defineComponent({
       @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
+    @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
 
     &.active
-      @apply bg-primary-hover text-white
+      @apply bg-primary-600 text-white
 
 .download-button-popup
   @apply z-60 absolute flex flex-col bg-white border border-primary-500 rounded overflow-hidden shadow invisible pointer-events-none

package/components/SLDropdown.vue

@@ -248,7 +248,7 @@ export default defineComponent({
     .dropdown-toggle
 
       .toggle-icon
-        @apply text-primary-hover rotate-180
+        @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

package/components/SLFileInput.vue

@@ -87,11 +87,11 @@ export default defineComponent({
 
     &.uploaded
       label
-        @apply bg-white border text-primary s("hover:text-primary-hover") s("hover:bg-white")
+        @apply bg-white border text-primary s("hover:text-primary-600") s("hover:bg-white")
 
     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-white 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")
 
     input[type="file"]
       @apply absolute top-0 left-0

package/components/SLIOSSwitch.vue

@@ -57,7 +57,7 @@ export default defineComponent({
     color: {
       type: String,
       default: "",
-      validator: (val: string) => ["", "primary-hover"].includes(val),
+      validator: (val: string) => ["", "primary-600"].includes(val),
     },
   },
   emits: ["update:modelValue"],
@@ -198,9 +198,9 @@ export default defineComponent({
       .false-label
         @apply s('pl-[31px]')
 
-  &.ios-switch-primary-hover
+  &.ios-switch-primary-600
     input:checked + label
-      @apply bg-primary-hover border-primary
+      @apply bg-primary-600 border-primary
 
   input
     @apply absolute s('left-1/2') s('top-1/2') transform s('-translate-x-1/2') s('-translate-y-1/2')
@@ -219,7 +219,7 @@ export default defineComponent({
       @apply pl-2 s('pr-[35px]') text-white opacity-0
 
     .false-label
-      @apply s('pl-[35px]') pr-2 text-primary-hover opacity-100
+      @apply s('pl-[35px]') pr-2 text-primary-600 opacity-100
 
   input:checked + label
     @apply bg-primary border-primary-800

package/components/SLInfoTip.vue

@@ -172,7 +172,7 @@ export default defineComponent({
 
 <style lang="stylus">
 .info-tip
-  @apply inline-flex ml-2 text-base s('leading-4.5') text-primary s('hover:text-primary-hover') cursor-default
+  @apply inline-flex ml-2 text-base s('leading-4.5') text-primary s('hover:text-primary-600') cursor-default
 
   &--xs
     @apply ml-1 text-xs
@@ -208,7 +208,7 @@ export default defineComponent({
       @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
+        @apply absolute top-0 right-0 mt-2 mr-2 text-base text-primary-600
 
         &:hover
           .icon

package/components/SLMonthCalendarButton.vue

@@ -26,7 +26,7 @@
         .popup-body
           SLMonthPicker(
             v-if='isCompare',
-            color='primary-hover',
+            color='primary-600',
             :min-date='minDate',
             :max-date='maxCompareDate',
             v-model='compareDate',

package/components/SLMonthPicker.vue

@@ -1,5 +1,5 @@
 <template lang="pug">
-.month-picker(:class='{ "month-picker--insight-title": color === "insight-title", "month-picker--primary-hover": color === "primary-hover" }')
+.month-picker(:class='{ "month-picker--insight-title": color === "insight-title", "month-picker--primary-600": color === "primary-600" }')
   .year-select
     a.prev-button(
       href='javascript:;'
@@ -32,9 +32,9 @@ export default defineComponent({
   components: {},
   props: {
     color: {
-      type: String as PropType<"insight-title" | "primary-hover">,
+      type: String as PropType<"insight-title" | "primary-600">,
       validate: (value: string) =>
-        ["insight-title", "primary-hover"].includes(value),
+        ["insight-title", "primary-600"].includes(value),
     },
     minDate: {
       type: Date as PropType<Date | null>,
@@ -116,12 +116,12 @@ export default defineComponent({
           &.selected
             @apply bg-insight-title
 
-  &--primary-hover
+  &--primary-600
     .month-select
       &-wrapper
         .month-button
           &.selected
-            @apply bg-primary-hover
+            @apply bg-primary-600
 
   .year-select
     @apply flex items-center justify-center space-x-10

package/components/SLMultiSelect.vue

@@ -107,7 +107,7 @@ export default defineComponent({
           @apply text-primary font-bold
 
         .btn
-          @apply bg-primary-hover opacity-100
+          @apply bg-primary-600 opacity-100
 
         &:hover, &:active, &:focus
           .btn

package/components/SLPagination.vue

@@ -173,7 +173,7 @@ export default defineComponent({
 
   &-item
     @apply inline-flex items-center justify-center s('min-w-[1.5rem]') s('min-h-[1.5rem]') p-1 border-t border-b border-primary bg-white text-xs text-primary
-    @apply s('hover:text-primary-hover') s('focus:text-primary')
+    @apply s('hover:text-primary-600') s('focus:text-primary')
 
     &--icon
       @apply s('py-1.5')
@@ -188,5 +188,5 @@ export default defineComponent({
       @apply bg-primary text-white
 
     &.more
-      @apply cursor-default s('hover:text-primary-hover')
+      @apply cursor-default s('hover:text-primary-600')
 </style>

package/components/SLProfileButton.vue

@@ -167,7 +167,7 @@ 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-600 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-primary-25 font-bold
 
 .profile-nav-popup
   @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
@@ -179,7 +179,7 @@ export default defineComponent({
     @apply flex flex-col space-y-2
 
   .profile-nav-item
-    @apply inline-flex items-center space-x-2 text-base text-primary-hover s('hover:text-primary')
+    @apply inline-flex items-center space-x-2 text-base text-primary-600 s('hover:text-primary')
 
   .profile-nav-divider
     @apply w-full h-px bg-primary-600

package/components/SLRadioGroup.vue

@@ -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-primary-100 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-600 cursor-pointer transition
 
     input:checked + .element-with-title
       label

package/components/SLSiderbarNav.vue

@@ -116,11 +116,11 @@ export default defineComponent({
       nav
         .siderbar-nav-item
           &.included
-            @apply text-primary-hover
+            @apply text-primary-600
 
             & > .nav-item-container
               .nav-item-wrapper
-                @apply bg-card-primary-600
+                @apply bg-primary-25
 
       .siderbar-toggle
         &:hover
@@ -138,30 +138,30 @@ export default defineComponent({
       .nav-wrapper.custom-scrollbar-y
         /* Handle */
         &::-webkit-scrollbar-thumb
-          @apply bg-primary-hover
+          @apply bg-primary-600
 
         /* Handle on hover */
         &::-webkit-scrollbar-thumb:hover
-          @apply bg-primary-hover
+          @apply bg-primary-600
 
       .siderbar-nav-item
         @apply text-white
 
         &.highlighted
-          @apply text-primary-hover
+          @apply text-primary-600
 
           & > .nav-item-container
             &:hover
               .nav-item-wrapper
-                @apply bg-card-primary-600
+                @apply bg-primary-25
 
             .nav-item-wrapper
-              @apply bg-card-primary-600
+              @apply bg-primary-25
 
         .nav-item-container
           &:hover
             .nav-item-wrapper
-              @apply bg-primary-hover
+              @apply bg-primary-600
 
           .nav-item-wrapper
             .nav-item-highlight-border
@@ -172,11 +172,11 @@ export default defineComponent({
 
       .ios-switch
         label
-          @apply border-primary-hover
+          @apply border-primary-600
           background #2D2F57
 
           &:before
-            @apply border-2 border-primary-hover bg-primary-300
+            @apply border-2 border-primary-600 bg-primary-300
 
     .siderbar-toggle
       @apply bg-primary-300 text-white
@@ -195,7 +195,7 @@ export default defineComponent({
       @apply hidden
 
     .siderbar-toggle
-      @apply bg-primary-hover text-white
+      @apply bg-primary-600 text-white
       margin-right -20px
       border-radius 0px 12px 12px 0px
 
@@ -215,7 +215,7 @@ export default defineComponent({
 
           & > .nav-item-container
             .nav-item-wrapper
-              @apply bg-primary-hover
+              @apply bg-primary-600
 
         .nav-item-container
           @apply rounded-r-full
@@ -296,10 +296,10 @@ export default defineComponent({
         & > .nav-item-container
           &:hover
             .nav-item-wrapper
-              @apply bg-primary-hover
+              @apply bg-primary-600
 
           .nav-item-wrapper
-            @apply bg-primary-hover
+            @apply bg-primary-600
 
             .nav-item-button
               .button-title

package/components/SLTabs.vue

@@ -271,7 +271,7 @@ export default defineComponent({
         @apply s('lg:px-6') s('lg:space-x-14')
 
         .tab-nav-item
-          @apply relative flex-grow s('py-6') rounded bg-primary-100 text-lg text-primary-hover text-center
+          @apply relative flex-grow s('py-6') rounded bg-primary-100 text-lg text-primary-600 text-center
           @apply s('lg:py-5.5')
 
           &:before
@@ -367,7 +367,7 @@ export default defineComponent({
             @apply flex justify-between s('w-[184px]') py-3 pl-3 pr-5 bg-primary-50 rounded-l-lg text-xs
 
             &.active
-              @apply bg-primary-hover text-white font-bold shadow-md
+              @apply bg-primary-600 text-white font-bold shadow-md
 
             &-link
               @apply block w-full

package/components/SLToggleButton.vue

@@ -62,7 +62,7 @@ export default defineComponent({
 
 <style lang="stylus">
 .sl-toggle-button
-  @apply inline-flex items-center justify-center s('p-1.5') space-x-2 bg-primary-100 rounded text-base text-primary-hover
+  @apply inline-flex items-center justify-center s('p-1.5') space-x-2 bg-primary-100 rounded text-base text-primary-600
 
   &.sl-toggle-button-sm
     @apply s('h-[29px]') px-1 py-0 text-sm
@@ -71,7 +71,7 @@ export default defineComponent({
       @apply text-lg leading-none
 
   &.active
-    @apply bg-primary-hover text-white
+    @apply bg-primary-600 text-white
 
   &.disabled
     @apply bg-gray-5 text-white cursor-default

package/package.json

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

package/tailwind.config.js

@@ -109,6 +109,8 @@ module.exports = {
           'hint-line': '#ADB4F5',
           'web-title-start': '#39BBE4',
           'web-title-end': 'rgb(144 128 241/0.74)',
+          'poi-title-start': 'rgb(255 131 92/0.7)',
+          'poi-title-end': 'rgb(120 91 207/0.74)',
         },
         mask: {
           DEFAULT: '#47485A',