♻️(css) remove '_ra-*' helpers from panda
they are not really helpful, i'd rather stick to the react-aria wording, easier to understand when looking at react aria examples, converting code, etc. Not a great value adding this api in our tiny heads
This commit is contained in:
@@ -35,18 +35,6 @@ const config: Config = {
|
|||||||
exclude: [],
|
exclude: [],
|
||||||
jsxFramework: 'react',
|
jsxFramework: 'react',
|
||||||
outdir: 'src/styled-system',
|
outdir: 'src/styled-system',
|
||||||
conditions: {
|
|
||||||
extend: {
|
|
||||||
// React Aria builds upon data attributes instead of css pseudo-classes, in case we style a React Aria component
|
|
||||||
// we dont want to trigger pseudo class related styles
|
|
||||||
'ra-hover': '&:is([data-hovered])',
|
|
||||||
'ra-focus': '&:is([data-focused])',
|
|
||||||
'ra-focusVisible': '&:is([data-focus-visible])',
|
|
||||||
'ra-disabled': '&:is([data-disabled])',
|
|
||||||
pressed: '&:is([data-pressed])',
|
|
||||||
'ra-pressed': '&:is([data-pressed])',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
theme: {
|
theme: {
|
||||||
...pandaPreset.theme,
|
...pandaPreset.theme,
|
||||||
// media queries are defined in em so that zooming with text-only mode triggers breakpoints
|
// media queries are defined in em so that zooming with text-only mode triggers breakpoints
|
||||||
|
|||||||
@@ -7,10 +7,10 @@ const link = cva({
|
|||||||
textUnderlineOffset: '2',
|
textUnderlineOffset: '2',
|
||||||
cursor: 'pointer',
|
cursor: 'pointer',
|
||||||
borderRadius: 2,
|
borderRadius: 2,
|
||||||
'_ra-hover': {
|
'&[data-hovered]': {
|
||||||
textDecoration: 'none',
|
textDecoration: 'none',
|
||||||
},
|
},
|
||||||
'_ra-pressed': {
|
'&[data-pressed]': {
|
||||||
textDecoration: 'underline',
|
textDecoration: 'underline',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -14,10 +14,10 @@ const button = cva({
|
|||||||
border: '1px solid transparent',
|
border: '1px solid transparent',
|
||||||
color: 'colorPalette.text',
|
color: 'colorPalette.text',
|
||||||
backgroundColor: 'colorPalette',
|
backgroundColor: 'colorPalette',
|
||||||
'_ra-hover': {
|
'&[data-hovered]': {
|
||||||
backgroundColor: 'colorPalette.hover',
|
backgroundColor: 'colorPalette.hover',
|
||||||
},
|
},
|
||||||
'_ra-pressed': {
|
'&[data-pressed]': {
|
||||||
backgroundColor: 'colorPalette.active',
|
backgroundColor: 'colorPalette.active',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -15,7 +15,7 @@ const ListItem = styled(Button, {
|
|||||||
borderRadius: 4,
|
borderRadius: 4,
|
||||||
cursor: 'pointer',
|
cursor: 'pointer',
|
||||||
color: 'primary',
|
color: 'primary',
|
||||||
'_ra-hover': {
|
'&[data-hovered]': {
|
||||||
color: 'primary.subtle-text',
|
color: 'primary.subtle-text',
|
||||||
backgroundColor: 'primary.subtle',
|
backgroundColor: 'primary.subtle',
|
||||||
},
|
},
|
||||||
|
|||||||
Reference in New Issue
Block a user