@kaakao-ui/styled-mixins - npm Package Compare versions

Comparing version 0.0.8 to 0.0.9

dist/index.cjs.js

@@ -7,2 +7,6 @@ 'use strict';
 
+function Background(props) {
+  return styledComponents.css(["background:", ";background-attachment:", ";background-image:", ";background-position:", ";background-repeat:", ";background-size:", ";"], props.bg, props.bgAttachment, props.bgImage, props.bgPosition, props.bgRepeat, props.bgSize);
+}
+
 function BorderRadius(props) {
@@ -26,2 +30,17 @@ var theme = styledComponents.useTheme();
 
+function BoxShadow(props) {
+  var theme = styledComponents.useTheme();
+  if (!props.boxShadow) return undefined;
+  return styledComponents.css(["box-shadow:", ";"], theme !== null && theme !== void 0 && theme.shadow ? theme.shadow[props.boxShadow] : props.boxShadow);
+}
+
+function Gradient(props) {
+  if (!props.bgClip && !props.bgGradient) return undefined;
+  return styledComponents.css(["background-clip:", ";background-image:", ";"], props.bgClip, props.bgGradient);
+}
+
+function Layout(props) {
+  return styledComponents.css(["block-size:", ";display:", ";inline-size:", ";max-block-size:", ";max-inline-size:", ";min-block-size:", ";min-inline-size:", ";overflow:", ";overflow-block:", ";overflow-inline:", ";vertical-align:", ";@supports not (block-size:1rem){height:", ";max-height:", ";min-height:", ";}@supports not (inline-size:1rem){max-width:", ";min-width:", ";width:", ";}", ""], props.boxSize || props.h, props.display, props.boxSize || props.w, props.maxH, props.maxW, props.minH, props.minW, props.overflow, props.overflowY, props.overflowX, props.vAlign, props.boxSize || props.h, props.maxH, props.minH, props.maxW, props.minW, props.boxSize || props.w, (props.overflowX || props.overflowY) && styledComponents.css(["@supports not (overflow-block:scroll){overflow-x:", ";overflow-y:", ";}"], props.overflowX, props.overflowY));
+}
+
 function Margin(props) {
@@ -45,2 +64,6 @@ var theme = styledComponents.useTheme();
 
+function Other(props) {
+  return styledComponents.css(["animation:", ";box-sizing:", ";cursor:", ";object-fit:", ";object-position:", ";outline:", ";overflow-wrap:", ";pointer-events:", ";resize:", ";text-overflow:", ";transform-origin:", ";transform:", ";transition:", ";user-select:", ";visibility:", ";white-space:", ";word-break:", ";"], props.animation, props.boxSizing, props.cursor, props.objectFit, props.objectPosition, props.outline, props.overflowWrap, props.pointerEvents, props.resize, props.textOverflow, props.transformOrigin, props.transform, props.transition, props.userSelect, props.visibility, props.whiteSpace, props.wordBreak);
+}
+
 function Padding(props) {
@@ -88,6 +111,17 @@ var theme = styledComponents.useTheme();
 
+function Typography(props) {
+  var theme = styledComponents.useTheme();
+  return styledComponents.css(["font-family:", ";font-size:", ";font-style:", ";font-weight:", ";letter-spacing:", ";line-height:", ";text-align:", ";text-decoration:", ";text-transform:", ";"], props.fontFamily, props.fontSize && theme !== null && theme !== void 0 && theme.fontSize ? theme.fontSize[props.fontSize] : props.fontSize, props.fontStyle, props.fontWeight && theme !== null && theme !== void 0 && theme.fontWeight ? theme.fontWeight[props.fontWeight] : props.fontWeight, props.letterSpacing, props.lineHeight, props.textAlign, props.textDecoration, props.textTransform);
+}
+
+exports.Background = Background;
 exports.BorderRadius = BorderRadius;
+exports.BoxShadow = BoxShadow;
+exports.Gradient = Gradient;
+exports.Layout = Layout;
 exports.Margin = Margin;
+exports.Other = Other;
 exports.Padding = Padding;
 exports.Position = Position;
 exports.Space = Space;
+exports.Typography = Typography;

dist/index.esm.js

@@ -1,3 +0,7 @@
-import { useTheme, css } from 'styled-components';
+import { css, useTheme } from 'styled-components';
 
+function Background(props) {
+  return css(["background:", ";background-attachment:", ";background-image:", ";background-position:", ";background-repeat:", ";background-size:", ";"], props.bg, props.bgAttachment, props.bgImage, props.bgPosition, props.bgRepeat, props.bgSize);
+}
+
 function BorderRadius(props) {
@@ -21,2 +25,17 @@ var theme = useTheme();
 
+function BoxShadow(props) {
+  var theme = useTheme();
+  if (!props.boxShadow) return undefined;
+  return css(["box-shadow:", ";"], theme !== null && theme !== void 0 && theme.shadow ? theme.shadow[props.boxShadow] : props.boxShadow);
+}
+
+function Gradient(props) {
+  if (!props.bgClip && !props.bgGradient) return undefined;
+  return css(["background-clip:", ";background-image:", ";"], props.bgClip, props.bgGradient);
+}
+
+function Layout(props) {
+  return css(["block-size:", ";display:", ";inline-size:", ";max-block-size:", ";max-inline-size:", ";min-block-size:", ";min-inline-size:", ";overflow:", ";overflow-block:", ";overflow-inline:", ";vertical-align:", ";@supports not (block-size:1rem){height:", ";max-height:", ";min-height:", ";}@supports not (inline-size:1rem){max-width:", ";min-width:", ";width:", ";}", ""], props.boxSize || props.h, props.display, props.boxSize || props.w, props.maxH, props.maxW, props.minH, props.minW, props.overflow, props.overflowY, props.overflowX, props.vAlign, props.boxSize || props.h, props.maxH, props.minH, props.maxW, props.minW, props.boxSize || props.w, (props.overflowX || props.overflowY) && css(["@supports not (overflow-block:scroll){overflow-x:", ";overflow-y:", ";}"], props.overflowX, props.overflowY));
+}
+
 function Margin(props) {
@@ -40,2 +59,6 @@ var theme = useTheme();
 
+function Other(props) {
+  return css(["animation:", ";box-sizing:", ";cursor:", ";object-fit:", ";object-position:", ";outline:", ";overflow-wrap:", ";pointer-events:", ";resize:", ";text-overflow:", ";transform-origin:", ";transform:", ";transition:", ";user-select:", ";visibility:", ";white-space:", ";word-break:", ";"], props.animation, props.boxSizing, props.cursor, props.objectFit, props.objectPosition, props.outline, props.overflowWrap, props.pointerEvents, props.resize, props.textOverflow, props.transformOrigin, props.transform, props.transition, props.userSelect, props.visibility, props.whiteSpace, props.wordBreak);
+}
+
 function Padding(props) {
@@ -83,2 +106,7 @@ var theme = useTheme();
 
-export { BorderRadius, Margin, Padding, Position, Space };
+function Typography(props) {
+  var theme = useTheme();
+  return css(["font-family:", ";font-size:", ";font-style:", ";font-weight:", ";letter-spacing:", ";line-height:", ";text-align:", ";text-decoration:", ";text-transform:", ";"], props.fontFamily, props.fontSize && theme !== null && theme !== void 0 && theme.fontSize ? theme.fontSize[props.fontSize] : props.fontSize, props.fontStyle, props.fontWeight && theme !== null && theme !== void 0 && theme.fontWeight ? theme.fontWeight[props.fontWeight] : props.fontWeight, props.letterSpacing, props.lineHeight, props.textAlign, props.textDecoration, props.textTransform);
+}
+
+export { Background, BorderRadius, BoxShadow, Gradient, Layout, Margin, Other, Padding, Position, Space, Typography };

dist/types/index.d.ts

@@ -0,5 +1,11 @@
+export * from './mixins/Background';
 export * from './mixins/BorderRadius';
+export * from './mixins/BoxShadow';
+export * from './mixins/Gradient';
+export * from './mixins/Layout';
 export * from './mixins/Margin';
+export * from './mixins/Other';
 export * from './mixins/Padding';
 export * from './mixins/Position';
 export * from './mixins/Space';
+export * from './mixins/Typography';

dist/types/mixins/BorderRadius/BorderRadius.types.d.ts

 import { DefaultTheme } from 'styled-components';
 export interface IBorderRadius {
-    borderBottomLeftRadius?: keyof DefaultTheme['radii'] | string;
-    borderBottomRadius?: keyof DefaultTheme['radii'] | string;
-    borderBottomRightRadius?: keyof DefaultTheme['radii'] | string;
-    borderLeftRadius?: keyof DefaultTheme['radii'] | string;
-    borderRadius?: keyof DefaultTheme['radii'] | string;
-    borderRightRadius?: keyof DefaultTheme['radii'] | string;
-    borderTopLeftRadius?: keyof DefaultTheme['radii'] | string;
-    borderTopRadius?: keyof DefaultTheme['radii'] | string;
-    borderTopRightRadius?: keyof DefaultTheme['radii'] | string;
+    borderBottomLeftRadius?: keyof DefaultTheme['radii'] | string | number;
+    borderBottomRadius?: keyof DefaultTheme['radii'] | string | number;
+    borderBottomRightRadius?: keyof DefaultTheme['radii'] | string | number;
+    borderLeftRadius?: keyof DefaultTheme['radii'] | string | number;
+    borderRadius?: keyof DefaultTheme['radii'] | string | number;
+    borderRightRadius?: keyof DefaultTheme['radii'] | string | number;
+    borderTopLeftRadius?: keyof DefaultTheme['radii'] | string | number;
+    borderTopRadius?: keyof DefaultTheme['radii'] | string | number;
+    borderTopRightRadius?: keyof DefaultTheme['radii'] | string | number;
 }

package.json

 {
   "name": "@kaakao-ui/styled-mixins",
-  "version": "0.0.8",
+  "version": "0.0.9",
   "description": "A framework-agnostic collection of Styled Components mixins for creating logical CSS styles with appropriate fallbacks.",
@@ -5,0 +5,0 @@ "license": "MIT",

README.md

@@ -24,3 +24,3 @@ <img alt="Kaakao-UI" src="kaakao.jpg" width="100%">
 const Container = styled.section`
-  ${Margin({ m: 1, x: 2 })};
+  ${Margin({ m: 1, mx: 2 })};
 `;
@@ -33,8 +33,14 @@ ```
 
-| Mixin                                     | Theme Key   | Props                                                     | CSS Map                                                                                                                                                                                                                                                                            |
-| ----------------------------------------- | ----------- | --------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| [Border Radius](/src/mixins/BorderRadius) | theme.radii |                                                           |                                                                                                                                                                                                                                                                                    |
-| [Margin](/src/mixins/Margin)              | theme.space | m<br />mb<br />ml<br />mr<br />mt<br />mx<br />my         | margin<br /> margin-block-end / margin-bottom<br /> margin-inline-start / margin-left<br /> margin-inline-end / margin-right<br /> margin-block-start / margin-top<br /> margin-inline-start:end / margin-left:right<br /> margin-block-start:end / margin-top:bottom              |
-| [Padding](/src/mixins/Padding)            | theme.space | p<br />pb<br />pl<br />pr<br />pt<br />px<br />py         | padding<br /> padding-block-end / padding-bottom<br /> padding-inline-start / padding-left<br /> padding-inline-end / padding-right<br /> padding-block-start / padding-top<br /> padding-inline-start:end / padding-left:right<br /> padding-block-start:end / padding-top:bottom |
-| [Position](/src/mixins/Position)          | theme.space | bottom<br />left<br />position<br />right<br />top<br />z | inset-block-end / bottom<br />inset-inline-start / left<br />position<br />inset-inline-end / right<br />inset-block-start / top<br />z-index                                                                                                                                      |
-| [Space](/src/mixins/Space)                | theme.space |                                                           | See [Margin](../Margin)<br />See [Padding](../Padding)                                                                                                                                                                                                                             |
+| Mixin                                     | Theme Key                            | Props                                                                                                                                            | CSS Map                                                                                                                                                                                                                                                                                                                                  |
+| ----------------------------------------- | ------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| [Background](/src/mixins/Background)      |                                      | bg<br />bgAttachment<br />bgImage<br />bgPosition<br />bgRepeat<br />bgSize                                                                      | background<br />background-attachment<br />background-image<br />background-position<br />background-repeat<br />background-size                                                                                                                                                                                                         |
+| [Border Radius](/src/mixins/BorderRadius) | theme.radii                          |                                                                                                                                                  |                                                                                                                                                                                                                                                                                                                                          |
+| [Box Shadow](/src/mixins/BoxShadow)       | theme.shadow                         | boxShadow                                                                                                                                        | box-shadow                                                                                                                                                                                                                                                                                                                               |
+| [Gradient](/src/mixins/Gradient)          |                                      | bgClip<br />bgGradient                                                                                                                           | background-clip<br />background-image                                                                                                                                                                                                                                                                                                    |
+| [Layout](/src/mixins/Layout)              |                                      | boxSize<br />display<br />h<br />maxH<br />maxW<br />minH<br />minW<br />overflow<br />overflowX<br />overflowY<br />vAlign<br />w               | block:inline-size / height:width<br />display<br />block-size / height<br />max-block-size / max-height<br />max-inline-size / max-width<br />min-block-size / min-height<br />min-inline-size / min-width<br />overflow<br />overflow-inline / overflow-x<br />overflow-block / overflow-y<br />vertical-align<br />inline-size / width |
+| [Margin](/src/mixins/Margin)              | theme.space                          | m<br />mb<br />ml<br />mr<br />mt<br />mx<br />my                                                                                                | margin<br /> margin-block-end / margin-bottom<br /> margin-inline-start / margin-left<br /> margin-inline-end / margin-right<br /> margin-block-start / margin-top<br /> margin-inline-start:end / margin-left:right<br /> margin-block-start:end / margin-top:bottom                                                                    |
+| [Other](/src/mixins/Other)                |                                      |                                                                                                                                                  |                                                                                                                                                                                                                                                                                                                                          |
+| [Padding](/src/mixins/Padding)            | theme.space                          | p<br />pb<br />pl<br />pr<br />pt<br />px<br />py                                                                                                | padding<br /> padding-block-end / padding-bottom<br /> padding-inline-start / padding-left<br /> padding-inline-end / padding-right<br /> padding-block-start / padding-top<br /> padding-inline-start:end / padding-left:right<br /> padding-block-start:end / padding-top:bottom                                                       |
+| [Position](/src/mixins/Position)          | theme.space                          | bottom<br />left<br />position<br />right<br />top<br />z                                                                                        | inset-block-end / bottom<br />inset-inline-start / left<br />position<br />inset-inline-end / right<br />inset-block-start / top<br />z-index                                                                                                                                                                                            |
+| [Space](/src/mixins/Space)                | theme.space                          | See [Margin](../Margin)<br />See [Padding](../Padding)                                                                                           |                                                                                                                                                                                                                                                                                                                                          |
+| [Typography](/src/mixins/Typography)      | theme.fontSize<br />theme.fontWeight | fontFamily<br />fontSize<br />fontStyle<br />fontWeight<br />letterSpacing<br />lineHeight<br />textAlign<br />textDecoration<br />textTransform | font-family<br />font-size<br />font-style<br />font-weight<br />letter-spacing<br />line-height<br />text-align<br />text-decoration<br />text-transform                                                                                                                                                                                |

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

36417

increased by78.25%

Number of package files

39

increased by85.71%

Lines of code

433

increased by72.51%

Number of lines in readme file

45

increased by15.38%

No dependency changes