diff --git a/src/components/primitives/Box.tsx b/src/components/primitives/Box.tsx
index f59ca4c95..9174401a2 100644
--- a/src/components/primitives/Box.tsx
+++ b/src/components/primitives/Box.tsx
@@ -1,27 +1,3 @@
-/**
- * Box Component
- *
- * A flexible container component that serves as a fundamental building block for layouts.
- * It provides various visual styles and sizing options through variants.
- *
- * @variants
- * content:
- * - xs to xl: Content size variants
- *
- * container:
- * - true/false: Controls container behavior
- *
- * @compoundVariants
- * The component uses compound variants to determine border radius (rounded corners):
- * - When container=true: Uses both size and content values (rounded-${size}+${content})
- * - When container=false: Uses only size value (rounded-${size})
- *
- * @example
- *
- * Content goes here
- *
- */
-
import { tv } from "tailwind-variants";
import useThemedVariables from "../../hooks/theming/useThemedVariables";
import { mergeClass } from "../../utils/css";
@@ -83,6 +59,30 @@ export const boxStyles = tv({
export type BoxProps = Component & Themable>;
+/**
+ * Box Component
+ *
+ * A flexible container component that serves as a fundamental building block for layouts.
+ * It provides various visual styles and sizing options through variants.
+ *
+ * @variants
+ * content:
+ * - xs to xl: Content size variants
+ *
+ * container:
+ * - true/false: Controls container behavior
+ *
+ * @compoundVariants
+ * The component uses compound variants to determine border radius (rounded corners):
+ * - When container=true: Uses both size and content values (rounded-${size}+${content})
+ * - When container=false: Uses only size value (rounded-${size})
+ *
+ * @example
+ *
+ * Content goes here
+ *
+ */
+
export default function Box({
look,
size,
diff --git a/src/components/primitives/Button.tsx b/src/components/primitives/Button.tsx
index 3bb7dd9af..c6d05fc48 100644
--- a/src/components/primitives/Button.tsx
+++ b/src/components/primitives/Button.tsx
@@ -14,7 +14,7 @@ export const buttonStyles = tv(
base: "text-main-12 border-1 border-main-11 active:border-main-10",
bold: "text-main-1 bg-main-11 active:bg-main-10",
tint: "text-main-1 bg-accent-10 active:bg-accent-9",
- hype: "text-main-12 bg-accent-9 active:bg-accent-10",
+ hype: "text-main-1 bg-accent-11 active:bg-accent-10",
},
size: {
xs: "px-sm py-xs gap-sm text-xs",
diff --git a/src/components/primitives/PrimitiveTag.tsx b/src/components/primitives/PrimitiveTag.tsx
index c7b97c53c..cc7f70510 100644
--- a/src/components/primitives/PrimitiveTag.tsx
+++ b/src/components/primitives/PrimitiveTag.tsx
@@ -4,7 +4,7 @@ import { mergeClass } from "../../utils/css";
import type { Component, Themable } from "../../utils/types";
export const primitiveTagStyles = tv({
- base: "flex items-center dim select-none !leading-none rounded-full text-nowrap ease focus-visible:outline focus-visible:outline-dashed focus-visible:outline-main-12 font-text font-bold text-[clamp(15px,0.4167vw+0.78125rem,20px)]",
+ base: "flex items-center select-none !leading-none rounded-full text-nowrap ease focus-visible:outline focus-visible:outline-dashed focus-visible:outline-main-12 font-text font-bold text-[clamp(15px,0.4167vw+0.78125rem,20px)]",
variants: {
look: {
soft: "text-main-12 bg-transparent border-1 border-main-9",
@@ -36,6 +36,7 @@ export type PrimitiveTagProps = Component<
className?: string;
type?: "button" | "submit" | "reset";
disabled?: boolean;
+ noClick?: boolean;
},
HTMLButtonElement
>;
@@ -48,16 +49,18 @@ export default function PrimitiveTag({
children,
external,
disabled,
+ noClick,
...props
}: PrimitiveTagProps) {
const themeVars = useThemableProps(props);
const styleProps = primitiveTagStyles({ look, size });
+ const styleLabel = noClick ? "active:text-main-12 pointer-events-none" : "dim";
return (