@ama-pt/agora-design-system 0.1.1

package/dist/cjs/components/ui/atoms/button/button.csf.d.ts

@@ -0,0 +1,80 @@
+export declare const parameters: {
+    actions: {
+        handles: string[];
+    };
+    design: {
+        type: string;
+        url: string;
+    };
+};
+export declare const btnVariantOptions: string[];
+export declare const btnKindsOptions: string[];
+export declare const argTypes: {
+    size: {
+        type: {
+            name: string;
+            required: boolean;
+        };
+        description: string;
+        defaultValue: string;
+        control: {
+            type: string;
+            options: string[];
+        };
+    };
+    hasIcon: {
+        type: {
+            name: string;
+            required: boolean;
+        };
+        description: string;
+        defaultValue: null;
+    };
+    icon: {
+        type: {
+            name: string;
+            required: boolean;
+        };
+        description: string;
+        defaultValue: null;
+        control: {
+            type: string;
+            options: string[];
+        };
+    };
+    iconHover: {
+        type: {
+            name: string;
+            required: boolean;
+        };
+        description: string;
+        defaultValue: null;
+        control: {
+            type: string;
+            options: string[];
+        };
+    };
+    iconPosition: {
+        type: {
+            name: string;
+            required: boolean;
+        };
+        description: string;
+        defaultValue: string;
+        control: {
+            type: string;
+            options: string[];
+        };
+    };
+    iconAltText: {
+        type: {
+            name: string;
+            required: boolean;
+        };
+        description: string;
+        defaultValue: string;
+        control: {
+            type: string;
+        };
+    };
+};

package/dist/cjs/components/ui/atoms/button/button.csf.js

@@ -0,0 +1,67 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.argTypes = exports.btnKindsOptions = exports.btnVariantOptions = exports.parameters = void 0;
+const icon_1 = require("../icon");
+exports.parameters = {
+    actions: {
+        handles: ['mouseenter', 'click', 'focusin', 'focusout']
+    },
+    design: {
+        type: 'zeroheight',
+        url: 'https://zeroheight.com/1be481dc2/p/489b41-buttons/b/026ea1'
+    }
+};
+exports.btnVariantOptions = ['primary', 'secondary', 'danger', 'success', 'warning', 'neutral', 'white'];
+exports.btnKindsOptions = ['solid', 'outline', 'link'];
+exports.argTypes = {
+    size: {
+        type: { name: 'string', required: false },
+        description: 'The size of the button.',
+        defaultValue: 'default',
+        control: {
+            type: 'select',
+            options: ['default', 'small']
+        }
+    },
+    hasIcon: {
+        type: { name: 'boolean', required: false },
+        description: 'Prepare the Button for containing Icon',
+        defaultValue: null
+    },
+    icon: {
+        type: { name: 'string', required: false },
+        description: 'The icon to display on the left/right hand side of button.',
+        defaultValue: null,
+        control: {
+            type: 'select',
+            options: [...icon_1.allIcons.filter((i) => i.indexOf('agora-line') === 0)]
+        }
+    },
+    iconHover: {
+        type: { name: 'string', required: false },
+        description: 'The icon to display on the left/right hand side of button when mouse over',
+        defaultValue: null,
+        control: {
+            type: 'select',
+            options: [...icon_1.allIcons.filter((i) => i.indexOf('agora-solid') === 0)]
+        }
+    },
+    iconPosition: {
+        type: { name: 'string', required: false },
+        description: 'The position of icon to display',
+        defaultValue: 'leading',
+        control: {
+            type: 'select',
+            options: ['leading', 'trailing']
+        }
+    },
+    iconAltText: {
+        type: { name: 'string', required: false },
+        description: 'Alternative text recommended for icon with role="img"',
+        defaultValue: 'Alternative Text',
+        control: {
+            type: 'text'
+        }
+    }
+};
+//# sourceMappingURL=button.csf.js.map

