@policystudio/policy-studio-ui-vue 1.0.7 → 1.0.8

package/package.json

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

package/src/assets/scss/tailwind.css

@@ -6571,24 +6571,29 @@ video {
   height: 100vh;
 }
 
-.psui-text-sm {
+.psui-text-small {
   font-size: 14px;
-  line-height: 20px;
+  line-height: 130%;
 }
 
-.psui-text-base {
-  font-size: 16px;
-  line-height: 24px;
+.psui-text-xSmall {
+  font-size: 12px;
+  line-height: 130%;
 }
 
-.psui-text-lg {
-  font-size: 20px;
-  line-height: 28px;
+.psui-text-accent {
+  font-size: 14px;
+  line-height: 130%;
 }
 
-.psui-text-xl {
-  font-size: 24px;
-  line-height: 32px;
+.psui-text-accentSmall {
+  font-size: 12px;
+  line-height: 130%;
+}
+
+.psui-text-p {
+  font-size: 16px;
+  line-height: 120%;
 }
 
 .psui-text-h1 {
@@ -10053,6 +10058,30 @@ video {
   resize: both;
 }
 
+.psui-shadow-elevationInner {
+  box-shadow: box-shadow: 0px 1px 0px #FFFFFF, inset 0px 1px 2px rgba(0, 0, 0, 0.1);
+}
+
+.psui-shadow-elevation5 {
+  box-shadow: box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.03), 0px 1px 2px rgba(0, 0, 0, 0.1);
+}
+
+.psui-shadow-elevation10 {
+  box-shadow: box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.04), 0px 2px 5px rgba(0, 0, 0, 0.08);
+}
+
+.psui-shadow-elevation20 {
+  box-shadow: box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.04), 0px 5px 6px rgba(0, 0, 0, 0.1);
+}
+
+.psui-shadow-elevation30 {
+  box-shadow: box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.05), 0px 10px 15px rgba(0, 0, 0, 0.15);
+}
+
+.psui-shadow-elevation40 {
+  box-shadow: box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.05), 0px 30px 60px rgba(0, 0, 0, 0.2);
+}
+
 .psui-shadow-sm {
   box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.03), 0px 1px 2px rgba(0, 0, 0, 0.1);
 }
@@ -10081,6 +10110,30 @@ video {
   box-shadow: none;
 }
 
+.active\:psui-shadow-elevationInner:active {
+  box-shadow: box-shadow: 0px 1px 0px #FFFFFF, inset 0px 1px 2px rgba(0, 0, 0, 0.1);
+}
+
+.active\:psui-shadow-elevation5:active {
+  box-shadow: box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.03), 0px 1px 2px rgba(0, 0, 0, 0.1);
+}
+
+.active\:psui-shadow-elevation10:active {
+  box-shadow: box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.04), 0px 2px 5px rgba(0, 0, 0, 0.08);
+}
+
+.active\:psui-shadow-elevation20:active {
+  box-shadow: box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.04), 0px 5px 6px rgba(0, 0, 0, 0.1);
+}
+
+.active\:psui-shadow-elevation30:active {
+  box-shadow: box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.05), 0px 10px 15px rgba(0, 0, 0, 0.15);
+}
+
+.active\:psui-shadow-elevation40:active {
+  box-shadow: box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.05), 0px 30px 60px rgba(0, 0, 0, 0.2);
+}
+
 .active\:psui-shadow-sm:active {
   box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.03), 0px 1px 2px rgba(0, 0, 0, 0.1);
 }
@@ -19649,24 +19702,29 @@ video {
     height: 100vh;
   }
 
