Skip to content

Commit

Permalink
feat(Button): add new colors and contrast colors, todo: contrast vari…
Browse files Browse the repository at this point in the history 
…ants
  • Loading branch information
@driss-chelouati
driss-chelouati committed Feb 18, 2024
1 parent 8e97e82 commit ff0c853
Show file tree
Hide file tree
Showing 6 changed files with 709 additions and 7 deletions.
258 changes: 258 additions & 0 deletions src/plugins/components/button/button.config.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -107,6 +107,41 @@ export const defaultConfig = {
dark: 'muted-800/20',
},
},
defaultContrast: {
text: {
light: 'muted-800',
dark: 'muted-100',
},
background: {
light: {
base: 'white',
hover: 'muted-50',
active: 'white',
focus: 'muted-50',
},
dark: {
base: 'muted-950',
hover: 'muted-900',
active: 'muted-950',
focus: 'muted-900',
},
},
border: {
light: {
base: 'muted-300',
hover: 'muted-200',
},
dark: {
base: 'muted-800',
hover: 'muted-700',
},
},
shadow: {
size: 'xl',
light: 'muted-500/30',
dark: 'muted-800/20',
},
},
muted: {
text: {
light: 'muted-500',
Expand Down Expand Up @@ -142,6 +177,41 @@ export const defaultConfig = {
dark: 'muted-800/20',
},
},
mutedContrast: {
text: {
light: 'muted-500',
dark: 'muted-100',
},
background: {
light: {
base: 'muted-200',
hover: 'muted-100',
active: 'muted-200',
focus: 'muted-100',
},
dark: {
base: 'muted-950',
hover: 'muted-900',
active: 'muted-950',
focus: 'muted-900',
},
},
border: {
light: {
base: 'muted-200',
hover: 'muted-100',
},
dark: {
base: 'muted-800',
hover: 'muted-700',
},
},
shadow: {
size: 'xl',
light: 'muted-500/30',
dark: 'muted-800/20',
},
},
light: {
text: {
light: 'muted-500',
Expand Down Expand Up @@ -177,6 +247,76 @@ export const defaultConfig = {
dark: 'muted-800/20',
},
},
dark: {
text: {
light: 'muted-100',
dark: 'muted-900',
},
background: {
light: {
base: 'muted-900',
hover: 'muted-800',
active: 'muted-900',
focus: 'muted-800',
},
dark: {
base: 'muted-100',
hover: 'muted-50',
active: 'muted-100',
focus: 'muted-50',
},
},
border: {
light: {
base: 'muted-900',
hover: 'muted-800',
},
dark: {
base: 'muted-100',
hover: 'muted-50',
},
},
shadow: {
size: 'xl',
light: 'muted-500/30',
dark: 'muted-800/20',
},
},
black: {
text: {
light: 'white',
dark: 'black',
},
background: {
light: {
base: 'black',
hover: 'black/90',
active: 'black',
focus: 'black/90',
},
dark: {
base: 'white',
hover: 'white/90',
active: 'white',
focus: 'white/90',
},
},
border: {
light: {
base: 'black',
hover: 'black/90',
},
dark: {
base: 'white',
hover: 'white/90',
},
},
shadow: {
size: 'xl',
light: 'muted-500/30',
dark: 'muted-800/20',
},
},
primary: {
text: {
light: 'primary-invert',
Expand Down Expand Up @@ -364,6 +504,46 @@ export const defaultConfig = {
},
},
},
dark: {
text: {
light: 'muted-800',
dark: 'muted-100',
},
background: {
light: {
base: 'muted-500/10',
hover: 'muted-500/20',
active: 'muted-500/10',
focus: 'muted-500/20',
},
dark: {
base: 'muted-500/10',
hover: 'muted-500/20',
active: 'muted-500/10',
focus: 'muted-500/20',
},
},
},
black: {
text: {
light: 'black',
dark: 'white',
},
background: {
light: {
base: 'black/10',
hover: 'black/20',
active: 'black/10',
focus: 'black/20',
},
dark: {
base: 'black/10',
hover: 'black/20',
active: 'black/10',
focus: 'black/20',
},
},
},
primary: {
text: {
light: 'primary-500',
Expand Down Expand Up @@ -583,6 +763,84 @@ export const defaultConfig = {
dark: 'muted-800/20',
},
},
dark: {
text: {
light: {
base: 'muted-900',
hover: 'white',
active: 'muted-800',
focus: 'white',
},
dark: {
base: 'white',
hover: 'muted-900',
active: 'muted-800',
focus: 'muted-900',
},
},
background: {
light: {
base: 'transparent',
hover: 'muted-900',
active: 'muted-800',
focus: 'muted-800',
},
dark: {
base: 'transparent',
hover: 'muted-100',
active: 'muted-50',
focus: 'muted-50',
},
},
border: {
light: 'muted-900',
dark: 'white',
},
shadow: {
size: 'xl',
light: 'muted-500/50',
dark: 'muted-800/20',
},
},
black: {
text: {
light: {
base: 'black',
hover: 'white',
active: 'black/90',
focus: 'white',
},
dark: {
base: 'white',
hover: 'black',
active: 'black/90',
focus: 'black',
},
},
background: {
light: {
base: 'transparent',
hover: 'black',
active: 'black/90',
focus: 'black/90',
},
dark: {
base: 'transparent',
hover: 'white',
active: 'white/90',
focus: 'white/90',
},
},
border: {
light: 'black',
dark: 'white',
},
shadow: {
size: 'xl',
light: 'muted-500/50',
dark: 'muted-800/20',
},
},
primary: {
text: {
light: {
Expand Down
13 changes: 13 additions & 0 deletions src/plugins/components/button/button.docs.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -70,6 +70,9 @@ Variantss represent the visual styles applied to a button. Below are examples of
<Story of={ButtonStories.SolidSuccess} />
<Story of={ButtonStories.SolidWarning} />
<Story of={ButtonStories.SolidDanger} />
<Story of={ButtonStories.SolidLight} />
<Story of={ButtonStories.SolidDark} />
<Story of={ButtonStories.SolidBlack} />
</div>

<br />
Expand All @@ -79,11 +82,16 @@ Variantss represent the visual styles applied to a button. Below are examples of
Variantss represent the visual styles applied to a button. Below are examples of the pastel flavor.

<div className="flex gap-2 bg-slate-100 dark:bg-slate-900 p-6 rounded-sm">
<Story of={ButtonStories.PastelDefault} />
<Story of={ButtonStories.PastelMuted} />
<Story of={ButtonStories.PastelPrimary} />
<Story of={ButtonStories.PastelInfo} />
<Story of={ButtonStories.PastelSuccess} />
<Story of={ButtonStories.PastelWarning} />
<Story of={ButtonStories.PastelDanger} />
<Story of={ButtonStories.PastelLight} />
<Story of={ButtonStories.PastelDark} />
<Story of={ButtonStories.PastelBlack} />
</div>

<br />
Expand All @@ -93,11 +101,16 @@ Variantss represent the visual styles applied to a button. Below are examples of
Variantss represent the visual styles applied to a button. Below are examples of the outline flavor.

<div className="flex gap-2 bg-slate-100 dark:bg-slate-900 p-6 rounded-sm">
<Story of={ButtonStories.OutlineDefault} />
<Story of={ButtonStories.OutlineMuted} />
<Story of={ButtonStories.OutlinePrimary} />
<Story of={ButtonStories.OutlineInfo} />
<Story of={ButtonStories.OutlineSuccess} />
<Story of={ButtonStories.OutlineWarning} />
<Story of={ButtonStories.OutlineDanger} />
<Story of={ButtonStories.OutlineLight} />
<Story of={ButtonStories.OutlineDark} />
<Story of={ButtonStories.OutlineBlack} />
</div>

<br />
Expand Down
Loading

0 comments on commit ff0c853

Please sign in to comment.