arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-14 12:14:41 +01:00
Code Issues Packages Projects Releases Wiki Activity

feat(module): dynamic rounded-* utilities (#3906)

Browse Source
This commit is contained in:
Benjamin Canac
2025-04-16 15:57:32 +02:00
committed by GitHub
parent 4e39cc59f8
commit f9737c8f40
109 changed files with 6247 additions and 6245 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
docs/app/components/AdsCarbon.vue
View File

@@ -23,13 +23,13 @@ onMounted(() => {
@reference "../assets/css/main.css";
.carbon :deep(#carbonads) {
@apply relative border border-(--ui-border) rounded-[calc(var(--ui-radius)*1.5)] hover:bg-(--ui-bg-elevated)/50 w-full transition-colors min-h-[220px] p-2;
@apply relative border border-(--ui-border) rounded-md hover:bg-(--ui-bg-elevated)/50 w-full transition-colors min-h-[220px] p-2;
.carbon-img {
@apply flex justify-center w-full;
& > img {
@apply !max-w-full w-full rounded-(--ui-radius);
@apply !max-w-full w-full rounded-sm;
}
}

12
docs/app/components/content/ComponentCode.vue
View File

@@ -329,14 +329,14 @@ const { data: ast } = await useAsyncData(`component-code-${name}-${hash({ props:
<template>
<div class="my-5">
<div class="relative">
<div v-if="options.length" class="flex flex-wrap items-center gap-2.5 border border-(--ui-border-muted) border-b-0 relative rounded-t-[calc(var(--ui-radius)*1.5)] px-4 py-2.5 overflow-x-auto">
<div v-if="options.length" class="flex flex-wrap items-center gap-2.5 border border-(--ui-border-muted) border-b-0 relative rounded-t-md px-4 py-2.5 overflow-x-auto">
<template v-for="option in options" :key="option.name">
<UFormField
:label="option.label"
size="sm"
class="inline-flex ring ring-(--ui-border-accented) rounded-(--ui-radius)"
class="inline-flex ring ring-(--ui-border-accented) rounded-sm"
:ui="{
wrapper: 'bg-(--ui-bg-elevated)/50 rounded-l-(--ui-radius) flex border-r border-(--ui-border-accented)',
wrapper: 'bg-(--ui-bg-elevated)/50 rounded-l-sm flex border-r border-(--ui-border-accented)',
label: 'text-(--ui-text-muted) px-2 py-1.5',
container: 'mt-0'
}"
@@ -348,7 +348,7 @@ const { data: ast } = await useAsyncData(`component-code-${name}-${hash({ props:
value-key="value"
color="neutral"
variant="soft"
class="rounded-(--ui-radius) rounded-l-none min-w-12"
class="rounded-sm rounded-l-none min-w-12"
:class="[option.name.toLowerCase().endsWith('color') && 'pl-6']"
:ui="{ itemLeadingChip: 'size-2' }"
@update:model-value="setComponentProp(option.name, $event)"
@@ -370,14 +370,14 @@ const { data: ast } = await useAsyncData(`component-code-${name}-${hash({ props:
:model-value="getComponentProp(option.name)"
color="neutral"
variant="soft"
:ui="{ base: 'rounded-(--ui-radius) rounded-l-none min-w-12' }"
:ui="{ base: 'rounded-sm rounded-l-none min-w-12' }"
@update:model-value="setComponentProp(option.name, $event)"
/>
</UFormField>
</template>
</div>
<div v-if="component" class="flex justify-center border border-b-0 border-(--ui-border-muted) relative p-4 z-[1]" :class="[!options.length && 'rounded-t-[calc(var(--ui-radius)*1.5)]', props.class, { 'overflow-hidden': props.overflowHidden }]">
<div v-if="component" class="flex justify-center border border-b-0 border-(--ui-border-muted) relative p-4 z-[1]" :class="[!options.length && 'rounded-t-md', props.class, { 'overflow-hidden': props.overflowHidden }]">
<component :is="component" v-bind="{ ...componentProps, ...componentEvents }">
<template v-for="slot in Object.keys(slots || {})" :key="slot" #[slot]>
<slot :name="slot" mdc-unwrap="p">

10
docs/app/components/content/ComponentExample.vue
View File

@@ -150,7 +150,7 @@ const urlSearchParams = computed(() => {
<template>
<div ref="el" class="my-5">
<template v-if="preview">
<div class="border border-(--ui-border-muted) relative z-[1]" :class="[{ 'border-b-0 rounded-t-[calc(var(--ui-radius)*1.5)]': props.source, 'rounded-[calc(var(--ui-radius)*1.5)]': !props.source, 'overflow-hidden': props.overflowHidden }]">
<div class="border border-(--ui-border-muted) relative z-[1]" :class="[{ 'border-b-0 rounded-t-md': props.source, 'rounded-md': !props.source, 'overflow-hidden': props.overflowHidden }]">
<div v-if="props.options?.length || !!slots.options" class="flex gap-4 p-4 border-b border-(--ui-border-muted)">
<slot name="options" />
@@ -160,9 +160,9 @@ const urlSearchParams = computed(() => {
:label="option.label"
:name="option.name"
size="sm"
class="inline-flex ring ring-(--ui-border-accented) rounded-(--ui-radius)"
class="inline-flex ring ring-(--ui-border-accented) rounded-sm"
:ui="{
wrapper: 'bg-(--ui-bg-elevated)/50 rounded-l-(--ui-radius) flex border-r border-(--ui-border-accented)',
wrapper: 'bg-(--ui-bg-elevated)/50 rounded-l-sm flex border-r border-(--ui-border-accented)',
label: 'text-(--ui-text-muted) px-2 py-1.5',
container: 'mt-0'
}"
@@ -175,7 +175,7 @@ const urlSearchParams = computed(() => {
:value-key="option.name.toLowerCase().endsWith('color') ? 'value' : undefined"
color="neutral"
variant="soft"
class="rounded-(--ui-radius) rounded-l-none min-w-12"
class="rounded-sm rounded-l-none min-w-12"
:multiple="option.multiple"
:class="[option.name.toLowerCase().endsWith('color') && 'pl-6']"
:ui="{ itemLeadingChip: 'size-2' }"
@@ -196,7 +196,7 @@ const urlSearchParams = computed(() => {
:model-value="get(optionsValues, option.name)"
color="neutral"
variant="soft"
:ui="{ base: 'rounded-(--ui-radius) rounded-l-none min-w-12' }"
:ui="{ base: 'rounded-sm rounded-l-none min-w-12' }"
@update:model-value="set(optionsValues, option.name, $event)"
/>
</UFormField>

2
docs/app/components/content/Placeholder.vue
View File

@@ -1,5 +1,5 @@
<template>
<div class="relative overflow-hidden rounded-(--ui-radius) border border-dashed border-(--ui-border-accented) opacity-75 px-4 flex items-center justify-center">
<div class="relative overflow-hidden rounded-sm border border-dashed border-(--ui-border-accented) opacity-75 px-4 flex items-center justify-center">
<svg class="absolute inset-0 h-full w-full stroke-(--ui-border-inverted)/10" fill="none">
<defs>
<pattern

6
docs/app/components/content/examples/toaster/ToasterDurationExample.vue
View File

@@ -7,9 +7,9 @@ const appConfig = useAppConfig()
<UFormField
label="toaster.duration"
size="sm"
class="inline-flex ring ring-(--ui-border-accented) rounded-(--ui-radius)"
class="inline-flex ring ring-(--ui-border-accented) rounded-sm"
:ui="{
wrapper: 'bg-(--ui-bg-elevated)/50 rounded-l-(--ui-radius) flex border-r border-(--ui-border-accented)',
wrapper: 'bg-(--ui-bg-elevated)/50 rounded-l-sm flex border-r border-(--ui-border-accented)',
label: 'text-(--ui-text-muted) px-2 py-1.5',
container: 'mt-0'
}"
@@ -18,7 +18,7 @@ const appConfig = useAppConfig()
v-model="appConfig.toaster.duration"
color="neutral"
variant="soft"
:ui="{ base: 'rounded-(--ui-radius) rounded-l-none min-w-12' }"
:ui="{ base: 'rounded-sm rounded-l-none min-w-12' }"
/>
</UFormField>
</div>

6
docs/app/components/content/examples/toaster/ToasterExpandExample.vue
View File

@@ -7,9 +7,9 @@ const appConfig = useAppConfig()
<UFormField
label="toaster.expand"
size="sm"
class="inline-flex ring ring-(--ui-border-accented) rounded-(--ui-radius)"
class="inline-flex ring ring-(--ui-border-accented) rounded-sm"
:ui="{
wrapper: 'bg-(--ui-bg-elevated)/50 rounded-l-(--ui-radius) flex border-r border-(--ui-border-accented)',
wrapper: 'bg-(--ui-bg-elevated)/50 rounded-l-sm flex border-r border-(--ui-border-accented)',
label: 'text-(--ui-text-muted) px-2 py-1.5',
container: 'mt-0'
}"
@@ -19,7 +19,7 @@ const appConfig = useAppConfig()
:items="[true, false]"
color="neutral"
variant="soft"
class="rounded-(--ui-radius) rounded-l-none min-w-12"
class="rounded-sm rounded-l-none min-w-12"
:search-input="false"
/>
</UFormField>

6
docs/app/components/content/examples/toaster/ToasterPositionExample.vue
View File

@@ -10,9 +10,9 @@ const appConfig = useAppConfig()
<UFormField
label="toaster.position"
size="sm"
class="inline-flex ring ring-(--ui-border-accented) rounded-(--ui-radius)"
class="inline-flex ring ring-(--ui-border-accented) rounded-sm"
:ui="{
wrapper: 'bg-(--ui-bg-elevated)/50 rounded-l-(--ui-radius) flex border-r border-(--ui-border-accented)',
wrapper: 'bg-(--ui-bg-elevated)/50 rounded-l-sm flex border-r border-(--ui-border-accented)',
label: 'text-(--ui-text-muted) px-2 py-1.5',
container: 'mt-0'
}"
@@ -22,7 +22,7 @@ const appConfig = useAppConfig()
:items="positions"
color="neutral"
variant="soft"
class="rounded-(--ui-radius) rounded-l-none min-w-12"
class="rounded-sm rounded-l-none min-w-12"
:search-input="false"
/>
</UFormField>

2
docs/app/components/theme-picker/ThemePickerButton.vue
View File

@@ -18,7 +18,7 @@ const slots = defineSlots<{
variant="outline"
:icon="icon"
:label="label"
class="capitalize ring-(--ui-border) rounded-[calc(var(--ui-radius))] text-[11px]"
class="capitalize ring-(--ui-border) rounded-sm text-[11px]"
:class="[selected ? 'bg-(--ui-bg-elevated)' : 'hover:bg-(--ui-bg-elevated)/50']"
>
<template v-if="chip || !!slots.leading" #leading>

2
docs/app/pages/.index.yml
View File

@@ -101,7 +101,7 @@ design_system:
@import "@nuxt/ui";
:root {
--ui-radius: var(--radius-sm);
--ui-radius: 0.25rem;
--ui-container: 90rem;
--ui-bg: var(--ui-color-neutral-50);
--ui-text: var(--ui-color-neutral-900);

4
docs/app/pages/components.vue
View File

@@ -130,7 +130,7 @@ onMounted(() => {
<UContainer>
<h2 class="relative text-pretty font-bold text-(--ui-text-highlighted) text-base sm:not-group-[[data-stuck]]:text-xl lg:not-group-[[data-stuck]]:text-2xl transition-all duration-300 ">
<a :href="`#${category.id}`" class="group lg:not-group-[[data-stuck]]:ps-2 lg:not-group-[[data-stuck]]:-ms-2">
<span class="absolute -ms-8 top-1 opacity-0 group-hover:opacity-100 group-focus:opacity-100 p-1 bg-(--ui-bg-elevated) hover:text-(--ui-primary) rounded-[calc(var(--ui-radius)*1.5)] hidden lg:not-group-[[data-stuck]]:flex text-(--ui-text-muted) transition">
<span class="absolute -ms-8 top-1 opacity-0 group-hover:opacity-100 group-focus:opacity-100 p-1 bg-(--ui-bg-elevated) hover:text-(--ui-primary) rounded-md hidden lg:not-group-[[data-stuck]]:flex text-(--ui-text-muted) transition">
<UIcon name="i-lucide-hash" class="size-4 shrink-0" />
</span>
{{ category.title }}
@@ -161,7 +161,7 @@ onMounted(() => {
</div>
</template>
<div class="rounded-[calc(var(--ui-radius)*1.5)] border border-(--ui-border-muted) overflow-hidden aspect-[16/9]">
<div class="rounded-md border border-(--ui-border-muted) overflow-hidden aspect-[16/9]">
<UColorModeImage
:light="`${component.path.replace('/components/', '/components/light/')}.png`"
:dark="`${component.path.replace('/components/', '/components/dark/')}.png`"

8
docs/app/pages/figma/index.vue
View File

@@ -155,7 +155,7 @@ onMounted(async () => {
:height="item.height"
:src="item.src"
:alt="item.alt"
class="w-full h-auto rounded-[calc(var(--ui-radius)*2)]"
class="w-full h-auto rounded-lg"
loading="lazy"
/>
</template>
@@ -165,7 +165,7 @@ onMounted(async () => {
<NuxtImg
v-if="page.section2.image"
v-bind="page.section2.image"
class="w-full h-auto rounded-[calc(var(--ui-radius)*2)]"
class="w-full h-auto rounded-lg"
loading="lazy"
/>
</UPageSection>
@@ -173,7 +173,7 @@ onMounted(async () => {
<NuxtImg
v-if="page.section3.image"
v-bind="page.section3.image"
class="w-full h-auto rounded-[calc(var(--ui-radius)*2)]"
class="w-full h-auto rounded-lg"
loading="lazy"
/>
</UPageSection>
@@ -198,7 +198,7 @@ onMounted(async () => {
<NuxtImg
v-if="step.image"
v-bind="step.image"
class="rounded-(--ui-radius)"
class="rounded-sm"
loading="lazy"
/>
<div>

6
docs/app/pages/index.vue
View File

@@ -280,7 +280,7 @@ useIntersectionObserver(contributorsRef, ([entry]) => {
height="258"
loading="lazy"
:alt="`Nuxt UI Pro Screenshot ${i}`"
class="aspect-video border border-(--ui-border) rounded-[calc(var(--ui-radius)*2)] bg-white"
class="aspect-video border border-(--ui-border) rounded-lg bg-white"
>
</UPageMarquee>
<UPageMarquee orientation="vertical" :overlay="false" :ui="{ root: '[--duration:40s] absolute w-[460px] -top-[400px] left-[480px] h-[1160px] transform-3d rotate-x-55 rotate-y-0 rotate-z-30' }">
@@ -292,7 +292,7 @@ useIntersectionObserver(contributorsRef, ([entry]) => {
height="258"
loading="lazy"
:alt="`Nuxt UI Pro Screenshot ${i}`"
class="aspect-video border border-(--ui-border) rounded-[calc(var(--ui-radius)*2)] bg-white"
class="aspect-video border border-(--ui-border) rounded-lg bg-white"
>
</UPageMarquee>
<UPageMarquee reverse orientation="vertical" :overlay="false" :ui="{ root: 'hidden md:flex [--duration:40s] absolute w-[460px] -top-[300px] left-[1020px] h-[1060px] transform-3d rotate-x-55 rotate-y-0 rotate-z-30' }">
@@ -304,7 +304,7 @@ useIntersectionObserver(contributorsRef, ([entry]) => {
height="258"
loading="lazy"
:alt="`Nuxt UI Pro Screenshot ${i}`"
class="aspect-video border border-(--ui-border) rounded-[calc(var(--ui-radius)*2)] bg-white"
class="aspect-video border border-(--ui-border) rounded-lg bg-white"
>
</UPageMarquee>
</div>

8
docs/app/pages/pro/index.vue
View File

@@ -46,7 +46,7 @@ useSeoMeta({
width="460"
height="258"
:alt="`Nuxt UI Pro Screenshot ${i}`"
class="aspect-video border border-(--ui-border) rounded-[calc(var(--ui-radius)*2)] bg-white"
class="aspect-video border border-(--ui-border) rounded-lg bg-white"
>
</UPageMarquee>
<UPageMarquee orientation="vertical" :overlay="false" :ui="{ root: '[--duration:40s] absolute w-[460px] -top-[400px] left-[480px] h-[1160px] transform-3d rotate-x-55 rotate-y-0 rotate-z-30' }">
@@ -57,7 +57,7 @@ useSeoMeta({
width="460"
height="258"
:alt="`Nuxt UI Pro Screenshot ${i}`"
class="aspect-video border border-(--ui-border) rounded-[calc(var(--ui-radius)*2)] bg-white"
class="aspect-video border border-(--ui-border) rounded-lg bg-white"
>
</UPageMarquee>
<UPageMarquee reverse orientation="vertical" :overlay="false" :ui="{ root: 'hidden md:flex [--duration:40s] absolute w-[460px] -top-[300px] left-[1020px] h-[1060px] transform-3d rotate-x-55 rotate-y-0 rotate-z-30' }">
@@ -68,7 +68,7 @@ useSeoMeta({
width="460"
height="258"
:alt="`Nuxt UI Pro Screenshot ${i}`"
class="aspect-video border border-(--ui-border) rounded-[calc(var(--ui-radius)*2)] bg-white"
class="aspect-video border border-(--ui-border) rounded-lg bg-white"
>
</UPageMarquee>
</div>
@@ -199,7 +199,7 @@ useSeoMeta({
<LazyStarsBg />
<video
class="rounded-[var(--ui-radius)] z-10"
class="rounded-sm z-10"
preload="none"
poster="https://res.cloudinary.com/nuxt/video/upload/so_3.3/v1708511800/ui-pro/video-nuxt-ui-pro_kwfbdh.jpg"
:controls="true"

2
docs/app/pages/pro/templates.vue
View File

@@ -55,7 +55,7 @@ useSeoMeta({
<UColorModeImage
v-if="template.thumbnail"
v-bind="template.thumbnail"
class="w-full h-auto border lg:border-y lg:border-x-0 border-(--ui-border) rounded-(--ui-radius) lg:rounded-none"
class="w-full h-auto border lg:border-y lg:border-x-0 border-(--ui-border) rounded-sm lg:rounded-none"
:alt="`Template ${index} thumbnail`"
width="656"
height="369"

2
docs/content/1.getting-started/1.index.md
View File

@@ -4,7 +4,7 @@ description: 'Nuxt UI harnesses the combined strengths of Reka UI, Tailwind CSS,
navigation.icon: i-lucide-house
---
<iframe width="100%" height="100%" src="https://www.youtube-nocookie.com/embed/_eQxomah-nA?si=pDSzchUBDKb2NQu7" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen style="aspect-ratio: 16/9;" class="rounded-[calc(var(--ui-radius)*1.5)]"></iframe>
<iframe width="100%" height="100%" src="https://www.youtube-nocookie.com/embed/_eQxomah-nA?si=pDSzchUBDKb2NQu7" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen style="aspect-ratio: 16/9;" class="rounded-md"></iframe>
## Reka UI

94
docs/content/1.getting-started/3.theme.md
View File

@@ -605,65 +605,61 @@ You can customize these CSS variables to tailor the appearance of your applicati
#### Border Radius
Nuxt UI uses a global `--ui-radius` CSS variable for consistent border rounding. Components use variations of this base value, like `rounded-[calc(var(--ui-radius)*2)]`, to create different levels of roundness throughout the UI:
Nuxt UI provides a centralized border radius system through the `--ui-radius` CSS variable, which defaults to `0.25rem`. This system replaces Tailwind CSS's default `rounded-*` utilities while maintaining the familiar class names. The border radius system is built on a scale that multiplies the base radius value:
```css
:root {
--ui-radius: var(--radius-sm);
@theme default {
--radius-xs: calc(var(--ui-radius) * 0.5); /* 0.125rem */
--radius-sm: var(--ui-radius); /* 0.25rem */
--radius-md: calc(var(--ui-radius) * 1.5); /* 0.375rem */
--radius-lg: calc(var(--ui-radius) * 2); /* 0.5rem */
--radius-xl: calc(var(--ui-radius) * 3); /* 0.75rem */
--radius-2xl: calc(var(--ui-radius) * 4); /* 1rem */
--radius-3xl: calc(var(--ui-radius) * 6); /* 1.5rem */
}
```
You can customize the base radius value in your `main.css` file:
::module-only
#ui
:::div{class="*:!mb-0 *:!mt-2.5"}
```css [app/assets/css/main.css]
@import "tailwindcss";
@import "@nuxt/ui";
:root {
--ui-radius: 0.5rem;
}
```
:::
#ui-pro
:::div{class="*:!mb-0 *:!mt-2.5"}
```css [app/assets/css/main.css]
@import "tailwindcss";
@import "@nuxt/ui-pro";
:root {
--ui-radius: 0.5rem;
}
```
:::
::
::note
Try the :prose-icon{name="i-lucide-swatch-book" class="text-(--ui-primary)"} theme picker in the header above to change the base radius value.
::
::tip
You can customize the default radius value using the default Tailwind CSS variables or a value of your choice:
::module-only
#ui
:::div{class="*:!mb-0 *:!mt-2.5"}
```css [app/assets/css/main.css]
@import "tailwindcss";
@import "@nuxt/ui";
:root {
--ui-radius: var(--radius-sm);
}
```
:::
#ui-pro
:::div{class="*:!mb-0 *:!mt-2.5"}
```css [app/assets/css/main.css]
@import "tailwindcss";
@import "@nuxt/ui-pro";
:root {
--ui-radius: var(--radius-sm);
}
```
:::
::
::
#### Container
Nuxt UI uses a global `--ui-container` CSS variable to define the width of the container:
Nuxt UI provides a global `--ui-container` CSS variable that controls the maximum width of the [Container](/components/container) component, which defaults to `var(--container-7xl)`.
```css
:root {
--ui-container: var(--container-7xl);
}
```
::tip
You can customize the default container width using the default Tailwind CSS variables or a value of your choice:
You can customize this value in your `main.css` file to adjust container widths consistently throughout your application:
::module-only
#ui
@@ -703,8 +699,6 @@ You can customize the default container width using the default Tailwind CSS var
:::
::
::
## Components theme
Nuxt UI components are styled using the [Tailwind Variants](https://www.tailwind-variants.org/) API, which provides a powerful way to create variants and manage component styles. Let's explore the key features of this API:
@@ -718,7 +712,7 @@ Components in Nuxt UI can have multiple `slots`, each representing a distinct HT
```ts [src/theme/card.ts]
export default {
slots: {
root: 'bg-(--ui-bg) ring ring-(--ui-border) divide-y divide-(--ui-border) rounded-[calc(var(--ui-radius)*2)]',
root: 'bg-(--ui-bg) ring ring-(--ui-border) divide-y divide-(--ui-border) rounded-lg',
header: 'p-4 sm:px-6',
body: 'p-4 sm:p-6',
footer: 'p-4 sm:px-6'