@mirohq/design-system-link - npm Package Compare versions

Comparing version 1.2.23-select.0 to 1.3.0-link.0

dist/main.js

@@ -28,45 +28,44 @@ 'use strict';
   transition: "border ".concat(TRANSITION_TIME, ", color ").concat(TRANSITION_TIME),
-  // asButton
-  background: "none",
-  padding: "$0",
-  margin: "$0",
-  font: "inherit",
+  paddingX: "2px",
+  ...designSystemStyles.focus.css({
+    boxShadow: "$focus-small"
+  }),
   variants: {
     variant: {
       primary: {
-        color: "rgba(66, 98, 255, 1)",
-        borderColor: "rgba(217, 224, 255, 1)",
-        ...designSystemStyles.focus.defaults,
+        color: "$text-primary",
+        borderColor: "$border-primary",
         [hoverSelector]: {
-          color: "rgba(69, 91, 237, 1)",
-          borderColor: "rgba(104, 129, 255, 1)"
+          color: "$text-primary-hover",
+          backgroundColor: "$background-primary-subtle-hover",
+          borderColor: "$border-primary-hover"
         },
         [activeSelector]: {
-          color: "rgba(61, 81, 212, 1)",
-          borderColor: "rgba(66, 98, 255, 1)"
+          color: "$text-primary-active",
+          backgroundColor: "transparent",
+          borderColor: "$border-primary-active"
         }
       },
       secondary: {
-        color: "rgba(95, 92, 128, 1)",
-        borderColor: "rgba(235, 235, 239, 1)",
+        color: "$text-neutrals-subtle",
+        borderColor: "$border-neutrals-text-subtle",
         ...designSystemStyles.focus.defaults,
         [hoverSelector]: {
-          color: "rgba(95, 92, 128, 1)",
-          borderColor: "rgba(147, 145, 166, 1)"
+          color: "$text-neutrals-subtle-hover",
+          backgroundColor: "$background-neutrals-subtle-hover",
+          borderColor: "$border-neutrals-text-subtle-hover"
         },
         [activeSelector]: {
-          color: "rgba(95, 92, 128, 1)",
-          borderColor: "rgba(147, 145, 166, 1)"
+          color: "$text-neutrals-subtle-active",
+          backgroundColor: "transparent",
+          borderColor: "$border-neutrals-text-subtle-active"
         }
       }
     },
-    dashed: {
+    asButton: {
       true: {
-        borderStyle: "dashed"
+        background: "none",
+        paddingY: "$0",
+        font: "inherit"
       }
-    },
-    disabled: {
-      true: {
-        pointerEvents: "none"
-      }
     }
@@ -81,3 +80,2 @@ }
     "aria-disabled": ariaDisabled,
-    dashed = false,
     asChild,
@@ -136,2 +134,3 @@ rel = "",
         asChild: asButton || asChild,
+        asButton,
         href,
@@ -141,3 +140,2 @@ variant,
         "aria-disabled": !asButton && (disabled || designSystemUtils.booleanify(ariaDisabled)) ? "true" : void 0,
-        dashed,
         tabIndex: tabIndex != null ? tabIndex : disabled && !asButton ? -1 : asChild === true && !asButton ? tabIndex != null ? tabIndex : 0 : void 0,
@@ -147,3 +145,3 @@ rel: relProp,
         ref: forwardRef,
-        children: asButton ? /* @__PURE__ */ jsxRuntime.jsx("button", { disabled, children }) : children
+        children: asButton ? /* @__PURE__ */ jsxRuntime.jsx("button", { children }) : children
       }
@@ -150,0 +148,0 @@ );

dist/module.js

@@ -20,45 +20,44 @@ import { jsx } from 'react/jsx-runtime';
   transition: "border ".concat(TRANSITION_TIME, ", color ").concat(TRANSITION_TIME),
