@brumaombra/ui-vintage 0.9.6 → 0.9.7

package/src/components/ui/input/Input.vue

@@ -1,13 +1,18 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from 'vue';
-import { useVModel } from '@vueuse/core';
+import { computed, ref, useSlots, type HTMLAttributes } from 'vue';
+import { useElementSize, useVModel } from '@vueuse/core';
 import { cn } from '../../../lib/utils';
 import { useFieldControlId } from '../field/field-context';
 
+defineOptions({
+	inheritAttrs: false
+});
+
 // Props
 const props = defineProps<{
 	defaultValue?: string | number;
 	modelValue?: string | number;
+	size?: 'default' | 'sm';
 	class?: HTMLAttributes['class'];
 }>();
 
@@ -23,14 +28,42 @@ const modelValue = useVModel(props, 'modelValue', emits, {
 
 // Let a surrounding Field label point to this control
 const fieldControlId = useFieldControlId();
+
+// Field look, shared by the plain input and the one with a suffix
+const inputClasses = computed(() => cn(
+	'uv-field w-full min-w-0 rounded border border-input bg-secondary px-4 py-3 text-xs font-semibold text-foreground shadow-elevated-sm outline-none sm:text-sm',
+	props.size === 'sm' ? 'h-10 py-2' : 'h-13',
+	'selection:bg-primary selection:text-primary-foreground placeholder:text-muted-foreground placeholder:opacity-60 placeholder:transition-opacity focus-visible:placeholder:opacity-40',
+	'file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-semibold file:text-foreground',
+	'disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-60 aria-invalid:animate-uv-shake',
+	props.class
+));
+
+// Optional prefix (like a search icon) and suffix (like a unit) inside the field: the text never runs under them
+const slots = useSlots();
+const prefixRef = ref<HTMLElement | null>(null);
+const suffixRef = ref<HTMLElement | null>(null);
+const { width: prefixWidth } = useElementSize(prefixRef);
+const { width: suffixWidth } = useElementSize(suffixRef);
+const affixPadding = computed(() => ({
+	...(slots.prefix && prefixWidth.value ? { paddingLeft: `calc(${prefixWidth.value}px + 1.5rem)` } : {}),
+	...(slots.suffix && suffixWidth.value ? { paddingRight: `calc(${suffixWidth.value}px + 1.75rem)` } : {})
+}));
 </script>
 
 <template>
-	<input :id="fieldControlId" v-model="modelValue" data-slot="input" :class="cn(
-		'uv-field h-13 w-full min-w-0 rounded border border-input bg-secondary px-4 py-3 text-xs font-semibold text-foreground shadow-elevated-sm outline-none sm:text-sm',
-		'selection:bg-primary selection:text-primary-foreground placeholder:text-muted-foreground placeholder:opacity-60 placeholder:transition-opacity focus-visible:placeholder:opacity-40',
-		'file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-semibold file:text-foreground',
-		'disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-60 aria-invalid:animate-uv-shake',
-		props.class
-	)" />
+	<div v-if="$slots.prefix || $slots.suffix" data-slot="input-group" class="relative w-full min-w-0">
+		<!-- Prefix -->
+		<span v-if="$slots.prefix" ref="prefixRef" data-slot="input-prefix" class="pointer-events-none absolute inset-y-0 left-3.5 flex items-center text-muted-foreground [&_svg:not([class*='size-'])]:size-4">
+			<slot name="prefix" />
+		</span>
+
+		<input :id="fieldControlId" v-model="modelValue" data-slot="input" v-bind="$attrs" :style="affixPadding" :class="inputClasses" />
+
+		<!-- Suffix -->
+		<span v-if="$slots.suffix" ref="suffixRef" data-slot="input-suffix" class="pointer-events-none absolute inset-y-0 right-4 flex items-center text-xs font-semibold text-muted-foreground sm:text-sm">
+			<slot name="suffix" />
+		</span>
+	</div>
+	<input v-else :id="fieldControlId" v-model="modelValue" data-slot="input" v-bind="$attrs" :class="inputClasses" />
 </template>

package/src/components/ui/kbd/Kbd.vue

@@ -2,17 +2,21 @@
 import type { HTMLAttributes } from 'vue';
 import { cn } from '../../../lib/utils';
 
-// Props
-const props = defineProps<{
+// Props (lg is a big standalone key, for example to show a shortcut in a hint)
+const props = withDefaults(defineProps<{
 	class?: HTMLAttributes['class'];
 	pressed?: boolean;
-}>();
+	size?: 'default' | 'lg';
+}>(), {
+	size: 'default'
+});
 </script>
 
 <template>
 	<kbd data-slot="kbd" :data-pressed="props.pressed ? '' : undefined" :class="cn(
-		'inline-flex h-5 min-w-5 select-none items-center justify-center gap-1 rounded-sm border border-b-2 border-border bg-surface px-1.5 font-mono text-[11px] leading-none font-semibold text-muted-foreground shadow-elevated-sm transition-[translate,border-width,box-shadow] duration-100 ease-snappy [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-3',
+		'inline-flex h-5 min-w-5 select-none items-center justify-center gap-1 rounded border border-b-2 border-border bg-surface px-1.5 font-mono text-[11px] leading-none font-semibold text-muted-foreground shadow-elevated-sm transition-[translate,border-width,box-shadow] duration-100 ease-snappy [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-3',
 		'data-pressed:translate-y-px data-pressed:border-b data-pressed:shadow-none',
+		props.size === 'lg' && 'h-10 min-w-10 px-3 text-sm',
 		props.class
 	)
 		">