package/dist/cjs/components/ui/atoms/button/button.csf.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.csf.js","sourceRoot":"","sources":["../../../../../../src/components/ui/atoms/button/button.csf.ts"],"names":[],"mappings":";;;AAAA,kCAAmC;AAEtB,QAAA,UAAU,GAAG;IACxB,OAAO,EAAE;QACP,OAAO,EAAE,CAAC,YAAY,EAAE,OAAO,EAAE,SAAS,EAAE,UAAU,CAAC;KACxD;IACD,MAAM,EAAE;QACN,IAAI,EAAE,YAAY;QAClB,GAAG,EAAE,4DAA4D;KAClE;CACF,CAAC;AAEW,QAAA,iBAAiB,GAAG,CAAC,SAAS,EAAE,WAAW,EAAE,QAAQ,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,OAAO,CAAC,CAAC;AAEjG,QAAA,eAAe,GAAG,CAAC,OAAO,EAAE,SAAS,EAAE,MAAM,CAAC,CAAC;AAE/C,QAAA,QAAQ,GAAG;IACtB,IAAI,EAAE;QACJ,IAAI,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE;QACzC,WAAW,EAAE,yBAAyB;QACtC,YAAY,EAAE,SAAS;QACvB,OAAO,EAAE;YACP,IAAI,EAAE,QAAQ;YACd,OAAO,EAAE,CAAC,SAAS,EAAE,OAAO,CAAC;SAC9B;KACF;IACD,OAAO,EAAE;QACP,IAAI,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,QAAQ,EAAE,KAAK,EAAE;QAC1C,WAAW,EAAE,wCAAwC;QACrD,YAAY,EAAE,IAAI;KACnB;IACD,IAAI,EAAE;QACJ,IAAI,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE;QACzC,WAAW,EAAE,4DAA4D;QACzE,YAAY,EAAE,IAAI;QAClB,OAAO,EAAE;YACP,IAAI,EAAE,QAAQ;YACd,OAAO,EAAE,CAAC,GAAG,eAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,OAAO,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC,CAAC;SACpE;KACF;IACD,SAAS,EAAE;QACT,IAAI,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE;QACzC,WAAW,EAAE,2EAA2E;QACxF,YAAY,EAAE,IAAI;QAClB,OAAO,EAAE;YACP,IAAI,EAAE,QAAQ;YACd,OAAO,EAAE,CAAC,GAAG,eAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,OAAO,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC,CAAC;SACrE;KACF;IACD,YAAY,EAAE;QACZ,IAAI,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE;QACzC,WAAW,EAAE,iCAAiC;QAC9C,YAAY,EAAE,SAAS;QACvB,OAAO,EAAE;YACP,IAAI,EAAE,QAAQ;YACd,OAAO,EAAE,CAAC,SAAS,EAAE,UAAU,CAAC;SACjC;KACF;IACD,WAAW,EAAE;QACX,IAAI,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE;QACzC,WAAW,EAAE,uDAAuD;QACpE,YAAY,EAAE,kBAAkB;QAChC,OAAO,EAAE;YACP,IAAI,EAAE,MAAM;SACb;KACF;CACF,CAAC"}

package/dist/cjs/components/ui/atoms/button/button.d.ts

@@ -0,0 +1,63 @@
+import React, { ReactNode } from 'react';
+import { ButtonAppearence, ButtonSizes, ButtonVariant } from './types';
+import './button.scss';
+export interface ButtonProps extends React.ComponentPropsWithRef<'button'> {
+    /**
+     * The Button appearence.
+     * @defaultValue 'solid'
+     */
+    appearence?: ButtonAppearence;
+    /**
+     * The variant of the button.
+     * @defaultValue 'primary'
+     */
+    variant?: ButtonVariant;
+    /**
+     * Indicates if this Button should be fluid.
+     * @defaultValue 'false'
+     */
+    fullWidth?: boolean | 'true' | 'false';
+    /**
+     * Indicates the size of the Button.
+     * @defaultValue 'default'
+     */
+    size?: ButtonSizes;
+    /**
+     * Indicates if this Button will have any icon.
+     * @defaultValue false
+     */
+    hasIcon?: boolean | 'true' | 'false';
+    /**
+     * Indicates Icon for this button.
+     * @defaultValue null
+     */
+    icon?: string;
+    /**
+     * Indicates Icon displayed when mouse hover this Button. If not specified
+     * icon field will used as replacement.
+     * @defaultValue null
+     */
+    iconHover?: string;
+    /**
+     * If given will render only the Icon
+     */
+    iconOnly?: boolean | 'true' | 'false';
+    /**
+     * Indicates Icon position for this button.
+     * @defaultValue leading
+     */
+    iconPosition?: 'leading' | 'trailing';
+    /**
+     * Alternative text for Icon
+     * @defaultValue null
+     */
+    iconAltText?: string;
+    /**
+     * The children component
+     *  @defaultValue ReactNode
+     */
+    children?: ReactNode;
+}
+export declare const Button: React.FC<ButtonProps>;
+declare const MemoButton: React.NamedExoticComponent<ButtonProps>;
+export default MemoButton;

