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

package/src/components/buttons/PsButton.vue

@@ -54,6 +54,14 @@ export default {
     },
     disabled: {
       type: [Boolean, String]
+    },
+    'text-color': {
+      type: String,
+      default: ''
+    },
+    color: {
+      type: String,
+      default: ''
     }
   },
   data () {
@@ -67,7 +75,10 @@ export default {
       if (this.size === 'small') sizeCss = 'psui-px-2 psui-py-psui-px psui-text-sm'
       if (this.outline) return `${sizeCss} psui-bg-white psui-border ${this.disabled ? 'psui-border-gray-40 psui-text-gray-40' : 'psui-border-blue-60 psui-text-blue-60'}`
       if (this.ghost) return `${sizeCss} ${this.disabled ? 'psui-bg-gray-20 psui-text-gray-40' : 'psui-bg-blue-20 psui-text-blue-60 active:psui-shadow-inner'}`
-      if (this.textOnly) return `${sizeCss} ${this.disabled ? 'psui-text-gray-40' : 'psui-text-blue-60'}`
+      if (this.textOnly) {
+        const textCss = this.disabled ? 'psui-text-gray-40' : this.textColor.length > 0 ? `psui-text-${this.textColor}` : 'psui-text-blue-50 hover:psui-text-blue-60'
+        return `${sizeCss} ${textCss}`
+      }
       if (this.disabled) return `${sizeCss} psui-bg-gray-20 psui-text-gray-40`
       return `${sizeCss} psui-bg-blue-60 hover:psui-bg-blue-50 psui-text-white active:psui-shadow-inner`
     }  

package/src/components/controls/PsCheckbox.vue

@@ -1,12 +1,13 @@
 <template>
-  <label class="container">
+  <label class="container psui-pl-6" :class="[{ 'psui-text-gray-40': disabled }, { 'psui-text-gray-50': !disabled }, labelClasses]">
     {{ label }}
     <input
       type="checkbox"
-      v-model="childValue"
+      v-model="model"
       :disabled="disabled"
+      :value="inputValue"
     />
-    <span class="checkmark"></span>
+    <span class="checkmark psui-border-2" :class="classes" :style="getSize"></span>
   </label>
 </template>
 
@@ -15,68 +16,56 @@ export default {
   name: 'PsCheckbox',
   props: {
     value: {
-      required: true
+      required: true,
     },
+    inputValue: String,    
     label: {
       type: String,
       default: ''
     },
-    bg: {
-      type: String,
-      default: 'blue-20'
-    },
-    type: {
-      type: String,
-      default: 'checkbox'
-    },
     checkboxClasses: {
       type: String,
-      default: 'mb-2'
+      default: 'psui-pl-8'
     },
     labelClasses: {
       type: String,
-      default: 'text-gray04'
+      default: ''
     },
     disabled: {
       type: Boolean,
       default: false
     },
-    tooltip: {
-      type: [Object, Boolean, String, Promise],
-      default: false
-    },
-    prevent: {
-      default: false
-    },
     size: {
-      default: 16
+      default: 18
     }
   },
   computed: {
-    childValue: {
-      get () {
-        return this.value
+    model: {
+      get() {
+        return this.value;
       },
-      set (newValue) {
-        console.log(newValue)
-        if(this.prevent) return
+      set(newValue) {
         this.$emit('input', newValue)
         this.$emit('change', newValue)
-      }
+      },
+    },
+    classes() {
+      return `${this.disabled ? 'psui-border-gray-40': 'psui-border-gray-50'} ${checkboxClasses}`
     },
     getSize() {
-      return { width: this.size + 'px', height: this.size + 'px'}
+      return {
+        width: `${this.size}px`,
+        height: `${this.size}px`
+      }
     }
   }
 }
 </script>
 
-<style>
+<style scoped>
 .container {
   display: block;
   position: relative;
-  padding-left: 35px;
-  margin-bottom: 12px;
   cursor: pointer;
   -webkit-user-select: none;
   -moz-user-select: none;
@@ -99,7 +88,6 @@ export default {
   height: 18px;
   width: 18px;
   background-color: #fff;
-  border: solid 2px #A2ACB7;
   border-radius: 2px;
 }
 
@@ -119,10 +107,10 @@ export default {
 }
 
 .container .checkmark:after {
-  left: 5px;
-  top: 1px;
-  width: 7px;
-  height: 13px;
+  left: 35%;
+  top: 8%;
+  width: 35%;
+  height: 65%;
   border: solid white;
   border-radius: 1px;
   border-width: 0 2px 2px 0;

package/src/components/controls/PsToggle.vue

@@ -0,0 +1,39 @@
+<template>
+    <div class="psui-rounded-sm psui-inline-flex psui-bg-gray-10 wrapper psui-gap-x-px" role="group">
+      <button 
+        v-for="(item, index) in items"
+        :key="index"
+        @click="selectOption(item)"
+        type="button"
+        class="psui-inline-flex psui-rounded-sm psui-text-small psui-text-blue-60 psui-px-2"
+        :class="{'psui-bg-blue-60 psui-text-white psui-font-bold': selected === item}"
+      >
+        {{ item }}
+      </button>
+    </div>
+</template>
+
+<script>
+export default {
+  name: 'PsSlider',
+  props: {
+    items: {
+      type: Array,
+      required: true
+    },
+    selected: {},
+  },
+  methods: {
+    selectOption(item) {
+      this.$emit('update:selected', item)
+      this.$emit('change', item)
+    }
+  }
+}
+</script>
+
+<style>
+.wrapper {
+  padding: 2px;
+}
+</style>

package/src/components/forms/PsInput.vue

@@ -0,0 +1,79 @@
+<template>
+	<div>
+		<div v-if="label" class="psui-font-bold psui-text-gray-80">{{ label }}</div>
+    <div class="psui-relative">
+      <div class="psui-absolute psui-inset-y-0 psui-left-0 psui-pl-2 psui-flex psui-items-center psui-pointer-events-none" v-if="this.$slots.prepend">
+        <slot name="prepend"></slot>
+      </div>
+      <input
+        :type="type"
+        :placeholder="placeholder"
+        :disabled="disabled"
+        :aria-required="required"
+        :aria-invalid="validation.hasError"
+        :class="[getInputClasses, { 'psui-border-red' : validation.hasError }]"
+      />
+      <div class="psui-absolute psui-inset-y-0 psui-right-0 psui-pr-2 psui-flex psui-items-center" v-if="this.$slots.append">
+        <slot name="append"></slot>
+      </div>
+    </div>
+		<div v-if="hint && !validation.hasError" class="psui-text-gray-50 psui-text-xsmall">{{ hint }}</div>
+		<div v-if="validation.hasError && validation.label" class="psui-text-red psui-text-xsmall">{{ validation.label }}</div>
+	</div>
+</template>
+
+<script>
+export default {
+	name: 'PsInput',
+  props: {
+    type: {
+      type: String,
+      default: 'text'
+    },
+		required: {
+			type: Boolean
+		},
+		placeholder: {
+			type: String
+		},
+		label: {
+			type: String
+		},
+		hint: {
+			type: String
+		},
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    mini: {
+      type: Boolean,
+      default: false
+    },
+    validation: {
+      type: Object,
+      default: () => {
+        return { hasError: false, checked: false, filled: false, required: false }
+      }
+    },
+	},
+  computed: {
+    getInputClasses() {
+      return `${this.getPadding} ${this.getText} psui-text-gray-60 psui-bg-white psui-w-full psui-border psui-border-gray-30 psui-rounded-md psui-block hover:psui-border-blue-50 focus:psui-border-blue-50`
+    },
+    getText() {
+      return this.mini ? 'psui-text-small' : ''
+    },
+    getPadding() {
+      return this.mini ? 'psui-px-2 mini-p' : 'psui-py-2 psui-px-4'
+    }
+  }
+}
+</script>
+
+<style>
+.mini-p {
+  padding-top: 6px;
+  padding-bottom: 6px;
+}
+</style>

package/src/stories/Button.stories.js

@@ -47,8 +47,8 @@ Ghost.args = {
 export const TextOnly = Template.bind({});
 TextOnly.args = {
   label: 'TextOnly button',
-  disabled: true,
+  disabled: false,
   icon: 'add_circle',
   size: 'big',
-  textOnly: true
+  textOnly: true,
 };

package/src/stories/Checkbox.stories.js

@@ -23,22 +23,19 @@ const Template = (args, { argTypes }) => ({
   },
   template: `
   <div>
-    <PsCheckbox
-      v-bind="$props"
-      v-for="(item, index) in items"
-      :key="index"
-      :label="item.label"
-      :value.sync="item.id"
-      v-model="selected"
-    />
-    {{ selected }}
+    <PsCheckbox v-bind="$props" label="Label 1" inputValue="1" v-model="selected" />
+    <PsCheckbox v-bind="$props" label="Label 2" inputValue="2" v-model="selected" />
+    <PsCheckbox v-bind="$props" label="Label 3" inputValue="3" v-model="selected" />
+    <p>Checked: {{ selected }}</p>
   </div>
   `
 });
 
 export const Default = Template.bind({});
 Default.args = {
+  size: 18,
+  disabled: false,
   label: 'Label',
-  size: 16
+  labelClasses: '',
 };
  

package/src/stories/Colors.stories.mdx

@@ -10,13 +10,59 @@ import { Canvas, Meta, Story } from '@storybook/addon-docs';
 Out colors are designed to be harmonious, ensure accessible text, and distinguish UI elements and surfaces from one another. The support colors are used as a visual support to communicate and provide better and more meaningful feedback.
 
 ## Blue
+<div class="psui-flex">
+  <div class="psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-blue-80">Blue 80</div>
+  <div class="psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-blue-70">Blue 70</div>
+  <div class="psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-blue-60">Blue 60</div>
+  <div class="psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-blue-50">Blue 50</div>
+  <div class="psui-p-2 psui-h-24 psui-w-32 psui-text-blue-70 psui-bg-blue-20">Blue 20</div>
+  <div class="psui-p-2 psui-h-24 psui-w-32 psui-text-blue-70 psui-bg-blue-10">Blue 10</div>
+  <div class="psui-p-2 psui-h-24 psui-w-32 psui-text-blue-70 psui-bg-white ">White</div>
+</div>
 
-<div class="psui-grid psui-grid-flow-col">
-  <div class="psui-p-2 psui-h-20 psui-text-white psui-bg-blue-80">Blue 80</div>
-  <div class="psui-p-2 psui-h-20 psui-text-white psui-bg-blue-70">Blue 70</div>
-  <div class="psui-p-2 psui-h-20 psui-text-white psui-bg-blue-60">Blue 60</div>
-  <div class="psui-p-2 psui-h-20 psui-text-white psui-bg-blue-50">Blue 50</div>
-  <div class="psui-p-2 psui-h-20 psui-text-blue-70 psui-bg-blue-20">Blue 20</div>
-  <div class="psui-p-2 psui-h-20 psui-text-blue-70 psui-bg-blue-10">Blue 10</div>
-  <div class="psui-p-2 psui-h-20 psui-text-blue-70 psui-bg-white ">White</div>
-</div>
+## Gray
+<div class="psui-flex">
+  <div class="psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-gray-80">Gray 80</div>
+  <div class="psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-gray-70">Gray 70</div>
+  <div class="psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-gray-60">Gray 60</div>
+  <div class="psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-gray-50">Gray 50</div>
+  <div class="psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-gray-40">Gray 40</div>
+  <div class="psui-p-2 psui-h-24 psui-w-32 psui-text-gray-50 psui-bg-gray-30">Gray 30</div>
+  <div class="psui-p-2 psui-h-24 psui-w-32 psui-text-gray-50 psui-bg-gray-20">Gray 20</div>
+  <div class="psui-p-2 psui-h-24 psui-w-32 psui-text-gray-50 psui-bg-gray-10">Gray 10</div>
+</div>
+
+## Yellow
+<div class="psui-flex">
+  <div class="psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-yellow-80">Yellow 80</div>
+  <div class="psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-yellow-70">Yellow 70</div>
+  <div class="psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-yellow-20">Yellow 20</div>
+  <div class="psui-p-2 psui-h-24 psui-w-32 psui-text-yellow-20 psui-bg-yellow-10">Yellow 10</div>
+</div>
+
+## Green
+<div class="psui-flex">
+  <div class="psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-green-80">Green 80</div>
+  <div class="psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-green-70">Green 70</div>
+  <div class="psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-green-20">Green 20</div>
+  <div class="psui-p-2 psui-h-24 psui-w-32 psui-text-green-20 psui-bg-green-10">Green 10</div>
+</div>
+
+## Red
+<div class="psui-flex">
+  <div class="psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-red-80">Red 80</div>
+  <div class="psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-red-70">Red 70</div>
+  <div class="psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-red-20">Red 20</div>
+  <div class="psui-p-2 psui-h-24 psui-w-32 psui-text-red-20 psui-bg-red-10">Red 10</div>
+</div>
+
+## Chart colors
+<div class="psui-flex">
+  <div class="psui-float-left psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-sky">Sky</div>
+  <div class="psui-float-left psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-teal">Teal</div>
+  <div class="psui-float-left psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-emerald">Emerald</div>
+  <div class="psui-float-left psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-mustard">Mustard</div>
+  <div class="psui-float-left psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-orange">Orange</div>
+  <div class="psui-float-left psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-pink">Pink</div>
+  <div class="psui-float-left psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-purple">Purple</div>
+</div>

package/src/stories/ElevationSystem.stories.mdx

@@ -31,11 +31,11 @@ The shadows in our elements are projected by these two light sources: main light
 
 ## 2. Elevation system
 Shadows provide cues about depth, direction of movement, and surface edges. A surface’s shadow is determined by its elevation and relationship to other surfaces.
-<div class="psui-grid grid-cols-2 psui-gap-6 psui-p-6 psui-bg-gray-20">
-  <div class="psui-rounded-md psui-p-8 psui-h-20 psui-shadow-inner">Elevation -5</div>
-  <div class="psui-rounded-md psui-p-8 psui-h-20 psui-bg-white psui-shadow-sm">Elevation 5</div>
-  <div class="psui-rounded-md psui-p-8 psui-h-20 psui-bg-white psui-shadow">Elevation 10</div>
-  <div class="psui-rounded-md psui-p-8 psui-h-20 psui-bg-white psui-shadow-md">Elevation 20</div>
-  <div class="psui-rounded-md psui-p-8 psui-h-20 psui-bg-white psui-shadow-lg">Elevation 30</div>
-  <div class="psui-rounded-md psui-p-8 psui-h-20 psui-bg-white psui-shadow-xl">Elevation 40</div>
+<div class="psui-grid psui-grid-cols-2 psui-gap-6 psui-p-6 psui-bg-gray-20">
+  <div class="psui-rounded-md psui-p-8 psui-h-20 psui-shadow-elevation--5">Elevation -5</div>
+  <div class="psui-rounded-md psui-p-8 psui-h-20 psui-bg-white psui-shadow-elevation-5">Elevation 5</div>
+  <div class="psui-rounded-md psui-p-8 psui-h-20 psui-bg-white psui-shadow-elevation-10">Elevation 10</div>
+  <div class="psui-rounded-md psui-p-8 psui-h-20 psui-bg-white psui-shadow-elevation-20">Elevation 20</div>
+  <div class="psui-rounded-md psui-p-8 psui-h-20 psui-bg-white psui-shadow-elevation-30">Elevation 30</div>
+  <div class="psui-rounded-md psui-p-8 psui-h-20 psui-bg-white psui-shadow-elevation-40">Elevation 40</div>
 </div>

package/src/stories/Input.stories.js

@@ -0,0 +1,85 @@
+import PsInput from '../components/forms/PsInput.vue';
+export default {
+  title: 'Components/Input',
+  component: PsInput,
+  argTypes: {
+    disabled: { control: 'boolean' },
+    required: { control: 'boolean' },
+  },
+};
+
+const TemplateDefault = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { PsInput },
+  data: () => {
+    return {
+      validator: {
+        hasError: true,
+        label: 'Error message!'
+      }
+    }
+  },
+  template: `
+    <div class="psui-p-8 psui-bg-gray-10">
+      <PsInput v-bind="$props" />
+      <PsInput v-bind="$props" class="psui-mt-8" :validator="validator"  />
+    </div>
+  `
+});
+
+const TemplateSlots = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { PsInput },
+  template: `
+    <div class="psui-p-8 psui-bg-gray-10">
+      <PsInput v-bind="$props" class="psui-mb-4">
+        <template v-slot:append>
+          ft²
+        </template>
+      </PsInput>   
+      <PsInput v-bind="$props" class="psui-mb-4">
+        <template v-slot:prepend>
+          ft²
+        </template>
+      </PsInput>   
+      <PsInput v-bind="$props" class="psui-mb-4">
+        <template v-slot:prepend>
+          ft²
+        </template>
+        <template v-slot:append>
+          ft²
+        </template>
+      </PsInput>
+    </div>
+  `
+});
+
+export const InputText = TemplateDefault.bind({});
+InputText.args = {
+  label: 'Label',
+  placeholder: 'Placeholder',
+  hint: 'Optional Assistive text',
+  disabled: false,
+  required: false,
+  mini: false,
+};
+
+export const InputPassword = TemplateDefault.bind({});
+InputPassword.args = {
+  type: 'password',
+  label: 'Password',
+  hint: 'Optional Assistive text',
+  disabled: false,
+  required: false,
+  mini: false,
+};
+
+export const InputSlots = TemplateSlots.bind({});
+InputSlots.args = {
+  label: 'Label',
+  placeholder: 'Placeholder',
+  hint: 'Optional Assistive text',
+  disabled: false,
+  required: false,
+  mini: false,
+};

package/src/stories/Toggle.stories.js

@@ -0,0 +1,22 @@
+import PsToggle from '../components/controls/PsToggle.vue';
+export default {
+  title: 'Components/Toggle',
+  component: PsToggle,
+  argTypes: {},
+};
+const items = ['Option 1', 'Option 2', 'Option 3']
+const selected = 'Option 2'
+
+const Template = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { PsToggle },
+  template: `
+  <PsToggle v-bind="$props" :selected.sync="selected" />
+  `
+});
+
+export const Default = Template.bind({});
+Default.args = {
+  items: items,
+  selected: selected
+};

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)',