package/src/components/ui/number-field/NumberField.vue

@@ -92,7 +92,7 @@ const fieldControlId = useFieldControlId(() => props.id);
 	)" @update:model-value="animateChange">
 		<!-- Decrement button -->
 		<NumberFieldDecrement data-slot="number-field-decrement" :aria-label="resolvedDecrementLabel" :class="cn(
-			'inline-flex size-10 shrink-0 cursor-pointer items-center justify-center rounded-sm text-muted-foreground outline-none',
+			'inline-flex size-10 shrink-0 cursor-pointer items-center justify-center rounded text-muted-foreground outline-none',
 			'[transition:scale_320ms_var(--ease-spring),background-color_150ms_var(--ease-snappy),color_150ms_var(--ease-snappy),opacity_150ms_var(--ease-snappy)]',
 			'hover:bg-accent hover:text-foreground active:scale-[0.84] data-pressed:scale-[0.84] focus-visible:ring-[3px] focus-visible:ring-ring/45',
 			'disabled:pointer-events-none disabled:opacity-35 data-disabled:pointer-events-none data-disabled:opacity-35'
@@ -119,7 +119,7 @@ const fieldControlId = useFieldControlId(() => props.id);
 
 		<!-- Increment button -->
 		<NumberFieldIncrement data-slot="number-field-increment" :aria-label="resolvedIncrementLabel" :class="cn(
-			'inline-flex size-10 shrink-0 cursor-pointer items-center justify-center rounded-sm text-muted-foreground outline-none',
+			'inline-flex size-10 shrink-0 cursor-pointer items-center justify-center rounded text-muted-foreground outline-none',
 			'[transition:scale_320ms_var(--ease-spring),background-color_150ms_var(--ease-snappy),color_150ms_var(--ease-snappy),opacity_150ms_var(--ease-snappy)]',
 			'hover:bg-accent hover:text-foreground active:scale-[0.84] data-pressed:scale-[0.84] focus-visible:ring-[3px] focus-visible:ring-ring/45',
 			'disabled:pointer-events-none disabled:opacity-35 data-disabled:pointer-events-none data-disabled:opacity-35'

package/src/components/ui/progress/Progress.vue

@@ -6,16 +6,28 @@ import { reactiveOmit } from '@vueuse/core';
 import { ProgressIndicator, ProgressRoot } from 'reka-ui';
 import { cn } from '../../../lib/utils';
 