package/dist/cjs/components/ui/atoms/button/button.js

@@ -0,0 +1,98 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Button = void 0;
+const react_1 = __importDefault(require("react"));
+const classnames_1 = __importDefault(require("classnames"));
+const icon_1 = require("../icon");
+require("./button.scss");
+const utils_1 = require("../../../utils");
+/**
+ *
+ * @param icon
+ * @param iconHover
+ * @param iconAltText
+ * @returns React.FC
+ */
+const IconWrapper = ({ icon, iconHover, iconAltText }) => {
+    // preventing using illustrate family icons on buttons
+    if (icon.indexOf('agora-illustrate') >= 0 || (iconHover === null || iconHover === void 0 ? void 0 : iconHover.indexOf('agora-illustrate')) >= 0) {
+        return null;
+    }
+    return (react_1.default.createElement("div", { className: "icon-wrapper" },
+        react_1.default.createElement(icon_1.Icon, { icon: icon, alt: iconAltText }),
+        react_1.default.createElement(icon_1.Icon, { icon: (iconHover !== null && iconHover !== void 0 ? iconHover : icon).replace('line', 'solid'), alt: iconAltText })));
+};
+/**
+ * Return icon default animation class according icon name and default position.
+ * @param icon string
+ * @param iconPosition leading|trailing
+ * @returns string
+ */
+function getDefaultIconAnimation(icon, iconPosition) {
+    let defaultAnimation = 'default';
+    if (icon) {
+        // if icon contains "arrow" or "chevron" word check for direction left/right and override the
+        // default animation to preserve armony
+        // this will code below will prevent arrow/chevron icon left/right direction perform default animation(up/down)
+        const regex = /arrow|chevron/g;
+        if (regex.test(icon)) {
+            if (icon.indexOf('left') >= 0) {
+                defaultAnimation = 'backward';
+            }
+            else if (icon.indexOf('right') >= 0) {
+                defaultAnimation = 'forward';
+            }
+        }
+    }
+    else if (iconPosition === 'leading') {
+        defaultAnimation = 'backward';
+    }
+    else if (iconPosition === 'trailing') {
+        defaultAnimation = 'forward';
+    }
+    return defaultAnimation;
+}
+const Button = (_a) => {
+    var { appearence = 'solid', variant = 'primary', fullWidth = false, size = 'default', disabled = false, hasIcon = false, icon = '', iconHover = '', iconOnly = false, iconPosition = 'leading', iconAltText = '', children, className = '' } = _a, props = __rest(_a, ["appearence", "variant", "fullWidth", "size", "disabled", "hasIcon", "icon", "iconHover", "iconOnly", "iconPosition", "iconAltText", "children", "className"]);
+    let defaultIcon = '';
+    let defaultAnimation = '';
+    if ((0, utils_1.stringToBoolean)(hasIcon) || (0, utils_1.stringToBoolean)(iconOnly)) {
+        /**
+         * Detects default icon in case hasIcon/iconOnly params be true.
+         * @type string
+         */
+        defaultIcon = iconPosition === 'leading' ? 'agora-line-arrow-left-circle' : 'agora-line-arrow-right-circle';
+        defaultAnimation = getDefaultIconAnimation(icon, iconPosition);
+    }
+    /**
+     * Building button classname dynamically according parameters.
+     */
+    const buttonClassName = (0, classnames_1.default)(`btn btn-${size} btn-${appearence}--${variant}`, {
+        [`animate-icon--${defaultAnimation}`]: defaultAnimation !== '',
+        [`btn-with-icon--${iconPosition}`]: (0, utils_1.stringToBoolean)(hasIcon),
+        'btn-block': (0, utils_1.stringToBoolean)(fullWidth),
+        'is-icon-only': (0, utils_1.stringToBoolean)(iconOnly)
+    }, className);
+    return (react_1.default.createElement("button", Object.assign({ type: "button", disabled: disabled, className: buttonClassName }, props), iconOnly ? (react_1.default.createElement(IconWrapper, { icon: icon !== null && icon !== void 0 ? icon : defaultIcon, iconHover: iconHover, iconAltText: iconAltText })) : (react_1.default.createElement(react_1.default.Fragment, null,
+        hasIcon && react_1.default.createElement(IconWrapper, { icon: icon !== null && icon !== void 0 ? icon : defaultIcon, iconHover: iconHover, iconAltText: iconAltText }),
+        react_1.default.createElement("span", { className: "children-wrapper" }, children)))));
+};
+exports.Button = Button;
+const MemoButton = react_1.default.memo(exports.Button);
+MemoButton.displayName = 'Button';
+exports.default = MemoButton;
+//# sourceMappingURL=button.js.map

