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 (