diff --git a/packages/ui/src/v2/components/button-v2.css b/packages/ui/src/v2/components/button-v2.css index 97f38e6b8b..531efe9f81 100644 --- a/packages/ui/src/v2/components/button-v2.css +++ b/packages/ui/src/v2/components/button-v2.css @@ -113,6 +113,29 @@ cursor: not-allowed; } +[data-component="button-v2"][data-variant="warning"] { + background-color: var(--v2-background-bg-button-neutral); + color: var(--v2-state-fg-warning); + box-shadow: var(--v2-elevation-button-neutral); +} + +[data-component="button-v2"][data-variant="warning"]:is(:hover, [data-state="hover"]):not(:disabled) { + background-image: + linear-gradient(90deg, var(--v2-overlay-simple-overlay-hover) 0%, var(--v2-overlay-simple-overlay-hover) 100%), + linear-gradient(90deg, var(--v2-background-bg-button-neutral) 0%, var(--v2-background-bg-button-neutral) 100%); +} + +[data-component="button-v2"][data-variant="warning"]:is(:active, [data-state="pressed"]):not(:disabled) { + background-image: + linear-gradient(90deg, var(--v2-overlay-simple-overlay-pressed) 0%, var(--v2-overlay-simple-overlay-pressed) 100%), + linear-gradient(90deg, var(--v2-background-bg-button-neutral) 0%, var(--v2-background-bg-button-neutral) 100%); +} + +[data-component="button-v2"][data-variant="warning"]:is(:disabled, [data-state="disabled"]) { + opacity: 0.5; + cursor: not-allowed; +} + /* Outline */ [data-component="button-v2"][data-variant="outline"] { background-color: transparent; diff --git a/packages/ui/src/v2/components/button-v2.stories.tsx b/packages/ui/src/v2/components/button-v2.stories.tsx index bc9b9f05f0..fbb38cc5a2 100644 --- a/packages/ui/src/v2/components/button-v2.stories.tsx +++ b/packages/ui/src/v2/components/button-v2.stories.tsx @@ -4,7 +4,7 @@ const docs = `### Overview Button v2 with visual variants and three sizes. ### API -- \`variant\`: "neutral" | "danger" | "contrast" | "ghost" | "ghost-muted" | "loading". +- \`variant\`: "neutral" | "danger" | "warning" | "contrast" | "ghost" | "ghost-muted" | "loading". - \`size\`: "small" | "normal" | "large". - \`icon\`: Optional icon name. - Inherits Kobalte Button props and native button attributes. @@ -39,7 +39,7 @@ export default { }, variant: { control: "select", - options: ["neutral", "danger", "contrast", "ghost", "ghost-muted", "loading"], + options: ["neutral", "danger", "warning", "contrast", "ghost", "ghost-muted", "loading"], }, size: { control: "select", @@ -62,6 +62,7 @@ export const Variants = { > Neutral Danger + Warning Contrast Ghost @@ -117,7 +118,7 @@ export const Icon = { export const AllStates = { render: () => { - const variants = ["neutral", "danger", "contrast", "ghost", "ghost-muted", "loading"] as const + const variants = ["neutral", "danger", "warning", "contrast", "ghost", "ghost-muted", "loading"] as const const states = ["default", "hover", "pressed", "focus", "disabled"] as const const toTitleCase = (value: string) => value.charAt(0).toUpperCase() + value.slice(1) return ( diff --git a/packages/ui/src/v2/components/button-v2.tsx b/packages/ui/src/v2/components/button-v2.tsx index c6c6099e21..14b793ba11 100644 --- a/packages/ui/src/v2/components/button-v2.tsx +++ b/packages/ui/src/v2/components/button-v2.tsx @@ -7,7 +7,7 @@ export interface ButtonV2Props extends ComponentProps, Pick, "class" | "classList" | "children"> { size?: "small" | "normal" | "large" - variant?: "neutral" | "danger" | "outline" | "contrast" | "ghost" | "ghost-muted" | "loading" + variant?: "neutral" | "danger" | "warning" | "outline" | "contrast" | "ghost" | "ghost-muted" | "loading" icon?: IconProps["name"] } diff --git a/packages/ui/src/v2/components/divider-v2.css b/packages/ui/src/v2/components/divider-v2.css index 94c89bbed2..94a584b40e 100644 --- a/packages/ui/src/v2/components/divider-v2.css +++ b/packages/ui/src/v2/components/divider-v2.css @@ -1,8 +1,8 @@ [data-component="divider-v2"] { box-sizing: border-box; width: 100%; - height: 0.5px; - margin-block: 0.25px; + height: 1px; + transform: scaleY(0.5); border: none; background: var(--v2-border-border-strong); flex: none; diff --git a/packages/ui/src/v2/components/inline-input-v2.css b/packages/ui/src/v2/components/inline-input-v2.css index 81d3fe508e..c2f13e605d 100644 --- a/packages/ui/src/v2/components/inline-input-v2.css +++ b/packages/ui/src/v2/components/inline-input-v2.css @@ -67,9 +67,14 @@ gap: 4px; background: var(--v2-background-bg-layer-01); border-radius: 4px 0 0 4px; + cursor: default; transition: background 85ms ease-out; } +[data-component="inline-input-v2"]:where([data-disabled]) [data-slot="inline-input-v2-prefix"] { + cursor: not-allowed; +} + [data-component="inline-input-v2"][data-label-width] [data-slot="inline-input-v2-prefix"] { width: var(--inline-input-v2-label-width); min-width: var(--inline-input-v2-label-width); @@ -89,6 +94,7 @@ letter-spacing: -0.04px; color: var(--v2-text-text-muted); font-variation-settings: "slnt" 0; + user-select: none; } [data-component="inline-input-v2"][data-numeric] [data-slot="inline-input-v2-prefix-text"] { @@ -149,6 +155,7 @@ [data-component="inline-input-v2"] [data-slot="inline-input-v2-input"]::placeholder { color: var(--v2-text-text-faint); + user-select: none; } [data-component="inline-input-v2"][data-numeric] [data-slot="inline-input-v2-input"] { diff --git a/packages/ui/src/v2/components/inline-input-v2.tsx b/packages/ui/src/v2/components/inline-input-v2.tsx index cce1af2693..9d41437c22 100644 --- a/packages/ui/src/v2/components/inline-input-v2.tsx +++ b/packages/ui/src/v2/components/inline-input-v2.tsx @@ -37,6 +37,8 @@ export function InlineInputV2(props: InlineInputV2Props) { "style", ]) + let input: HTMLInputElement | undefined + return (
-
+
{ + if (local.disabled || event.button !== 0) return + // Keep focus on the input without using a native