@warp-ds/elements 2.3.0-next.3 → 2.3.0-next.30

package/dist/packages/link/link.stories.js

@@ -67,28 +67,45 @@ export const Link = {
         target: '_new',
     },
 };
-export const Pill = {
+export const Quiet = {
     args: {
-        variant: 'pill',
+        variant: 'quiet',
         href: 'http://developer.mozilla.org',
         target: '_new',
     },
-    render(args) {
-        return html `<w-link ${spread(prespread(args))}>💙</w-link>`;
+};
+export const Overlay = {
+    args: {
+        variant: 'overlay',
+        href: 'http://developer.mozilla.org',
+        target: '_new',
     },
 };
-export const Small = {
+export const OverlayInverted = {
     args: {
-        variant: 'primary',
-        small: true,
+        variant: 'overlayInverted',
         href: 'http://developer.mozilla.org',
         target: '_new',
     },
 };
-export const Quiet = {
+export const OverlayQuiet = {
     args: {
-        variant: 'secondary',
-        quiet: true,
+        variant: 'overlayQuiet',
+        href: 'http://developer.mozilla.org',
+        target: '_new',
+    },
+};
+export const OverlayInvertedQuiet = {
+    args: {
+        variant: 'overlayInvertedQuiet',
+        href: 'http://developer.mozilla.org',
+        target: '_new',
+    },
+};
+export const Small = {
+    args: {
+        variant: 'primary',
+        small: true,
         href: 'http://developer.mozilla.org',
         target: '_new',
     },

package/dist/packages/link/react.d.ts

@@ -1,2 +1,2 @@
-import { WarpLink } from '.';
+import { WarpLink } from './index.js';
 export declare const Link: import("@lit/react").ReactWebComponent<WarpLink, {}>;

package/dist/packages/link/styles.js

@@ -58,9 +58,9 @@ export const styles = css `.w-button,
 
     /* Variants config */
     .w-button--primary {
-        --background: var(--w-s-color-background-primary);
-        --background-hover: var(--w-s-color-background-primary-hover);
-        --background-active: var(--w-s-color-background-primary-active);
+        --background: var(--w-color-button-primary-background);
+        --background-hover: var(--w-color-button-primary-background-hover);
+        --background-active: var(--w-color-button-primary-background-active);
         --color: var(--w-s-color-text-inverted);
         --border-width: 0px;
     }
@@ -91,6 +91,10 @@ export const styles = css `.w-button,
         --color: var(--w-s-color-text);
         --border-width: 0px;
     }
+    .w-button--quiet {
+        --background: transparent;
+        --border-width: 0px;
+    }
     .w-button--overlay {
         --background: var(--w-color-background);
         --background-hover: var(--w-color-background-hover);
@@ -132,6 +136,38 @@ export const styles = css `.w-button,
         --font-weight: normal;
         display: inline;
     }
+    .w-button--overlay {
+        --background: var(--w-color-background);
+        --background-hover: var(--w-color-background-hover);
+        --background-active: var(--w-color-background-active);
+        --color: var(--w-s-color-text);
+        --border-radius: 9999px;
+        --border-width: 0px;
+    }
+    .w-button--overlay-quiet {
+        --background: transparent;
+        --background-hover: var(--w-s-color-background-hover);
+        --background-active: var(--w-s-color-background-active);
+        --color: var(--w-s-color-text);
+        --border-radius: 9999px;
+        --border-width: 0px;
+    }
+    .w-button--overlay-inverted {
+        --background: var(--w-s-color-background-inverted);
+        --background-hover: var(--w-s-color-background-inverted-hover);
+        --background-active: var(--w-s-color-background-inverted-active);
+        --color: var(--w-s-color-text-inverted);
+        --border-radius: 9999px;
+        --border-width: 0px;
+    }
+    .w-button--overlay-inverted-quiet {
+        --background: transparent;
+        --background-hover: var(--w-s-color-background-inverted-hover);
+        --background-active: var(--w-s-color-background-inverted-active);
+        --color: var(--w-s-color-text-inverted);
+        --border-radius: 9999px;
+        --border-width: 0px;
+    }
 
     /* States config,  selects --loading as well since loading is always supposed to be disabled */
     .w-button:disabled,