@uxf/ui 1.0.0-beta.80 → 1.0.0-beta.82

package/button/button.d.ts

@@ -7,8 +7,8 @@ export declare type ButtonColor = keyof ButtonColors;
 export interface ButtonProps extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "type">, UseAnchorProps {
     color?: ButtonColor;
     isFullWidth?: boolean;
+    isIconButton?: boolean;
     size?: ButtonSize;
     variant?: ButtonVariant;
-    iconButton?: boolean;
 }
 export declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLAnchorElement>>;

package/button/button.js

@@ -10,10 +10,10 @@ const react_1 = __importDefault(require("react"));
 const forwardRef_1 = require("@uxf/core/utils/forwardRef");
 exports.Button = (0, forwardRef_1.forwardRef)("Button", (props, ref) => {
     // eslint-disable-next-line react/destructuring-assignment
-    const { color, iconButton, isFullWidth, size, variant, className, ...restProps } = props;
+    const { color, isIconButton, isFullWidth, size, variant, className, ...restProps } = props;
     const anchorProps = (0, useAnchorProps_1.useAnchorProps)({
         ...restProps,
-        className: (0, cx_1.cx)("uxf-button", `uxf-button--color-${color !== null && color !== void 0 ? color : "default"}`, `uxf-button--size-${size !== null && size !== void 0 ? size : "default"}`, `uxf-button--variant-${variant !== null && variant !== void 0 ? variant : "default"}`, iconButton && "uxf-button--icon-button", isFullWidth && "uxf-button--full-width", className),
+        className: (0, cx_1.cx)("uxf-button", `uxf-button--color-${color !== null && color !== void 0 ? color : "default"}`, `uxf-button--size-${size !== null && size !== void 0 ? size : "default"}`, `uxf-button--variant-${variant !== null && variant !== void 0 ? variant : "default"}`, isIconButton && "uxf-button--icon-button", isFullWidth && "uxf-button--full-width", className),
     });
     return (react_1.default.createElement("a", { ref: ref, ...anchorProps },
         typeof props.children === "string" ? (react_1.default.createElement("span", { className: "uxf-button__text" }, props.children)) : (props.children),

package/button/button.stories.d.ts

@@ -1,7 +1,14 @@
+/// <reference types="mdx" />
 import React from "react";
+import Docs from "./button.docs.mdx";
 declare const _default: {
     title: string;
     component: React.ForwardRefExoticComponent<import("@uxf/ui/button").ButtonProps & React.RefAttributes<HTMLAnchorElement>>;
+    parameters: {
+        docs: {
+            page: typeof Docs;
+        };
+    };
 };
 export default _default;
 export declare function Default(): JSX.Element;

package/button/button.stories.js

@@ -22,19 +22,28 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Default = void 0;
 const react_1 = __importStar(require("react"));
 const button_1 = require("@uxf/ui/button");
 const storybook_config_1 = require("@uxf/ui/utils/storybook-config");
 const icon_1 = require("@uxf/ui/icon");
+const button_docs_mdx_1 = __importDefault(require("./button.docs.mdx"));
 exports.default = {
     title: "UI/Button",
     component: button_1.Button,
+    parameters: {
+        docs: {
+            page: button_docs_mdx_1.default,
+        },
+    },
 };
 function Default() {
     const config = (0, storybook_config_1.useStorybookConfig)("Button");
-    const allButtons = (react_1.default.createElement(react_1.default.Fragment, null, config.variants.map((variant) => (react_1.default.createElement(react_1.Fragment, { key: variant }, config.colors.map((color) => (react_1.default.createElement(react_1.Fragment, { key: color }, config.sizes.map((size) => (react_1.default.createElement("div", { key: `${size}${color}${variant}`, className: "space-y-2 pb-4" },
+    return (react_1.default.createElement(react_1.default.Fragment, null, config.variants.map((variant) => (react_1.default.createElement(react_1.Fragment, { key: variant }, config.colors.map((color) => (react_1.default.createElement(react_1.Fragment, { key: color }, config.sizes.map((size) => (react_1.default.createElement("div", { key: `${size}${color}${variant}`, className: "space-y-2 pb-4" },
         react_1.default.createElement("div", { className: "text-sm" },
             "Variant: ",
             react_1.default.createElement("span", { className: "font-semibold" }, variant),
@@ -48,12 +57,12 @@ function Default() {
             react_1.default.createElement(button_1.Button, { color: color, onClick: () => void null, size: size, variant: variant }, "Default"),
             react_1.default.createElement(button_1.Button, { color: color, loading: true, onClick: () => void null, size: size, variant: variant }, "Loading"),
             react_1.default.createElement(button_1.Button, { color: color, disabled: true, onClick: () => void null, size: size, variant: variant }, "Disabled"),
-            react_1.default.createElement(button_1.Button, { color: color, iconButton: true, onClick: () => void null, size: size, variant: variant },
-                react_1.default.createElement(icon_1.Icon, { name: "check", size: size === "xs" || size === "sm" ? 16 : 24 }))),
-        react_1.default.createElement(button_1.Button, { className: "w-[200px]", color: color, onClick: () => void null, size: size, variant: variant }, "Custom width"),
-        react_1.default.createElement(button_1.Button, { color: color, isFullWidth: true, onClick: () => void null, size: size, variant: variant }, "Full width"))))))))))));
-    return (react_1.default.createElement("div", { className: "flex flex-col space-x-8 lg:flex-row" },
-        react_1.default.createElement("div", { className: "light space-y-2 rounded bg-white p-8" }, allButtons),
-        react_1.default.createElement("div", { className: "dark space-y-2 rounded bg-gray-900 p-8 text-white" }, allButtons)));
+            react_1.default.createElement(button_1.Button, { color: color, isIconButton: true, onClick: () => void null, size: size, variant: variant },
+                react_1.default.createElement(icon_1.Icon, { name: "check" })),
+            react_1.default.createElement(button_1.Button, { color: color, isIconButton: true, onClick: () => void null, size: size, variant: variant, loading: true },
+                react_1.default.createElement(icon_1.Icon, { name: "check" })),
+            react_1.default.createElement(button_1.Button, { className: "w-[200px]", color: color, onClick: () => void null, size: size, variant: variant }, "Custom width")),
+        react_1.default.createElement(button_1.Button, { color: color, isFullWidth: true, onClick: () => void null, size: size, variant: variant }, "Full width"),
+        react_1.default.createElement("hr", null))))))))))));
 }
 exports.Default = Default;

package/button/theme.d.ts

@@ -1,5 +1,6 @@
 export interface ButtonVariants {
     default: true;
+    white: true;
     outlined: true;
     text: true;
 }
@@ -12,8 +13,6 @@ export interface ButtonSizes {
 }
 export interface ButtonColors {
     default: true;
-    white: true;
     success: true;
-    warning: true;
     error: true;
 }

package/chip/chip.d.ts

@@ -1,7 +1,10 @@
 import React, { HTMLAttributes } from "react";
-import { ChipColors } from "@uxf/ui/chip/theme";
+import { ChipColors, ChipSizes } from "@uxf/ui/chip/theme";
 export declare type ChipColor = keyof ChipColors;
+export declare type ChipSize = keyof ChipSizes;
 export interface ChipProps extends HTMLAttributes<HTMLDivElement> {
     color?: ChipColor;
+    size?: ChipSize;
+    onClose?: () => void;
 }
 export declare const Chip: React.ForwardRefExoticComponent<ChipProps & React.RefAttributes<HTMLDivElement>>;

package/chip/chip.js

@@ -8,7 +8,12 @@ const cx_1 = require("@uxf/core/utils/cx");
 const react_1 = __importDefault(require("react"));
 const forwardRef_1 = require("@uxf/core/utils/forwardRef");
 exports.Chip = (0, forwardRef_1.forwardRef)("Chip", (props, ref) => {
-    var _a;
-    const chipClassName = (0, cx_1.cx)("uxf-chip", `uxf-chip--color-${(_a = props.color) !== null && _a !== void 0 ? _a : "success"}`, props.className);
-    return (react_1.default.createElement("div", { ref: ref, className: chipClassName }, typeof props.children === "string" ? (react_1.default.createElement("span", { className: "uxf-chip__text" }, props.children)) : (props.children)));
+    var _a, _b;
+    const chipClassName = (0, cx_1.cx)("uxf-chip", `uxf-chip--color-${(_a = props.color) !== null && _a !== void 0 ? _a : "default"}`, `uxf-chip--size-${(_b = props.size) !== null && _b !== void 0 ? _b : "default"}`, props.onClose && "has-button", props.className);
+    return (react_1.default.createElement("div", { ref: ref, className: chipClassName },
+        typeof props.children === "string" ? (react_1.default.createElement("span", { className: "uxf-chip__text" }, props.children)) : (props.children),
+        props.onClose && (react_1.default.createElement("button", { type: "button", onClick: props.onClose, className: "uxf-chip__button" },
+            react_1.default.createElement("span", { className: "sr-only" }, "Remove option"),
+            react_1.default.createElement("svg", { stroke: "currentColor", fill: "none", viewBox: "0 0 8 8" },
+                react_1.default.createElement("path", { strokeLinecap: "round", strokeWidth: "1.5", d: "M1 1l6 6m0-6L1 7" }))))));
 });

package/chip/chip.stories.d.ts

@@ -1,7 +1,14 @@
+/// <reference types="mdx" />
 import React from "react";
+import Docs from "./chip.docs.mdx";
 declare const _default: {
     title: string;
     component: React.ForwardRefExoticComponent<import("./chip").ChipProps & React.RefAttributes<HTMLDivElement>>;
+    parameters: {
+        docs: {
+            page: typeof Docs;
+        };
+    };
 };
 export default _default;
 export declare function Default(): JSX.Element;

package/chip/chip.stories.js

@@ -6,17 +6,27 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Default = void 0;
 const react_1 = __importDefault(require("react"));
 const chip_1 = require("@uxf/ui/chip");
+const storybook_config_1 = require("../utils/storybook-config");
+const chip_docs_mdx_1 = __importDefault(require("./chip.docs.mdx"));
 exports.default = {
     title: "UI/Chip",
     component: chip_1.Chip,
+    parameters: {
+        docs: {
+            page: chip_docs_mdx_1.default,
+        },
+    },
 };
 function Default() {
-    const allChips = (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(chip_1.Chip, { color: "success" }, "Success"),
-        react_1.default.createElement(chip_1.Chip, { color: "warning" }, "Warning"),
-        react_1.default.createElement(chip_1.Chip, { color: "error" }, "Error")));
+    const config = (0, storybook_config_1.useStorybookConfig)("Chip");
+    const allChips = config.colors.map((color) => (react_1.default.createElement(chip_1.Chip, { key: color, color: color, onClose: () => null }, color)));
+    const allChipsLarge = config.colors.map((color) => (react_1.default.createElement(chip_1.Chip, { key: color, color: color, size: "large" }, color)));
     return (react_1.default.createElement("div", { className: "flex flex-col lg:flex-row" },
-        react_1.default.createElement("div", { className: "light space-x-4 rounded bg-white p-8" }, allChips),
-        react_1.default.createElement("div", { className: "dark space-x-4 rounded bg-gray-900 p-8 text-white" }, allChips)));
+        react_1.default.createElement("div", { className: "light space-y-4 rounded bg-white p-8" },
+            react_1.default.createElement("div", { className: "space-x-4" }, allChips),
+            react_1.default.createElement("div", { className: "space-x-4" }, allChipsLarge)),
+        react_1.default.createElement("div", { className: "dark space-y-4 rounded bg-gray-900 p-8" },
+            react_1.default.createElement("div", { className: "space-x-4" }, allChips),
+            react_1.default.createElement("div", { className: "space-x-4" }, allChipsLarge))));
 }
 exports.Default = Default;

package/chip/theme.d.ts

@@ -1,5 +1,14 @@
 export interface ChipColors {
-    success: true;
-    warning: true;
-    error: true;
+    default: true;
+    red: true;
+    yellow: true;
+    green: true;
+    blue: true;
+    indigo: true;
+    purple: true;
+    pink: true;
+}
+export interface ChipSizes {
+    default: true;
+    large: true;
 }

package/combobox/combobox.d.ts

@@ -14,7 +14,6 @@ export interface ComboboxProps<Value = ComboboxValue, Option = ComboboxOption<Va
     helperText?: ReactNode;
     hiddenLabel?: boolean;
     iconName?: keyof IconsSet;
-    iconSize?: number;
     id?: string;
     keyExtractor?: (option: Option) => string | number;
     label: string;

package/combobox/combobox.js

@@ -36,7 +36,7 @@ const use_dropdown_1 = require("../hooks/use-dropdown");
 const icon_1 = require("../icon");
 const label_1 = require("../label");
 exports.Combobox = (0, forwardRef_1.forwardRef)("Combobox", (props, ref) => {
-    var _a, _b, _c, _d;
+    var _a, _b, _c;
     const generatedId = (0, react_2.useId)();
     const id = (_a = props.id) !== null && _a !== void 0 ? _a : generatedId;
     const [query, setQuery] = (0, react_2.useState)("");
@@ -47,14 +47,12 @@ exports.Combobox = (0, forwardRef_1.forwardRef)("Combobox", (props, ref) => {
     const input = (0, useInputFocus_1.useInputFocus)(innerRef, props.onBlur, props.onFocus);
     const dropdown = (0, use_dropdown_1.useDropdown)((_b = props.dropdownPlacement) !== null && _b !== void 0 ? _b : "bottom", true);
     const stableRef = (0, react_2.useMemo)(() => (0, composeRefs_1.composeRefs)(innerRef, ref, dropdown.reference), [ref, dropdown.reference]);
-    const getIconClassName = (open) => (0, cx_1.cx)("uxf-select__button-icon", open && "is-open");
-    const iconName = (_c = props.iconName) !== null && _c !== void 0 ? _c : "caretDown";
-    const iconSize = (_d = props.iconSize) !== null && _d !== void 0 ? _d : 24;
+    const iconName = (_c = props.iconName) !== null && _c !== void 0 ? _c : "chevronDown";
     return (react_2.default.createElement(react_1.Combobox, { as: "div", className: (0, cx_1.cx)("uxf-combobox", props.isInvalid && classes_1.CLASSES.IS_INVALID, props.isRequired && classes_1.CLASSES.IS_REQUIRED, props.isReadOnly && classes_1.CLASSES.IS_READONLY, props.isDisabled && classes_1.CLASSES.IS_DISABLED, props.className), onChange: (v) => { var _a; return (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, v.id); }, value: selectedOption, disabled: props.isDisabled || props.isReadOnly }, (renderProps) => (react_2.default.createElement(react_2.default.Fragment, null,
         react_2.default.createElement(react_1.Combobox.Label, { as: label_1.Label, isHidden: props.hiddenLabel, onClick: props.isDisabled || props.isReadOnly ? undefined : input.focus }, props.label),
         react_2.default.createElement(react_1.Combobox.Button, { as: "div", className: (0, cx_1.cx)("uxf-combobox__button", (renderProps.open || input.focused) && classes_1.CLASSES.IS_FOCUSED, renderProps.disabled && classes_1.CLASSES.IS_DISABLED, props.isReadOnly && classes_1.CLASSES.IS_READONLY, props.isInvalid && classes_1.CLASSES.IS_INVALID, dropdown.placement === "bottom" && "is-open--bottom", dropdown.placement === "top" && "is-open--top", renderProps.open && "is-open"), onBlur: input.onBlur, onFocus: input.onFocus, tabIndex: props.isDisabled || props.isReadOnly ? undefined : 0, ref: stableRef, "aria-invalid": props.isInvalid, "aria-describedby": errorId },
             react_2.default.createElement(react_1.Combobox.Input, { className: (0, cx_1.cx)("uxf-combobox__input"), displayValue: (item) => { var _a; return (_a = item === null || item === void 0 ? void 0 : item.label) !== null && _a !== void 0 ? _a : ""; }, onBlur: props.onBlur, onChange: (event) => setQuery(event.target.value), placeholder: props.placeholder, ref: stableRef, type: "text" }),
-            react_2.default.createElement(icon_1.Icon, { className: getIconClassName(renderProps.open), name: iconName, size: iconSize })),
+            react_2.default.createElement(icon_1.Icon, { className: (0, cx_1.cx)("uxf-select__button-icon", renderProps.open && "is-open"), name: iconName })),
         react_2.default.createElement(react_1.Combobox.Options, { className: (0, cx_1.cx)("uxf-dropdown", dropdown.placement === "bottom" && "uxf-dropdown--bottom", dropdown.placement === "top" && "uxf-dropdown--top"), ref: dropdown.floating }, filteredData.map((option) => {
             var _a, _b, _c, _d;
             return (react_2.default.createElement(react_1.Combobox.Option, { key: (_b = (_a = props.keyExtractor) === null || _a === void 0 ? void 0 : _a.call(props, option)) !== null && _b !== void 0 ? _b : option.id, value: option, className: (optionState) => (0, cx_1.cx)("uxf-dropdown__item", optionState.active && classes_1.CLASSES.IS_ACTIVE, optionState.disabled && classes_1.CLASSES.IS_DISABLED, optionState.selected && classes_1.CLASSES.IS_SELECTED) }, (_d = (_c = props.renderOption) === null || _c === void 0 ? void 0 : _c.call(props, option)) !== null && _d !== void 0 ? _d : option.label));

package/css/button.css

@@ -5,9 +5,11 @@
 }
 
 .uxf-button {
-    @apply inline-flex items-center justify-center text-center rounded-lg before:rounded-lg font-semibold
-        focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 relative cursor-pointer transition
-        before:transition;
+    @apply inline-flex items-center justify-center rounded-md font-medium shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2;
+
+    .uxf-icon {
+        @apply h-6;
+    }
 
     &__text {
         @apply truncate;
@@ -21,6 +23,12 @@
         @apply pointer-events-none;
     }
 
+    &.uxf-button--icon-button.is-loading {
+        &::after {
+            @apply ml-0
+        }
+    }
+
     &.is-loading {
         @apply pointer-events-none;
 
@@ -34,10 +42,18 @@
             margin-left: 8px;
             width: 20px;
         }
+
+        &.uxf-button--icon-button::after {
+            margin-left: 0;
+        }
+
+        .uxf-icon {
+            @apply hidden;
+        }
     }
 
     &--size-xs {
-        @apply px-2.5 py-1.5 text-xs;
+        @apply px-2.5 h-7 text-xs rounded;
 
         &.is-loading::after {
             height: 14px;
@@ -45,12 +61,16 @@
         }
 
         &.uxf-button--icon-button {
-            @apply p-0 h-7 w-7;
+            @apply p-0 w-7;
+        }
+
+        .uxf-icon {
+            @apply h-4;
         }
     }
 
     &--size-sm {
-        @apply px-3 py-2 text-sm leading-4;
+        @apply px-3 h-8 text-sm leading-4;
 
         &.is-loading::after {
             height: 16px;
@@ -58,54 +78,55 @@
         }
 
         &.uxf-button--icon-button {
-            @apply p-0 h-8 w-8;
+            @apply p-0 w-8;
+        }
+
+        .uxf-icon {
+            @apply h-4;
         }
     }
 
     &--size-default {
-        @apply px-4 py-3 text-base;
+        @apply px-4 h-9 text-sm;
 
         &.uxf-button--icon-button {
-            @apply p-0 h-12 w-12;
+            @apply p-0 w-9;
         }
     }
 
     &--size-lg {
-        @apply px-8 py-5 text-base;
+        @apply px-4 h-10 text-base;
 
         &.uxf-button--icon-button {
-            @apply p-0 h-16 w-16;
+            @apply p-0 w-10;
         }
     }
 
     &--size-xl {
-        @apply px-10 py-6 text-base;
+        @apply px-6 h-11 text-base;
 
         &.uxf-button--icon-button {
-            @apply p-0 h-[72px] w-[72px];
+            @apply p-0 w-11;
         }
     }
 
     &--variant-outlined {
-        @apply before:absolute before:pointer-events-none before:inset-0 before:border is-hoverable:before:border-2
-            bg-transparent;
+        @apply border bg-white;
 
-        :root .light & {
-            @apply before:border-gray-300 is-hoverable:bg-primary-100 is-hoverable:before:border-primary-400
-                focus-visible:ring-primary-500 focus-visible:ring-offset-white;
+        &.uxf-button--color-default {
+            @apply text-primary-600 border-primary-500 hover:bg-primary-50;
+        }
 
-            &.is-disabled {
-                @apply before:border-gray-100 text-gray-400;
-            }
+        &.uxf-button--color-success {
+            @apply text-success-600 border-success-500 hover:bg-success-50;
         }
 
-        :root .dark & {
-            @apply before:border-gray-300 is-hoverable:bg-white/10 focus-visible:ring-primary-500
-                focus-visible:ring-offset-gray-900;
+        &.uxf-button--color-error {
+            @apply text-error-600 border-error-500 hover:bg-error-50;
+        }
 
-            &.is-disabled {
-                @apply before:border-gray-700 text-gray-600;
-            }
+        &.is-disabled {
+            @apply border-gray-300 text-gray-400;
         }
     }
 
@@ -113,119 +134,67 @@
         @apply text-white;
 
         &.uxf-button--color-default {
-            :root .light & {
-                @apply text-white bg-primary-500 is-hoverable:bg-primary-400 focus-visible:ring-primary-500;
-
-                &.is-disabled {
-                    @apply bg-gray-100 text-gray-400;
-                }
-            }
-
-            :root .dark & {
-                @apply text-white bg-primary-500 is-hoverable:bg-primary-400 focus-visible:ring-primary-500
-                    focus-visible:ring-offset-gray-900;
-
-                &.is-disabled {
-                    @apply bg-gray-700 text-gray-400;
-                }
-            }
-        }
-
-        &.uxf-button--color-white {
-            :root .light & {
-                @apply bg-white is-hoverable:bg-gray-200 focus-visible:ring-gray-200;
+            @apply text-white bg-primary-500 is-hoverable:bg-primary-400 focus-visible:ring-primary-500;
 
-                &.is-disabled {
-                    @apply bg-gray-100 text-gray-400;
-                }
-            }
-
-            :root .dark & {
-                @apply bg-white is-hoverable:bg-gray-200 focus-visible:ring-gray-200;
-
-                &.is-disabled {
-                    @apply bg-gray-100 text-gray-400;
-                }
+            &.is-disabled {
+                @apply bg-gray-100 text-gray-400;
             }
-
-            @apply bg-gray-50 text-gray-700 is-hoverable:bg-gray-100 focus-visible:ring-gray-500;
         }
 
         &.uxf-button--color-success {
-            :root .light & {
-                @apply text-white bg-success-500 is-hoverable:bg-success-400 focus-visible:ring-success-500;
+            @apply text-white bg-success-500 is-hoverable:bg-success-400 focus-visible:ring-success-500;
 
-                &.is-disabled {
-                    @apply bg-gray-100 text-gray-400;
-                }
+            &.is-disabled {
+                @apply bg-gray-100 text-gray-400;
             }
+        }
 
-            :root .dark & {
-                @apply text-white bg-success-500 is-hoverable:bg-success-400 focus-visible:ring-success-500
-                    focus-visible:ring-offset-gray-900;
+        &.uxf-button--color-error {
+            @apply text-white bg-error-500 is-hoverable:bg-error-400 focus-visible:ring-error-500;
 
-                &.is-disabled {
-                    @apply bg-gray-700 text-gray-400;
-                }
+            &.is-disabled {
+                @apply bg-gray-100 text-gray-400;
             }
         }
+    }
 
-        &.uxf-button--color-warning {
-            :root .light & {
-                @apply text-white bg-warning-500 is-hoverable:bg-warning-400 focus-visible:ring-warning-500;
-
-                &.is-disabled {
-                    @apply bg-gray-100 text-gray-400;
-                }
-            }
+    &--variant-white {
+        @apply border border-gray-300 bg-white hover:bg-gray-50;
 
-            :root .dark & {
-                @apply text-white bg-warning-500 is-hoverable:bg-warning-400 focus-visible:ring-warning-500
-                    focus-visible:ring-offset-gray-900;
+        &.uxf-button--color-default {
+            @apply text-primary-600;
+        }
 
-                &.is-disabled {
-                    @apply bg-gray-700 text-gray-400;
-                }
-            }
+        &.uxf-button--color-success {
+            @apply text-success-600;
         }
 
         &.uxf-button--color-error {
-            :root .light & {
-                @apply text-white bg-error-500 is-hoverable:bg-error-400 focus-visible:ring-error-500;
-
-                &.is-disabled {
-                    @apply bg-gray-100 text-gray-400;
-                }
-            }
-
-            :root .dark & {
-                @apply text-white bg-error-500 is-hoverable:bg-error-400 focus-visible:ring-error-500
-                    focus-visible:ring-offset-gray-900;
+            @apply text-error-600;
+        }
 
-                &.is-disabled {
-                    @apply bg-gray-700 text-gray-400;
-                }
-            }
+        &.is-disabled {
+            @apply border-gray-300 text-gray-400;
         }
     }
 
     &--variant-text {
-        @apply before:border-transparent;
+        @apply shadow-none;
 
-        :root .light & {
-            @apply is-hoverable:bg-gray-200 focus-visible:ring-primary-500 focus-visible:ring-offset-white;
+        &.uxf-button--color-default {
+            @apply text-primary-600 hover:text-primary-800;
+        }
 
-            &.is-disabled {
-                @apply text-gray-400;
-            }
+        &.uxf-button--color-success {
+            @apply text-success-600 hover:text-success-800;
         }
 
-        :root .dark & {
-            @apply is-hoverable:bg-gray-800 focus-visible:ring-primary-500 focus-visible:ring-offset-gray-900;
+        &.uxf-button--color-error {
+            @apply text-error-600 hover:text-error-800;
+        }
 
-            &.is-disabled {
-                @apply text-gray-600;
-            }
+        &.is-disabled {
+            @apply text-gray-400;
         }
     }
 }