Skip to content

Commit

Permalink
feat(Toast): refactor component styles, add colors
Browse files Browse the repository at this point in the history
  • Loading branch information
@driss-chelouati
driss-chelouati committed Feb 20, 2024
1 parent d0111e4 commit c3f27f6
Show file tree
Hide file tree
Showing 7 changed files with 341 additions and 82 deletions.
75 changes: 49 additions & 26 deletions src/plugins/components/toast/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,43 +50,34 @@ export default plugin(({ addComponents, theme }) => {
'.nui-button-close': {
'@apply ms-auto': {},
},
//Type:default
'&.nui-toast-default': {
[`@apply border-2 border-${config.type.default.border.light} dark:border-${config.type.default.border.dark}`]:
//Type:low-contrast
'&.nui-toast-low-contrast': {
//Background
[`@apply bg-${config.contrast.lowContrast.background.light} dark:bg-${config.contrast.lowContrast.background.dark}`]:
{},
},
//Type:contrast
'&.nui-toast-contrast': {
[`@apply border-2 border-${config.type.contrast.border.light} dark:border-${config.type.contrast.border.dark}`]:
//Border
[`@apply border-2 border-${config.contrast.lowContrast.border.light} dark:border-${config.contrast.lowContrast.border.dark}`]:
{},
},
//Color:white
'&.nui-toast-white': {
[`@apply bg-${config.color.white.background.light} dark:bg-${config.color.white.background.dark}`]:
//Type:high-contrast
'&.nui-toast-high-contrast': {
//Background
[`@apply bg-${config.contrast.highContrast.background.light} dark:bg-${config.contrast.highContrast.background.dark}`]:
{},
//Icon:inner
'.nui-toast-icon': {
[`@apply text-${config.color.white.icon.inner.color.light} dark:text-${config.color.white.icon.inner.color.dark}`]:
{},
},
//Icon:outer
'.nui-toast-icon-block': {
[`@apply bg-${config.color.white.icon.outer.background.light} dark:bg-${config.color.white.icon.outer.background.dark}`]:
{},
},
},
//Color:whiteContrast
'&.nui-toast-white-contrast': {
[`@apply bg-${config.color.whiteContrast.background.light} dark:bg-${config.color.whiteContrast.background.dark}`]:
//Border
[`@apply border-2 border-${config.contrast.highContrast.border.light} dark:border-${config.contrast.highContrast.border.dark}`]:
{},
},
//Color:default
'&.nui-toast-default': {
//Icon:inner
'.nui-toast-icon': {
[`@apply text-${config.color.whiteContrast.icon.inner.color.light} dark:text-${config.color.whiteContrast.icon.inner.color.dark}`]:
[`@apply text-${config.color.default.icon.inner.color.light} dark:text-${config.color.default.icon.inner.color.dark}`]:
{},
},
//Icon:outer
'.nui-toast-icon-block': {
[`@apply bg-${config.color.whiteContrast.icon.outer.background.light} dark:bg-${config.color.whiteContrast.icon.outer.background.dark}`]:
[`@apply bg-${config.color.default.icon.outer.background.light} dark:bg-${config.color.default.icon.outer.background.dark}`]:
{},
},
},
Expand Down Expand Up @@ -170,6 +161,38 @@ export default plugin(({ addComponents, theme }) => {
{},
},
},
//Color:dark
'&.nui-toast-dark': {
//Border
[`@apply border-2 border-${config.color.dark.border.light} dark:border-${config.color.dark.border.dark}`]:
{},
//Icon:inner
'.nui-toast-icon': {
[`@apply text-${config.color.dark.icon.inner.color.light} dark:text-${config.color.dark.icon.inner.color.dark}`]:
{},
},
//Icon:outer
'.nui-toast-icon-block': {
[`@apply bg-${config.color.dark.icon.outer.background.light} dark:bg-${config.color.dark.icon.outer.background.dark}`]:
{},
},
},
//Color:black
'&.nui-toast-black': {
//Border
[`@apply border-2 border-${config.color.black.border.light} dark:border-${config.color.black.border.dark}`]:
{},
//Icon:inner
'.nui-toast-icon': {
[`@apply text-${config.color.black.icon.inner.color.light} dark:text-${config.color.black.icon.inner.color.dark}`]:
{},
},
//Icon:outer
'.nui-toast-icon-block': {
[`@apply bg-${config.color.black.icon.outer.background.light} dark:bg-${config.color.black.icon.outer.background.dark}`]:
{},
},
},
//Rounded:sm
'&.nui-toast-rounded': {
[`@apply rounded-${config.rounded.sm}`]: {},
Expand Down
2 changes: 1 addition & 1 deletion src/plugins/components/toast/toast.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ import { ButtonClose } from '../button-close/button-close.component'
export const Toast = ({
title,
text,
contrast = 'white',
contrast = 'low-contrast',
color = 'default',
rounded = 'md',
borderless,
Expand Down
100 changes: 52 additions & 48 deletions src/plugins/components/toast/toast.config.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,26 +31,30 @@ export const defaultConfig = {
size: '6',
},
},
type: {
default: {
contrast: {
lowContrast: {
background: {
light: 'white',
dark: 'muted-800',
},
border: {
light: 'muted-300',
dark: 'muted-700',
},
},
contrast: {
highContrast: {
background: {
light: 'white',
dark: 'muted-950',
},
border: {
light: 'muted-300',
dark: 'muted-800',
},
},
},
color: {
white: {
background: {
light: 'white',
dark: 'muted-800',
},
default: {
icon: {
outer: {
background: {
Expand All @@ -66,31 +70,7 @@ export const defaultConfig = {
},
},
},
whiteContrast: {
background: {
light: 'white',
dark: 'muted-950',
},
icon: {
outer: {
background: {
light: 'muted-100',
dark: 'muted-800',
},
},
inner: {
color: {
light: 'muted-500',
dark: 'muted-500',
},
},
},
},
primary: {
background: {
light: 'primary-500',
dark: 'primary-500',
},
border: {
light: 'primary-500',
dark: 'primary-500',
Expand All @@ -111,10 +91,6 @@ export const defaultConfig = {
},
},
info: {
background: {
light: 'info-500',
dark: 'info-500',
},
border: {
light: 'info-500',
dark: 'info-500',
Expand All @@ -135,10 +111,6 @@ export const defaultConfig = {
},
},
success: {
background: {
light: 'success-500',
dark: 'success-500',
},
border: {
light: 'success-500',
dark: 'success-500',
Expand All @@ -159,10 +131,6 @@ export const defaultConfig = {
},
},
warning: {
background: {
light: 'warning-500',
dark: 'warning-500',
},
border: {
light: 'warning-500',
dark: 'warning-500',
Expand All @@ -183,10 +151,6 @@ export const defaultConfig = {
},
},
danger: {
background: {
light: 'danger-500',
dark: 'danger-500',
},
border: {
light: 'danger-500',
dark: 'danger-500',
Expand All @@ -206,6 +170,46 @@ export const defaultConfig = {
},
},
},
dark: {
border: {
light: 'muted-900',
dark: 'muted-100',
},
icon: {
outer: {
background: {
light: 'muted-900/10',
dark: 'muted-100/10',
},
},
inner: {
color: {
light: 'muted-900',
dark: 'muted-100',
},
},
},
},
black: {
border: {
light: 'black',
dark: 'white',
},
icon: {
outer: {
background: {
light: 'black/10',
dark: 'white/10',
},
},
inner: {
color: {
light: 'black',
dark: 'white',
},
},
},
},
},
rounded: {
sm: 'md',
Expand Down
24 changes: 24 additions & 0 deletions src/plugins/components/toast/toast.doc.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -82,6 +82,12 @@ Toasts can have different colors. The following example shows the available colo
<div>
<Story of={ToastStories.Danger} />
</div>
<div>
<Story of={ToastStories.Dark} />
</div>
<div>
<Story of={ToastStories.Black} />
</div>
</div>
</div>

Expand Down Expand Up @@ -111,6 +117,12 @@ Toasts can be borderless and display a light shadow.
<div>
<Story of={ToastStories.SlotIconBlockBorderlessDanger} />
</div>
<div>
<Story of={ToastStories.SlotIconBlockBorderlessDark} />
</div>
<div>
<Story of={ToastStories.SlotIconBlockBorderlessBlack} />
</div>
</div>
</div>

Expand Down Expand Up @@ -143,6 +155,12 @@ Toasts have an icon slot that you can use to display an icon.
<div>
<Story of={ToastStories.SlotIconDanger} />
</div>
<div>
<Story of={ToastStories.SlotIconDark} />
</div>
<div>
<Story of={ToastStories.SlotIconBlack} />
</div>
</div>
</div>

Expand Down Expand Up @@ -172,6 +190,12 @@ Toasts have an icon slot that you can use to display an icon block.
<div>
<Story of={ToastStories.SlotIconBlockDanger} />
</div>
<div>
<Story of={ToastStories.SlotIconBlockDark} />
</div>
<div>
<Story of={ToastStories.SlotIconBlockBlack} />
</div>
</div>
</div>

Expand Down
Loading

0 comments on commit c3f27f6

Please sign in to comment.