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'>