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		bg bgAttachment bgImage bgPosition bgRepeat bgSize	background background-attachment background-image background-position background-repeat background-size
Border
Border Radius	theme.radii
Box Shadow	theme.shadow	boxShadow	box-shadow
Flex
Gradient		bgClip bgGradient	background-clip background-image
Grid
Layout		boxSize display h maxH maxW minH minW overflow overflowX overflowY vAlign w	block:inline-size / height:width display block-size / height max-block-size / max-height max-inline-size / max-width min-block-size / min-height min-inline-size / min-width overflow overflow-inline / overflow-x overflow-block / overflow-y vertical-align inline-size / width
Margin	theme.space	m mb ml mr mt mx my	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	p pb pl pr pt px py	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	bottom left position right top z	inset-block-end / bottom inset-inline-start / left position inset-inline-end / right inset-block-start / top z-index
Space	theme.space	See Margin See Padding
Typography	theme.fontSize theme.fontWeight	fontFamily fontSize fontStyle fontWeight letterSpacing lineHeight textAlign textDecoration textTransform	font-family font-size font-style font-weight letter-spacing line-height text-align text-decoration text-transform