Skip to content

Commit

Permalink
feat(IconBox): add new colors and contrasts
Browse files Browse the repository at this point in the history
  • Loading branch information
@driss-chelouati
driss-chelouati committed Feb 19, 2024
1 parent d17f799 commit 0dee570
Show file tree
Hide file tree
Showing 6 changed files with 520 additions and 0 deletions.
148 changes: 148 additions & 0 deletions src/plugins/components/icon-box/icon-box.config.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -78,6 +78,18 @@ export const defaultConfig = {
},
},
},
defaultContrast: {
background: {
light: 'muted-100',
dark: 'muted-950',
},
font: {
color: {
light: 'muted-600',
dark: 'muted-100',
},
},
},
invert: {
background: {
light: 'white',
Expand All @@ -90,6 +102,30 @@ export const defaultConfig = {
},
},
},
dark: {
background: {
light: 'muted-900',
dark: 'muted-100',
},
font: {
color: {
light: 'muted-100',
dark: 'muted-900',
},
},
},
black: {
background: {
light: 'black',
dark: 'white',
},
font: {
color: {
light: 'white',
dark: 'black',
},
},
},
primary: {
background: {
light: 'primary-500',
Expand Down Expand Up @@ -152,6 +188,30 @@ export const defaultConfig = {
},
},
pastel: {
default: {
background: {
light: 'muted-500/10',
dark: 'muted-700/10',
},
font: {
color: {
light: 'muted-500',
dark: 'muted-200',
},
},
},
defaultContrast: {
background: {
light: 'muted-500/10',
dark: 'muted-950/10',
},
font: {
color: {
light: 'muted-500',
dark: 'muted-100',
},
},
},
invert: {
background: {
light: 'white/10',
Expand All @@ -164,6 +224,30 @@ export const defaultConfig = {
},
},
},
dark: {
background: {
light: 'muted-900/10',
dark: 'muted-100/10',
},
font: {
color: {
light: 'muted-800',
dark: 'muted-900',
},
},
},
black: {
background: {
light: 'black/10',
dark: 'white/10',
},
font: {
color: {
light: 'black',
dark: 'white',
},
},
},
primary: {
background: {
light: 'primary-500/10',
Expand Down Expand Up @@ -226,6 +310,38 @@ export const defaultConfig = {
},
},
outline: {
default: {
background: {
light: 'transparent',
dark: 'transparent',
},
border: {
light: 'current',
dark: 'current',
},
font: {
color: {
light: 'muted-500',
dark: 'muted-200',
},
},
},
defaultContrast: {
background: {
light: 'transparent',
dark: 'transparent',
},
border: {
light: 'current',
dark: 'current',
},
font: {
color: {
light: 'muted-500',
dark: 'muted-100',
},
},
},
invert: {
background: {
light: 'transparent',
Expand All @@ -242,6 +358,38 @@ export const defaultConfig = {
},
},
},
dark: {
background: {
light: 'transparent',
dark: 'transparent',
},
border: {
light: 'current',
dark: 'current',
},
font: {
color: {
light: 'muted-800',
dark: 'muted-100',
},
},
},
black: {
background: {
light: 'transparent',
dark: 'transparent',
},
border: {
light: 'current',
dark: 'current',
},
font: {
color: {
light: 'black',
dark: 'white',
},
},
},
primary: {
background: {
light: 'transparent',
Expand Down
9 changes: 9 additions & 0 deletions src/plugins/components/icon-box/icon-box.doc.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -83,11 +83,14 @@ Icon boxes can have different sizes, colors and shapes. The following example sh
Icon boxes can have different sizes, colors and shapes. The following example shows colors for the solid flavor.

<div className="flex items-end gap-2 border border-muted-200 dark:border-muted-800 bg-white dark:bg-muted-900 p-6 rounded-sm">
<Story of={IconBoxStories.ColorSolidDefault} />
<Story of={IconBoxStories.ColorSolidPrimary} />
<Story of={IconBoxStories.ColorSolidInfo} />
<Story of={IconBoxStories.ColorSolidSuccess} />
<Story of={IconBoxStories.ColorSolidWarning} />
<Story of={IconBoxStories.ColorSolidDanger} />
<Story of={IconBoxStories.ColorSolidDark} />
<Story of={IconBoxStories.ColorSolidBlack} />
</div>

<br />
Expand All @@ -97,11 +100,14 @@ Icon boxes can have different sizes, colors and shapes. The following example sh
Icon boxes can have different sizes, colors and shapes. The following example shows colors for the pastel flavor.

<div className="flex items-end gap-2 border border-muted-200 dark:border-muted-800 bg-white dark:bg-muted-900 p-6 rounded-sm">
<Story of={IconBoxStories.ColorPastelDefault} />
<Story of={IconBoxStories.ColorPastelPrimary} />
<Story of={IconBoxStories.ColorPastelInfo} />
<Story of={IconBoxStories.ColorPastelSuccess} />
<Story of={IconBoxStories.ColorPastelWarning} />
<Story of={IconBoxStories.ColorPastelDanger} />
<Story of={IconBoxStories.ColorPastelDark} />
<Story of={IconBoxStories.ColorPastelBlack} />
</div>

<br />
Expand All @@ -111,11 +117,14 @@ Icon boxes can have different sizes, colors and shapes. The following example sh
Icon boxes can have different sizes, colors and shapes. The following example shows colors for the outline flavor.

<div className="flex items-end gap-2 border border-muted-200 dark:border-muted-800 bg-white dark:bg-muted-900 p-6 rounded-sm">
<Story of={IconBoxStories.ColorOutlineDefault} />
<Story of={IconBoxStories.ColorOutlinePrimary} />
<Story of={IconBoxStories.ColorOutlineInfo} />
<Story of={IconBoxStories.ColorOutlineSuccess} />
<Story of={IconBoxStories.ColorOutlineWarning} />
<Story of={IconBoxStories.ColorOutlineDanger} />
<Story of={IconBoxStories.ColorOutlineDark} />
<Story of={IconBoxStories.ColorOutlineBlack} />
</div>

<br />
Expand Down
Loading

0 comments on commit 0dee570

Please sign in to comment.