@policystudio/policy-studio-ui-vue 1.0.11 → 1.0.15

package/src/stories/Typography.stories.mdx

@@ -68,7 +68,7 @@ import { Meta } from '@storybook/addon-docs';
   
   .link-item img {
     height: 40px;
-    width: 40px;
+    width: 40px;  
     margin-right: 15px;
     flex: none;
   }
@@ -118,3 +118,89 @@ We use the Lato typographic family: https://fonts.google.com/specimen/Lato
 ### 1.2. Font sizes
 Keeping typography consistent and sticking to logical hierarchies ensures that elements in the UI are clear and easily recognizable when scanning the page. Text sizes, styles, and layouts were selected to balance content and UI and to foster familiarity.
 
+ <table>
+  <tr>
+    <td class="psui-w-48">
+      <p class="psui-font-bold">Headline 1</p>
+      psui-text-h1
+    </td>
+    <td class="psui-text-h1">The lazy fox jumped overthe brown dog</td>
+  </tr>
+  <tr>
+    <td>
+      <p class="psui-font-bold">Headline 2</p>
+      psui-text-h2
+    </td>
+    <td class="psui-text-h2">The lazy fox jumped over the brown dog</td>
+  </tr>
+  <tr>
+    <td>
+      <p class="psui-font-bold">Headline 3</p>
+      psui-text-h3
+    </td>
+    <td class="psui-text-h3">The lazy fox jumped over the brown dog</td>
+  </tr>
+  <tr>
+    <td>
+      <p class="psui-font-bold">Headline 4</p>
+      psui-text-h4
+    </td>
+    <td class="psui-text-h4">The lazy fox jumped over the brown dog</td>
+  </tr>
+  <tr>
+    <td>
+      <p class="psui-font-bold">Headline 5</p>
+      psui-text-h5
+    </td>
+    <td class="psui-text-h5">The lazy fox jumped over the brown dog</td>
+  </tr>
+  <tr>
+    <td>
+      <p class="psui-font-bold">Headline 6</p>
+      psui-text-h6
+    </td>
+    <td class="psui-text-h6">The lazy fox jumped over the brown dog</td>
+  </tr>
+  <tr>
+    <td>
+      <p class="psui-font-bold">Paragraph</p>
+      psui-text-p
+    </td>
+    <td class="psui-text-p">
+      This tool allows you to dive into the cost-effectiveness findings relevant to your City or County. We’ve also embedded explanations of terms and concepts throughout the tool, as well as much of the supplementary information contained in the cost-effectiveness studies.    
+    </td>
+  </tr>
+  <tr>
+    <td>
+      <p class="psui-font-bold">Small</p>
+      psui-text-small
+    </td>
+    <td class="psui-text-small">
+      This tool allows you to dive into the cost-effectiveness findings relevant to your City or County. We’ve also embedded explanations of terms and concepts throughout the tool, as well as much of the supplementary information contained in the cost-effectiveness studies.
+    </td>
+  </tr>
+  <tr>
+    <td>
+      <p class="psui-font-bold">XSmall</p>
+      psui-text-xsmall
+    </td>
+    <td class="psui-text-xsmall">
+      This tool allows you to dive into the cost-effectiveness findings relevant to your City or County. We’ve also embedded explanations of terms and concepts throughout the tool, as well as much of the supplementary information contained in the cost-effectiveness studies.
+    </td>
+  </tr>
+  <tr>
+    <td>
+      <p class="psui-font-bold">Accent</p>
+      psui-text-accent
+    </td>
+    <td class="psui-text-accent">UPPERCASE THE LAZY FOX JUNPED OVER THE BROWN DOG</td>
+  </tr>
+  <tr>
+    <td>
+      <p class="psui-font-bold">Accent Small</p>
+      psui-text-accent-small
+    </td>
+    <td class="psui-text-accent-small">UPPERCASE THE LAZY FOX JUNPED OVER THE BROWN DOG</td>
+  </tr>
+</table> 
+

package/tailwind.config.js

@@ -37,18 +37,20 @@ module.exports = {
       'red-70':'#AA3937',
       'red-80':'#832F2E',
       
-      'purple': '#9278C9',
+      'sky': '#518BE2',
       'teal': '#57C0BA',
       'emerald': '#8CCA82',
       'mustard': '#E9CF74',
-      'orange': '#FF906D'
+      'orange': '#FF906D',
+      'pink': '#FF77B8',
+      'purple': '#9278C9'
     },
     fontFamily: {
       'sans': ['Lato'],
     },
     fontSize: {
       small: ['14px', '130%'],
-      xSmall: ['12px', '130%'],
+      xsmall: ['12px', '130%'],
       accent: ['14px', '130%', { letterSpacing: '0.6px' }],
       accentSmall: ['12px', '130%', { letterSpacing: '0.6px' }],
       p: ['16px', '120%'],
@@ -60,12 +62,12 @@ module.exports = {
       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)',
+      'elevation--5': '0px 1px 0px #FFFFFF, inset 0px 1px 2px rgba(0, 0, 0, 0.1)',
+      'elevation-5': '0px 0px 4px rgba(0, 0, 0, 0.03), 0px 1px 2px rgba(0, 0, 0, 0.1)',
+      'elevation-10': '0px 0px 8px rgba(0, 0, 0, 0.04), 0px 2px 5px rgba(0, 0, 0, 0.08)',
+      'elevation-20': '0px 0px 8px rgba(0, 0, 0, 0.04), 0px 5px 6px rgba(0, 0, 0, 0.1)',
+      'elevation-30': '0px 0px 8px rgba(0, 0, 0, 0.05), 0px 10px 15px rgba(0, 0, 0, 0.15)',
+      'elevation-40': '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)',