Never Pay your Mortgage

    @kaakao-ui/styled-mixins
    TypeScript icon, indicating that this package has built-in type declarations

    0.0.15 • Public • Published

    Kaakao-UI

    Kaakao-UI Styled Mixins npm version

    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

    Install

    npm i @kaakao-ui/styled-mixins

    DownloadsWeekly Downloads

    17

    Version

    0.0.15

    License

    MIT

    Unpacked Size

    51.1 kB

    Total Files

    48

    Last publish

    Collaborators

    • yuschick