New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
@fintricity-public/style-guide
Advanced tools
@fintricity-public/style-guide - npm Package Compare versions
to
0.0.1
283
index.js
@@ -1,2 +0,1 @@ | ||
| // PRIMARY COLOURS | ||
@@ -15,2 +14,3 @@ export const ULTRA_MARINE = '#002257' | ||
| // GREYS | ||
| export const BLACK = '#000000' | ||
| export const GRANITE = '#58595b' | ||
@@ -20,8 +20,4 @@ export const STEEL = '#97a3b4' | ||
| export const MERCURY = '#f3faff' | ||
| export const WHITE = '#ffffff' | ||
| // FONTS | ||
@@ -32,3 +28,4 @@ export const FONT_LARGEST = '30px' | ||
| export const FONT = '16px' | ||
| export const FONT_SMALL = '12px' | ||
| export const FONT_SMALL = '14px' | ||
| export const FONT_SMALLER = '12px' | ||
@@ -43,2 +40,15 @@ // LINE HEIGHT | ||
| // TEXT ALIGN | ||
| export const TEXT_ALIGN_START = 'start' | ||
| export const TEXT_ALIGN_LEFT = 'left' | ||
| export const TEXT_ALIGN_CENTER = 'center' | ||
| export const TEXT_ALIGN_RIGHT = 'right' | ||
| // FONT STYLE | ||
| export const FONT_STYLE = 'normal' | ||
| // FONT WEIGHT | ||
| export const FONT_WEIGHT_LARGE = '500' | ||
| export const FONT_WEIGHT = '400' | ||
| // SPACING | ||
@@ -56,173 +66,92 @@ export const MARGIN_LARGER = '30px' | ||
| // LETTER SPACING | ||
| export const LETTER_SPACING = '1' | ||
| export const LETTER_SPACING_SMALL = '0.86px' | ||
| export const LETTER_SPACING_SMALLER = '0.1px' | ||
| // FONT FAMILY | ||
| export const FONT_FAMILY = 'Rubik' | ||
| // FONT WEIGHT | ||
| /* H1 font style */ | ||
| --font-h-1-font-size: 30px; | ||
| --font-h-1-line-height: 60px; | ||
| --font-h-1-text-align: start; | ||
| --font-h-1-color: #002257; | ||
| --font-h-1-font-style: normal; | ||
| --font-h-1-font-weight: 500; | ||
| --font-h-1-font-family: Rubik; | ||
| /* H2 font style */ | ||
| --font-h-2-font-size: 24px; | ||
| --font-h-2-line-height: 54px; | ||
| --font-h-2-text-align: left; | ||
| --font-h-2-color: #002257; | ||
| --font-h-2-font-style: normal; | ||
| --font-h-2-font-weight: 500; | ||
| --font-h-2-font-family: Rubik; | ||
| /* H3 font style */ | ||
| --font-h-3-font-size: 20px; | ||
| --font-h-3-line-height: 50px; | ||
| --font-h-3-text-align: left; | ||
| --font-h-3-color: #002257; | ||
| --font-h-3-letter-spacing: 0.1px; | ||
| --font-h-3-font-style: normal; | ||
| --font-h-3-font-weight: 500; | ||
| --font-h-3-font-family: Rubik; | ||
| /* H4 font style */ | ||
| --font-h-4-font-size: 16px; | ||
| --font-h-4-line-height: normal; | ||
| --font-h-4-text-align: left; | ||
| --font-h-4-color: #002257; | ||
| --font-h-4-font-style: normal; | ||
| --font-h-4-font-weight: 500; | ||
| --font-h-4-font-family: Rubik; | ||
| /* Body font style */ | ||
| --font-body-font-size: 14px; | ||
| --font-body-line-height: 22px; | ||
| --font-body-text-align: left; | ||
| --font-body-color: #002257; | ||
| --font-body-font-style: normal; | ||
| --font-body-font-weight: 400; | ||
| --font-body-font-family: Rubik; | ||
| /* Meta font style */ | ||
| --font-meta-font-size: 12px; | ||
| --font-meta-line-height: 20px; | ||
| --font-meta-text-align: center; | ||
| --font-meta-color: #97a3b4; | ||
| --font-meta-font-style: normal; | ||
| --font-meta-font-weight: 400; | ||
| --font-meta-font-family: Rubik; | ||
| /* Header nav font style */ | ||
| --font-header-nav-font-size: 12px; | ||
| --font-header-nav-line-height: normal; | ||
| --font-header-nav-text-align: center; | ||
| --font-header-nav-color: #ffffff; | ||
| --font-header-nav-letter-spacing: 0.86px; | ||
| --font-header-nav-font-style: normal; | ||
| --font-header-nav-font-weight: 500; | ||
| --font-header-nav-font-family: Rubik; | ||
| /* Header sub nav font style */ | ||
| --font-header-sub-nav-font-size: 12px; | ||
| --font-header-sub-nav-line-height: 20px; | ||
| --font-header-sub-nav-text-align: left; | ||
| --font-header-sub-nav-color: #ffffff; | ||
| --font-header-sub-nav-font-style: normal; | ||
| --font-header-sub-nav-font-weight: 400; | ||
| --font-header-sub-nav-font-family: Rubik; | ||
| /* Header sub nav / focus font style */ | ||
| --font-header-sub-nav-focus-font-size: 12px; | ||
| --font-header-sub-nav-focus-line-height: normal; | ||
| --font-header-sub-nav-focus-text-align: left; | ||
| --font-header-sub-nav-focus-color: #00b3c0; | ||
| --font-header-sub-nav-focus-font-style: normal; | ||
| --font-header-sub-nav-focus-font-weight: 400; | ||
| --font-header-sub-nav-focus-font-family: Rubik; | ||
| /* Header nav / focus font style */ | ||
| --font-header-nav-focus-font-size: 12px; | ||
| --font-header-nav-focus-line-height: normal; | ||
| --font-header-nav-focus-text-align: center; | ||
| --font-header-nav-focus-color: #00b3c0; | ||
| --font-header-nav-focus-letter-spacing: 0.86px; | ||
| --font-header-nav-focus-font-style: normal; | ||
| --font-header-nav-focus-font-weight: 500; | ||
| --font-header-nav-focus-font-family: Rubik; | ||
| // | ||
| // export const INPUT_WIDTH = '200px' | ||
| // export const BUTTON_WIDTH = '30px' | ||
| // | ||
| // export const BOX_SHADOW = 'inset 0 0 2px #4a4a4a' | ||
| // | ||
| // export const RADIUS_LARGE = '20px' | ||
| // export const RADIUS_MEDIUM = '10px' | ||
| // export const RADIUS_SMALL = '5px' | ||
| // | ||
| // // BASE STYLE OBJECT | ||
| // export default { | ||
| // h1: { | ||
| // fontSize: FONT_LARGEST, | ||
| // color: GREY_DARK, | ||
| // }, | ||
| // h2: { | ||
| // fontSize: FONT_LARGER, | ||
| // color: GREY_DARK, | ||
| // }, | ||
| // h3: { | ||
| // fontSize: FONT_LARGE, | ||
| // color: GREY_DARK, | ||
| // }, | ||
| // p: { | ||
| // fontSize: FONT_MEDIUM, | ||
| // color: GREY_DARK, | ||
| // }, | ||
| // span: { | ||
| // fontSize: FONT_MEDIUM, | ||
| // color: GREY_DARK, | ||
| // }, | ||
| // logo: { | ||
| // color: WHITE, | ||
| // margin: MARGIN | ||
| // }, | ||
| // section_title: { | ||
| // color: GREY_DARK, | ||
| // fontSize: FONT_LARGER | ||
| // }, | ||
| // input: { | ||
| // width: INPUT_WIDTH, | ||
| // marginBottom: MARGIN_SMALLER, | ||
| // MozBoxShadow: BOX_SHADOW, | ||
| // WebkitBoxShadow: BOX_SHADOW, | ||
| // boxShadow: BOX_SHADOW, | ||
| // padding: PADDING_SMALLEST, | ||
| // height: '36px', | ||
| // border: 'none' | ||
| // }, | ||
| // button: { | ||
| // padding: PADDING_SMALLEST, | ||
| // height: '36px', | ||
| // }, | ||
| // border_radius: { | ||
| // large: { | ||
| // WebkitBorderRadius: RADIUS_LARGE, | ||
| // MozBorderRadius: RADIUS_LARGE, | ||
| // borderRadius: RADIUS_LARGE | ||
| // }, | ||
| // medium: { | ||
| // WebkitBorderRadius: RADIUS_MEDIUM, | ||
| // MozBorderRadius: RADIUS_MEDIUM, | ||
| // borderRadius: RADIUS_MEDIUM | ||
| // }, | ||
| // small: { | ||
| // WebkitBorderRadius: RADIUS_SMALL, | ||
| // MozBorderRadius: RADIUS_SMALL, | ||
| // borderRadius: RADIUS_SMALL | ||
| // } | ||
| // } | ||
| // } | ||
| // STYLES | ||
| export default { | ||
| h1: { | ||
| fontSize: FONT_LARGEST, | ||
| lineHeight: LINE_HEIGHT_LARGEST, | ||
| textAlign: TEXT_ALIGN_START, | ||
| color: ULTRA_MARINE, | ||
| fontStyle: FONT_STYLE, | ||
| fontWeight: FONT_WEIGHT_LARGE, | ||
| fontFamily: FONT_FAMILY | ||
| }, | ||
| h2: { | ||
| fontSize: FONT_LARGER, | ||
| lineHeight: LINE_HEIGHT_LARGER, | ||
| textAlign: TEXT_ALIGN_LEFT, | ||
| color: ULTRA_MARINE, | ||
| fontStyle: FONT_STYLE, | ||
| fontWeight: FONT_WEIGHT_LARGE, | ||
| fontFamily: FONT_FAMILY | ||
| }, | ||
| h3: { | ||
| fontSize: FONT_LARGE, | ||
| lineHeight: LINE_HEIGHT_LARGE, | ||
| textAlign: TEXT_ALIGN_LEFT, | ||
| color: ULTRA_MARINE, | ||
| letterSpacing: LETTER_SPACING_SMALLER, | ||
| fontStyle: FONT_STYLE, | ||
| fontWeight: FONT_WEIGHT_LARGE, | ||
| fontFamily: FONT_FAMILY | ||
| }, | ||
| h4: { | ||
| fontSize: FONT, | ||
| lineHeight: LINE_HEIGHT, | ||
| textAlign: TEXT_ALIGN_LEFT, | ||
| color: ULTRA_MARINE, | ||
| fontStyle: FONT_STYLE, | ||
| fontWeight: FONT_WEIGHT_LARGE, | ||
| fontFamily: FONT_FAMILY | ||
| }, | ||
| body: { | ||
| fontSize: FONT_SMALL, | ||
| lineHeight: LINE_HEIGHT_SMALL, | ||
| textAlign: TEXT_ALIGN_LEFT, | ||
| color: ULTRA_MARINE, | ||
| fontStyle: FONT_STYLE, | ||
| fontWeight: FONT_WEIGHT, | ||
| fontFamily: FONT_FAMILY | ||
| }, | ||
| meta: { | ||
| fontSize: FONT_SMALLER, | ||
| lineHeight: LINE_HEIGHT_SMALLER, | ||
| textAlign: TEXT_ALIGN_CENTER, | ||
| color: STEEL, | ||
| fontStyle: FONT_STYLE, | ||
| fontWeight: FONT_WEIGHT, | ||
| fontFamily: FONT_FAMILY | ||
| }, | ||
| headerNav: { | ||
| fontSize: FONT_SMALLER, | ||
| lineHeight: LINE_HEIGHT, | ||
| textAlign: TEXT_ALIGN_CENTER, | ||
| color: WHITE, | ||
| letterSpacing: LETTER_SPACING_SMALL, | ||
| fontStyle: FONT_STYLE, | ||
| fontWeight: FONT_WEIGHT_LARGE, | ||
| fontFamily: FONT_FAMILY | ||
| ':focus': { | ||
| color: TIFFANY_BLUE | ||
| } | ||
| }, | ||
| headerSubNav: { | ||
| fontSize: FONT_SMALLER, | ||
| lineHeight: LINE_HEIGHT_SMALLER, | ||
| textAlign: TEXT_ALIGN_LEFT, | ||
| color: WHITE, | ||
| fontStyle: FONT_STYLE, | ||
| fontWeight: FONT_WEIGHT, | ||
| fontFamily: FONT_FAMILY | ||
| ':focus': { | ||
| color: TIFFANY_BLUE | ||
| } | ||
| } | ||
| } |
| { | ||
| "name": "@fintricity-public/style-guide", | ||
| "description": "UI Tools by Fintricity", | ||
| "version": "0.0.0", | ||
| "version": "0.0.1", | ||
| "author": "Jack Prior <jack.prior@fintricity.com>", | ||
@@ -6,0 +6,0 @@ "repository": { |
New alerts
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
Worsened metrics
- Total package byte prevSize
4187
-31.26%- Lines of code
140
-27.84%- Number of medium supply chain risk alerts
1
Infinity%No dependency changes