-  .sm\:psui-text-sm {
+  .sm\:psui-text-small {
     font-size: 14px;
-    line-height: 20px;
+    line-height: 130%;
   }
 
-  .sm\:psui-text-base {
-    font-size: 16px;
-    line-height: 24px;
+  .sm\:psui-text-xSmall {
+    font-size: 12px;
+    line-height: 130%;
   }
 
-  .sm\:psui-text-lg {
-    font-size: 20px;
-    line-height: 28px;
+  .sm\:psui-text-accent {
+    font-size: 14px;
+    line-height: 130%;
   }
 
-  .sm\:psui-text-xl {
-    font-size: 24px;
-    line-height: 32px;
+  .sm\:psui-text-accentSmall {
+    font-size: 12px;
+    line-height: 130%;
+  }
+
+  .sm\:psui-text-p {
+    font-size: 16px;
+    line-height: 120%;
   }
 
   .sm\:psui-text-h1 {
@@ -32604,24 +32662,29 @@ video {
     height: 100vh;
   }
 
-  .md\:psui-text-sm {
+  .md\:psui-text-small {
     font-size: 14px;
-    line-height: 20px;
+    line-height: 130%;
   }
 
-  .md\:psui-text-base {
-    font-size: 16px;
-    line-height: 24px;
+  .md\:psui-text-xSmall {
+    font-size: 12px;
+    line-height: 130%;
   }
 
-  .md\:psui-text-lg {
-    font-size: 20px;
-    line-height: 28px;
+  .md\:psui-text-accent {
+    font-size: 14px;
+    line-height: 130%;
   }
 
-  .md\:psui-text-xl {
-    font-size: 24px;
-    line-height: 32px;
+  .md\:psui-text-accentSmall {
+    font-size: 12px;
+    line-height: 130%;
+  }
+
+  .md\:psui-text-p {
+    font-size: 16px;
+    line-height: 120%;
   }
 
   .md\:psui-text-h1 {
@@ -45559,24 +45622,29 @@ video {
     height: 100vh;
   }
 
-  .lg\:psui-text-sm {
+  .lg\:psui-text-small {
     font-size: 14px;
-    line-height: 20px;
+    line-height: 130%;
   }
 
-  .lg\:psui-text-base {
-    font-size: 16px;
-    line-height: 24px;
+  .lg\:psui-text-xSmall {
+    font-size: 12px;
+    line-height: 130%;
   }
 
-  .lg\:psui-text-lg {
-    font-size: 20px;
-    line-height: 28px;
+  .lg\:psui-text-accent {
+    font-size: 14px;
+    line-height: 130%;
   }
 
-  .lg\:psui-text-xl {
-    font-size: 24px;
-    line-height: 32px;
+  .lg\:psui-text-accentSmall {
+    font-size: 12px;
+    line-height: 130%;
+  }
+
+  .lg\:psui-text-p {
+    font-size: 16px;
+    line-height: 120%;
   }
 
   .lg\:psui-text-h1 {
@@ -58514,24 +58582,29 @@ video {
     height: 100vh;
   }
 
-  .xl\:psui-text-sm {
+  .xl\:psui-text-small {
     font-size: 14px;
-    line-height: 20px;
+    line-height: 130%;
   }
 
-  .xl\:psui-text-base {
-    font-size: 16px;
-    line-height: 24px;
+  .xl\:psui-text-xSmall {
+    font-size: 12px;
+    line-height: 130%;
   }
 
-  .xl\:psui-text-lg {
-    font-size: 20px;
-    line-height: 28px;
+  .xl\:psui-text-accent {
+    font-size: 14px;
+    line-height: 130%;
   }
 
-  .xl\:psui-text-xl {
-    font-size: 24px;
-    line-height: 32px;
+  .xl\:psui-text-accentSmall {
+    font-size: 12px;
+    line-height: 130%;
+  }
+
+  .xl\:psui-text-p {
+    font-size: 16px;
+    line-height: 120%;
   }
 
   .xl\:psui-text-h1 {

package/tailwind.config.js

@@ -39,10 +39,11 @@ module.exports = {
       'sans': ['Lato'],
     },
     fontSize: {
-      sm: ['14px', '20px'],
-      base: ['16px', '24px'],
-      lg: ['20px', '28px'],
-      xl: ['24px', '32px'],
+      small: ['14px', '130%'],
+      xSmall: ['12px', '130%'],
+      accent: ['14px', '130%', { letterSpacing: '0.6px' }],
+      accentSmall: ['12px', '130%', { letterSpacing: '0.6px' }],
+      p: ['16px', '120%'],
       h1: ['28px', '120%'],
       h2: ['24px', '120%'],
       h3: ['22px', '120%'],
@@ -51,6 +52,12 @@ module.exports = {
       h6: ['17px', '120%'],
     },    
     boxShadow: {
+      elevationInner: 'box-shadow: 0px 1px 0px #FFFFFF, inset 0px 1px 2px rgba(0, 0, 0, 0.1)',
+      elevation5: 'box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.03), 0px 1px 2px rgba(0, 0, 0, 0.1)',
+      elevation10: 'box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.04), 0px 2px 5px rgba(0, 0, 0, 0.08)',
+      elevation20: 'box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.04), 0px 5px 6px rgba(0, 0, 0, 0.1)',
+      elevation30: 'box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.05), 0px 10px 15px rgba(0, 0, 0, 0.15)',
+      elevation40: 'box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.05), 0px 30px 60px rgba(0, 0, 0, 0.2)',
       sm: '0px 0px 4px rgba(0, 0, 0, 0.03), 0px 1px 2px rgba(0, 0, 0, 0.1)',
       default: '0px 0px 8px rgba(0, 0, 0, 0.04), 0px 2px 5px rgba(0, 0, 0, 0.08)',
       md: '0px 0px 8px rgba(0, 0, 0, 0.04), 0px 5px 6px rgba(0, 0, 0, 0.1)',