diff --git a/src/plugins/components/message-text/index.ts b/src/plugins/components/message-text/index.ts index 61eb2b5..9418dd5 100644 --- a/src/plugins/components/message-text/index.ts +++ b/src/plugins/components/message-text/index.ts @@ -29,9 +29,6 @@ export default plugin(({ addComponents, theme }) => { //Base [`@apply inline-block h-${config.dot.size} w-${config.dot.size} rounded-${config.dot.rounded}`]: {}, - //Background - [`@apply bg-${config.dot.background.light} dark:bg-${config.dot.background.dark}`]: - {}, }, //Message:close '.nui-message-close': { @@ -50,40 +47,34 @@ export default plugin(({ addComponents, theme }) => { '&.nui-message-curved': { [`@apply ${config.rounded.curved}`]: {}, }, - //Color:white - '&.nui-message-white': { - [`@apply bg-${config.color.white.background.light} dark:bg-${config.color.white.background.dark}`]: + //Contrast:low + '&.nui-message-low-contrast': { + //Background + [`@apply bg-${config.contrast.lowContrast.background.light} dark:bg-${config.contrast.lowContrast.background.dark}`]: + {}, + //Border + [`@apply border border-${config.contrast.lowContrast.border.light} dark:border-${config.contrast.lowContrast.border.dark}`]: {}, }, - //Color:whiteContrast - '&.nui-message-white-contrast': { - [`@apply bg-${config.color.whiteContrast.background.light} dark:bg-${config.color.whiteContrast.background.dark}`]: + //Contrast:high + '&.nui-message-high-contrast': { + //Background + [`@apply bg-${config.contrast.highContrast.background.light} dark:bg-${config.contrast.highContrast.background.dark}`]: + {}, + //Border + [`@apply border border-${config.contrast.highContrast.border.light} dark:border-${config.contrast.highContrast.border.dark}`]: {}, }, - //Color:default + //Color:white '&.nui-message-default': { - [`@apply border border-${config.color.default.border.light} dark:border-${config.color.default.border.dark}`]: - {}, //Message:dot '.nui-message-dot': { [`@apply bg-${config.color.default.dot.background.light} dark:bg-${config.color.default.dot.background.dark}`]: {}, }, }, - //Color:contrast - '&.nui-message-contrast': { - [`@apply border border-${config.color.contrast.border.light} dark:border-${config.color.contrast.border.dark}`]: - {}, - //Message:dot - '.nui-message-dot': { - [`@apply bg-${config.color.contrast.dot.background.light} dark:bg-${config.color.contrast.dot.background.dark}`]: - {}, - }, - }, //Color:primary '&.nui-message-primary': { - [`@apply border border-${config.color.primary.border.light} dark:border-${config.color.primary.border.dark}`]: - {}, //Message:dot '.nui-message-dot': { [`@apply bg-${config.color.primary.dot.background.light} dark:bg-${config.color.primary.dot.background.dark}`]: @@ -92,8 +83,6 @@ export default plugin(({ addComponents, theme }) => { }, //Color:info '&.nui-message-info': { - [`@apply border border-${config.color.info.border.light} dark:border-${config.color.info.border.dark}`]: - {}, //Message:dot '.nui-message-dot': { [`@apply bg-${config.color.info.dot.background.light} dark:bg-${config.color.info.dot.background.dark}`]: @@ -102,8 +91,6 @@ export default plugin(({ addComponents, theme }) => { }, //Color:success '&.nui-message-success': { - [`@apply border border-${config.color.success.border.light} dark:border-${config.color.success.border.dark}`]: - {}, //Message:dot '.nui-message-dot': { [`@apply bg-${config.color.success.dot.background.light} dark:bg-${config.color.success.dot.background.dark}`]: @@ -112,8 +99,6 @@ export default plugin(({ addComponents, theme }) => { }, //Color:warning '&.nui-message-warning': { - [`@apply border border-${config.color.warning.border.light} dark:border-${config.color.warning.border.dark}`]: - {}, //Message:dot '.nui-message-dot': { [`@apply bg-${config.color.warning.dot.background.light} dark:bg-${config.color.warning.dot.background.dark}`]: @@ -122,14 +107,28 @@ export default plugin(({ addComponents, theme }) => { }, //Color:danger '&.nui-message-danger': { - [`@apply border border-${config.color.danger.border.light} dark:border-${config.color.danger.border.dark}`]: - {}, //Message:dot '.nui-message-dot': { [`@apply bg-${config.color.danger.dot.background.light} dark:bg-${config.color.danger.dot.background.dark}`]: {}, }, }, + //Color:dark + '&.nui-message-dark': { + //Message:dot + '.nui-message-dot': { + [`@apply bg-${config.color.dark.dot.background.light} dark:bg-${config.color.dark.dot.background.dark}`]: + {}, + }, + }, + //Color:black + '&.nui-message-black': { + //Message:dot + '.nui-message-dot': { + [`@apply bg-${config.color.black.dot.background.light} dark:bg-${config.color.black.dot.background.dark}`]: + {}, + }, + }, }, }) }, config) diff --git a/src/plugins/components/message-text/message-text.component.ts b/src/plugins/components/message-text/message-text.component.ts index 47a576d..400b091 100644 --- a/src/plugins/components/message-text/message-text.component.ts +++ b/src/plugins/components/message-text/message-text.component.ts @@ -13,7 +13,7 @@ import { Paragraph } from '../paragraph/paragraph.component' export const MessageText = ({ title, text, - contrast = 'white', + contrast = 'low-contrast', color = 'default', rounded = 'sm', classes, @@ -55,6 +55,7 @@ export const MessageText = ({ ${ButtonClose({ rounded: 'full', color: 'default', + size: 'xs', classes: { wrapper: 'nui-message-close', }, diff --git a/src/plugins/components/message-text/message-text.config.ts b/src/plugins/components/message-text/message-text.config.ts index 5bc2c7a..47338e0 100644 --- a/src/plugins/components/message-text/message-text.config.ts +++ b/src/plugins/components/message-text/message-text.config.ts @@ -1,7 +1,7 @@ export const key = 'messageText' as const export const defaultConfig = { - padding: '6', + padding: '5', rounded: { default: 'rounded-md', smooth: 'rounded-lg', @@ -11,58 +11,44 @@ export const defaultConfig = { gap: '2', }, dot: { - size: '3', + size: '2', rounded: 'full', - background: { - light: 'muted-200', - dark: 'muted-700', - }, }, close: { position: '2', }, - color: { - default: { - border: { - light: 'muted-300', - dark: 'muted-700', - }, - dot: { - background: { - light: 'muted-200', - dark: 'muted-700', - }, - }, - }, - white: { + contrast: { + lowContrast: { background: { light: 'white', dark: 'muted-800', }, + border: { + light: 'muted-300', + dark: 'muted-700', + }, }, - whiteContrast: { + highContrast: { background: { light: 'white', dark: 'muted-950', }, - }, - contrast: { border: { light: 'muted-300', dark: 'muted-800', }, + }, + }, + color: { + default: { dot: { background: { - light: 'muted-200', - dark: 'muted-800', + light: 'muted-300', + dark: 'muted-700', }, }, }, primary: { - border: { - light: 'primary-500', - dark: 'primary-500', - }, dot: { background: { light: 'primary-500', @@ -71,10 +57,6 @@ export const defaultConfig = { }, }, info: { - border: { - light: 'info-500', - dark: 'info-500', - }, dot: { background: { light: 'info-500', @@ -83,10 +65,6 @@ export const defaultConfig = { }, }, success: { - border: { - light: 'success-500', - dark: 'success-500', - }, dot: { background: { light: 'success-500', @@ -95,10 +73,6 @@ export const defaultConfig = { }, }, warning: { - border: { - light: 'warning-500', - dark: 'warning-500', - }, dot: { background: { light: 'warning-500', @@ -107,10 +81,6 @@ export const defaultConfig = { }, }, danger: { - border: { - light: 'danger-500', - dark: 'danger-500', - }, dot: { background: { light: 'danger-500', @@ -118,6 +88,22 @@ export const defaultConfig = { }, }, }, + dark: { + dot: { + background: { + light: 'muted-900', + dark: 'muted-100', + }, + }, + }, + black: { + dot: { + background: { + light: 'black', + dark: 'white', + }, + }, + }, }, } diff --git a/src/plugins/components/message-text/message-text.doc.mdx b/src/plugins/components/message-text/message-text.doc.mdx index 2c8190e..f094ec2 100644 --- a/src/plugins/components/message-text/message-text.doc.mdx +++ b/src/plugins/components/message-text/message-text.doc.mdx @@ -45,6 +45,8 @@ Messages can have different colors. The following example shows the available co + + diff --git a/src/plugins/components/message-text/message-text.stories.ts b/src/plugins/components/message-text/message-text.stories.ts index 752e6f3..d0866d8 100644 --- a/src/plugins/components/message-text/message-text.stories.ts +++ b/src/plugins/components/message-text/message-text.stories.ts @@ -28,6 +28,8 @@ const meta = { 'success', 'warning', 'danger', + 'dark', + 'black', 'none', ], defaultValue: 'default', @@ -39,8 +41,8 @@ const meta = { }, contrast: { control: { type: 'select' }, - options: ['white', 'contrast'], - defaultValue: 'white', + options: ['low-contrast', 'high-contrast'], + defaultValue: 'low-contrast', }, }, } satisfies Meta @@ -153,4 +155,24 @@ export const Danger: Story = { style: 'max-width: 440px;', }, } + +export const Dark: Story = { + name: 'Color: dark', + args: { + color: 'dark', + title: 'Message title', + text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Haec dicuntur inconstantissime. Quamquam te quidem video minime esse deterritum.', + style: 'max-width: 440px;', + }, +} + +export const Black: Story = { + name: 'Color: black', + args: { + color: 'black', + title: 'Message title', + text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Haec dicuntur inconstantissime. Quamquam te quidem video minime esse deterritum.', + style: 'max-width: 440px;', + }, +} // #endregion diff --git a/src/plugins/components/message-text/message-text.types.ts b/src/plugins/components/message-text/message-text.types.ts index 8882c21..d482b7f 100644 --- a/src/plugins/components/message-text/message-text.types.ts +++ b/src/plugins/components/message-text/message-text.types.ts @@ -11,8 +11,10 @@ export interface MessageTextProps extends Record { | 'success' | 'warning' | 'danger' + | 'dark' + | 'black' | 'none' - contrast?: 'white' | 'contrast' + contrast?: 'low-contrast' | 'high-contrast' classes?: { wrapper?: string | string[] title?: string | string[] diff --git a/src/plugins/components/message-text/message-text.variants.ts b/src/plugins/components/message-text/message-text.variants.ts index 6a6d79f..4b1e137 100644 --- a/src/plugins/components/message-text/message-text.variants.ts +++ b/src/plugins/components/message-text/message-text.variants.ts @@ -14,10 +14,12 @@ export const color = { success: 'nui-message-success', warning: 'nui-message-warning', danger: 'nui-message-danger', + dark: 'nui-message-dark', + black: 'nui-message-black', none: '', } as const satisfies MessageTextVariant<'color'> export const contrast = { - white: 'nui-message-white', - contrast: 'nui-message-contrast', + 'low-contrast': 'nui-message-low-contrast', + 'high-contrast': 'nui-message-high-contrast', } as const satisfies MessageTextVariant<'contrast'>