@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",

No alert changes

Improved metrics

Total package byte prevSize

16492

42.52%

Lines of code

284

36.54%

Worsened metrics

Dependency count

3

50%

Dependency changes

• + Added

  @mirohq/design-system-styles@^1.2.12

• + Added

  @mirohq/design-system-stitches@2.6.40
  (transitive)

• + Added

  @mirohq/design-system-styles@1.2.40
  (transitive)

• + Added

  @mirohq/design-system-themes@0.20.0
  (transitive)

• + Added

  @mirohq/design-system-types@0.10.0
  (transitive)

• + Added

  @mirohq/design-tokens@6.7.0
  (transitive)

• + Added

  lodash.merge@4.6.2
  (transitive)

• + Added

  what-input@5.2.12
  (transitive)