0.0.15 • Published 2 years ago
@kaakao-ui/styled-mixins v0.0.15
Kaakao-UI Styled Mixins
A framework-agnostic collection of Styled Components mixins for creating logical CSS styles with appropriate fallbacks.
🤖 Installation
npm install @kaakao-ui/styled-mixins
🔧 Usage
Each mixin will check for an active Styled Components theme by using the useTheme()
hook.
If a theme is present, the values will be used as theme keys. If no theme exists, the values themselves will be used for the styles.
import styled from 'styled-components';
import { Margin } from '@kaakao-ui/styled-mixins';
const Container = styled.section`
${Margin({ m: 1, mx: 2 })};
`;
...
📓 Documentation
Mixin | Theme Key | Props | CSS Map |
---|---|---|---|
Background | bgbgAttachmentbgImagebgPositionbgRepeatbgSize | backgroundbackground-attachmentbackground-imagebackground-positionbackground-repeatbackground-size | |
Border | |||
Border Radius | theme.radii | ||
Box Shadow | theme.shadow | boxShadow | box-shadow |
Flex | |||
Gradient | bgClipbgGradient | background-clipbackground-image | |
Grid | |||
Layout | boxSizedisplayhmaxHmaxWminHminWoverflowoverflowXoverflowYvAlignw | block:inline-size / height:widthdisplayblock-size / heightmax-block-size / max-heightmax-inline-size / max-widthmin-block-size / min-heightmin-inline-size / min-widthoverflowoverflow-inline / overflow-xoverflow-block / overflow-yvertical-aligninline-size / width | |
Margin | theme.space | mmbmlmrmtmxmy | margin margin-block-end / margin-bottom margin-inline-start / margin-left margin-inline-end / margin-right margin-block-start / margin-top margin-inline-start:end / margin-left:right margin-block-start:end / margin-top:bottom |
Other | |||
Padding | theme.space | ppbplprptpxpy | padding padding-block-end / padding-bottom padding-inline-start / padding-left padding-inline-end / padding-right padding-block-start / padding-top padding-inline-start:end / padding-left:right padding-block-start:end / padding-top:bottom |
Position | theme.space | bottomleftpositionrighttopz | inset-block-end / bottominset-inline-start / leftpositioninset-inline-end / rightinset-block-start / topz-index |
Space | theme.space | See MarginSee Padding | |
Typography | theme.fontSizetheme.fontWeight | fontFamilyfontSizefontStylefontWeightletterSpacinglineHeighttextAligntextDecorationtextTransform | font-familyfont-sizefont-stylefont-weightletter-spacingline-heighttext-aligntext-decorationtext-transform |