package/dist/cjs/components/ui/atoms/button/button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.js","sourceRoot":"","sources":["../../../../../../src/components/ui/atoms/button/button.tsx"],"names":[],"mappings":"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"}

package/dist/cjs/components/ui/atoms/button/button.scss

@@ -0,0 +1,375 @@
+//  Mixings
+@mixin dyeButton($naturalColors, $hoverColors, $activeColors, $disabledColors) {
+  &:not(:hover) {
+    @apply #{$naturalColors};
+  }
+
+  &:not(:active):hover {
+    @apply #{$hoverColors};
+  }
+
+  &:active {
+    @apply #{$activeColors};
+  }
+
+  &:disabled {
+    @apply #{$disabledColors} opacity-25;
+    pointer-events: none;
+  }
+}
+
+@mixin dyeIcon($naturalColors, $hoverColors, $activeColors) {
+  svg:first-of-type {
+    path {
+      fill: transparent;
+      @apply #{$naturalColors};
+    }
+  }
+
+  svg:last-of-type {
+    path {
+      stroke: transparent;
+      @apply #{$hoverColors};
+    }
+  }
+
+  &:not(:active):hover {
+    svg:last-of-type {
+      path {
+        stroke: transparent;
+        @apply #{$hoverColors};
+      }
+    }
+  }
+  &:active {
+    svg:last-of-type {
+      path {
+        stroke: transparent;
+        @apply #{$activeColors};
+      }
+    }
+  }
+}
+
+@mixin dyeLinkUnderline($color) {
+  &::after {
+    @apply #{$color};
+  }
+}
+
+@mixin animateIcon($firstIconInitState, $secondIconInitState, $firtIconHoverState) {
+  svg {
+    @apply transition-all ease-in-out;
+  }
+  svg:first-of-type {
+    @apply #{$firstIconInitState};
+  }
+
+  svg:last-of-type {
+    @apply #{$secondIconInitState};
+  }
+
+  &:hover {
+    svg:first-of-type {
+      @apply #{$firtIconHoverState};
+    }
+    svg:last-of-type {
+      @apply #{$firstIconInitState};
+    }
+  }
+}
+
+.btn {
+  @apply rounded-4 flex items-center justify-center transition-all  ease-in-out;
+
+  .icon-wrapper {
+    @apply pointer-events-none h-24;
+    min-width: 24px;
+    svg {
+      @apply absolute;
+    }
+  }
+
+  // Global styles for ButtonLinks
+  &[class*=' btn-link'] {
+    // apply for all ButtonLink
+    @apply px-16 py-8 #{!important};
+
+    @apply relative no-underline;
+
+    &.btn-default {
+      &::after {
+        top: 42px !important;
+      }
+    }
+
+    &.btn-small {
+      &::after {
+        top: 32px !important;
+      }
+    }
+
+    &:not([class*='btn-with-icon'])::after {
+      @apply left-16 absolute  transition-all ease-in-out;
+      width: calc(100% - 32px);
+      height: 1px;
+      content: '';
+      top: 43px;
+      transform: scaleX(1);
+      transform-origin: center;
+    }
+
+    &:hover::after {
+      transform: scaleX(0);
+    }
+  }
+
+  &:focus {
+    @apply outline outline-2 outline-primary-600 outline-offset-2;
+  }
+
+  &:not(:focus) {
+    @apply outline-none;
+  }
+
+  // avoid underline decoration when Icon present
+  &[class*=' btn-with-icon'] {
+    @apply no-underline #{!important};
+  }
+
+  &[class*=' btn-list-link'] {
+    @apply justify-between text-right truncate;
+  }
+
+  // Sizes & Spacing
+  &-default {
+    @apply px-16 py-16;
+
+    span.children-wrapper {
+      @apply text-interaction-button-m;
+    }
+
+    min-height: 60px;
+
+    &.is-icon-only {
+      @apply p-0 #{!important};
+      width: 60px;
+
+      .icon-wrapper {
+        @apply m-0;
+      }
+    }
+  }
+
+  &-small {
+    @apply px-16 py-8;
+
+    span.children-wrapper {
+      @apply text-interaction-button-s;
+    }
+
+    min-height: 44px;
+
+    &.is-icon-only {
+      @apply p-0 #{!important};
+      width: 44px;
+
+      .icon-wrapper {
+        @apply m-0;
+      }
+    }
+  }
+  // # end sizes
+
+  // Animate Icons according animation type
+  &.animate-icon--backward {
+    @include animateIcon('translate-x-0 opacity-100', 'translate-x-16 opacity-0', '-translate-x-16 opacity-0');
+  }
+
+  &.animate-icon--forward {
+    @include animateIcon('translate-x-0 opacity-100', '-translate-x-16 opacity-0', 'translate-x-16 opacity-0');
+  }
+  &.animate-icon--default {
+    @include animateIcon(
+      'translate-x-0 translate-y-0 opacity-100',
+      ' translate-x-0 translate-y-16 opacity-0',
+      'translate-x-0 -translate-y-16 opacity-0'
+    );
+  }
+  // # end animations
+
+  &-block {
+    @apply w-full justify-center;
+  }
+
+  &-with-icon {
+    &--leading {
+      span.children-wrapper {
+        text-align: left !important;
+      }
+      @apply flex-row;
+
+      .icon-wrapper {
+        @apply mr-8 ml-0;
+      }
+    }
+
+    &--trailing {
+      span.children-wrapper {
+        text-align: left !important;
+      }
+
+      @apply flex-row-reverse;
+
+      .icon-wrapper {
+        @apply ml-8 mr-0;
+      }
+    }
+  }
+
+  &-solid {
+    &--primary {
+      @include dyeButton(
+        'text-white bg-primary-600',
+        'text-white bg-primary-700',
+        'text-white bg-primary-800',
+        'text-white bg-primary-600'
+      );
+      @include dyeIcon('stroke-white', 'fill-white', 'fill-white');
+    }
+    &--secondary {
+      @include dyeButton(
+        'text-dark bg-secondary-200',
+        'text-dark bg-secondary-300',
+        'text-dark bg-secondary-500',
+        'text-dark bg-secondary-200'
+      );
+      @include dyeIcon('stroke-black', 'fill-black', 'fill-black');
+    }
+    &--success {
+      @include dyeButton(
+        'text-white bg-success-600',
+        'text-white bg-success-700',
+        'text-white bg-success-800',
+        'text-white bg-success-600'
+      );
+      @include dyeIcon('stroke-white', 'fill-white', 'fill-white');
+    }
+    &--warning {
+      @include dyeButton('bg-alert-500 text-dark', 'bg-alert-600 text-dark', 'bg-alert-700 text-dark', 'bg-alert-500 text-dark');
+      @include dyeIcon('stroke-neutral-900', 'fill-neutral-900', 'fill-neutral-900');
+    }
+    &--danger {
+      @include dyeButton('bg-danger-600 text-white', 'bg-danger-700 text-white', 'bg-danger-800 text-white', 'bg-danger-600 text-white');
+      @include dyeIcon('stroke-white', 'fill-white', 'fill-white');
+    }
+    &--neutral {
+      @include dyeButton(
+        'bg-neutral-900 text-white',
+        'bg-neutral-800 text-white',
+        'bg-neutral-900 text-white',
+        'bg-neutral-900 text-white'
+      );
+      @include dyeIcon('stroke-white', 'fill-white', 'fill-white');
+    }
+    &--white {
+      @include dyeButton('bg-white text-dark', 'bg-neutral-100 text-dark', 'bg-neutral-200 text-dark', 'bg-white text-dark');
+      @include dyeIcon('stroke-neutral-900', 'fill-neutral-900', 'fill-neutral-900');
+    }
+  }
+
+  &-outline {
+    &--primary {
+      @include dyeButton(
+        'border-neutral-300 text-primary-600 border-2',
+        'border-primary-600 text-primary-600 border-2',
+        'border-primary-800 text-primary-800 border-2',
+        'border-neutral-300 text-primary-600 border-2'
+      );
+      @include dyeIcon('stroke-primary-500', 'fill-primary-500', 'fill-primary-800');
+    }
+    &--success {
+      @include dyeButton(
+        'border-neutral-300 text-success-600 border-2',
+        'border-success-600 text-success-600 border-2',
+        'border-success-800 text-success-800 border-2',
+        'border-neutral-300 text-success-600 border-2'
+      );
+      @include dyeIcon('stroke-success-600', 'fill-success-600', 'fill-success-800');
+    }
+    &--warning {
+      @include dyeButton(
+        'border-neutral-300 text-alert-800 border-2',
+        'border-alert-600 text-alert-800 border-2',
+        'border-danger-800 text-danger-800 border-2',
+        'border-neutral-300 text-alert-800 border-2'
+      );
+      @include dyeIcon('stroke-alert-800', 'fill-alert-600', 'fill-alert-700');
+    }
+    &--danger {
+      @include dyeButton(
+        'border-neutral-300 text-danger-600 border-2',
+        'border-danger-600 text-danger-600 border-2',
+        'border-danger-700 text-danger-800 border-2',
+        'border-neutral-300 text-danger-600 border-2'
+      );
+      @include dyeIcon('stroke-danger-600', 'fill-danger-600', 'fill-danger-800');
+    }
+    &--neutral {
+      @include dyeButton(
+        'border-neutral-300 text-dark border-2',
+        'border-neutral-600 text-dark border-2',
+        'border-neutral-900 text-dark border-2',
+        'border-neutral-300 text-dark border-2'
+      );
+      @include dyeIcon('stroke-black', 'fill-dark', 'fill-neutral-700');
+    }
+    &--white {
+      @include dyeButton(
+        'border-white text-white border-2',
+        'border-neutral-600 text-white border-2',
+        'border-neutral-800 text-neutral-300 border-2',
+        'border-white text-white border-2'
+      );
+      @include dyeIcon('stroke-white', 'fill-white', 'fill-neutral-300');
+    }
+  }
+
+  &-link {
+    &--primary {
+      @include dyeButton('text-primary-600', 'text-primary-600', 'text-primary-700', 'text-primary-600');
+      @include dyeLinkUnderline('bg-primary-600');
+      @include dyeIcon('stroke-primary-500', 'fill-primary-700', 'fill-primary-500');
+    }
+    &--success {
+      @include dyeButton('text-success-600', 'text-success-600', 'text-success-700', 'text-success-600');
+      @include dyeLinkUnderline('bg-success-600');
+      @include dyeIcon('stroke-success-600', 'fill-success-600', 'fill-success-800');
+    }
+    &--warning {
+      @include dyeButton('text-alert-800 decoration-alert-600', 'text-alert-800', 'text-alert-800 decoration-alert-600', 'text-alert-600');
+      @include dyeLinkUnderline('bg-alert-600');
+      @include dyeIcon('stroke-alert-800', 'fill-alert-600', 'fill-alert-700');
+    }
+    &--danger {
+      @include dyeButton('text-danger-600', 'text-danger-700', 'text-danger-800', 'text-danger-600');
+      @include dyeLinkUnderline('bg-danger-600');
+      @include dyeIcon('stroke-danger-600', 'fill-danger-600', 'fill-danger-800');
+    }
+    &--neutral {
+      @include dyeButton('text-dark decoration-dark', 'text-dark', 'text-dark decoration-dark', 'text-dark decoration-dark');
+      @include dyeLinkUnderline('bg-neutral-900');
+      @include dyeIcon('stroke-dark', 'fill-neutral-900', 'fill-neutral-700');
+    }
+    &--white {
+      @include dyeButton(
+        'text-white decoration-white',
+        'text-white',
+        'text-neutral-300 decoration-neutral-200',
+        'text-white decoration-white'
+      );
+      @include dyeLinkUnderline('bg-white');
+      @include dyeIcon('stroke-white', 'fill-white', 'fill-neutral-300');
+    }
+  }
+}