-  // asButton
-  background: "none",
-  padding: "$0",
-  margin: "$0",
-  font: "inherit",
+  paddingX: "2px",
+  ...focus.css({
+    boxShadow: "$focus-small"
+  }),
   variants: {
     variant: {
       primary: {
-        color: "rgba(66, 98, 255, 1)",
-        borderColor: "rgba(217, 224, 255, 1)",
-        ...focus.defaults,
+        color: "$text-primary",
+        borderColor: "$border-primary",
         [hoverSelector]: {
-          color: "rgba(69, 91, 237, 1)",
-          borderColor: "rgba(104, 129, 255, 1)"
+          color: "$text-primary-hover",
+          backgroundColor: "$background-primary-subtle-hover",
+          borderColor: "$border-primary-hover"
         },
         [activeSelector]: {
-          color: "rgba(61, 81, 212, 1)",
-          borderColor: "rgba(66, 98, 255, 1)"
+          color: "$text-primary-active",
+          backgroundColor: "transparent",
+          borderColor: "$border-primary-active"
         }
       },
       secondary: {
-        color: "rgba(95, 92, 128, 1)",
-        borderColor: "rgba(235, 235, 239, 1)",
+        color: "$text-neutrals-subtle",
+        borderColor: "$border-neutrals-text-subtle",
         ...focus.defaults,
         [hoverSelector]: {
-          color: "rgba(95, 92, 128, 1)",
-          borderColor: "rgba(147, 145, 166, 1)"
+          color: "$text-neutrals-subtle-hover",
+          backgroundColor: "$background-neutrals-subtle-hover",
+          borderColor: "$border-neutrals-text-subtle-hover"
         },
         [activeSelector]: {
-          color: "rgba(95, 92, 128, 1)",
-          borderColor: "rgba(147, 145, 166, 1)"
+          color: "$text-neutrals-subtle-active",
+          backgroundColor: "transparent",
+          borderColor: "$border-neutrals-text-subtle-active"
         }
       }
     },
-    dashed: {
+    asButton: {
       true: {
-        borderStyle: "dashed"
+        background: "none",
+        paddingY: "$0",
+        font: "inherit"
       }
-    },
-    disabled: {
-      true: {
-        pointerEvents: "none"
-      }
     }
@@ -73,3 +72,2 @@ }
     "aria-disabled": ariaDisabled,
-    dashed = false,
     asChild,
@@ -128,2 +126,3 @@ rel = "",
         asChild: asButton || asChild,
+        asButton,
         href,
@@ -133,3 +132,2 @@ variant,
         "aria-disabled": !asButton && (disabled || booleanify(ariaDisabled)) ? "true" : void 0,
-        dashed,
         tabIndex: tabIndex != null ? tabIndex : disabled && !asButton ? -1 : asChild === true && !asButton ? tabIndex != null ? tabIndex : 0 : void 0,
@@ -139,3 +137,3 @@ rel: relProp,
         ref: forwardRef,
-        children: asButton ? /* @__PURE__ */ jsx("button", { disabled, children }) : children
+        children: asButton ? /* @__PURE__ */ jsx("button", { children }) : children
       }
@@ -142,0 +140,0 @@ );

dist/types.d.ts

@@ -12,8 +12,6 @@ import * as react from 'react';
     variant?: "primary" | "secondary" | undefined;
-    dashed?: boolean | "true" | undefined;
-    disabled?: boolean | "true" | undefined;
-}, "dashed" | "disabled" | "variant"> & _stitches_react_types_styled_component.TransformProps<{
+    asButton?: boolean | "true" | undefined;
+}, "variant" | "asButton"> & _stitches_react_types_styled_component.TransformProps<{
     variant?: "primary" | "secondary" | undefined;
-    dashed?: boolean | "true" | undefined;
-    disabled?: boolean | "true" | undefined;
+    asButton?: boolean | "true" | undefined;
 }, {}> & _mirohq_design_system_stitches.SafeProps<Omit<Omit<react.DetailedHTMLProps<react.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref"> & {
@@ -235,3 +233,2 @@ ref?: ((instance: HTMLAnchorElement | null) => void) | react.RefObject<HTMLAnchorElement> | null | undefined;
             readonly 'focus-controls': "0 0 0 1px $colors$border-focus-inner, 0 0 0 3px $colors$border-focus-middle, 0 0 0 5px $colors$border-focus-outer";
-            readonly 'focus-controls-error': "0 0 0 1px $colors$border-focus-inner, 0 0 0 3px $colors$border-danger, 0 0 0 5px $colors$background-danger-subtle-hover";
         };
@@ -306,3 +303,2 @@ sizes: {
             readonly dropdownMenu: 100;
-            readonly select: 100;
             readonly popover: 200;
@@ -497,4 +493,3 @@ readonly tooltip: 300;
     variant?: "primary" | "secondary" | undefined;
-    dashed?: boolean | "true" | undefined;
-    disabled?: boolean | "true" | undefined;
+    asButton?: boolean | "true" | undefined;
 }, {}>;
@@ -512,10 +507,2 @@ declare type StyledLinkProps = ComponentPropsWithRef<typeof StyledLink>;
     variant?: StyledLinkProps['variant'];
-    /**
-     * Set the underline to dashed mode
-     */
-    dashed?: boolean;
-    /**
-     * Make the link non-interactive
-     */
-    disabled?: boolean;
 }
@@ -522,0 +509,0 @@ declare const Link: react__default.ForwardRefExoticComponent<Omit<LinkProps, "ref"> & react__default.RefAttributes<HTMLButtonElement | HTMLAnchorElement>>;

package.json

 {
   "name": "@mirohq/design-system-link",
-  "version": "1.2.23-select.0",
+  "version": "1.3.0-link.0",
   "description": "",
@@ -33,5 +33,5 @@ "author": "Miro",
     "@mirohq/design-system-primitive": "^1.1.1",
-    "@mirohq/design-system-stitches": "^2.3.11-select.0",
-    "@mirohq/design-system-styles": "^1.1.7-select.0",
-    "@mirohq/design-system-utils": "^0.14.3"
+    "@mirohq/design-system-stitches": "^2.3.10",
+    "@mirohq/design-system-utils": "^0.14.3",
+    "@mirohq/design-system-styles": "^1.1.7-link.0"
   },
@@ -38,0 +38,0 @@ "scripts": {

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

Worsened metrics

Total package byte prevSize

48634

decreased by-0.51%

Lines of code

781

decreased by-2.13%

Dependency changes

• Updated@mirohq/design-system-stitches@^2.3.10

• Updated@mirohq/design-system-styles@^1.1.7-link.0