@vectara/vectara-ui 0.0.2

package/lib/components/app/types.d.ts

@@ -0,0 +1,21 @@
+export declare const APP_CONTENT_PADDING: readonly ["none", "xs", "s", "m", "l", "xl"];
+export type AppContentPadding = (typeof APP_CONTENT_PADDING)[number];
+export type Tree = Array<TreeItem>;
+export type TreeItem = {
+    name: string;
+    path?: string;
+    pages?: Tree;
+    iconBefore?: React.ReactNode;
+    iconAfter?: React.ReactNode;
+    isActive?: boolean;
+    className?: string;
+    "data-testid"?: string;
+};
+export type Sections = Array<{
+    name: string;
+    pages: Array<SectionItem>;
+}>;
+export type SectionItem = {
+    name: string;
+    path: string;
+};

package/lib/components/app/types.js

@@ -0,0 +1 @@
+export const APP_CONTENT_PADDING = ["none", "xs", "s", "m", "l", "xl"];

package/lib/components/badge/Badge.d.ts

@@ -0,0 +1,14 @@
+import { MouseEvent } from "react";
+import { LinkProps } from "../link/types";
+export declare const BADGE_COLOR: readonly ["accent", "primary", "danger", "warning", "success", "neutral"];
+type Props = {
+    children: React.ReactNode;
+    className?: string;
+    color: (typeof BADGE_COLOR)[number];
+    onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
+    href?: LinkProps["href"];
+    target?: LinkProps["target"];
+    track?: LinkProps["track"];
+};
+export declare const VuiBadge: ({ children, className, color, onClick, href, target, track, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/components/badge/Badge.js

@@ -0,0 +1,33 @@
+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;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import classNames from "classnames";
+import { getTrackingProps } from "../../utils/getTrackingProps";
+import { useVuiContext } from "../context/Context";
+export const BADGE_COLOR = ["accent", "primary", "danger", "warning", "success", "neutral"];
+export const VuiBadge = (_a) => {
+    var { children, className, color, onClick, href, target, track } = _a, rest = __rest(_a, ["children", "className", "color", "onClick", "href", "target", "track"]);
+    const { createLink } = useVuiContext();
+    const classes = classNames(className, "vuiBadge", `vuiBadge--${color}`, {
+        "vuiBadge--clickable": onClick !== null && onClick !== void 0 ? onClick : href
+    });
+    if (onClick) {
+        return (_jsx("button", Object.assign({ className: classes, onClick: onClick }, rest, { children: children })));
+    }
+    if (href) {
+        return createLink(Object.assign({ className: classes, href,
+            onClick,
+            children,
+            target }, getTrackingProps(track)));
+    }
+    return (_jsx("div", Object.assign({ className: classes }, rest, { children: children })));
+};

package/lib/components/badge/_index.scss

@@ -0,0 +1,64 @@
+@use "sass:map";
+
+.vuiBadge {
+  display: inline-block;
+  font-size: $fontSizeSmall;
+  line-height: 1;
+  padding: $sizeXxs $sizeXs;
+  border-radius: $sizeS;
+  font-family: inherit;
+  white-space: nowrap;
+  text-decoration: none;
+}
+
+.vuiBadge--clickable {
+  cursor: pointer;
+}
+
+// Color
+$color: (
+  accent: (
+    "color": $colorAccent,
+    "background-color": transparentize($colorAccent, 0.9),
+    "border-color": transparentize($colorAccent, 0.9)
+  ),
+  primary: (
+    "color": $colorPrimary,
+    "background-color": transparentize($colorPrimary, 0.9),
+    "border-color": transparentize($colorPrimary, 0.9)
+  ),
+  success: (
+    "color": $colorSuccess,
+    "background-color": transparentize($colorSuccess, 0.9),
+    "border-color": transparentize($colorSuccess, 0.9)
+  ),
+  warning: (
+    "color": $colorWarning,
+    "background-color": transparentize($colorWarning, 0.9),
+    "border-color": transparentize($colorWarning, 0.9)
+  ),
+  danger: (
+    "color": $colorDanger,
+    "background-color": transparentize($colorDanger, 0.9),
+    "border-color": transparentize($colorDanger, 0.9)
+  ),
+  neutral: (
+    "color": $colorText,
+    "background-color": $colorLightShade,
+    "border-color": transparentize($colorText, 0.9)
+  )
+);
+
+@each $colorName, $colorValue in $color {
+  .vuiBadge--#{$colorName} {
+    color: #{map.get($colorValue, "color")} !important;
+    background-color: #{map.get($colorValue, "background-color")};
+    border: 1px solid #{map.get($colorValue, "border-color")};
+    transition: all $transitionSpeed;
+
+    &.vuiBadge--clickable:hover {
+      border-color: #{map.get($colorValue, "color")};
+      text-decoration: none;
+    }
+  }
+}

package/lib/components/button/BaseButton.d.ts

@@ -0,0 +1,28 @@
+import { ReactElement, ReactNode } from "react";
+import { BUTTON_SIZE } from "./types";
+import { LinkProps } from "../link/types";
+import { SPINNER_COLOR } from "../spinner/types";
+export type BaseButtonProps = {
+    children?: ReactNode;
+    icon?: ReactElement | null;
+    iconSide?: "left" | "right";
+    align?: "left" | "center" | "right";
+    className?: string;
+    size?: (typeof BUTTON_SIZE)[number];
+    fullWidth?: boolean;
+    isSelected?: boolean;
+    isInert?: boolean;
+    isDisabled?: boolean;
+    onClick?: (e: React.MouseEvent<HTMLAnchorElement | HTMLAnchorElement, MouseEvent>) => void;
+    href?: LinkProps["href"];
+    target?: LinkProps["target"];
+    track?: LinkProps["track"];
+    htmlFor?: string;
+    tabIndex?: number;
+    title?: string;
+    isSubmit?: boolean;
+    isLoading?: boolean;
+};
+export declare const BaseButton: import("react").ForwardRefExoticComponent<BaseButtonProps & {
+    spinnerColor: (typeof SPINNER_COLOR)[number];
+} & import("react").RefAttributes<HTMLButtonElement | null>>;

package/lib/components/button/BaseButton.js

@@ -0,0 +1,65 @@
+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;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import classNames from "classnames";
+import { getTrackingProps } from "../../utils/getTrackingProps";
+import { useVuiContext } from "../context/Context";
+import { VuiSpinner } from "../spinner/Spinner";
+const alignToClassMap = {
+    left: "vuiBaseButton--alignLeft",
+    center: "vuiBaseButton--alignCenter",
+    right: "vuiBaseButton--alignRight"
+};
+const sizeToSpinnerSizeMap = {
+    xs: "xs",
+    s: "xs",
+    m: "s",
+    l: "m"
+};
+export const BaseButton = forwardRef((_a, ref) => {
+    var { children, icon, iconSide = "left", align = "center", className, size = "m", fullWidth, onClick, tabIndex, isInert, isDisabled, href, target, track, htmlFor, isSubmit, isLoading, spinnerColor } = _a, rest = __rest(_a, ["children", "icon", "iconSide", "align", "className", "size", "fullWidth", "onClick", "tabIndex", "isInert", "isDisabled", "href", "target", "track", "htmlFor", "isSubmit", "isLoading", "spinnerColor"]);
+    const { createLink } = useVuiContext();
+    const classes = classNames("vuiBaseButton", className, `vuiBaseButton--${size}`, alignToClassMap[align], {
+        "vuiBaseButton-isInert": isInert,
+        "vuiBaseButton-isDisabled": isDisabled,
+        "vuiBaseButton--fullWidth": fullWidth,
+        [`vuiBaseButton--${isLoading ? "left" : iconSide}`]: (Boolean(icon) || isLoading) && Boolean(children)
+    });
+    let iconContainer;
+    if (isLoading) {
+        iconContainer = (_jsx("span", Object.assign({ className: "vuiBaseButtonIconContainer" }, { children: _jsx(VuiSpinner, { color: spinnerColor, size: sizeToSpinnerSizeMap[size] }) })));
+    }
+    else if (icon) {
+        iconContainer = _jsx("span", Object.assign({ className: "vuiBaseButtonIconContainer" }, { children: icon }));
+    }
+    // This is useful for controlling other elements, e.g. creating an <input type="file" />
+    // for uploading files and adding a button to trigger it.
+    if (htmlFor) {
+        return (_jsxs("label", Object.assign({ htmlFor: htmlFor, className: classes, tabIndex: tabIndex }, rest, { children: [iconContainer, children] })));
+    }
+    if (href) {
+        const wrapperClasses = classNames("vuiBaseButtonLinkWrapper", {
+            "vuiBaseButtonLinkWrapper--fullWidth": fullWidth
+        });
+        return createLink(Object.assign(Object.assign({ className: wrapperClasses, href,
+            onClick, children: (
+            //* Wrap a button otherwise the flex layout breaks */}
+            _jsxs("button", Object.assign({ className: classes, tabIndex: -1, ref: ref }, { children: [iconContainer, children] }))), target,
+            tabIndex }, rest), getTrackingProps(track)));
+    }
+    const props = Object.assign({ onClick,
+        tabIndex, ["type"]: isSubmit ? "submit" : "button", disabled: isDisabled }, rest);
+    return (
+    // @ts-expect-error HTMLButtonElement conflict with HTMLAnchorElement
+    _jsxs("button", Object.assign({ className: classes }, props, { ref: ref }, { children: [iconContainer, children] })));
+});

package/lib/components/button/ButtonPrimary.d.ts

@@ -0,0 +1,8 @@
+import { BaseButtonProps } from "./BaseButton";
+import { ButtonColor } from "./types";
+export type Props = BaseButtonProps & {
+    color: ButtonColor;
+};
+export declare const VuiButtonPrimary: import("react").ForwardRefExoticComponent<BaseButtonProps & {
+    color: ButtonColor;
+} & import("react").RefAttributes<HTMLButtonElement | null>>;

package/lib/components/button/ButtonPrimary.js

@@ -0,0 +1,42 @@
+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;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import classNames from "classnames";
+import { BaseButton } from "./BaseButton";
+import { createButtonIcon } from "./createButtonIcon";
+const colorToIconColorMap = {
+    accent: "empty",
+    primary: "empty",
+    success: "empty",
+    danger: "empty",
+    warning: "empty",
+    neutral: "neutral",
+    subdued: "subdued"
+};
+const colorToSpinnerColorMap = {
+    accent: "empty",
+    primary: "empty",
+    success: "empty",
+    danger: "empty",
+    warning: "empty",
+    neutral: "dark",
+    subdued: "dark"
+};
+export const VuiButtonPrimary = forwardRef((_a, ref) => {
+    var { children, icon, color, size = "m", className, isSelected, isDisabled } = _a, rest = __rest(_a, ["children", "icon", "color", "size", "className", "isSelected", "isDisabled"]);
+    const classes = classNames(className, "vuiButtonPrimary", `vuiButtonPrimary--${color}`, {
+        "vuiButtonPrimary-isSelected": isSelected
+    });
+    const buttonIcon = createButtonIcon(icon, size, color, colorToIconColorMap);
+    return (_jsx(BaseButton, Object.assign({ ref: ref, className: classes, icon: buttonIcon, size: size, isDisabled: isDisabled, spinnerColor: colorToSpinnerColorMap[color] }, rest, { children: children })));
+});

package/lib/components/button/ButtonSecondary.d.ts

@@ -0,0 +1,10 @@
+import { BaseButtonProps } from "./BaseButton";
+import { ButtonColor } from "./types";
+export type Props = BaseButtonProps & {
+    color: ButtonColor;
+    solid?: boolean;
+};
+export declare const VuiButtonSecondary: import("react").ForwardRefExoticComponent<BaseButtonProps & {
+    color: ButtonColor;
+    solid?: boolean | undefined;
+} & import("react").RefAttributes<HTMLButtonElement | null>>;

package/lib/components/button/ButtonSecondary.js

@@ -0,0 +1,43 @@
+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;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import classNames from "classnames";
+import { BaseButton } from "./BaseButton";
+import { createButtonIcon } from "./createButtonIcon";
+const colorToIconColorMap = {
+    accent: "accent",
+    primary: "primary",
+    success: "success",
+    danger: "danger",
+    warning: "warning",
+    neutral: "neutral",
+    subdued: "subdued"
+};
+const colorToSpinnerColorMap = {
+    accent: "accent",
+    primary: "primary",
+    success: "success",
+    danger: "danger",
+    warning: "warning",
+    neutral: "dark",
+    subdued: "dark"
+};
+export const VuiButtonSecondary = forwardRef((_a, ref) => {
+    var { children, icon, color, size = "m", className, isSelected, isDisabled, solid } = _a, rest = __rest(_a, ["children", "icon", "color", "size", "className", "isSelected", "isDisabled", "solid"]);
+    const classes = classNames(className, "vuiButtonSecondary", `vuiButtonSecondary--${color}`, {
+        "vuiButtonSecondary-isSelected": isSelected,
+        "vuiButtonSecondary--solid": solid
+    });
+    const buttonIcon = createButtonIcon(icon, size, color, colorToIconColorMap);
+    return (_jsx(BaseButton, Object.assign({ ref: ref, className: classes, icon: buttonIcon, size: size, isDisabled: isDisabled, spinnerColor: colorToSpinnerColorMap[color] }, rest, { children: children })));
+});

package/lib/components/button/ButtonTertiary.d.ts

@@ -0,0 +1,10 @@
+import { BaseButtonProps } from "./BaseButton";
+import { ButtonColor } from "./types";
+export type Props = BaseButtonProps & {
+    color: ButtonColor;
+    noPadding?: boolean;
+};
+export declare const VuiButtonTertiary: import("react").ForwardRefExoticComponent<BaseButtonProps & {
+    color: ButtonColor;
+    noPadding?: boolean | undefined;
+} & import("react").RefAttributes<HTMLButtonElement | null>>;

package/lib/components/button/ButtonTertiary.js

@@ -0,0 +1,43 @@
+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;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import classNames from "classnames";
+import { BaseButton } from "./BaseButton";
+import { createButtonIcon } from "./createButtonIcon";
+const colorToIconColorMap = {
+    accent: "accent",
+    primary: "primary",
+    success: "success",
+    danger: "danger",
+    warning: "warning",
+    neutral: "neutral",
+    subdued: "subdued"
+};
+const colorToSpinnerColorMap = {
+    accent: "accent",
+    primary: "primary",
+    success: "success",
+    danger: "danger",
+    warning: "warning",
+    neutral: "dark",
+    subdued: "dark"
+};
+export const VuiButtonTertiary = forwardRef((_a, ref) => {
+    var { children, icon, color, size = "m", className, isSelected, isDisabled, noPadding } = _a, rest = __rest(_a, ["children", "icon", "color", "size", "className", "isSelected", "isDisabled", "noPadding"]);
+    const classes = classNames(className, "vuiButtonTertiary", `vuiButtonTertiary--${color}`, {
+        "vuiButtonTertiary-isSelected": isSelected,
+        "vuiButtonTertiary-noPadding": noPadding
+    });
+    const buttonIcon = createButtonIcon(icon, size, color, colorToIconColorMap);
+    return (_jsx(BaseButton, Object.assign({ ref: ref, className: classes, icon: buttonIcon, size: size, isDisabled: isDisabled, spinnerColor: colorToSpinnerColorMap[color] }, rest, { children: children })));
+});

package/lib/components/button/IconButton.d.ts

@@ -0,0 +1,16 @@
+import { ReactElement } from "react";
+import { ButtonColor, BUTTON_SIZE } from "./types";
+import { LinkProps } from "../link/types";
+type Props = {
+    className?: string;
+    icon: ReactElement;
+    color?: ButtonColor;
+    size?: (typeof BUTTON_SIZE)[number];
+    onClick?: () => void;
+    href?: LinkProps["href"];
+    target?: LinkProps["target"];
+    track?: LinkProps["track"];
+    tabIndex?: number;
+};
+export declare const VuiIconButton: import("react").ForwardRefExoticComponent<Props & import("react").RefAttributes<HTMLButtonElement | null>>;
+export {};

package/lib/components/button/IconButton.js

@@ -0,0 +1,29 @@
+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;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import classNames from "classnames";
+import { forwardRef } from "react";
+import { getTrackingProps } from "../../utils/getTrackingProps";
+import { createButtonIcon } from "./createButtonIcon";
+import { useVuiContext } from "../context/Context";
+export const VuiIconButton = forwardRef((_a, ref) => {
+    var { className, icon, color = "primary", size = "m", onClick, href, target, track, tabIndex } = _a, rest = __rest(_a, ["className", "icon", "color", "size", "onClick", "href", "target", "track", "tabIndex"]);
+    const { createLink } = useVuiContext();
+    const props = Object.assign({ className: classNames("vuiIconButton", className, `vuiIconButton--${color}`, `vuiIconButton--${size}`), onClick,
+        tabIndex }, rest);
+    const buttonIcon = createButtonIcon(icon, size, color);
+    if (href) {
+        return createLink(Object.assign(Object.assign(Object.assign({ href,
+            target }, props), getTrackingProps(track)), { children: _jsx("button", Object.assign({ ref: ref }, { children: buttonIcon })) }));
+    }
+    return (_jsx("button", Object.assign({}, props, { ref: ref }, { children: buttonIcon })));
+});

package/lib/components/button/_index.scss

@@ -0,0 +1,5 @@
+@import "./baseButton";
+@import "./buttonPrimary";
+@import "./buttonSecondary";
+@import "./buttonTertiary";
+@import "./iconButton";

package/lib/components/button/baseButton.scss

@@ -0,0 +1,94 @@
+.vuiBaseButtonIconContainer {
+  // Ensures custom icons and vertically centered.
+  line-height: 0;
+}
+
+.vuiBaseButtonLinkWrapper {
+  text-decoration: none;
+
+  &:hover {
+    text-decoration: none;
+  }
+}
+
+.vuiBaseButtonLinkWrapper--fullWidth {
+  width: 100%;
+}
+
+.vuiBaseButton {
+  white-space: nowrap;
+  border-radius: $sizeXxs;
+  display: inline-flex;
+  align-items: center;
+  font-weight: 500;
+  box-shadow: $shadowSmallStart;
+  transition: all $transitionSpeed;
+  line-height: 1;
+  cursor: pointer;
+}
+
+.vuiBaseButton--alignLeft {
+  justify-content: flex-start;
+}
+
+.vuiBaseButton--alignCenter {
+  justify-content: center;
+}
+
+.vuiBaseButton--alignRight {
+  justify-content: flex-end;
+}
+
+.vuiBaseButton-isInert,
+.vuiBaseButton-isDisabled {
+  cursor: default;
+  pointer-events: none;
+}
+
+.vuiBaseButton-isDisabled {
+  opacity: 0.5;
+}
+
+.vuiBaseButton--left {
+  .vuiBaseButtonIconContainer {
+    margin-right: $sizeXs;
+  }
+}
+
+.vuiBaseButton--right {
+  flex-direction: row-reverse;
+
+  .vuiBaseButtonIconContainer {
+    margin-left: $sizeXs;
+    margin-right: 0;
+  }
+}
+
+.vuiBaseButton--fullWidth {
+  width: 100%;
+}
+
+// Size
+.vuiBaseButton--xs {
+  font-size: $fontSizeStandard;
+  padding: $sizeXxs $sizeXs;
+  height: 24px;
+}
+
+.vuiBaseButton--s {
+  font-size: $fontSizeStandard;
+  padding: $sizeXs * 0.75 $sizeXs;
+  height: 28px;
+}
+
+.vuiBaseButton--m {
+  font-size: $fontSizeMedium;
+  padding: $sizeXs $sizeM;
+  height: 34px;
+}
+
+.vuiBaseButton--l {
+  font-size: $fontSizeMedium;
+  padding: $sizeS $sizeL;
+  height: 47px;
+}

package/lib/components/button/buttonPrimary.scss

@@ -0,0 +1,51 @@
+@use "sass:map";
+
+.vuiButtonPrimary {
+  &:hover {
+    box-shadow: $shadowSmallEnd;
+  }
+}
+
+// Color
+$color: (
+  accent: (
+    "color": #ffffff,
+    "background-color": $colorAccent
+  ),
+  primary: (
+    "color": #ffffff,
+    "background-color": $colorPrimary
+  ),
+  success: (
+    "color": #ffffff,
+    "background-color": $colorSuccess
+  ),
+  danger: (
+    "color": #ffffff,
+    "background-color": $colorDanger
+  ),
+  warning: (
+    "color": #ffffff,
+    "background-color": $colorWarning
+  ),
+  neutral: (
+    "color": $colorText,
+    "background-color": transparentize($colorText, 0.9)
+  ),
+  subdued: (
+    "color": $colorSubdued,
+    "background-color": transparentize($colorSubdued, 0.9)
+  )
+);
+
+@each $colorName, $colorValue in $color {
+  .vuiButtonPrimary--#{$colorName} {
+    color: #{map.get($colorValue, "color")};
+    background-color: #{map.get($colorValue, "background-color")};
+    border: 1px solid #{map.get($colorValue, "background-color")};
+
+    &.vuiButtonPrimary-isSelected {
+      box-shadow: inset rgba(50, 50, 93, 0.25) 0px 6px 8px -2px, inset rgba(0, 0, 0, 0.3) 0px 3px 4px -3px;
+    }
+  }
+}

