@pluralsight/headless-styles
Advanced tools
Comparing version 0.0.0-alpha-7a99a7 to 0.0.0-alpha-872e2d
import { psBackground, psBackgroundActive, psBackgroundHover, psBackgroundWeak, psNeutralBackground, psNeutralBackgroundActive, psNeutralBackgroundHover, psNeutralText, psNeutralTextWeak, psText, psTextMedium, } from '@pluralsight/design-tokens'; | ||
import { getDefaultOptions } from './shared'; | ||
const BASE_FONT_SIZE = '16px !important'; | ||
const BASE_FONT_SIZE = '16px'; | ||
const baseStyles = { | ||
js: { | ||
appearance: 'none', | ||
backgroundColor: 'transparent !important', | ||
backgroundColor: 'transparent', | ||
border: 'none', | ||
borderRadius: '6px !important', | ||
borderRadius: '6px', | ||
cursor: 'pointer', | ||
fontFamily: 'PS TT Commons Roman, Gotham SSm A, Gotham SSm B, Arial,sans-serif', | ||
fontSize: BASE_FONT_SIZE, | ||
fontWeight: 'inherit !important', | ||
height: 'initial !important', | ||
outlineOffset: 'initial !important', | ||
fontWeight: 'inherit', | ||
height: 'initial', | ||
outlineOffset: 'initial', | ||
padding: '10px 16px', | ||
@@ -34,11 +34,11 @@ textAlign: 'center', | ||
appearance: none; | ||
background-color: transparent !important; | ||
background-color: transparent; | ||
border: none; | ||
border-radius: 6px !important; | ||
border-radius: 6px; | ||
cursor: pointer; | ||
font-family: 'PS TT Commons Roman', 'Gotham SSm A', 'Gotham SSm B', Arial, | ||
sans-serif; | ||
font-weight: inherit !important; | ||
height: initial !important; | ||
outline-offset: initial !important; | ||
font-weight: inherit; | ||
height: initial; | ||
outline-offset: initial; | ||
text-align: center; | ||
@@ -75,7 +75,7 @@ text-decoration: none; | ||
css: ` | ||
background-color: ${psNeutralBackground} !important; | ||
background-color: ${psNeutralBackground}; | ||
color: ${psNeutralText}; | ||
`, | ||
js: { | ||
backgroundColor: `${psNeutralBackground} !important`, | ||
backgroundColor: `${psNeutralBackground}`, | ||
color: psNeutralText, | ||
@@ -87,7 +87,7 @@ }, | ||
css: ` | ||
background-color: ${psBackground} !important; | ||
background-color: ${psBackground}; | ||
color: #fff; | ||
`, | ||
js: { | ||
backgroundColor: `${psBackground} !important`, | ||
backgroundColor: `${psBackground}`, | ||
color: '#fff', | ||
@@ -99,7 +99,7 @@ }, | ||
css: ` | ||
background-color: ${psBackgroundWeak} !important; | ||
background-color: ${psBackgroundWeak}; | ||
color: ${psText}; | ||
`, | ||
js: { | ||
backgroundColor: `${psBackgroundWeak} !important`, | ||
backgroundColor: `${psBackgroundWeak}`, | ||
color: psText, | ||
@@ -124,7 +124,7 @@ }, | ||
css: ` | ||
font-size: 12px !important; | ||
font-size: 12px; | ||
padding: 4px 8px; | ||
`, | ||
js: { | ||
fontSize: '12px !important', | ||
fontSize: '12px', | ||
padding: '4px 8px', | ||
@@ -136,7 +136,7 @@ }, | ||
css: ` | ||
font-size: 14px !important; | ||
font-size: 14px; | ||
padding: 6px 12px; | ||
`, | ||
js: { | ||
fontSize: '14px !important', | ||
fontSize: '14px', | ||
padding: '6px 12px', | ||
@@ -148,3 +148,3 @@ }, | ||
css: ` | ||
font-size: 16px !important; | ||
font-size: 16px; | ||
padding: 14.5px 24px; | ||
@@ -160,3 +160,3 @@ `, | ||
css: ` | ||
font-size: 16px !important; | ||
font-size: 16px; | ||
padding: 10px 16px; | ||
@@ -183,3 +183,3 @@ `, | ||
&:active { | ||
background-color: ${psBackgroundActive} !important; | ||
background-color: ${psBackgroundActive}; | ||
} | ||
@@ -193,3 +193,3 @@ `, | ||
active: { | ||
backgroundColor: `${psBackgroundActive} !important`, | ||
backgroundColor: `${psBackgroundActive}`, | ||
}, | ||
@@ -206,3 +206,3 @@ }, | ||
&:active { | ||
background-color: ${psNeutralBackgroundActive} !important; | ||
background-color: ${psNeutralBackgroundActive}; | ||
} | ||
@@ -216,3 +216,3 @@ `, | ||
active: { | ||
backgroundColor: `${psNeutralBackgroundActive} !important`, | ||
backgroundColor: `${psNeutralBackgroundActive}`, | ||
}, | ||
@@ -229,3 +229,3 @@ }, | ||
&:active { | ||
background-color: ${psBackgroundActive} !important; | ||
background-color: ${psBackgroundActive}; | ||
} | ||
@@ -239,3 +239,3 @@ `, | ||
active: { | ||
backgroundColor: `${psBackgroundActive} !important`, | ||
backgroundColor: `${psBackgroundActive}`, | ||
}, | ||
@@ -242,0 +242,0 @@ }, |
{ | ||
"name": "@pluralsight/headless-styles", | ||
"version": "0.0.0-alpha-7a99a7", | ||
"version": "0.0.0-alpha-872e2d", | ||
"description": "Headless styles for Pluralsight.", | ||
@@ -5,0 +5,0 @@ "main": "./build/index.js", |
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
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
0
16474