@pluralsight/headless-styles
Advanced tools
Comparing version 0.0.0-experimental-a4ff83-20220321 to 0.0.0-experimental-b8755c-20220322
@@ -5,14 +5,10 @@ import type { ButtonOptions, ButtonType } from './types'; | ||
styles: { | ||
hover: { | ||
'&:hover': { | ||
color: string; | ||
backgroundColor: string; | ||
}; | ||
active: { | ||
'&:active': { | ||
backgroundColor: string; | ||
outline: string; | ||
}; | ||
focus: { | ||
boxShadow: string; | ||
outline: number; | ||
}; | ||
fontSize: string; | ||
@@ -23,25 +19,29 @@ padding: string; | ||
appearance: string; | ||
border: string; | ||
borderRadius: string; | ||
border: string; | ||
cursor: string; | ||
fontFamily: string; | ||
fontWeight: string; | ||
height: string; | ||
outlineOffset: string; | ||
textAlign: string; | ||
textDecoration: string; | ||
textTransform: string; | ||
transition: string; | ||
focusNotFocusVisible: { | ||
'&:focus': { | ||
outline: string; | ||
}; | ||
'&:focus:not(:focus-visible)': { | ||
boxShadow: string; | ||
outline: number; | ||
outline: string; | ||
}; | ||
} | { | ||
hover: { | ||
'&:hover': { | ||
color: string; | ||
backgroundColor: string; | ||
}; | ||
active: { | ||
'&:active': { | ||
backgroundColor: string; | ||
outline: string; | ||
}; | ||
focus: { | ||
boxShadow: string; | ||
outline: number; | ||
}; | ||
fontSize: string; | ||
@@ -52,11 +52,19 @@ padding: string; | ||
appearance: string; | ||
border: string; | ||
borderRadius: string; | ||
border: string; | ||
cursor: string; | ||
fontFamily: string; | ||
fontWeight: string; | ||
height: string; | ||
outlineOffset: string; | ||
textAlign: string; | ||
textDecoration: string; | ||
textTransform: string; | ||
transition: string; | ||
focusNotFocusVisible: { | ||
'&:focus': { | ||
outline: string; | ||
}; | ||
'&:focus:not(:focus-visible)': { | ||
boxShadow: string; | ||
outline: number; | ||
outline: string; | ||
}; | ||
@@ -63,0 +71,0 @@ }; |
import { psBackground, psBackgroundActive, psBackgroundHover, psBackgroundWeak, psNeutralBackground, psNeutralBackgroundActive, psNeutralBackgroundHover, psNeutralText, psNeutralTextWeak, psText, psTextMedium, } from '@pluralsight/design-tokens'; | ||
import { getDefaultOptions } from './shared'; | ||
const buttonStyles = { | ||
appearance: 'none', | ||
borderRadius: '6px', | ||
backgroundColor: 'transparent', | ||
border: 'none', | ||
cursor: 'pointer', | ||
fontSize: '16px', | ||
padding: '10px 16px', | ||
textAlign: 'center', | ||
textDecoration: 'none', | ||
transition: 'background-color 250ms ease-in-out, color 250ms ease-in-out', | ||
active: { | ||
outline: 'none', | ||
const BASE_FONT_SIZE = '16px !important'; | ||
const baseStyles = { | ||
js: { | ||
appearance: 'none', | ||
backgroundColor: 'transparent !important', | ||
border: 'none', | ||
borderRadius: '6px !important', | ||
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', | ||
padding: '10px 16px', | ||
textAlign: 'center', | ||
textDecoration: 'none', | ||
textTransform: 'none', | ||
transition: 'background-color 250ms ease-in-out, color 250ms ease-in-out', | ||
'&:active': { | ||
outline: 'none', | ||
}, | ||
'&:focus': { | ||
outline: `3px solid ${psBackgroundActive}`, | ||
}, | ||
'&:focus:not(:focus-visible)': { | ||
boxShadow: 'none', | ||
outline: 'none', | ||
}, | ||
}, | ||
focus: { | ||
outline: `3px solid ${psBackgroundActive}`, | ||
}, | ||
focusNotFocusVisible: { | ||
boxShadow: 'none', | ||
outline: 0, | ||
}, | ||
}; | ||
const baseCSSProps = ` | ||
css: ` | ||
appearance: none; | ||
background-color: transparent; | ||
background-color: transparent !important; | ||
border: none; | ||
border-radius: 6px; | ||
border-radius: 6px !important; | ||
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; | ||
text-align: center; | ||
text-decoration: none; | ||
text-transform: none; | ||
transition: background-color 250ms ease-in-out, color 250ms ease-in-out; | ||
@@ -43,5 +56,6 @@ | ||
box-shadow: none; | ||
outline: 0; | ||
outline: none; | ||
} | ||
`; | ||
`, | ||
}; | ||
function getKindStyles(kind) { | ||
@@ -61,7 +75,7 @@ switch (kind) { | ||
css: ` | ||
background-color: ${psNeutralBackground}; | ||
background-color: ${psNeutralBackground} !important; | ||
color: ${psNeutralText}; | ||
`, | ||
js: { | ||
backgroundColor: psNeutralBackground, | ||
backgroundColor: `${psNeutralBackground} !important`, | ||
color: psNeutralText, | ||
@@ -73,7 +87,7 @@ }, | ||
css: ` | ||
background-color: ${psBackground}; | ||
background-color: ${psBackground} !important; | ||
color: #fff; | ||
`, | ||
js: { | ||
backgroundColor: psBackground, | ||
backgroundColor: `${psBackground} !important`, | ||
color: '#fff', | ||
@@ -85,7 +99,7 @@ }, | ||
css: ` | ||
background-color: ${psBackgroundWeak}; | ||
background-color: ${psBackgroundWeak} !important; | ||
color: ${psText}; | ||
`, | ||
js: { | ||
backgroundColor: psBackgroundWeak, | ||
backgroundColor: `${psBackgroundWeak} !important`, | ||
color: psText, | ||
@@ -110,7 +124,7 @@ }, | ||
css: ` | ||
font-size: 12px; | ||
font-size: 12px !important; | ||
padding: 4px 8px; | ||
`, | ||
js: { | ||
fontSize: '12px', | ||
fontSize: '12px !important', | ||
padding: '4px 8px', | ||
@@ -122,7 +136,7 @@ }, | ||
css: ` | ||
font-size: 14px; | ||
font-size: 14px !important; | ||
padding: 6px 12px; | ||
`, | ||
js: { | ||
fontSize: '14px', | ||
fontSize: '14px !important', | ||
padding: '6px 12px', | ||
@@ -134,7 +148,7 @@ }, | ||
css: ` | ||
font-size: 16px; | ||
font-size: 16px !important; | ||
padding: 14.5px 24px; | ||
`, | ||
js: { | ||
fontSize: '16px', | ||
fontSize: BASE_FONT_SIZE, | ||
padding: '14.5px 24px', | ||
@@ -146,7 +160,7 @@ }, | ||
css: ` | ||
font-size: 16px; | ||
font-size: 16px !important; | ||
padding: 10px 16px; | ||
`, | ||
js: { | ||
fontSize: '16px', | ||
fontSize: BASE_FONT_SIZE, | ||
padding: '10px 16px', | ||
@@ -169,3 +183,3 @@ }, | ||
&:active { | ||
background-color: ${psBackgroundActive}; | ||
background-color: ${psBackgroundActive} !important; | ||
} | ||
@@ -179,3 +193,3 @@ `, | ||
active: { | ||
backgroundColor: psBackgroundActive, | ||
backgroundColor: `${psBackgroundActive} !important`, | ||
}, | ||
@@ -192,3 +206,3 @@ }, | ||
&:active { | ||
background-color: ${psNeutralBackgroundActive}; | ||
background-color: ${psNeutralBackgroundActive} !important; | ||
} | ||
@@ -202,3 +216,3 @@ `, | ||
active: { | ||
backgroundColor: psNeutralBackgroundActive, | ||
backgroundColor: `${psNeutralBackgroundActive} !important`, | ||
}, | ||
@@ -215,3 +229,3 @@ }, | ||
&:active { | ||
background-color: ${psBackgroundActive}; | ||
background-color: ${psBackgroundActive} !important; | ||
} | ||
@@ -225,3 +239,3 @@ `, | ||
active: { | ||
backgroundColor: psBackgroundActive, | ||
backgroundColor: `${psBackgroundActive} !important`, | ||
}, | ||
@@ -239,3 +253,3 @@ }, | ||
cssProps: ` | ||
${baseCSSProps} | ||
${baseStyles.css.trim()} | ||
${kindStyles.css.trim()} | ||
@@ -247,5 +261,5 @@ ${sizeStyles.css.trim()} | ||
.replace(/^ {2,12}/gm, ''), | ||
styles: Object.assign(Object.assign(Object.assign(Object.assign({}, buttonStyles), kindStyles.js), sizeStyles.js), { hover: Object.assign({}, psuedoStyles.js.hover), active: Object.assign(Object.assign({}, buttonStyles.active), psuedoStyles.js.active), focus: Object.assign(Object.assign({}, buttonStyles.focus), buttonStyles.focusNotFocusVisible) }), | ||
styles: Object.assign(Object.assign(Object.assign(Object.assign({}, baseStyles.js), kindStyles.js), sizeStyles.js), { '&:hover': Object.assign({}, psuedoStyles.js.hover), '&:active': Object.assign(Object.assign({}, baseStyles.js['&:active']), psuedoStyles.js.active) }), | ||
type: 'button', | ||
}; | ||
} |
{ | ||
"name": "@pluralsight/headless-styles", | ||
"version": "0.0.0-experimental-a4ff83-20220321", | ||
"version": "0.0.0-experimental-b8755c-20220322", | ||
"description": "Headless styles for Pluralsight.", | ||
@@ -5,0 +5,0 @@ "main": "./build/index.js", |
Sorry, the diff of this file is not supported yet
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
15471
456
0