+type ProgressColor = 'primary' | 'green' | 'red' | 'yellow';
+
 // Props
 const props = withDefaults(defineProps<ProgressRootProps & {
 	indeterminate?: boolean;
+	color?: ProgressColor;
 	class?: HTMLAttributes['class'];
 }>(), {
 	modelValue: 0,
-	indeterminate: false
+	indeterminate: false,
+	color: 'primary'
 });
 
-const delegatedProps = reactiveOmit(props, 'class', 'indeterminate');
+const delegatedProps = reactiveOmit(props, 'class', 'indeterminate', 'color');
+
+// Fill color of the bar
+const colorClasses: Record<ProgressColor, string> = {
+	primary: 'bg-primary',
+	green: 'bg-success',
+	red: 'bg-destructive',
+	yellow: 'bg-warning'
+};
 
 // Resolve the fill percentage against the configured max
 const percentage = computed(() => {
@@ -27,13 +39,13 @@ const percentage = computed(() => {
 
 <template>
 	<ProgressRoot data-slot="progress" v-bind="delegatedProps" :model-value="props.indeterminate ? null : props.modelValue" :class="cn(
-		'relative h-2 w-full overflow-hidden rounded-sm bg-muted',
+		'relative h-2 w-full overflow-hidden rounded bg-muted',
 		props.class
 	)">
 		<!-- Indeterminate bar -->
-		<div v-if="props.indeterminate" data-slot="progress-indicator" class="absolute inset-y-0 left-0 w-full origin-left animate-uv-indeterminate rounded-sm bg-primary" />
+		<div v-if="props.indeterminate" data-slot="progress-indicator" :class="cn('absolute inset-y-0 left-0 w-full origin-left animate-uv-indeterminate rounded', colorClasses[props.color])" />
 
 		<!-- Determinate bar -->
-		<ProgressIndicator v-else data-slot="progress-indicator" class="relative h-full w-full flex-1 overflow-hidden rounded-sm bg-primary transition-transform duration-700 ease-out-expo" :style="`transform: translateX(-${100 - percentage}%);`" />
+		<ProgressIndicator v-else data-slot="progress-indicator" :class="cn('relative h-full w-full flex-1 overflow-hidden rounded transition-transform duration-700 ease-out-expo', colorClasses[props.color])" :style="`transform: translateX(-${100 - percentage}%);`" />
 	</ProgressRoot>
 </template>

package/src/components/ui/select/SelectItem.vue

@@ -16,7 +16,7 @@ const forwardedProps = useForwardProps(delegatedProps);
 
 <template>
 	<SelectItem data-slot="select-item" v-bind="forwardedProps" :class="cn(
-		'focus:bg-accent focus:text-accent-foreground data-[state=checked]:text-foreground transition-colors duration-150 [&_svg:not([class*=\'text-\'])]:text-muted-foreground relative flex w-full cursor-pointer items-center gap-2 rounded-sm py-2.5 pr-8 pl-2 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:cursor-not-allowed data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2',
+		'focus:bg-accent focus:text-accent-foreground data-[state=checked]:text-foreground transition-colors duration-150 [&_svg:not([class*=\'text-\'])]:text-muted-foreground relative flex w-full cursor-pointer items-center gap-2 rounded py-2.5 pr-8 pl-2 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:cursor-not-allowed data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2',
 		props.class
 	)
 		">

package/src/components/ui/skeleton/Skeleton.vue

@@ -3,14 +3,18 @@ import type { HTMLAttributes } from 'vue';
 import { cn } from '../../../lib/utils';
 
 // Props
-const props = defineProps<{
+const props = withDefaults(defineProps<{
+	circle?: boolean;
 	class?: HTMLAttributes['class'];
-}>();
+}>(), {
+	circle: false
+});
 </script>
 
 <template>
 	<div data-slot="skeleton" :class="cn(
-		'relative overflow-hidden rounded border border-border bg-surface',
+		'relative overflow-hidden border border-border bg-surface',
+		props.circle ? 'rounded-full' : 'rounded',
 		'after:absolute after:inset-0 after:animate-uv-shimmer after:bg-[linear-gradient(90deg,transparent,color-mix(in_oklab,var(--foreground)_6%,transparent),transparent)]',
 		props.class
 	)" />

package/src/components/ui/switch/Switch.vue

@@ -29,7 +29,7 @@ const fieldControlId = useFieldControlId(() => props.id);
 		props.class
 	)">
 		<SwitchThumb data-slot="switch-thumb" :class="cn(
