@policystudio/policy-studio-ui-vue 1.0.6 → 1.0.10

package/package.json

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

package/src/assets/scss/base.scss

@@ -3,27 +3,3 @@
 @tailwind utilities;
 @import url('https://fonts.googleapis.com/icon?family=Material+Icons');
 
-.text-h1 {
-  font-size: 28;
-  line-height: 120%;    
-}
-.text-h2 {
-  font-size: 24px;
-  line-height: 120%;    
-}
-.text-h3 {
-  font-size: 22px;
-  line-height: 120%;    
-}
-.text-h4 {
-  font-size: 20px;
-  line-height: 120%;    
-}
-.text-h5 {
-  font-size: 18px;
-  line-height: 120%;    
-}
-.text-h6 {
-  font-size: 17px;
-  line-height: 120%;    
-}

package/src/assets/scss/tailwind.css

@@ -6571,44 +6571,59 @@ video {
   height: 100vh;
 }
 
-.psui-text-xs {
-  font-size: 0.75rem;
+.psui-text-small {
+  font-size: 14px;
+  line-height: 130%;
 }
 
-.psui-text-sm {
-  font-size: 0.875rem;
+.psui-text-xSmall {
+  font-size: 12px;
+  line-height: 130%;
 }
 
-.psui-text-base {
-  font-size: 1rem;
+.psui-text-accent {
+  font-size: 14px;
+  line-height: 130%;
 }
 
-.psui-text-lg {
-  font-size: 1.125rem;
+.psui-text-accentSmall {
+  font-size: 12px;
+  line-height: 130%;
 }
 
-.psui-text-xl {
-  font-size: 1.25rem;
+.psui-text-p {
+  font-size: 16px;
+  line-height: 120%;
 }
 
-.psui-text-2xl {
-  font-size: 1.5rem;
+.psui-text-h1 {
+  font-size: 28px;
+  line-height: 120%;
 }
 
-.psui-text-3xl {
-  font-size: 1.875rem;
+.psui-text-h2 {
+  font-size: 24px;
+  line-height: 120%;
 }
 
-.psui-text-4xl {
-  font-size: 2.25rem;
+.psui-text-h3 {
+  font-size: 22px;
+  line-height: 120%;
 }
 
-.psui-text-5xl {
-  font-size: 3rem;
+.psui-text-h4 {
+  font-size: 20px;
+  line-height: 120%;
 }
 
-.psui-text-6xl {
-  font-size: 4rem;
+.psui-text-h5 {
+  font-size: 18px;
+  line-height: 120%;
+}
+
+.psui-text-h6 {
+  font-size: 17px;
+  line-height: 120%;
 }
 
 .psui-leading-3 {
@@ -14733,36 +14748,6 @@ video {
 
 @import url('https://fonts.googleapis.com/icon?family=Material+Icons');
 
-.text-h1 {
-  font-size: 28;
-  line-height: 120%;
-}
-
-.text-h2 {
-  font-size: 24px;
-  line-height: 120%;
-}
-
-.text-h3 {
-  font-size: 22px;
-  line-height: 120%;
-}
-
-.text-h4 {
-  font-size: 20px;
-  line-height: 120%;
-}
-
-.text-h5 {
-  font-size: 18px;
-  line-height: 120%;
-}
-
-.text-h6 {
-  font-size: 17px;
-  line-height: 120%;
-}
-
 @media (min-width: 640px) {
   .sm\:psui-container {
     width: 100%;
@@ -19669,44 +19654,59 @@ video {
     height: 100vh;
   }
 
-  .sm\:psui-text-xs {
-    font-size: 0.75rem;
+  .sm\:psui-text-small {
+    font-size: 14px;
+    line-height: 130%;
+  }
+
+  .sm\:psui-text-xSmall {
+    font-size: 12px;
+    line-height: 130%;
   }
 
-  .sm\:psui-text-sm {
-    font-size: 0.875rem;
+  .sm\:psui-text-accent {
+    font-size: 14px;
+    line-height: 130%;
   }
 
-  .sm\:psui-text-base {
-    font-size: 1rem;
+  .sm\:psui-text-accentSmall {
+    font-size: 12px;
+    line-height: 130%;
   }
 
-  .sm\:psui-text-lg {
-    font-size: 1.125rem;
+  .sm\:psui-text-p {
+    font-size: 16px;
+    line-height: 120%;
   }
 
-  .sm\:psui-text-xl {
-    font-size: 1.25rem;
+  .sm\:psui-text-h1 {
+    font-size: 28px;
+    line-height: 120%;
   }
 
-  .sm\:psui-text-2xl {
-    font-size: 1.5rem;
+  .sm\:psui-text-h2 {
+    font-size: 24px;
+    line-height: 120%;
   }
 
-  .sm\:psui-text-3xl {
-    font-size: 1.875rem;
+  .sm\:psui-text-h3 {
+    font-size: 22px;
+    line-height: 120%;
   }
 
-  .sm\:psui-text-4xl {
-    font-size: 2.25rem;
+  .sm\:psui-text-h4 {
+    font-size: 20px;
+    line-height: 120%;
   }
 
-  .sm\:psui-text-5xl {
-    font-size: 3rem;
+  .sm\:psui-text-h5 {
+    font-size: 18px;
+    line-height: 120%;
   }
 
-  .sm\:psui-text-6xl {
-    font-size: 4rem;
+  .sm\:psui-text-h6 {
+    font-size: 17px;
+    line-height: 120%;
   }
 
   .sm\:psui-leading-3 {
@@ -32614,44 +32614,59 @@ video {
     height: 100vh;
   }
 
-  .md\:psui-text-xs {
-    font-size: 0.75rem;
+  .md\:psui-text-small {
+    font-size: 14px;
+    line-height: 130%;
+  }
+
+  .md\:psui-text-xSmall {
+    font-size: 12px;
+    line-height: 130%;
   }
 
-  .md\:psui-text-sm {
-    font-size: 0.875rem;
+  .md\:psui-text-accent {
+    font-size: 14px;
+    line-height: 130%;
   }
 
-  .md\:psui-text-base {
-    font-size: 1rem;
+  .md\:psui-text-accentSmall {
+    font-size: 12px;
+    line-height: 130%;
   }
 
-  .md\:psui-text-lg {
-    font-size: 1.125rem;
+  .md\:psui-text-p {
+    font-size: 16px;
+    line-height: 120%;
   }
 
-  .md\:psui-text-xl {
-    font-size: 1.25rem;
+  .md\:psui-text-h1 {
+    font-size: 28px;
+    line-height: 120%;
   }
 
-  .md\:psui-text-2xl {
-    font-size: 1.5rem;
+  .md\:psui-text-h2 {
+    font-size: 24px;
+    line-height: 120%;
   }
 
-  .md\:psui-text-3xl {
-    font-size: 1.875rem;
+  .md\:psui-text-h3 {
+    font-size: 22px;
+    line-height: 120%;
   }
 
-  .md\:psui-text-4xl {
-    font-size: 2.25rem;
+  .md\:psui-text-h4 {
+    font-size: 20px;
+    line-height: 120%;
   }
 
-  .md\:psui-text-5xl {
-    font-size: 3rem;
+  .md\:psui-text-h5 {
+    font-size: 18px;
+    line-height: 120%;
   }
 
-  .md\:psui-text-6xl {
-    font-size: 4rem;
+  .md\:psui-text-h6 {
+    font-size: 17px;
+    line-height: 120%;
   }
 
   .md\:psui-leading-3 {
@@ -45559,44 +45574,59 @@ video {
     height: 100vh;
   }
 
-  .lg\:psui-text-xs {
-    font-size: 0.75rem;
+  .lg\:psui-text-small {
+    font-size: 14px;
+    line-height: 130%;
   }
 
-  .lg\:psui-text-sm {
-    font-size: 0.875rem;
+  .lg\:psui-text-xSmall {
+    font-size: 12px;
+    line-height: 130%;
   }
 
-  .lg\:psui-text-base {
-    font-size: 1rem;
+  .lg\:psui-text-accent {
+    font-size: 14px;
+    line-height: 130%;
   }
 
-  .lg\:psui-text-lg {
-    font-size: 1.125rem;
+  .lg\:psui-text-accentSmall {
+    font-size: 12px;
+    line-height: 130%;
   }
 
-  .lg\:psui-text-xl {
-    font-size: 1.25rem;
+  .lg\:psui-text-p {
+    font-size: 16px;
+    line-height: 120%;
   }
 
-  .lg\:psui-text-2xl {
-    font-size: 1.5rem;
+  .lg\:psui-text-h1 {
+    font-size: 28px;
+    line-height: 120%;
   }
 
-  .lg\:psui-text-3xl {
-    font-size: 1.875rem;
+  .lg\:psui-text-h2 {
+    font-size: 24px;
+    line-height: 120%;
   }
 
-  .lg\:psui-text-4xl {
-    font-size: 2.25rem;
+  .lg\:psui-text-h3 {
+    font-size: 22px;
+    line-height: 120%;
   }
 
-  .lg\:psui-text-5xl {
-    font-size: 3rem;
+  .lg\:psui-text-h4 {
+    font-size: 20px;
+    line-height: 120%;
   }
 
-  .lg\:psui-text-6xl {
-    font-size: 4rem;
+  .lg\:psui-text-h5 {
+    font-size: 18px;
+    line-height: 120%;
+  }
+
+  .lg\:psui-text-h6 {
+    font-size: 17px;
+    line-height: 120%;
   }
 
   .lg\:psui-leading-3 {
@@ -58504,44 +58534,59 @@ video {
     height: 100vh;
   }
 
-  .xl\:psui-text-xs {
-    font-size: 0.75rem;
+  .xl\:psui-text-small {
+    font-size: 14px;
+    line-height: 130%;
   }
 
-  .xl\:psui-text-sm {
-    font-size: 0.875rem;
+  .xl\:psui-text-xSmall {
+    font-size: 12px;
+    line-height: 130%;
   }
 
-  .xl\:psui-text-base {
-    font-size: 1rem;
+  .xl\:psui-text-accent {
+    font-size: 14px;
+    line-height: 130%;
   }
 
-  .xl\:psui-text-lg {
-    font-size: 1.125rem;
+  .xl\:psui-text-accentSmall {
+    font-size: 12px;
+    line-height: 130%;
   }
 
-  .xl\:psui-text-xl {
-    font-size: 1.25rem;
+  .xl\:psui-text-p {
+    font-size: 16px;
+    line-height: 120%;
   }
 
-  .xl\:psui-text-2xl {
-    font-size: 1.5rem;
+  .xl\:psui-text-h1 {
+    font-size: 28px;
+    line-height: 120%;
   }
 
-  .xl\:psui-text-3xl {
-    font-size: 1.875rem;
+  .xl\:psui-text-h2 {
+    font-size: 24px;
+    line-height: 120%;
   }
 
-  .xl\:psui-text-4xl {
-    font-size: 2.25rem;
+  .xl\:psui-text-h3 {
+    font-size: 22px;
+    line-height: 120%;
   }
 
-  .xl\:psui-text-5xl {
-    font-size: 3rem;
+  .xl\:psui-text-h4 {
+    font-size: 20px;
+    line-height: 120%;
   }
 
-  .xl\:psui-text-6xl {
-    font-size: 4rem;
+  .xl\:psui-text-h5 {
+    font-size: 18px;
+    line-height: 120%;
+  }
+
+  .xl\:psui-text-h6 {
+    font-size: 17px;
+    line-height: 120%;
   }
 
   .xl\:psui-leading-3 {
@@ -66542,3 +66587,4 @@ video {
             animation: bounce 1s infinite;
   }
 }
+

package/tailwind.config.js

@@ -7,9 +7,13 @@ module.exports = {
       'white': '#ffffff !important',
       'gray-10': '#F3F6F9',
       'gray-20': '#E6ECF2',
+      'gray-30': '#D6DDE5',
       'gray-40': '#A2ACB7',
       'gray-50': '#798490',
       'gray-60': '#515E6A',
+      'gray-70': '#34404A',
+      'gray-80': '#28323B',
+
       'blue': '#5094D3',
       'blue-10':'#ECF7FB',
       'blue-20':'#E0EFF6',
@@ -17,18 +21,22 @@ module.exports = {
       'blue-60':'#318FAC',
       'blue-70':'#00465F',
       'blue-80':'#002A3A',
+
       'green-10':'#DEF8E8',
       'green-20':'#5DB883',
       'green-70':'#44A06A',
       'green-80':'#286943',
+
       'yellow-10':'#FDF3E3',
       'yellow-20':'#EDAB3E',
       'yellow-70':'#B87305',
       'yellow-80':'#834C0D',
+
       'red-10':'#FCEBEB',
       'red-20':'#D65C5A',
       'red-70':'#AA3937',
       'red-80':'#832F2E',
+      
       'purple': '#9278C9',
       'teal': '#57C0BA',
       'emerald': '#8CCA82',
@@ -38,7 +46,26 @@ module.exports = {
     fontFamily: {
       'sans': ['Lato'],
     },
+    fontSize: {
+      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%'],
+      h4: ['20px', '120%'],
+      h5: ['18px', '120%'],
+      h6: ['17px', '120%'],
+    },    
     boxShadow: {
+      // elevationInner: '0px 1px 0px #FFFFFF, inset 0px 1px 2px rgba(0, 0, 0, 0.1)',
+      // elevation5: '0px 0px 4px rgba(0, 0, 0, 0.03), 0px 1px 2px rgba(0, 0, 0, 0.1)',
+      // elevation10: '0px 0px 8px rgba(0, 0, 0, 0.04), 0px 2px 5px rgba(0, 0, 0, 0.08)',
+      // elevation20: '0px 0px 8px rgba(0, 0, 0, 0.04), 0px 5px 6px rgba(0, 0, 0, 0.1)',
+      // elevation30: '0px 0px 8px rgba(0, 0, 0, 0.05), 0px 10px 15px rgba(0, 0, 0, 0.15)',
+      // elevation40: '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)',