mirror of
https://github.com/ArthurDanjou/ui.git
synced 2026-01-20 23:11:43 +01:00
refactor(module)!: implement design system with CSS variables (#2298)
This commit is contained in:
@@ -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"
|
||||
|
||||
@@ -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"
|
||||
|
||||
@@ -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"
|
||||
|
||||
@@ -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"
|
||||
|
||||
@@ -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',
|
||||
|
||||
@@ -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"
|
||||
|
||||
@@ -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"
|
||||
|
||||
Reference in New Issue
Block a user