refactor(module)!: implement design system with CSS variables (#2298)

This commit is contained in:
Benjamin Canac
2024-10-07 14:48:02 +02:00
committed by GitHub
parent 3cf5535b2f
commit 9368c6a639
279 changed files with 6533 additions and 6994 deletions

View File

@@ -31,7 +31,7 @@ export interface AlertProps {
actions?: ButtonProps[]
/**
* Display a close button to dismiss the alert.
* `{ size: 'md', color: 'gray', variant: 'link' }`{lang="ts-type"}
* `{ size: 'md', color: 'neutral', variant: 'link' }`{lang="ts-type"}
* @emits `close`
* @defaultValue false
*/
@@ -117,7 +117,7 @@ const ui = computed(() => alert({
v-if="close"
:icon="closeIcon || appConfig.ui.icons.close"
size="md"
color="gray"
color="neutral"
variant="link"
aria-label="Close"
v-bind="typeof close === 'object' ? close : undefined"

View File

@@ -67,7 +67,7 @@ export interface CommandPaletteProps<G, T> extends Pick<ComboboxRootProps, 'mult
placeholder?: InputProps['placeholder']
/**
* Display a close button in the input (useful when inside a Modal for example).
* `{ size: 'md', color: 'gray', variant: 'ghost' }`{lang="ts-type"}
* `{ size: 'md', color: 'neutral', variant: 'ghost' }`{lang="ts-type"}
* @defaultValue false
*/
close?: ButtonProps | boolean
@@ -233,7 +233,7 @@ const groups = computed(() => {
v-if="close"
:icon="closeIcon || appConfig.ui.icons.close"
size="md"
color="gray"
color="neutral"
variant="ghost"
aria-label="Close"
v-bind="typeof close === 'object' ? close : undefined"

View File

@@ -37,7 +37,7 @@ export interface ModalProps extends DialogRootProps {
portal?: boolean
/**
* Display a close button to dismiss the modal.
* `{ size: 'md', color: 'gray', variant: 'ghost' }`{lang="ts-type"}
* `{ size: 'md', color: 'neutral', variant: 'ghost' }`{lang="ts-type"}
* @defaultValue true
*/
close?: ButtonProps | boolean
@@ -138,7 +138,7 @@ const ui = computed(() => modal({
v-if="close"
:icon="closeIcon || appConfig.ui.icons.close"
size="md"
color="gray"
color="neutral"
variant="ghost"
aria-label="Close"
v-bind="typeof close === 'object' ? close : undefined"

View File

@@ -142,7 +142,7 @@ const lists = computed(() => props.items?.length ? (Array.isArray(props.items[0]
<slot :name="item.slot ? `${item.slot}-trailing`: 'item-trailing'" :item="item" :active="active" :index="index">
<UBadge
v-if="item.badge"
color="gray"
color="neutral"
variant="outline"
:size="((props.ui?.linkTrailingBadgeSize || ui.linkTrailingBadgeSize()) as BadgeProps['size'])"
v-bind="(typeof item.badge === 'string' || typeof item.badge === 'number') ? { label: item.badge } : item.badge"

View File

@@ -44,7 +44,7 @@ export interface PaginationProps extends Pick<PaginationRootProps, 'defaultPage'
ellipsisIcon?: string
/**
* The color of the pagination controls.
* @defaultValue 'gray'
* @defaultValue 'neutral'
*/
color?: ButtonProps['color']
/**
@@ -106,7 +106,7 @@ import { useAppConfig } from '#imports'
const props = withDefaults(defineProps<PaginationProps>(), {
size: 'md',
color: 'gray',
color: 'neutral',
variant: 'outline',
activeColor: 'primary',
activeVariant: 'solid',

View File

@@ -35,7 +35,7 @@ export interface SlideoverProps extends DialogRootProps {
portal?: boolean
/**
* Display a close button to dismiss the slideover.
* `{ size: 'md', color: 'gray', variant: 'ghost' }`{lang="ts-type"}
* `{ size: 'md', color: 'neutral', variant: 'ghost' }`{lang="ts-type"}
* @defaultValue true
*/
close?: ButtonProps | boolean
@@ -137,7 +137,7 @@ const ui = computed(() => slideover({
v-if="close"
:icon="closeIcon || appConfig.ui.icons.close"
size="md"
color="gray"
color="neutral"
variant="ghost"
aria-label="Close"
v-bind="typeof close === 'object' ? close : undefined"

View File

@@ -31,7 +31,7 @@ export interface ToastProps extends Pick<ToastRootProps, 'defaultOpen' | 'open'
actions?: ButtonProps[]
/**
* Display a close button to dismiss the toast.
* `{ size: 'md', color: 'gray', variant: 'link' }`{lang="ts-type"}
* `{ size: 'md', color: 'neutral', variant: 'link' }`{lang="ts-type"}
* @defaultValue true
*/
close?: ButtonProps | boolean
@@ -145,7 +145,7 @@ defineExpose({
v-if="close"
:icon="closeIcon || appConfig.ui.icons.close"
size="md"
color="gray"
color="neutral"
variant="link"
aria-label="Close"
v-bind="typeof close === 'object' ? close : undefined"