-			'pointer-events-none absolute left-1 top-1/2 flex h-4 w-4 -translate-y-1/2 items-center justify-center rounded-[0.2rem] bg-muted-foreground ring-0',
+			'pointer-events-none absolute left-1 top-1/2 flex h-4 w-4 -translate-y-1/2 items-center justify-center rounded bg-muted-foreground ring-0',
 			'[transition:translate_380ms_var(--ease-spring),width_220ms_var(--ease-spring),background-color_200ms]',
 			'group-active/switch:w-5 data-[state=checked]:translate-x-6 data-[state=checked]:bg-primary group-active/switch:data-[state=checked]:translate-x-5'
 		)">

package/src/components/ui/table/TableHeader.vue

@@ -9,7 +9,7 @@ const props = defineProps<{
 </script>
 
 <template>
-	<thead data-slot="table-header" :class="cn('[&_tr]:border-b [&_tr]:border-border', props.class)">
+	<thead data-slot="table-header" :class="cn('[&_tr]:border-b [&_tr]:border-border [&_tr]:hover:bg-transparent', props.class)">
 		<slot />
 	</thead>
 </template>

package/src/components/ui/table/TableRow.vue

@@ -2,15 +2,22 @@
 import type { HTMLAttributes } from 'vue';
 import { cn } from '../../../lib/utils';
 
-// Props
-const props = defineProps<{
+// Props (static rows don't highlight on hover, interactive rows show a pointer for clickable rows; data-state="selected" highlights a row with a soft primary tint)
+const props = withDefaults(defineProps<{
+	static?: boolean;
+	interactive?: boolean;
 	class?: HTMLAttributes['class'];
-}>();
+}>(), {
+	static: false,
+	interactive: false
+});
 </script>
 
 <template>
 	<tr data-slot="table-row" :class="cn(
-		'hover:bg-muted/50 data-[state=selected]:bg-muted border-b border-border transition-colors',
+		'data-[state=selected]:bg-primary/5 data-[state=selected]:hover:bg-primary/10 border-b border-border transition-colors',
+		!props.static && 'hover:bg-muted/50',
+		props.interactive && 'cursor-pointer',
 		props.class
 	)
 		">

package/src/components/ui/tabs/Tabs.vue

@@ -18,7 +18,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
 </script>
 
 <template>
-	<TabsRoot v-slot="slotProps" data-slot="tabs" v-bind="forwarded" :class="cn('flex flex-col gap-2', props.class)">
+	<TabsRoot v-slot="slotProps" data-slot="tabs" v-bind="forwarded" :class="cn('flex flex-col gap-2 data-[orientation=vertical]:gap-4 sm:data-[orientation=vertical]:flex-row', props.class)">
 		<slot v-bind="slotProps" />
 	</TabsRoot>
 </template>

package/src/components/ui/tabs/TabsContent.vue

@@ -5,16 +5,19 @@ import { reactiveOmit } from '@vueuse/core';
 import { TabsContent } from 'reka-ui';
 import { cn } from '../../../lib/utils';
 
-// Props
-const props = defineProps<TabsContentProps & {
+// Props (boxed frames the panel in a bordered surface)
+const props = withDefaults(defineProps<TabsContentProps & {
+	variant?: 'plain' | 'boxed';
 	class?: HTMLAttributes['class'];
-}>();
+}>(), {
+	variant: 'plain'
+});
 