package/lib/components/button/buttonSecondary.scss

@@ -0,0 +1,54 @@
+@use "sass:map";
+
+.vuiButtonSecondary {
+  &:hover {
+    box-shadow: $shadowSmallEnd;
+  }
+}
+
+.vuiButtonSecondary--solid {
+  background-color: $colorEmptyShade;
+}
+
+// Color
+$color: (
+  accent: (
+    "border-color": transparentize($colorAccent, 0.5),
+    "color": $colorAccent
+  ),
+  primary: (
+    "border-color": transparentize($colorPrimary, 0.5),
+    "color": $colorPrimary
+  ),
+  success: (
+    "border-color": transparentize($colorSuccess, 0.5),
+    "color": $colorSuccess
+  ),
+  danger: (
+    "border-color": transparentize($colorDanger, 0.5),
+    "color": $colorDanger
+  ),
+  warning: (
+    "border-color": transparentize($colorWarning, 0.5),
+    "color": $colorWarning
+  ),
+  neutral: (
+    "border-color": $borderColor,
+    "color": $colorText
+  ),
+  subdued: (
+    "border-color": $borderColorLight,
+    "color": $colorSubdued
+  )
+);
+
+@each $colorName, $colorValue in $color {
+  .vuiButtonSecondary--#{$colorName} {
+    border: 1px solid #{map.get($colorValue, "border-color")};
+    color: #{map.get($colorValue, "color")};
+
+    &.vuiButtonSecondary-isSelected {
+      box-shadow: inset rgba(0, 0, 0, 0.1) 0px 2px 2px;
+    }
+  }
+}