Skip to content

Commit

Permalink
feat(Toast): config redesign and implementation
Browse files Browse the repository at this point in the history
  • Loading branch information
@driss-chelouati
driss-chelouati committed Dec 8, 2023
1 parent 071d590 commit 7382d0f
Show file tree
Hide file tree
Showing 7 changed files with 318 additions and 142 deletions.
138 changes: 98 additions & 40 deletions src/plugins/components/toast/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,122 +15,180 @@ export default plugin.withOptions(
const config = theme(`shurikenUi.${key}`) satisfies ToastConfig

addComponents({
//Wrapper
[`.${prefix}toast`]: {
[`@apply relative flex font-${config.font} overflow-hidden`]: {},

[`@apply relative flex font-${config.font.family} overflow-hidden`]:
{},
//Toast:inner
[`.${prefix}toast-inner`]: {
[`@apply flex items-center grow gap-2 px-4 py-3`]: {},
},
//Toast:title
[`.${prefix}toast-title`]: {
[`@apply ${prefix}heading ${prefix}heading-${config.title.heading} ${prefix}weight-${config.title.weight} text-${config.title.text} dark:text-${config.title.textDark}`]:
//Font
[`@apply ${prefix}heading ${prefix}heading-${config.title.font.size} ${prefix}weight-${config.title.font.weight}`]:
{},
//Color
[`@apply text-${config.title.font.color.light} dark:text-${config.title.font.color.dark}`]:
{},
},
//Toast:subtitle
[`.${prefix}toast-subtitle`]: {
[`@apply ${prefix}paragraph text-${config.subtitle.text} text-${config.subtitle.textColor}`]:
//Font
[`@apply ${prefix}paragraph text-${config.subtitle.font.size}`]: {},
//color
[`@apply text-${config.subtitle.font.color.light} dark:text-${config.subtitle.font.color.dark}`]:
{},
},
//Icon:inner
[`.${prefix}toast-icon`]: {
[`@apply w-${config.iconSize} h-${config.iconSize}`]: {},
[`@apply w-${config.icon.inner.size} h-${config.icon.inner.size}`]:
{},
},
//Icon:outer
[`.${prefix}toast-icon-block`]: {
[`@apply h-${config.iconBlockSize} w-${config.iconBlockSize} flex items-center justify-center`]:
[`@apply h-${config.icon.outer.size} w-${config.icon.outer.size} flex items-center justify-center`]:
{},
},
//Toast:close
[`.${prefix}button-close`]: {
[`@apply ms-auto`]: {},
},
//Type:default
[`&.${prefix}toast-default`]: {
[`@apply border-2 border-${config.default.border} dark:border-${config.default.borderDark}`]:
[`@apply border-2 border-${config.type.default.border.light} dark:border-${config.type.default.border.dark}`]:
{},
},
//Type:contrast
[`&.${prefix}toast-contrast`]: {
[`@apply border-2 border-${config.contrast.border} dark:border-${config.contrast.borderDark}`]:
[`@apply border-2 border-${config.type.contrast.border.light} dark:border-${config.type.contrast.border.dark}`]:
{},
},
//Color:white
[`&.${prefix}toast-white`]: {
[`@apply bg-${config.white.bg} dark:bg-${config.white.bgDark}`]: {},

[`@apply bg-${config.color.white.background.light} dark:bg-${config.color.white.background.dark}`]:
{},
//Icon:inner
[`.${prefix}toast-icon`]: {
[`@apply text-${config.white.icon.text}`]: {},
[`@apply text-${config.color.white.icon.inner.color.light} dark:text-${config.color.white.icon.inner.color.dark}`]:
{},
},
//Icon:outer
[`.${prefix}toast-icon-block`]: {
[`@apply bg-${config.white.iconBlock.bg} dark:bg-${config.white.iconBlock.bgDark}`]:
[`@apply bg-${config.color.white.icon.outer.background.light} dark:bg-${config.color.white.icon.outer.background.dark}`]:
{},
},
},
//Color:whiteContrast
[`&.${prefix}toast-white-contrast`]: {
[`@apply bg-${config.whiteContrast.bg} dark:bg-${config.whiteContrast.bgDark}`]:
[`@apply bg-${config.color.whiteContrast.background.light} dark:bg-${config.color.whiteContrast.background.dark}`]:
{},

//Icon:inner
[`.${prefix}toast-icon`]: {
[`@apply text-${config.whiteContrast.icon.text}`]: {},
[`@apply text-${config.color.whiteContrast.icon.inner.color.light} dark:text-${config.color.whiteContrast.icon.inner.color.dark}`]:
{},
},
//Icon:outer
[`.${prefix}toast-icon-block`]: {
[`@apply bg-${config.whiteContrast.iconBlock.bg} dark:bg-${config.whiteContrast.iconBlock.bgDark}`]:
[`@apply bg-${config.color.whiteContrast.icon.outer.background.light} dark:bg-${config.color.whiteContrast.icon.outer.background.dark}`]:
{},
},
},
//Color:primary
[`&.${prefix}toast-primary`]: {
[`@apply border-2 border-${config.primary.border}`]: {},

//Border
[`@apply border-2 border-${config.color.primary.border.light} dark:border-${config.color.primary.border.light}`]:
{},
//Icon:inner
[`.${prefix}toast-icon`]: {
[`@apply text-${config.primary.icon.text}`]: {},
[`@apply text-${config.color.primary.icon.inner.color.light} dark:text-${config.color.primary.icon.inner.color.dark}`]:
{},
},
//Icon:outer
[`.${prefix}toast-icon-block`]: {
[`@apply bg-${config.primary.iconBlock.bg}`]: {},
[`@apply bg-${config.color.primary.icon.outer.background.light} dark:bg-${config.color.primary.icon.outer.background.dark}`]:
{},
},
},
//Color:info
[`&.${prefix}toast-info`]: {
[`@apply border-2 border-${config.info.border}`]: {},

//Border
[`@apply border-2 border-${config.color.info.border.light} dark:border-${config.color.info.border.light}`]:
{},
//Icon:inner
[`.${prefix}toast-icon`]: {
[`@apply text-${config.info.icon.text}`]: {},
[`@apply text-${config.color.info.icon.inner.color.light} dark:text-${config.color.info.icon.inner.color.dark}`]:
{},
},
//Icon:outer
[`.${prefix}toast-icon-block`]: {
[`@apply bg-${config.info.iconBlock.bg}`]: {},
[`@apply bg-${config.color.info.icon.outer.background.light} dark:bg-${config.color.info.icon.outer.background.dark}`]:
{},
},
},
//Color:success
[`&.${prefix}toast-success`]: {
[`@apply border-2 border-${config.success.border}`]: {},

//Border
[`@apply border-2 border-${config.color.success.border.light} dark:border-${config.color.success.border.light}`]:
{},
//Icon:inner
[`.${prefix}toast-icon`]: {
[`@apply text-${config.success.icon.text}`]: {},
[`@apply text-${config.color.success.icon.inner.color.light} dark:text-${config.color.success.icon.inner.color.dark}`]:
{},
},
//Icon:outer
[`.${prefix}toast-icon-block`]: {
[`@apply bg-${config.success.iconBlock.bg}`]: {},
[`@apply bg-${config.color.success.icon.outer.background.light} dark:bg-${config.color.success.icon.outer.background.dark}`]:
{},
},
},
//Color:warning
[`&.${prefix}toast-warning`]: {
[`@apply border-2 border-${config.warning.border}`]: {},

//Border
[`@apply border-2 border-${config.color.warning.border.light} dark:border-${config.color.warning.border.light}`]:
{},
//Icon:inner
[`.${prefix}toast-icon`]: {
[`@apply text-${config.warning.icon.text}`]: {},
[`@apply text-${config.color.warning.icon.inner.color.light} dark:text-${config.color.warning.icon.inner.color.dark}`]:
{},
},
//Icon:outer
[`.${prefix}toast-icon-block`]: {
[`@apply bg-${config.warning.iconBlock.bg}`]: {},
[`@apply bg-${config.color.warning.icon.outer.background.light} dark:bg-${config.color.warning.icon.outer.background.dark}`]:
{},
},
},
//Color:danger
[`&.${prefix}toast-danger`]: {
[`@apply border-2 border-${config.danger.border}`]: {},

//Border
[`@apply border-2 border-${config.color.danger.border.light} dark:border-${config.color.danger.border.light}`]:
{},
//Icon:inner
[`.${prefix}toast-icon`]: {
[`@apply text-${config.danger.icon.text}`]: {},
[`@apply text-${config.color.white.icon.inner.color.light} dark:text-${config.color.white.icon.inner.color.dark}`]:
{},
},
//Icon:outer
[`.${prefix}toast-icon-block`]: {
[`@apply bg-${config.danger.iconBlock.bg}`]: {},
[`@apply bg-${config.color.white.icon.outer.background.light} dark:bg-${config.color.white.icon.outer.background.dark}`]:
{},
},
},
//Rounded:sm
[`&.${prefix}toast-rounded`]: {
[`@apply rounded-${config.rounded.default}`]: {},
[`@apply rounded-${config.rounded.sm}`]: {},
},
//Rounded:smooth
[`&.${prefix}toast-smooth`]: {
[`@apply rounded-${config.rounded.smooth}`]: {},
[`@apply rounded-${config.rounded.md}`]: {},
},
//Rounded:curved
[`&.${prefix}toast-curved`]: {
[`@apply rounded-${config.rounded.curved}`]: {},
[`@apply rounded-${config.rounded.lg}`]: {},
},
//Shadow:borderless
[`&.${prefix}toast-borderless`]: {
[`@apply !border-0 shadow-${config.borderless.shadow} dark:shadow-${config.borderless.shadowDark} shadow-${config.borderless.shadowSize}`]:
[`@apply !border-0 shadow-${config.shadow.light} dark:shadow-${config.shadow.dark} shadow-${config.shadow.size}`]:
{},
},
},
Expand Down
6 changes: 3 additions & 3 deletions src/plugins/components/toast/toast.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ export const Toast = ({
text,
contrast = 'white',
color = 'default',
shape = 'rounded',
rounded = 'md',
borderless,
icon,
iconBlock,
Expand All @@ -26,7 +26,7 @@ export const Toast = ({
'nui-toast',
color && variants.color[color],
contrast && variants.contrast[contrast],
shape && variants.shape[shape],
rounded && variants.rounded[rounded],
borderless && 'nui-toast-borderless',
classes?.wrapper,
]
Expand All @@ -50,7 +50,7 @@ export const Toast = ({
<p class="nui-toast-subtitle">${text}</p>
</div>
${ButtonClose({
shape: 'full',
rounded: 'full',
color: 'default',
})}
</div>
Expand Down
Loading

0 comments on commit 7382d0f

Please sign in to comment.