From 59aaa25d6be5a03236915d32c07baf0d238ce4d1 Mon Sep 17 00:00:00 2001 From: BIYA Paul Date: Thu, 6 Jul 2023 11:13:10 +0100 Subject: [PATCH 1/4] feat: handle message --- README.md | 161 ++++++++++++++ src/plugins/components/index.ts | 2 + src/plugins/components/message.ts | 339 ++++++++++++++++++++++++++++++ 3 files changed, 502 insertions(+) create mode 100644 src/plugins/components/message.ts diff --git a/README.md b/README.md index 6f9337f..17de390 100644 --- a/README.md +++ b/README.md @@ -84,6 +84,167 @@ export default withShurikenUI({ text: 'primary-800', textDark: 'primary-200', }, + message: { + iconOuter: { + size: '10', + icon: { + size: '5', + text: 'white', + }, + }, + messageText: { + text: 'sm', + textColor: 'muted-800', + font: 'sans', + }, + messageClose: { + text: 'muted-800', + rounded: 'full', + duration: '200', + iconSize: '4', + }, + rounded: { + default: 'md', + smooth: 'lg', + curved: 'xl', + full: 'full', + }, + messageDefault: { + bg: 'white', + bgDark: 'muted-800', + border: 'muted-200', + borderDark: 'muted-700', + outer: { + bg: 'muted-600', + text: 'white', + bgDark: 'muted-900', + }, + close: { + textDark: 'muted-500', + bgHoverEnabled: 'muted-300/50', + bgHoverEnabledDark: 'muted-500/30', + bgFocusVisible: 'muted-300/50', + bgFocusVisibleDark: 'muted-500/30', + bgActiveEnabled: 'muted-300/20', + bgActiveEnabledDark: 'muted-500/20', + }, + }, + messageMuted: { + bg: 'muted-100', + bgDark: 'muted-500/10', + border: 'muted-200', + borderDark: 'muted-700', + outer: { + bg: 'muted-400', + text: 'white', + bgDark: 'muted-900', + }, + close: { + textDark: 'muted-500', + bgHoverEnabled: 'muted-300/50', + bgHoverEnabledDark: 'muted-500/30', + bgFocusVisible: 'muted-300/50', + bgFocusVisibleDark: 'muted-500/30', + bgActiveEnabled: 'muted-300/20', + bgActiveEnabledDark: 'muted-500/20', + }, + }, + messagePrimary: { + bg: 'primary-100', + bgDark: 'primary-500/10', + border: 'primary-200', + borderDark: 'primary-700', + outer: { + bg: 'primary-500', + text: 'white', + }, + close: { + textDark: 'primary-500', + bgHoverEnabled: 'primary-300/50', + bgHoverEnabledDark: 'primary-500/30', + bgFocusVisible: 'primary-300/50', + bgFocusVisibleDark: 'primary-500/30', + bgActiveEnabled: 'primary-300/20', + bgActiveEnabledDark: 'primary-500/20', + }, + }, + messageInfo: { + bg: 'info-100', + bgDark: 'info-500/10', + border: 'info-200', + borderDark: 'info-700', + outer: { + bg: 'info-500', + text: 'white', + }, + close: { + textDark: 'info-500', + bgHoverEnabled: 'info-300/50', + bgHoverEnabledDark: 'info-500/30', + bgFocusVisible: 'info-300/50', + bgFocusVisibleDark: 'info-500/30', + bgActiveEnabled: 'info-300/20', + bgActiveEnabledDark: 'info-500/20', + }, + }, + messageSuccess: { + bg: 'success-100', + bgDark: 'success-500/10', + border: 'success-200', + borderDark: 'success-700', + outer: { + bg: 'success-500', + text: 'white', + }, + close: { + textDark: 'success-500', + bgHoverEnabled: 'success-300/50', + bgHoverEnabledDark: 'success-500/30', + bgFocusVisible: 'success-300/50', + bgFocusVisibleDark: 'success-500/30', + bgActiveEnabled: 'success-300/20', + bgActiveEnabledDark: 'success-500/20', + }, + }, + messageWarning: { + bg: 'warning-100', + bgDark: 'warning-500/10', + border: 'warning-200', + borderDark: 'warning-700', + outer: { + bg: 'warning-500', + text: 'white', + }, + close: { + textDark: 'warning-500', + bgHoverEnabled: 'warning-300/50', + bgHoverEnabledDark: 'warning-500/30', + bgFocusVisible: 'warning-300/50', + bgFocusVisibleDark: 'warning-500/30', + bgActiveEnabled: 'warning-300/20', + bgActiveEnabledDark: 'warning-500/20', + }, + }, + messageDanger: { + bg: 'danger-100', + bgDark: 'danger-500/10', + border: 'danger-200', + borderDark: 'danger-700', + outer: { + bg: 'danger-500', + text: 'white', + }, + close: { + textDark: 'danger-500', + bgHoverEnabled: 'danger-300/50', + bgHoverEnabledDark: 'danger-500/30', + bgFocusVisible: 'danger-300/50', + bgFocusVisibleDark: 'danger-500/30', + bgActiveEnabled: 'danger-300/20', + bgActiveEnabledDark: 'danger-500/20', + }, + }, + } slimscroll: { width: '[6px]', bg: 'black/5', diff --git a/src/plugins/components/index.ts b/src/plugins/components/index.ts index 6ef2b32..1d84e5c 100644 --- a/src/plugins/components/index.ts +++ b/src/plugins/components/index.ts @@ -6,6 +6,7 @@ import focus from './focus' import label from './label' import mark from './mark' import mask from './mask' +import message from './message' import placeload from './placeload' import slimscroll from './slimscroll' import tooltip from './tooltip' @@ -16,6 +17,7 @@ const components = [ label, mark, mask, + message, placeload, slimscroll, tooltip, diff --git a/src/plugins/components/message.ts b/src/plugins/components/message.ts new file mode 100644 index 0000000..3a79784 --- /dev/null +++ b/src/plugins/components/message.ts @@ -0,0 +1,339 @@ +import plugin from 'tailwindcss/plugin' +import { defu } from 'defu' +import { type PluginOption, defaultPluginOptions } from '../options' + +const defaultMessageConfig = { + iconOuter: { + size: '10', + icon: { + size: '5', + text: 'white', + }, + }, + messageText: { + text: 'sm', + textColor: 'muted-800', + font: 'sans', + }, + messageClose: { + text: 'muted-800', + rounded: 'full', + duration: '200', + iconSize: '4', + }, + rounded: { + default: 'md', + smooth: 'lg', + curved: 'xl', + full: 'full', + }, + messageDefault: { + bg: 'white', + bgDark: 'muted-800', + border: 'muted-200', + borderDark: 'muted-700', + outer: { + bg: 'muted-600', + text: 'white', + bgDark: 'muted-900', + }, + close: { + textDark: 'muted-500', + bgHoverEnabled: 'muted-300/50', + bgHoverEnabledDark: 'muted-500/30', + bgFocusVisible: 'muted-300/50', + bgFocusVisibleDark: 'muted-500/30', + bgActiveEnabled: 'muted-300/20', + bgActiveEnabledDark: 'muted-500/20', + }, + }, + messageMuted: { + bg: 'muted-100', + bgDark: 'muted-500/10', + border: 'muted-200', + borderDark: 'muted-700', + outer: { + bg: 'muted-400', + text: 'white', + bgDark: 'muted-900', + }, + close: { + textDark: 'muted-500', + bgHoverEnabled: 'muted-300/50', + bgHoverEnabledDark: 'muted-500/30', + bgFocusVisible: 'muted-300/50', + bgFocusVisibleDark: 'muted-500/30', + bgActiveEnabled: 'muted-300/20', + bgActiveEnabledDark: 'muted-500/20', + }, + }, + messagePrimary: { + bg: 'primary-100', + bgDark: 'primary-500/10', + border: 'primary-200', + borderDark: 'primary-700', + outer: { + bg: 'primary-500', + text: 'white', + }, + close: { + textDark: 'primary-500', + bgHoverEnabled: 'primary-300/50', + bgHoverEnabledDark: 'primary-500/30', + bgFocusVisible: 'primary-300/50', + bgFocusVisibleDark: 'primary-500/30', + bgActiveEnabled: 'primary-300/20', + bgActiveEnabledDark: 'primary-500/20', + }, + }, + messageInfo: { + bg: 'info-100', + bgDark: 'info-500/10', + border: 'info-200', + borderDark: 'info-700', + outer: { + bg: 'info-500', + text: 'white', + }, + close: { + textDark: 'info-500', + bgHoverEnabled: 'info-300/50', + bgHoverEnabledDark: 'info-500/30', + bgFocusVisible: 'info-300/50', + bgFocusVisibleDark: 'info-500/30', + bgActiveEnabled: 'info-300/20', + bgActiveEnabledDark: 'info-500/20', + }, + }, + messageSuccess: { + bg: 'success-100', + bgDark: 'success-500/10', + border: 'success-200', + borderDark: 'success-700', + outer: { + bg: 'success-500', + text: 'white', + }, + close: { + textDark: 'success-500', + bgHoverEnabled: 'success-300/50', + bgHoverEnabledDark: 'success-500/30', + bgFocusVisible: 'success-300/50', + bgFocusVisibleDark: 'success-500/30', + bgActiveEnabled: 'success-300/20', + bgActiveEnabledDark: 'success-500/20', + }, + }, + messageWarning: { + bg: 'warning-100', + bgDark: 'warning-500/10', + border: 'warning-200', + borderDark: 'warning-700', + outer: { + bg: 'warning-500', + text: 'white', + }, + close: { + textDark: 'warning-500', + bgHoverEnabled: 'warning-300/50', + bgHoverEnabledDark: 'warning-500/30', + bgFocusVisible: 'warning-300/50', + bgFocusVisibleDark: 'warning-500/30', + bgActiveEnabled: 'warning-300/20', + bgActiveEnabledDark: 'warning-500/20', + }, + }, + messageDanger: { + bg: 'danger-100', + bgDark: 'danger-500/10', + border: 'danger-200', + borderDark: 'danger-700', + outer: { + bg: 'danger-500', + text: 'white', + }, + close: { + textDark: 'danger-500', + bgHoverEnabled: 'danger-300/50', + bgHoverEnabledDark: 'danger-500/30', + bgFocusVisible: 'danger-300/50', + bgFocusVisibleDark: 'danger-500/30', + bgActiveEnabled: 'danger-300/20', + bgActiveEnabledDark: 'danger-500/20', + }, + }, +} + +export default plugin.withOptions( + function (options: PluginOption) { + const { prefix } = defu(options, defaultPluginOptions) + + return function ({ addComponents, theme }) { + const config = theme( + 'shurikenUi.message' + ) satisfies typeof defaultMessageConfig + + addComponents({ + [`.${prefix}-message`]: { + [`@apply flex min-h-[3rem] items-center border p-1 pe-2`]: {}, + + [`.${prefix}-message-icon-outer`]: { + [`@apply flex h-${config.iconOuter.size} w-${config.iconOuter.size} shrink-0 items-center justify-center`]: + {}, + + [`.${prefix}-message-icon`]: { + [`@apply h-${config.iconOuter.icon.size} w-${config.iconOuter.icon.size} text-${config.iconOuter.icon.text}`]: + {}, + }, + }, + [`.${prefix}-message-text`]: { + [`@apply text-${config.messageText.textColor} mx-3 block font-${config.messageText.font} text-${config.messageText.text}`]: + {}, + }, + [`.${prefix}-message-close`]: { + [`@apply nui-focus text-${config.messageClose.text} me-2 ms-auto flex cursor-pointer items-center justify-center p-1 outline-none rounded-${config.messageClose.rounded} transition-colors duration-${config.messageClose.duration}`]: + {}, + + [`.${prefix}-close-icon`]: { + [`@apply h-${config.messageClose.iconSize} w-${config.messageClose.iconSize}`]: + {}, + }, + }, + [`&.${prefix}-message-rounded`]: { + [`@apply rounded-${config.rounded.default}`]: {}, + + [`.${prefix}-message-icon-outer`]: { + [`@apply rounded-${config.rounded.default}`]: {}, + }, + }, + [`&.${prefix}-message-smooth`]: { + [`@apply rounded-${config.rounded.smooth}`]: {}, + + [`.${prefix}-message-icon-outer`]: { + [`@apply rounded-${config.rounded.smooth}`]: {}, + }, + }, + [`&.${prefix}-message-curved`]: { + [`@apply rounded-${config.rounded.curved}`]: {}, + + [`.${prefix}-message-icon-outer`]: { + [`@apply rounded-${config.rounded.curved}`]: {}, + }, + }, + [`&.${prefix}-message-full`]: { + [`@apply rounded-${config.rounded.full}`]: {}, + + [`.${prefix}-message-icon-outer`]: { + [`@apply rounded-${config.rounded.full}`]: {}, + }, + }, + + [`&.${prefix}-message-default`]: { + [`@apply bg-${config.messageDefault.bg} dark:bg-${config.messageDefault.bgDark} border-${config.messageDefault.border} dark:border-${config.messageDefault.borderDark}`]: + {}, + + [`.${prefix}-message-icon-outer`]: { + [`@apply bg-${config.messageDefault.outer.bg} text-${config.messageDefault.outer.text} dark:bg-${config.messageDefault.outer.bgDark}`]: + {}, + }, + [`.${prefix}-message-close`]: { + [`@apply dark:text-${config.messageDefault.close.textDark} hover:enabled:bg-${config.messageDefault.close.bgHoverEnabled} focus-visible:bg-${config.messageDefault.close.bgFocusVisible} active:enabled:bg-${config.messageDefault.close.bgActiveEnabled} dark:hover:enabled:bg-${config.messageDefault.close.bgHoverEnabledDark} dark:focus-visible:bg-${config.messageDefault.close.bgFocusVisibleDark} dark:active:enabled:bg-${config.messageDefault.close.bgActiveEnabledDark}`]: + {}, + }, + }, + [`&.${prefix}-message-muted`]: { + [`@apply bg-${config.messageMuted.bg} dark:bg-${config.messageMuted.bgDark} border-${config.messageMuted.border} dark:border-${config.messageMuted.borderDark}`]: + {}, + + [`.${prefix}-message-icon-outer`]: { + [`@apply bg-${config.messageMuted.outer.bg} text-${config.messageMuted.outer.text} dark:bg-${config.messageMuted.outer.bgDark}`]: + {}, + }, + [`.${prefix}-message-close`]: { + [`@apply dark:text-${config.messageMuted.close.textDark} hover:enabled:bg-${config.messageMuted.close.bgHoverEnabled} focus-visible:bg-${config.messageMuted.close.bgFocusVisible} active:enabled:bg-${config.messageMuted.close.bgActiveEnabled} dark:hover:enabled:bg-${config.messageMuted.close.bgHoverEnabledDark} dark:focus-visible:bg-${config.messageMuted.close.bgFocusVisibleDark} dark:active:enabled:bg-${config.messageMuted.close.bgActiveEnabledDark}`]: + {}, + }, + }, + [`&.${prefix}-message-primary`]: { + [`@apply bg-${config.messagePrimary.bg} dark:bg-${config.messagePrimary.bgDark} border-${config.messagePrimary.border} dark:border-${config.messagePrimary.borderDark}`]: + {}, + + [`.${prefix}-message-icon-outer`]: { + [`@apply bg-${config.messagePrimary.outer.bg} text-${config.messagePrimary.outer.text}`]: + {}, + }, + + [`.${prefix}-message-close`]: { + [`@apply dark:text-${config.messagePrimary.close.textDark} hover:enabled:bg-${config.messagePrimary.close.bgHoverEnabled} focus-visible:bg-${config.messagePrimary.close.bgFocusVisible} active:enabled:bg-${config.messagePrimary.close.bgActiveEnabled} dark:hover:enabled:bg-${config.messagePrimary.close.bgHoverEnabledDark} dark:focus-visible:bg-${config.messagePrimary.close.bgFocusVisibleDark} dark:active:enabled:bg-${config.messagePrimary.close.bgActiveEnabledDark}`]: + {}, + }, + }, + [`&.${prefix}-message-info`]: { + [`@apply bg-${config.messageInfo.bg} dark:bg-${config.messageInfo.bgDark} border-${config.messageInfo.border} dark:border-${config.messageInfo.borderDark}`]: + {}, + + [`.${prefix}-message-icon-outer`]: { + [`@apply bg-${config.messageInfo.outer.bg} text-${config.messageInfo.outer.text}`]: + {}, + }, + + [`.${prefix}-message-close`]: { + [`@apply dark:text-${config.messageInfo.close.textDark} hover:enabled:bg-${config.messageInfo.close.bgHoverEnabled} focus-visible:bg-${config.messageInfo.close.bgFocusVisible} active:enabled:bg-${config.messageInfo.close.bgActiveEnabled} dark:hover:enabled:bg-${config.messageInfo.close.bgHoverEnabledDark} dark:focus-visible:bg-${config.messageInfo.close.bgFocusVisibleDark} dark:active:enabled:bg-${config.messageInfo.close.bgActiveEnabledDark}`]: + {}, + }, + }, + [`&.${prefix}-message-success`]: { + [`@apply bg-${config.messageSuccess.bg} dark:bg-${config.messageSuccess.bgDark} border-${config.messageSuccess.border} dark:border-${config.messageSuccess.borderDark}`]: + {}, + + [`.${prefix}-message-icon-outer`]: { + [`@apply bg-${config.messageSuccess.outer.bg} text-${config.messageSuccess.outer.text}`]: + {}, + }, + + [`.${prefix}-message-close`]: { + [`@apply dark:text-${config.messageSuccess.close.textDark} hover:enabled:bg-${config.messageSuccess.close.bgHoverEnabled} focus-visible:bg-${config.messageSuccess.close.bgFocusVisible} active:enabled:bg-${config.messageSuccess.close.bgActiveEnabled} dark:hover:enabled:bg-${config.messageSuccess.close.bgHoverEnabledDark} dark:focus-visible:bg-${config.messageSuccess.close.bgFocusVisibleDark} dark:active:enabled:bg-${config.messageSuccess.close.bgActiveEnabledDark}`]: + {}, + }, + }, + [`&.${prefix}-message-warning`]: { + [`@apply bg-${config.messageWarning.bg} dark:bg-${config.messageWarning.bgDark} border-${config.messageWarning.border} dark:border-${config.messageWarning.borderDark}`]: + {}, + + [`.${prefix}-message-icon-outer`]: { + [`@apply bg-${config.messageWarning.outer.bg} text-${config.messageWarning.outer.text}`]: + {}, + }, + + [`.${prefix}-message-close`]: { + [`@apply dark:text-${config.messageWarning.close.textDark} hover:enabled:bg-${config.messageWarning.close.bgHoverEnabled} focus-visible:bg-${config.messageWarning.close.bgFocusVisible} active:enabled:bg-${config.messageWarning.close.bgActiveEnabled} dark:hover:enabled:bg-${config.messageWarning.close.bgHoverEnabledDark} dark:focus-visible:bg-${config.messageWarning.close.bgFocusVisibleDark} dark:active:enabled:bg-${config.messagePrimary.close.bgActiveEnabledDark}`]: + {}, + }, + }, + [`&.${prefix}-message-danger`]: { + [`@apply bg-${config.messageDanger.bg} dark:bg-${config.messageDanger.bgDark} border-${config.messageDanger.border} dark:border-${config.messageDanger.borderDark}`]: + {}, + + [`.${prefix}-message-icon-outer`]: { + [`@apply bg-${config.messageDanger.outer.bg} text-${config.messageDanger.outer.text}`]: + {}, + }, + [`.${prefix}-message-close`]: { + [`@apply dark:text-${config.messageDanger.close.textDark} hover:enabled:bg-${config.messageDanger.close.bgHoverEnabled} focus-visible:bg-${config.messageDanger.close.bgFocusVisible} active:enabled:bg-${config.messageDanger.close.bgActiveEnabled} dark:hover:enabled:bg-${config.messageDanger.close.bgHoverEnabledDark} dark:focus-visible:bg-${config.messageDanger.close.bgFocusVisibleDark} dark:active:enabled:bg-${config.messageDanger.close.bgActiveEnabledDark}`]: + {}, + }, + }, + }, + }) + } + }, + function () { + return { + theme: { + shurikenUi: { + message: defaultMessageConfig, + }, + }, + } + } +) From bfc0aa6d4fadc94b0663a6e84833ec140215a768 Mon Sep 17 00:00:00 2001 From: BIYA Paul Date: Sun, 9 Jul 2023 11:33:15 +0100 Subject: [PATCH 2/4] fix: set prefix as variable --- src/plugins/components/message.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/plugins/components/message.ts b/src/plugins/components/message.ts index 3a79784..e348c34 100644 --- a/src/plugins/components/message.ts +++ b/src/plugins/components/message.ts @@ -191,7 +191,7 @@ export default plugin.withOptions( {}, }, [`.${prefix}-message-close`]: { - [`@apply nui-focus text-${config.messageClose.text} me-2 ms-auto flex cursor-pointer items-center justify-center p-1 outline-none rounded-${config.messageClose.rounded} transition-colors duration-${config.messageClose.duration}`]: + [`@apply ${prefix}-focus text-${config.messageClose.text} me-2 ms-auto flex cursor-pointer items-center justify-center p-1 outline-none rounded-${config.messageClose.rounded} transition-colors duration-${config.messageClose.duration}`]: {}, [`.${prefix}-close-icon`]: { From 9f0959c5d831f1b7f65f45491e5f4f6aed8119f5 Mon Sep 17 00:00:00 2001 From: BIYA Paul Date: Tue, 18 Jul 2023 06:51:26 +0100 Subject: [PATCH 3/4] fix: review message plugin component styles --- README.md | 12 +++--------- src/plugins/components/message.ts | 30 ++++++------------------------ 2 files changed, 9 insertions(+), 33 deletions(-) diff --git a/README.md b/README.md index 17de390..3355c9c 100644 --- a/README.md +++ b/README.md @@ -85,14 +85,7 @@ export default withShurikenUI({ textDark: 'primary-200', }, message: { - iconOuter: { - size: '10', - icon: { - size: '5', - text: 'white', - }, - }, - messageText: { + messageInnerText: { text: 'sm', textColor: 'muted-800', font: 'sans', @@ -102,6 +95,7 @@ export default withShurikenUI({ rounded: 'full', duration: '200', iconSize: '4', + space: '1', }, rounded: { default: 'md', @@ -116,8 +110,8 @@ export default withShurikenUI({ borderDark: 'muted-700', outer: { bg: 'muted-600', - text: 'white', bgDark: 'muted-900', + text: 'white', }, close: { textDark: 'muted-500', diff --git a/src/plugins/components/message.ts b/src/plugins/components/message.ts index e348c34..2c33c2f 100644 --- a/src/plugins/components/message.ts +++ b/src/plugins/components/message.ts @@ -3,14 +3,7 @@ import { defu } from 'defu' import { type PluginOption, defaultPluginOptions } from '../options' const defaultMessageConfig = { - iconOuter: { - size: '10', - icon: { - size: '5', - text: 'white', - }, - }, - messageText: { + messageInnerText: { text: 'sm', textColor: 'muted-800', font: 'sans', @@ -20,6 +13,7 @@ const defaultMessageConfig = { rounded: 'full', duration: '200', iconSize: '4', + space: '1', }, rounded: { default: 'md', @@ -34,8 +28,8 @@ const defaultMessageConfig = { borderDark: 'muted-700', outer: { bg: 'muted-600', - text: 'white', bgDark: 'muted-900', + text: 'white', }, close: { textDark: 'muted-500', @@ -177,23 +171,13 @@ export default plugin.withOptions( [`.${prefix}-message`]: { [`@apply flex min-h-[3rem] items-center border p-1 pe-2`]: {}, - [`.${prefix}-message-icon-outer`]: { - [`@apply flex h-${config.iconOuter.size} w-${config.iconOuter.size} shrink-0 items-center justify-center`]: - {}, - - [`.${prefix}-message-icon`]: { - [`@apply h-${config.iconOuter.icon.size} w-${config.iconOuter.icon.size} text-${config.iconOuter.icon.text}`]: - {}, - }, - }, - [`.${prefix}-message-text`]: { - [`@apply text-${config.messageText.textColor} mx-3 block font-${config.messageText.font} text-${config.messageText.text}`]: + [`.${prefix}-message-inner-text`]: { + [`@apply text-${config.messageInnerText.textColor} px-3 block font-${config.messageInnerText.font} text-${config.messageInnerText.text}`]: {}, }, [`.${prefix}-message-close`]: { - [`@apply ${prefix}-focus text-${config.messageClose.text} me-2 ms-auto flex cursor-pointer items-center justify-center p-1 outline-none rounded-${config.messageClose.rounded} transition-colors duration-${config.messageClose.duration}`]: + [`@apply ${prefix}-focus text-${config.messageClose.text} me-2 ms-auto flex cursor-pointer items-center justify-center p-${config.messageClose.space} outline-none rounded-${config.messageClose.rounded} transition-colors duration-${config.messageClose.duration}`]: {}, - [`.${prefix}-close-icon`]: { [`@apply h-${config.messageClose.iconSize} w-${config.messageClose.iconSize}`]: {}, @@ -227,11 +211,9 @@ export default plugin.withOptions( [`@apply rounded-${config.rounded.full}`]: {}, }, }, - [`&.${prefix}-message-default`]: { [`@apply bg-${config.messageDefault.bg} dark:bg-${config.messageDefault.bgDark} border-${config.messageDefault.border} dark:border-${config.messageDefault.borderDark}`]: {}, - [`.${prefix}-message-icon-outer`]: { [`@apply bg-${config.messageDefault.outer.bg} text-${config.messageDefault.outer.text} dark:bg-${config.messageDefault.outer.bgDark}`]: {}, From 0b0f5f0cd71af96c61c711ce3b827e5aee82fb13 Mon Sep 17 00:00:00 2001 From: BIYA Paul Date: Thu, 20 Jul 2023 07:51:46 +0100 Subject: [PATCH 4/4] fix: missing plugin styles --- README.md | 9 ++++++++- src/plugins/components/message.ts | 16 ++++++++++++++++ 2 files changed, 24 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 3355c9c..8f1e25b 100644 --- a/README.md +++ b/README.md @@ -85,6 +85,13 @@ export default withShurikenUI({ textDark: 'primary-200', }, message: { + messageIconOuter: { + size: '10', + icon: { + size: '5', + text: 'white', + }, + }, messageInnerText: { text: 'sm', textColor: 'muted-800', @@ -238,7 +245,7 @@ export default withShurikenUI({ bgActiveEnabledDark: 'danger-500/20', }, }, - } + }, slimscroll: { width: '[6px]', bg: 'black/5', diff --git a/src/plugins/components/message.ts b/src/plugins/components/message.ts index 2c33c2f..a8b3927 100644 --- a/src/plugins/components/message.ts +++ b/src/plugins/components/message.ts @@ -3,6 +3,13 @@ import { defu } from 'defu' import { type PluginOption, defaultPluginOptions } from '../options' const defaultMessageConfig = { + messageIconOuter: { + size: '10', + icon: { + size: '5', + text: 'white', + }, + }, messageInnerText: { text: 'sm', textColor: 'muted-800', @@ -171,6 +178,15 @@ export default plugin.withOptions( [`.${prefix}-message`]: { [`@apply flex min-h-[3rem] items-center border p-1 pe-2`]: {}, + [`.${prefix}-message-icon-outer`]: { + [`@apply flex h-${config.messageIconOuter.size} w-${config.messageIconOuter.size} shrink-0 items-center justify-center`]: + {}, + + [`.${prefix}-message-icon`]: { + [`@apply h-${config.messageIconOuter.icon.size} w-${config.messageIconOuter.icon.size} text-${config.messageIconOuter.icon.text}`]: + {}, + }, + }, [`.${prefix}-message-inner-text`]: { [`@apply text-${config.messageInnerText.textColor} px-3 block font-${config.messageInnerText.font} text-${config.messageInnerText.text}`]: {},