@umbra.ui/core 0.1.18 → 0.1.20

package/dist/components/controls/Button/Button.vue

@@ -0,0 +1,417 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import { RippleAnimOutlineIcon } from "@umbra.ui/icons";
+import type { TooltipConfig } from "../../indicators/Tooltip/types";
+import "./theme.css";
+
+export interface Props {
+  buttonType?: "default" | "outline" | "capsule" | "capline" | "plain";
+  buttonStyle?:
+    | "primary"
+    | "secondary"
+    | "tertiary"
+    | "quaternary"
+    | "warning"
+    | "danger"
+    | "info"
+    | "success";
+  buttonSize?: "compact" | "regular" | "large";
+  state?: "normal" | "active" | "disabled";
+  title?: string;
+  tooltip?: string | TooltipConfig;
+}
+
+const emit = defineEmits(["update:state", "click"]);
+
+const props = withDefaults(defineProps<Props>(), {
+  buttonType: "default",
+  buttonStyle: "primary",
+  buttonSize: "regular",
+  state: "normal",
+  title: "Button Title",
+});
+
+const handleClick = (event: MouseEvent) => {
+  emit("click", event);
+};
+
+const buttonColor = computed(() => {
+  switch (props.buttonStyle) {
+    case "primary":
+      return "var(--button-primary-bg)";
+    case "secondary":
+      return "var(--button-secondary-bg)";
+    case "tertiary":
+      return "var(--button-tertiary-bg)";
+    case "quaternary":
+      return "var(--button-quaternary-bg)";
+    case "warning":
+      return "var(--button-warning-bg)";
+    case "danger":
+      return "var(--button-danger-bg)";
+    case "info":
+      return "var(--button-info-bg)";
+    case "success":
+      return "var(--button-success-bg)";
+    default:
+      return "var(--button-primary-bg)";
+  }
+});
+
+const buttonHoverColor = computed(() => {
+  switch (props.buttonStyle) {
+    case "primary":
+      return "var(--button-primary-hover-bg)";
+    case "secondary":
+      return "var(--button-secondary-hover-bg)";
+    case "tertiary":
+      return "var(--button-tertiary-hover-bg)";
+    case "quaternary":
+      return "var(--button-quaternary-hover-bg)";
+    case "warning":
+      return "var(--button-warning-hover-bg)";
+    case "danger":
+      return "var(--button-danger-hover-bg)";
+    case "info":
+      return "var(--button-info-hover-bg)";
+    case "success":
+      return "var(--button-success-hover-bg)";
+    default:
+      return "var(--button-primary-hover-bg)";
+  }
+});
+
+const buttonColorWithOpacity = computed(() => {
+  return `color-mix(in srgb, var(--button-color) 20%, transparent)`;
+});
+</script>
+
+<template>
+  <div
+    v-tooltip="tooltip"
+    @click="handleClick"
+    :class="[
+      $style.container,
+      $style[buttonType!],
+      $style[buttonStyle!],
+      $style[buttonSize!],
+      $style[state!],
+    ]"
+    :style="{
+      '--button-color': buttonColor,
+      '--button-hover-color': buttonHoverColor,
+      '--button-color-opacity': buttonColorWithOpacity,
+    }"
+  >
+    <div :class="$style.animated" v-if="state === 'active'">
+      <RippleAnimOutlineIcon size="20" />
+    </div>
+    <p>{{ title }}</p>
+  </div>
+</template>
+
+<style module>
+.container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.529rem;
+  font-weight: 700;
+  cursor: pointer;
+  user-select: none;
+  transition: 0.3s ease-in-out color, 0.3s ease-in-out background-color,
+    0.3s ease-in-out transform;
+  box-shadow: 0px 1px 0px 0px var(--button-shadow-dark),
+    inset 0px 1px 0px 0px var(--button-shadow-light);
+  transform: scale(1);
+  will-change: transform;
+  /* width: fit-content; */
+}
+.container:hover {
+  transform: scale(1.02);
+}
+.container:active {
+  transform: scale(1);
+}
+
+/* Style variants */
+.default {
+  border-radius: 0.353rem;
+  background-color: var(--button-color);
+}
+
+.default.primary {
+  color: var(--button-primary-text);
+}
+.default.secondary {
+  color: var(--button-secondary-text);
+}
+.default.tertiary {
+  color: var(--button-tertiary-text);
+}
+.default.quaternary {
+  color: var(--button-quaternary-text);
+}
+
+.default.warning {
+  color: var(--button-warning-text);
+}
+
+.default.danger {
+  color: var(--button-danger-text);
+}
+
+.default.info {
+  color: var(--button-info-text);
+}
+
+.default.success {
+  color: var(--button-success-text);
+}
+
+.default:hover {
+  background-color: var(--button-hover-color);
+}
+
+.outline {
+  border-radius: 0.353rem;
+  background-color: transparent;
+  border: 1px solid var(--button-color);
+  color: var(--button-color);
+}
+.outline:hover {
+  border-color: var(--button-hover-color);
+  color: var(--button-hover-color);
+}
+.outline.primary {
+  color: var(--button-outline-primary-color);
+  border-color: var(--button-outline-primary-color);
+}
+.outline.secondary {
+  border-color: var(--button-outline-secondary-color);
+  color: var(--button-outline-secondary-color);
+}
+.outline.tertiary {
+  border-color: var(--button-outline-tertiary-color);
+  color: var(--button-outline-tertiary-color);
+}
+.outline.quaternary {
+  border-color: var(--button-outline-quaternary-color);
+  color: var(--button-outline-quaternary-color);
+}
+
+.outline.warning {
+  border-color: var(--button-outline-warning-color);
+  color: var(--button-outline-warning-color);
+}
+
+.outline.danger {
+  border-color: var(--button-outline-danger-color);
+  color: var(--button-outline-danger-color);
+}
+
+.outline.info {
+  border-color: var(--button-outline-info-color);
+  color: var(--button-outline-info-color);
+}
+
+.outline.success {
+  border-color: var(--button-outline-success-color);
+  color: var(--button-outline-success-color);
+}
+
+.capsule {
+  border-radius: 999px;
+  background-color: var(--button-color);
+}
+.capsule:hover {
+  background-color: var(--button-hover-color);
+}
+
+/* Add text colors for capsule buttons */
+.capsule.primary {
+  color: var(--button-primary-text);
+}
+.capsule.secondary {
+  color: var(--button-secondary-text);
+}
+.capsule.tertiary {
+  color: var(--button-tertiary-text);
+}
+.capsule.quaternary {
+  color: var(--button-quaternary-text);
+}
+
+.capsule.warning {
+  color: var(--button-warning-text);
+}
+
+.capsule.danger {
+  color: var(--button-danger-text);
+}
+
+.capsule.info {
+  color: var(--button-info-text);
+}
+
+.capsule.success {
+  color: var(--button-success-text);
+}
+
+.capline {
+  border-radius: 999px;
+  background-color: transparent;
+  border: 1px solid var(--button-color);
+  color: var(--button-color);
+}
+.capline.primary {
+  border-color: var(--button-capline-primary-color);
+  color: var(--button-capline-primary-color);
+}
+.capline.secondary {
+  border-color: var(--button-capline-secondary-color);
+  color: var(--button-capline-secondary-color);
+}
+.capline.tertiary {
+  border-color: var(--button-capline-tertiary-color);
+  color: var(--button-capline-tertiary-color);
+}
+.capline.quaternary {
+  border-color: var(--button-capline-quaternary-color);
+  color: var(--button-capline-quaternary-color);
+}
+
+.capline.warning {
+  border-color: var(--button-capline-warning-color);
+  color: var(--button-capline-warning-color);
+}
+
+.capline.danger {
+  border-color: var(--button-capline-danger-color);
+  color: var(--button-capline-danger-color);
+}
+
+.capline.info {
+  border-color: var(--button-capline-info-color);
+  color: var(--button-capline-info-color);
+}
+
+.capline.success {
+  border-color: var(--button-capline-success-color);
+  color: var(--button-capline-success-color);
+}
+
+.plain {
+  border-radius: 0;
+  background-color: transparent;
+  border: none;
+  box-shadow: none;
+  color: var(--button-color);
+  padding: 0;
+}
+.plain.primary {
+  color: var(--button-plain-primary-color);
+}
+.plain.secondary {
+  color: var(--button-plain-secondary-color);
+}
+.plain.tertiary {
+  color: var(--button-plain-tertiary-color);
+}
+.plain.quaternary {
+  color: var(--button-plain-quaternary-color);
+}
+
+.plain.warning {
+  color: var(--button-plain-warning-color);
+}
+
+.plain.danger {
+  color: var(--button-plain-danger-color);
+}
+
+.plain.info {
+  color: var(--button-plain-info-color);
+}
+
+.plain.success {
+  color: var(--button-plain-success-color);
+}
+
+.compact {
+  padding-top: 0.471rem;
+  padding-bottom: 0.471rem;
+  padding-left: 0.706rem;
+  padding-right: 0.706rem;
+  font-size: var(--footnote);
+}
+.regular {
+  padding: 0.529rem;
+  min-width: 9rem;
+  font-size: var(--callout);
+}
+.large {
+  padding-top: 0.706rem;
+  padding-bottom: 0.706rem;
+  padding-left: 1.176rem;
+  padding-right: 1.176rem;
+  min-width: 11rem;
+  font-size: var(--headline);
+}
+.default.large {
+  border-radius: 0.529rem;
+}
+.outline.large {
+  border-radius: 0.529rem;
+}
+
+/* State variants */
+.normal {
+  opacity: 1;
+  cursor: pointer;
+}
+.active {
+  opacity: var(--button-active-opacity);
+  cursor: pointer;
+  pointer-events: none;
+}
+.disabled {
+  opacity: var(--button-disabled-opacity);
+  cursor: not-allowed;
+  pointer-events: none;
+  filter: grayscale(100%);
+}
+
+.animated {
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  display: flex;
+  align-items: center;
+  justify-content: start;
+  pointer-events: none;
+  background-color: var(--button-color-opacity);
+  border-radius: inherit;
+  padding: 4px;
+}
+.container.large .animated {
+  padding: 8px;
+}
+.container.compact.active .animated {
+  justify-content: center;
+}
+.container.compact.active p {
+  opacity: 0.25;
+}
+.container.default.active .animated {
+  background-color: var(--button-active-overlay);
+}
+.container.capsule.active .animated {
+  background-color: var(--button-active-overlay);
+}
+.container.plain.active .animated {
+  background-color: transparent;
+}
+</style>