@policystudio/policy-studio-ui-vue 1.1.48 → 1.1.50

package/dist/css/psui_styles.css

@@ -3012,8 +3012,8 @@ video {
 
 .psui-el-switch.disabled .psui-el-switch-button {
       --bg-opacity: 1;
-      background-color: #E6ECF2;
-      background-color: rgba(230, 236, 242, var(--bg-opacity));
+      background-color: #D6DDE5;
+      background-color: rgba(214, 221, 229, var(--bg-opacity));
     }
 
 .psui-el-switch.size-big {
@@ -3041,12 +3041,6 @@ video {
           content: '';
         }
 
-.psui-el-switch.size-small .psui-el-switch-button.toggle-true {
-        --bg-opacity: 1;
-        background-color: #5DB883;
-        background-color: rgba(93, 184, 131, var(--bg-opacity));
-      }
-
 .psui-el-switch.size-small .psui-el-switch-button.toggle-true::before {
           position: absolute;
           height: 0.75rem;
@@ -3081,9 +3075,6 @@ video {
     left: 0;
     right: 0;
     bottom: 0;
-    --bg-opacity: 1;
-    background-color: #A2ACB7;
-    background-color: rgba(162, 172, 183, var(--bg-opacity));
     border-radius: 9999px;
     transition-property: all;
     transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -3105,12 +3096,6 @@ video {
         content: '';
       }
 
-.psui-el-switch .psui-el-switch-button.toggle-true {
-      --bg-opacity: 1;
-      background-color: #5DB883;
-      background-color: rgba(93, 184, 131, var(--bg-opacity));
-    }
-
 .psui-el-switch .psui-el-switch-button.toggle-true::before {
         position: absolute;
         height: 1.25rem;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@policystudio/policy-studio-ui-vue",
-  "version": "1.1.48",
+  "version": "1.1.50",
   "description": "Policy Studio UI",
   "main": "src/index.js",
   "author": "Policy Studio Team",

package/src/assets/scss/components/PsSwitch.scss

@@ -5,7 +5,7 @@
     &.disabled {
       pointer-events: none;
       .psui-el-switch-button {
-        @apply psui-bg-gray-20; 
+        @apply psui-bg-gray-30; 
       }
     }
 
@@ -28,8 +28,6 @@
         }
         
         &.toggle-true {
-          @apply psui-bg-green-20;
-
           &::before {
             @apply psui-absolute psui-h-3 psui-w-3 psui-bg-white psui-rounded-full psui-transition-all psui-ease-in-out psui-duration-300 psui-shadow-elevation-20;
             left: 16px;
@@ -46,7 +44,7 @@
       @apply psui-opacity-0 psui-w-0 psui-h-0;
     }
     .psui-el-switch-button {
-      @apply psui-absolute psui-inline-block psui-cursor-pointer psui-top-0 psui-left-0 psui-right-0 psui-bottom-0 psui-bg-gray-40 psui-rounded-full psui-transition-all psui-ease-in-out psui-duration-500;
+      @apply psui-absolute psui-inline-block psui-cursor-pointer psui-top-0 psui-left-0 psui-right-0 psui-bottom-0 psui-rounded-full psui-transition-all psui-ease-in-out psui-duration-500;
       
         &.toggle-false{   
         &::before {
@@ -58,7 +56,6 @@
       }
       
       &.toggle-true {
-        @apply psui-bg-green-20;
 
         &::before {
           @apply psui-absolute psui-h-5 psui-w-5 psui-bg-white psui-rounded-full psui-transition-all psui-ease-in-out psui-duration-300 psui-shadow-elevation-20;

package/src/components/controls/PsSwitch.vue

@@ -23,6 +23,10 @@ export default {
     value:{
       type: Boolean,
     },
+    backgroundColor: {
+      type: String,
+      default:'psui-bg-green-20'
+    },
     /**
      * It sets disabling mode.
      */
@@ -42,7 +46,7 @@ export default {
   computed:{
     getToggleClass(){
       if(this.disabled) return 'toggle-false'
-      return this.value ? 'toggle-true' : 'toggle-false'
+      return this.value ? `toggle-true ${this.backgroundColor}` : 'toggle-false psui-bg-gray-40'
     },
     getComponentClass(){
       return `size-${this.size}`

package/src/components/table-results/PsTableResults.vue

@@ -261,11 +261,11 @@
                   :value="item.data[column.key] == '--' ? 0 : item.data[column.key]"
                   :force-break-even="item.is_disabled || item.data[column.key] === '--' ? true : false"
                 />
-
                 <PsSwitch
                   v-if="column.isSwitch && item.data[column.key] != null"
                   :disabled="item.data.is_disabled"
                   :value="item.data[column.key]"
+                  :background-color="switchButtonBackgroundColor"
                   size="small"
                   @change="$emit('switchButtonItemChanged', item)"
                 />
@@ -436,6 +436,9 @@ export default {
         return []
       }
     },
+    switchButtonBackgroundColor:{
+      type:String,
+    }
   },
   data: () => ({
     collapsedRows : [],