-const delegatedProps = reactiveOmit(props, 'class');
+const delegatedProps = reactiveOmit(props, 'class', 'variant');
 </script>
 
 <template>
-	<TabsContent data-slot="tabs-content" :class="cn('flex-1 outline-none data-[state=active]:animate-uv-fade-up', props.class)" v-bind="delegatedProps">
+	<TabsContent data-slot="tabs-content" :class="cn('flex-1 outline-none data-[state=active]:animate-uv-fade-up', props.variant === 'boxed' && 'rounded border border-border bg-surface/50 p-4', props.class)" v-bind="delegatedProps">
 		<slot />
 	</TabsContent>
 </template>

package/src/components/ui/tabs/TabsTrigger.vue

@@ -18,7 +18,7 @@ const forwardedProps = useForwardProps(delegatedProps);
 	<TabsTrigger data-slot="tabs-trigger" :class="cn(
 		'relative inline-flex min-h-9 flex-1 cursor-pointer items-center justify-center gap-1.5 rounded border border-transparent bg-transparent px-4 py-2 text-sm font-semibold whitespace-nowrap text-muted-foreground outline-none select-none',
 		'[transition:color_150ms,background-color_150ms,scale_300ms_var(--ease-spring)] hover:text-foreground active:scale-[0.97] focus-visible:ring-[3px] focus-visible:ring-ring/45 disabled:pointer-events-none disabled:opacity-50',
-		'data-[state=active]:text-primary data-[state=inactive]:hover:bg-accent/60',
+		'data-[state=active]:text-primary data-[state=inactive]:hover:bg-accent/60 group-aria-[orientation=vertical]/tabs-list:justify-start',
 		'[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4',
 		props.class
 	)" v-bind="forwardedProps">

package/src/components/ui/tags-input/TagsInputItemDelete.vue

@@ -18,7 +18,7 @@ const forwardedProps = useForwardProps(delegatedProps);
 
 <template>
 	<TagsInputItemDelete data-slot="tags-input-item-delete" v-bind="forwardedProps" :class="cn(
-		'inline-flex size-5 shrink-0 cursor-pointer items-center justify-center rounded-sm text-muted-foreground outline-none',
+		'inline-flex size-5 shrink-0 cursor-pointer items-center justify-center rounded text-muted-foreground outline-none',
 		'[transition:rotate_320ms_var(--ease-spring),scale_320ms_var(--ease-spring),background-color_150ms_var(--ease-snappy),color_150ms_var(--ease-snappy)]',
 		'hover:rotate-90 hover:bg-accent hover:text-foreground active:scale-[0.8] focus-visible:ring-[3px] focus-visible:ring-ring/45',
 		'group-data-[state=active]/tag:text-primary data-disabled:pointer-events-none',

package/src/components/ui/textarea/Textarea.vue

@@ -27,7 +27,7 @@ const fieldControlId = useFieldControlId();
 
 <template>
 	<textarea :id="fieldControlId" v-model="modelValue" data-slot="textarea" :class="cn(
-		'uv-field flex field-sizing-content min-h-30 w-full min-w-0 rounded border border-input bg-secondary px-4 py-3 text-xs font-semibold text-foreground shadow-elevated-sm outline-none sm:text-sm',
+		'uv-field flex field-sizing-content min-h-30 w-full min-w-0 resize-none rounded border border-input bg-secondary px-4 py-3 text-xs font-semibold text-foreground shadow-elevated-sm outline-none sm:text-sm',
 		'selection:bg-primary selection:text-primary-foreground placeholder:text-muted-foreground placeholder:opacity-60',
 		'disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-60 aria-invalid:animate-uv-shake',
 		props.class

package/src/components/ui/toggle-group/ToggleGroup.vue

@@ -34,7 +34,7 @@ const isSingle = computed(() => {
 });
 
 // Share size and indicator mode with the items
