@fintricity-public/style-guide - npm Package Compare versions

Comparing version 0.0.3 to 0.0.4

index.js

@@ -5,2 +5,3 @@ // PRIMARY COLOURS
 export const TIFFANY_BLUE = '#00b3c0'
+export const TIFFANY_BLUE_HOVER = '#01CEDD'
 export const PALE_MINT = '#a7f4e6'
@@ -37,2 +38,3 @@
 export const LINE_HEIGHT_SMALLER = '20px'
+export const LINE_HEIGHT_SMALLEST = '17px'
 
@@ -53,12 +55,17 @@ // TEXT ALIGN
 // SPACING
-export const MARGIN_LARGER = '30px'
+export const MARGIN_LARGER = '40px'
+export const MARGIN_LARGE = '30px'
 export const MARGIN = '20px'
-export const MARGIN_SMALLER = '10px'
-export const MARGIN_SMALLEST = '5px'
+export const MARGIN_SMALL = '10px'
+export const MARGIN_SMALLER = '5px'
 
+// BORDER RADIUS
+export const BORDER_RADIUS = '4px'
+
 // PADDING
+export const PADDING_LARGER = '90px'
 export const PADDING_LARGE = '60px'
 export const PADDING = '30px'
 export const PADDING_SMALL = '15px'
-export const PADDING_SMALLEST = '5px'
+export const PADDING_SMALLER = '5px'
 
@@ -69,2 +76,3 @@ // LETTER SPACING
 export const LETTER_SPACING_SMALLER = '0.1px'
+export const LETTER_SPACING_SMALLEST = '0.5px'
 
@@ -74,2 +82,6 @@ // FONT FAMILY
 
+// Z_INDEX
+export const Z_INDEX_LARGE = 10
+export const Z_INDEX = 5
+
 // STYLES
@@ -156,3 +168,71 @@ export default {
     }
+  },
+  button: {
+    height: '60px',
+    width: '300px',
+    borderRadius: BORDER_RADIUS,
+    backgroundColor: TIFFANY_BLUE,
+    color: WHITE,
+    fontFamily: FONT_FAMILY,
+    fontSize: FONT_SMALL,
+    fontWeight: 500,
+    letterSpacing: LETTER_SPACING_SMALLEST,
+    lineHeight: LINE_HEIGHT_SMALLEST,
+    textAlign: TEXT_ALIGN_CENTER,
+    ':focus': {
+      border: '2px solid ' + TIFFANY_BLUE,
+      backgroundColor: TIFFANY_BLUE_HOVER
+    },
+    ':active': {
+      boxShadow: 'inset 0 0 7px 0 rgba(0,0,0,0.4)'
+    }
+  },
+  buttonSecondary: {
+    height: '60px',
+    width: '300px',
+    borderRadius: BORDER_RADIUS,
+    backgroundColor: TIFFANY_BLUE,
+    color: TIFFANY_BLUE,
+    fontFamily: FONT_FAMILY,
+    fontSize: FONT_SMALL,
+    fontWeight: 500,
+    letterSpacing: LETTER_SPACING_SMALLEST,
+    lineHeight: LINE_HEIGHT_SMALLEST,
+    textAlign: TEXT_ALIGN_CENTER,
+    ':focus': {
+      border: '2px solid ' + TIFFANY_BLUE,
+      backgroundColor: WHITE
+    },
+    ':active': {
+      border: '2px solid ' + TIFFANY_BLUE,
+      backgroundColor: MERCURY,
+      boxShadow: 'inset 0 0 7px 0 rgba(0,0,0,0.4), 0 2px 4px 0 rgba(0,0,0,0.5)'
+    }
+  },
+  table: {
+    color: STEEL,
+    fontSize: FONT_SMALLER,
+    lineHeight: LINE_HEIGHT_SMALL,
+    thead: {
+      tr: {
+        backgroundColor: ULTRA_MARINE
+      }
+    },
+    tbody: {
+      tr: {
+        ':nth-child(odd)': {
+          backgroundColor: WHITE
+        },
+        ':nth-child(even)': {
+          backgroundColor: 'rgba(220,231,231,0.2)'
+        },
+        td: {
+          ':first': {
+            color: TIFFANY_BLUE,
+            fontWeight: FONT_WEIGHT_LARGE
+          }
+        }
+      }
+    }
   }
 }

package.json

 {
   "name": "@fintricity-public/style-guide",
   "description": "UI Tools by Fintricity",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "author": "Jack Prior <[e-mail]>",
@@ -6,0 +6,0 @@ "repository": {

No alert changes

Improved metrics

Total package byte prevSize

6163

47.23%

Lines of code

218

55.71%

No dependency changes