mdlz-prmtz - npm Package Compare versions

Comparing version 0.0.18 to 0.0.19

dist/index.es.js

 import React from 'react';
 import styled from 'styled-components';
 import { compose, margin, backgroundColor, border, borderRadius, boxShadow, textColor, display, height, justifySelf, maxHeight, maxWidth, minHeight, minWidth, opacity, overflow, padding, textAlign, width, positionSet, flexItemSet, alignSelf, flex, flexContainerSet, alignContent, alignItems, gridSet, fontStyle, fontWeight, lineHeight, fontSize, fontFamily } from '@modulz/radix-system';
+import css from '@styled-system/css';
 import ReactDOM from 'react-dom';
@@ -70,16 +71,19 @@ import { FocusOn } from 'react-focus-on';
 
-var Badge = styled('span')({
+var Badge = styled('span')(css({
     alignItems: 'center',
     backgroundColor: 'transparent',
-    border: '1px solid gray',
+    border: '1px solid',
     borderRadius: 9999,
     display: 'inline-flex',
-    fontFamily: 'medium',
-    lineHeight: 1,
-    outline: 'none',
-    padding: '0.2em 0.4em',
+    letterSpacing: '.1em',
+    textTransform: 'uppercase',
     userSelect: 'none',
     verticalAlign: 'middle',
     whiteSpace: 'nowrap',
-}, function (props) { return props.css; }, margin);
+    fontFamily: 'system',
+    fontSize: 1,
+    borderColor: 'grays.3',
+    paddingY: 1,
+    paddingX: 2,
+}), { lineHeight: 1 }, function (props) { return props.css; }, margin);
 
@@ -259,2 +263,5 @@ var styleProps$1 = compose(border, borderRadius, boxShadow, backgroundColor, textColor, display, height, justifySelf, margin, maxHeight, maxWidth, minHeight, minWidth, opacity, overflow, padding, textAlign, width, positionSet, flexItemSet);
 
+// TODO:
+// System font
+// Color
 var styleProps$9 = compose(textColor, fontSize);
@@ -264,3 +271,2 @@ var Link = styled('a')({
     cursor: 'pointer',
-    WebkitTapHighlightColor: 'rgba(0, 0, 0, 0)',
     '&:hover': {
@@ -1184,2 +1190,5 @@ textDecoration: 'underline',
             var isVisible = _a.item, key = _a.key, animatedStyles = _a.props;
+            // we shadow `isVisible` from our top-level scope using a local variable
+            // which represents the value of `isVisible` taking into account the transition
+            // ie. this local `isVisible` won't be `false` until the transition ends
             return isVisible && (React.createElement(Portal, { key: key },
@@ -1186,0 +1195,0 @@ React.createElement("div", { style: __assign({}, popperStyles, { zIndex: 99999, pointerEvents: 'none' }) },

dist/index.js

@@ -10,2 +10,3 @@ 'use strict';
 var radixSystem = require('@modulz/radix-system');
+var css = _interopDefault(require('@styled-system/css'));
 var ReactDOM = _interopDefault(require('react-dom'));
@@ -77,16 +78,19 @@ var reactFocusOn = require('react-focus-on');
 
-var Badge = styled('span')({
+var Badge = styled('span')(css({
     alignItems: 'center',
     backgroundColor: 'transparent',
-    border: '1px solid gray',
+    border: '1px solid',
     borderRadius: 9999,
     display: 'inline-flex',
-    fontFamily: 'medium',
-    lineHeight: 1,
-    outline: 'none',
-    padding: '0.2em 0.4em',
+    letterSpacing: '.1em',
+    textTransform: 'uppercase',
     userSelect: 'none',
     verticalAlign: 'middle',
     whiteSpace: 'nowrap',
-}, function (props) { return props.css; }, radixSystem.margin);
+    fontFamily: 'system',
+    fontSize: 1,
+    borderColor: 'grays.3',
+    paddingY: 1,
+    paddingX: 2,
+}), { lineHeight: 1 }, function (props) { return props.css; }, radixSystem.margin);
 
@@ -266,2 +270,5 @@ var styleProps$1 = radixSystem.compose(radixSystem.border, radixSystem.borderRadius, radixSystem.boxShadow, radixSystem.backgroundColor, radixSystem.textColor, radixSystem.display, radixSystem.height, radixSystem.justifySelf, radixSystem.margin, radixSystem.maxHeight, radixSystem.maxWidth, radixSystem.minHeight, radixSystem.minWidth, radixSystem.opacity, radixSystem.overflow, radixSystem.padding, radixSystem.textAlign, radixSystem.width, radixSystem.positionSet, radixSystem.flexItemSet);
 
+// TODO:
+// System font
+// Color
 var styleProps$9 = radixSystem.compose(radixSystem.textColor, radixSystem.fontSize);
@@ -271,3 +278,2 @@ var Link = styled('a')({
     cursor: 'pointer',
-    WebkitTapHighlightColor: 'rgba(0, 0, 0, 0)',
     '&:hover': {
@@ -1191,2 +1197,5 @@ textDecoration: 'underline',
             var isVisible = _a.item, key = _a.key, animatedStyles = _a.props;
+            // we shadow `isVisible` from our top-level scope using a local variable
+            // which represents the value of `isVisible` taking into account the transition
+            // ie. this local `isVisible` won't be `false` until the transition ends
             return isVisible && (React.createElement(Portal, { key: key },
@@ -1193,0 +1202,0 @@ React.createElement("div", { style: __assign({}, popperStyles, { zIndex: 99999, pointerEvents: 'none' }) },

dist/theme.d.ts

 export declare const theme: {
-    breakpoints: string[];
     fonts: {
-        normal: string;
+        system: string;
         mono: string;
@@ -15,5 +14,6 @@ };
     colors: {
+        gray: string;
+        grays: string[];
         black: string;
         white: string;
-        gray: string;
         blue: string;
@@ -20,0 +20,0 @@ green: string;

package.json

 {
   "name": "mdlz-prmtz",
-  "version": "0.0.18",
+  "version": "0.0.19",
   "description": "Accessible and customisable primitives for the web",
@@ -5,0 +5,0 @@ "author": "Pedro Duarte <[e-mail]>",

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

149260

increased by4.05%

Number of package files

49

increased by2.08%

Lines of code

2957

increased by1.41%

No dependency changes