-provide(toggleGroupContextKey, { size: toRef(props, 'size'), indicator: isSingle });
+provide(toggleGroupContextKey, { size: toRef(props, 'size'), indicator: isSingle, highlight: toRef(props, 'highlight') });
 
 // Sliding indicator geometry
 const rootRef = ref();
@@ -83,7 +83,7 @@ const indicatorStyle = computed<CSSProperties>(() => ({
 	<ToggleGroupRoot ref="rootRef" v-slot="slotProps" data-slot="toggle-group" :data-size="props.size" v-bind="forwarded" :class="cn('relative inline-flex w-fit items-center gap-1 rounded border border-border bg-card p-1 shadow-elevated-sm data-[orientation=vertical]:flex-col data-[orientation=vertical]:items-stretch', props.class)">
 		<!-- Sliding indicator behind the active item -->
 		<span v-if="isSingle" data-slot="toggle-group-indicator" aria-hidden="true" :style="indicatorStyle" :class="cn(
-			'pointer-events-none absolute top-0 left-0 z-0 rounded-sm border',
+			'pointer-events-none absolute top-0 left-0 z-0 rounded border', // Same radius as the tab triggers, so every switch looks alike
 			animated && '[transition:transform_380ms_var(--ease-spring),width_380ms_var(--ease-spring),height_380ms_var(--ease-spring),opacity_180ms_var(--ease-snappy)]',
 			props.highlight ? 'border-primary/40 bg-primary/10' : 'border-border-strong bg-surface shadow-elevated-sm'
 		)" />

package/src/components/ui/toggle-group/ToggleGroupItem.vue

@@ -17,16 +17,18 @@ const props = defineProps<ToggleGroupItemProps & {
 const delegatedProps = reactiveOmit(props, 'class', 'size');
 const forwardedProps = useForwardProps(delegatedProps);
 
-// Size and indicator mode come from the group
+// Size, indicator mode and highlight come from the group
 const context = inject(toggleGroupContextKey, null);
 const size = computed(() => props.size ?? context?.size.value ?? 'default');
 const hasIndicator = computed(() => context?.indicator.value ?? false);
+const isHighlighted = computed(() => context?.highlight.value ?? false);
 </script>
 
 <template>
 	<ToggleGroupItem v-slot="slotProps" data-slot="toggle-group-item" :data-size="size" v-bind="forwardedProps" :class="cn(
 		toggleGroupItemVariants({ size }),
 		!hasIndicator && 'hover:bg-accent data-[state=on]:bg-accent',
+		isHighlighted && 'data-[state=on]:text-primary', // The highlighted group tints the active item like the active tab
 		props.class
 	)">
 		<slot v-bind="slotProps" />

package/src/components/ui/toggle-group/index.ts

@@ -45,7 +45,7 @@ export const toggleVariants: (props?: ToggleVariants & ClassProp) => string = cv
 // Segmented control item (sits above the sliding indicator)
 export const toggleGroupItemVariants: (props?: { size?: ToggleGroupSize | null } & ClassProp) => string = cva(
 	[
-		"relative z-10 inline-flex shrink-0 cursor-pointer select-none items-center justify-center gap-1.5 whitespace-nowrap rounded-sm text-xs font-semibold text-muted-foreground outline-none sm:text-sm",
+		"relative z-10 inline-flex shrink-0 cursor-pointer select-none items-center justify-center gap-1.5 whitespace-nowrap rounded text-xs font-semibold text-muted-foreground outline-none sm:text-sm",
 		"[transition:color_150ms,background-color_150ms,box-shadow_220ms,opacity_150ms,transform_380ms_var(--ease-spring)]",
 		"hover:text-foreground data-[state=on]:text-foreground active:scale-[0.96] active:duration-75 disabled:pointer-events-none disabled:opacity-50",
 		"focus-visible:ring-[3px] focus-visible:ring-ring/45",
@@ -66,4 +66,4 @@ export const toggleGroupItemVariants: (props?: { size?: ToggleGroupSize | null }
 );
 
 // Context shared by a toggle group with its items
-export const toggleGroupContextKey: InjectionKey<{ size: Ref<ToggleGroupSize>; indicator: Ref<boolean> }> = Symbol('uv-toggle-group');
+export const toggleGroupContextKey: InjectionKey<{ size: Ref<ToggleGroupSize>; indicator: Ref<boolean>; highlight: Ref<boolean> }> = Symbol('uv-toggle-group');

package/src/i18n/de.json

@@ -79,6 +79,7 @@
 			"readMore": "Weiterlesen",
 			"goToPost": "Zum Beitrag",
 			"new": "Neu",
+			"inShort": "Kurz gesagt",
 			"tableOfContents": "Inhaltsverzeichnis",
 			"tableOfContentsDescription": "Zu einem Abschnitt dieses Artikels springen",
 			"tableOfContentsSections": "{count} Abschnitt | {count} Abschnitte",

package/src/i18n/en.json

@@ -79,6 +79,7 @@
 			"readMore": "Read more",
 			"goToPost": "Go to post",
 			"new": "New",
+			"inShort": "In short",
 			"tableOfContents": "Table of contents",
 			"tableOfContentsDescription": "Jump to a section of this article",
 			"tableOfContentsSections": "{count} section | {count} sections",

package/src/i18n/es.json

@@ -79,6 +79,7 @@
 			"readMore": "Leer mas",
 			"goToPost": "Ir al articulo",
 			"new": "Nuevo",
+			"inShort": "En resumen",
 			"tableOfContents": "Tabla de contenidos",
 			"tableOfContentsDescription": "Ir a una seccion de este articulo",
 			"tableOfContentsSections": "{count} seccion | {count} secciones",

package/src/i18n/fr.json

@@ -79,6 +79,7 @@
 			"readMore": "Lire la suite",
 			"goToPost": "Aller a l'article",
 			"new": "Nouveau",
+			"inShort": "En bref",
 			"tableOfContents": "Table des matieres",
 			"tableOfContentsDescription": "Aller a une section de cet article",
 			"tableOfContentsSections": "{count} section | {count} sections",

package/src/i18n/it.json

@@ -79,6 +79,7 @@
 			"readMore": "Leggi di piu",
 			"goToPost": "Vai all'articolo",
 			"new": "Novità",
+			"inShort": "In breve",
 			"tableOfContents": "Indice dei contenuti",
 			"tableOfContentsDescription": "Vai a una sezione dell'articolo",
 			"tableOfContentsSections": "{count} sezione | {count} sezioni",

package/src/i18n/ja.json

@@ -79,6 +79,7 @@
 			"readMore": "続きを読む",
 			"goToPost": "記事を開く",
 			"new": "新着",
+			"inShort": "要点",
 			"tableOfContents": "目次",
 			"tableOfContentsDescription": "この記事のセクションに移動",
 			"tableOfContentsSections": "{count} セクション",

package/src/i18n/pt.json

@@ -79,6 +79,7 @@
 			"readMore": "Ler mais",
 			"goToPost": "Ir para o artigo",
 			"new": "Novo",
+			"inShort": "Em resumo",
 			"tableOfContents": "Indice",
 			"tableOfContentsDescription": "Ir para uma secao deste artigo",
 			"tableOfContentsSections": "{count} secao | {count} secoes",

package/src/i18n/ru.json

@@ -79,6 +79,7 @@
 			"readMore": "Читать далее",
 			"goToPost": "Перейти к статье",
 			"new": "Новое",
+			"inShort": "Коротко",
 			"tableOfContents": "Содержание",
 			"tableOfContentsDescription": "Перейти к разделу статьи",
 			"tableOfContentsSections": "Разделов: {count}",

package/src/i18n/zh.json

@@ -79,6 +79,7 @@
 			"readMore": "阅读更多",
 			"goToPost": "前往文章",
 			"new": "最新",
+			"inShort": "简而言之",
 			"tableOfContents": "目录",
 			"tableOfContentsDescription": "跳转到本文的一个部分",
 			"tableOfContentsSections": "{count} 个章节",

package/src/lib/color-tokens.ts

@@ -37,12 +37,12 @@ export const buttonVariantClasses: Record<ButtonVariantName, string> = {
 	ghost: "text-muted-foreground hover:bg-accent hover:text-foreground",
 	link: "text-primary underline-offset-4 decoration-2 hover:underline enabled:active:scale-100",
 
-	// Tone-based button variants
-	gray: getInteractiveSurfaceToneClasses("gray"),
-	green: getInteractiveSurfaceToneClasses("green"),
-	red: getInteractiveSurfaceToneClasses("red"),
-	blue: getInteractiveSurfaceToneClasses("blue"),
-	yellow: getInteractiveSurfaceToneClasses("yellow")
+	// Tone-based button variants (the secondary shadow, so they read as buttons next to it, and a stronger tint in dark mode)
+	gray: `${getInteractiveSurfaceToneClasses("gray")} shadow-elevated-sm`,
+	green: `${getInteractiveSurfaceToneClasses("green")} shadow-elevated-sm dark:bg-green-900/25 dark:hover:bg-green-900/40`,
+	red: `${getInteractiveSurfaceToneClasses("red")} shadow-elevated-sm dark:bg-red-900/25 dark:hover:bg-red-900/40`,
+	blue: `${getInteractiveSurfaceToneClasses("blue")} shadow-elevated-sm dark:bg-blue-900/25 dark:hover:bg-blue-900/40`,
+	yellow: `${getInteractiveSurfaceToneClasses("yellow")} shadow-elevated-sm dark:bg-yellow-900/25 dark:hover:bg-yellow-900/40`
 }
 
 // Get the appropriate classes for a given button variant

package/src/styles.css

@@ -57,9 +57,11 @@ html {
 	--uv-shadow-xl: 0 4px 8px rgb(16 24 40 / 0.04), 0 24px 64px -12px rgb(16 24 40 / 0.28);
 	--uv-shadow-glow: 0 0 0 1px color-mix(in oklab, var(--primary) 40%, transparent), 0 8px 24px -6px color-mix(in oklab, var(--primary) 45%, transparent);
 
+	/* The one corner radius of every component (cards, buttons, fields, badges...): change it here to restyle them all */
+	--uv-radius: 0.25rem;
+
 	/*********************** Shadcn UI variables ***********************/
 
-	--radius: 0.625rem;
 	--background: var(--bg-main-light);
 	--foreground: var(--text-primary-light);
 	--card: var(--bg-card-light);
@@ -77,7 +79,8 @@ html {
 	--accent: var(--bg-selected-light);
 	--accent-foreground: var(--text-primary-light);
 	--destructive: oklch(0.577 0.245 27.325);
-	--success: oklch(0.627 0.17 149.2);
+	/* 5.8:1 on white and 5:1 on its own tint, so small success text meets WCAG AA (green-600 is only 3.3:1) */
+	--success: oklch(0.49 0.15 150.07);
 	--warning: oklch(0.705 0.17 62.5);
 	--info: oklch(0.588 0.19 256.8);
 	--border: var(--border-light);
@@ -100,10 +103,12 @@ html {
 }
 
 @theme inline {
-	--radius-sm: calc(var(--radius) - 4px);
-	--radius-md: calc(var(--radius) - 2px);
-	--radius-lg: var(--radius);
-	--radius-xl: calc(var(--radius) + 4px);
+	/* Every radius step resolves to the shared corner radius, so rounded, rounded-sm... rounded-xl all match (rounded-full stays a circle) */
+	--radius: var(--uv-radius);
+	--radius-sm: var(--uv-radius);
+	--radius-md: var(--uv-radius);
+	--radius-lg: var(--uv-radius);
+	--radius-xl: var(--uv-radius);
 	--color-background: var(--background);
 	--color-foreground: var(--foreground);
 	--color-card: var(--card);