@mirohq/design-system-base-text-field - npm Package Compare versions

Comparing version 0.1.0 to 0.1.1

dist/main.js

@@ -5,10 +5,36 @@ 'use strict';
 
-const styles = {
+var designSystemStyles = require('@mirohq/design-system-styles');
+
+const actionButtonStyles = {
+  backgroundColor: "transparent",
+  color: "$icon-neutrals-subtle",
+  display: "flex",
+  justifyContent: "center",
+  padding: "6px",
+  square: "$7",
+  "& svg:not([data-icon-component]), & img:not([data-icon-component])": {
+    square: "$icon-200",
+    "--svg-stroke-width": "$stroke-width$thin"
+  },
+  ...designSystemStyles.focus.css({
+    boxShadow: "$focus-small"
+  }),
+  "&:hover": {
+    backgroundColor: "$background-neutrals-subtle-hover"
+  },
+  "&:active, &[data-pressed]": {
+    backgroundColor: "$background-neutrals-subtle-active"
+  }
+};
+const textFieldStyles = {
   variants: {
     idle: {
+      boxSizing: "border-box",
+      width: "100%",
+      fontSize: "$200",
+      lineHeight: "1.5",
+      color: "$text-neutrals",
       background: "$background-neutrals-container",
       border: "1px solid $border-neutrals",
-      borderRadius: "$50",
-      fontSize: "$200",
-      lineHeight: "1.5"
+      borderRadius: "$50"
     },
@@ -74,3 +100,4 @@ focused: {
 
-exports.styles = styles;
+exports.actionButtonStyles = actionButtonStyles;
+exports.textFieldStyles = textFieldStyles;
 //# sourceMappingURL=main.js.map

dist/module.js

@@ -1,9 +0,35 @@
-const styles = {
+import { focus } from '@mirohq/design-system-styles';
+
+const actionButtonStyles = {
+  backgroundColor: "transparent",
+  color: "$icon-neutrals-subtle",
+  display: "flex",
+  justifyContent: "center",
+  padding: "6px",
+  square: "$7",
+  "& svg:not([data-icon-component]), & img:not([data-icon-component])": {
+    square: "$icon-200",
+    "--svg-stroke-width": "$stroke-width$thin"
+  },
+  ...focus.css({
+    boxShadow: "$focus-small"
+  }),
+  "&:hover": {
+    backgroundColor: "$background-neutrals-subtle-hover"
+  },
+  "&:active, &[data-pressed]": {
+    backgroundColor: "$background-neutrals-subtle-active"
+  }
+};
+const textFieldStyles = {
   variants: {
     idle: {
+      boxSizing: "border-box",
+      width: "100%",
+      fontSize: "$200",
+      lineHeight: "1.5",
+      color: "$text-neutrals",
       background: "$background-neutrals-container",
       border: "1px solid $border-neutrals",
-      borderRadius: "$50",
-      fontSize: "$200",
-      lineHeight: "1.5"
+      borderRadius: "$50"
     },
@@ -69,3 +95,3 @@ focused: {
 
-export { styles };
+export { actionButtonStyles, textFieldStyles };
 //# sourceMappingURL=module.js.map

dist/types.d.ts

@@ -1,9 +0,34 @@
-declare const styles: {
+declare const actionButtonStyles: {
+    '&:hover': {
+        backgroundColor: string;
+    };
+    '&:active, &[data-pressed]': {
+        backgroundColor: string;
+    };
+    '&:focus-visible': any;
+    '[data-whatintent="keyboard"] &:focus': any;
+    '&[data-focused]': any;
+    '&[data-focus-visible]': any;
+    backgroundColor: string;
+    color: string;
+    display: string;
+    justifyContent: string;
+    padding: string;
+    square: string;
+    '& svg:not([data-icon-component]), & img:not([data-icon-component])': {
+        square: string;
+        '--svg-stroke-width': string;
+    };
+};
+declare const textFieldStyles: {
     variants: {
         idle: {
+            boxSizing: string;
+            width: string;
+            fontSize: string;
+            lineHeight: string;
+            color: string;
             background: string;
             border: string;
             borderRadius: string;
-            fontSize: string;
-            lineHeight: string;
         };
@@ -69,2 +94,2 @@ focused: {
 
-export { styles };
+export { actionButtonStyles, textFieldStyles };

package.json

 {
   "name": "@mirohq/design-system-base-text-field",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "",
@@ -28,2 +28,5 @@ "author": "Miro",
   },
+  "dependencies": {
+    "@mirohq/design-system-styles": "^1.2.12"
+  },
   "scripts": {
@@ -30,0 +33,0 @@ "build": "rollup -c ../../../../rollup.config.js",

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

16492

increased by42.52%

Number of downloads

541

increased by165.2%

Lines of code

284

increased by36.54%

Worsened metrics

Dependency count

3

increased by50%

Number of versions

32

decreased by-3.03%

Published versions last months

3

decreased by-25%

Published versions last week

0

decreased by-100%

Published versions last year

32

decreased by-3.03%

Dependency changes

• + Added@mirohq/design-system-styles@^1.2.12

• + Added@mirohq/design-system-stitches@2.6.28(transitive)

• + Added@mirohq/design-system-styles@1.2.28(transitive)

• + Added@mirohq/design-system-themes@0.12.0(transitive)

• + Added@mirohq/design-system-types@0.10.0(transitive)

• + Added@mirohq/design-tokens@6.4.1(transitive)

• + Addedlodash.merge@4.6.2(transitive)

• + Addedwhat-input@5.2.12(transitive)