Skip to content

Commit

Permalink
feat(ButtonAction): implement new config
Browse files Browse the repository at this point in the history
  • Loading branch information
@driss-chelouati
driss-chelouati committed Dec 5, 2023
1 parent 8ca4e38 commit cd9bf16
Show file tree
Hide file tree
Showing 2 changed files with 279 additions and 141 deletions.
284 changes: 155 additions & 129 deletions src/plugins/components/button-action/button-action.config.ts
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
export const key = 'buttonAction' as const

export const config = {
export const defaultConfig = {
rounded: {
none: 'none',
sm: 'sm',
md: 'md',
lg: 'lg',
sm: 'md',
md: 'lg',
lg: 'xl',
full: 'full',
},
text: {
Expand Down Expand Up @@ -68,6 +68,32 @@ export const config = {
dark: 'muted-700/40',
},
},
primary: {
font: {
color: {
light: 'white',
dark: 'white',
},
},
background: {
base: {
light: 'primary-500',
dark: 'primary-500',
},
hover: {
light: 'primary-400',
dark: 'primary-400',
},
active: {
light: 'primary-500',
dark: 'primary-500',
},
},
border: {
light: 'primary-500',
dark: 'primary-500',
},
},
info: {
font: {
color: {
Expand Down Expand Up @@ -179,131 +205,131 @@ export const config = {
},
}

export const defaultConfig = {
font: 'normal',
text: 'sm',
duration: '300',
rounded: {
smooth: 'md',
curved: 'lg',
full: 'full',
},
default: {
text: 'muted-700',
textDark: 'white',
bg: 'white',
bgDark: 'muted-700',
bgHoverEnabled: 'muted-50',
bgHoverEnabledDark: 'muted-600',
bgActiveEnabled: 'muted-100',
bgActiveEnabledDark: 'muted-700/70',
border: 'muted-300',
borderDark: 'muted-600',
},
muted: {
text: 'muted-500',
textDark: 'white',
bg: 'muted-200',
bgDark: 'muted-700/40',
bgHoverEnabled: 'muted-100',
bgHoverEnabledDark: 'muted-700/60',
bgActiveEnabled: 'muted-200/50',
bgActiveEnabledDark: 'muted-800',
border: 'muted-200',
borderDark: 'muted-700/40',
borderActiveEnabledDark: 'muted-800',
},
primary: {
// text: 'primary-50',
text: 'white',
border: 'primary-500',
borderDark: 'primary-500',
bg: 'primary-500',
bdDark: 'primary-500',
bgHoverEnabled: 'primary-400',
bgHoverEnabledDark: 'primary-400',
bgFocusVisible: 'primary-500',
bgFocusVisibleDark: 'primary-500',
bgActiveEnabled: 'primary-500',
bgActiveEnabledDark: 'primary-500',
focusVisible: 'primary-400/70',
focusVisibleDark: 'primary-400',
focusWithin: 'primary-400/70',
focusWithinDark: 'primary-400',
},
info: {
// text: 'info-50',
text: 'white',
border: 'info-500',
borderDark: 'info-500',
bg: 'info-500',
bdDark: 'info-500',
bgHoverEnabled: 'info-400',
bgHoverEnabledDark: 'info-400',
bgFocusVisible: 'info-500',
bgFocusVisibleDark: 'info-500',
bgActiveEnabled: 'info-500',
bgActiveEnabledDark: 'info-500',
focusVisible: 'info-400/70',
focusVisibleDark: 'info-400',
focusWithin: 'info-400/70',
focusWithinDark: 'info-400',
},
success: {
// text: 'success-50',
text: 'white',
border: 'success-500',
borderDark: 'success-500',
bg: 'success-500',
bdDark: 'success-500',
bgHoverEnabled: 'success-400',
bgHoverEnabledDark: 'success-400',
bgFocusVisible: 'success-500',
bgFocusVisibleDark: 'success-500',
bgActiveEnabled: 'success-500',
bgActiveEnabledDark: 'success-500',
focusVisible: 'success-400/70',
focusVisibleDark: 'success-400',
focusWithin: 'success-400/70',
focusWithinDark: 'success-400',
},
warning: {
// text: 'warning-50',
text: 'white',
border: 'warning-500',
borderDark: 'warning-500',
bg: 'warning-500',
bdDark: 'warning-500',
bgHoverEnabled: 'warning-400',
bgHoverEnabledDark: 'warning-400',
bgFocusVisible: 'warning-500',
bgFocusVisibleDark: 'warning-500',
bgActiveEnabled: 'warning-500',
bgActiveEnabledDark: 'warning-500',
focusVisible: 'warning-400/70',
focusVisibleDark: 'warning-400',
focusWithin: 'warning-400/70',
focusWithinDark: 'warning-400',
},
danger: {
// text: 'danger-50',
text: 'white',
border: 'danger-500',
borderDark: 'danger-500',
bg: 'danger-500',
bdDark: 'danger-500',
bgHoverEnabled: 'danger-400',
bgHoverEnabledDark: 'danger-400',
bgFocusVisible: 'danger-500',
bgFocusVisibleDark: 'danger-500',
bgActiveEnabled: 'danger-500',
bgActiveEnabledDark: 'danger-500',
focusVisible: 'danger-400/70',
focusVisibleDark: 'danger-400',
focusWithin: 'danger-400/70',
focusWithinDark: 'danger-400',
},
}
// export const defaultConfig = {
// font: 'normal',
// text: 'sm',
// duration: '300',
// rounded: {
// smooth: 'md',
// curved: 'lg',
// full: 'full',
// },
// default: {
// text: 'muted-700',
// textDark: 'white',
// bg: 'white',
// bgDark: 'muted-700',
// bgHoverEnabled: 'muted-50',
// bgHoverEnabledDark: 'muted-600',
// bgActiveEnabled: 'muted-100',
// bgActiveEnabledDark: 'muted-700/70',
// border: 'muted-300',
// borderDark: 'muted-600',
// },
// muted: {
// text: 'muted-500',
// textDark: 'white',
// bg: 'muted-200',
// bgDark: 'muted-700/40',
// bgHoverEnabled: 'muted-100',
// bgHoverEnabledDark: 'muted-700/60',
// bgActiveEnabled: 'muted-200/50',
// bgActiveEnabledDark: 'muted-800',
// border: 'muted-200',
// borderDark: 'muted-700/40',
// borderActiveEnabledDark: 'muted-800',
// },
// primary: {
// // text: 'primary-50',
// text: 'white',
// border: 'primary-500',
// borderDark: 'primary-500',
// bg: 'primary-500',
// bdDark: 'primary-500',
// bgHoverEnabled: 'primary-400',
// bgHoverEnabledDark: 'primary-400',
// bgFocusVisible: 'primary-500',
// bgFocusVisibleDark: 'primary-500',
// bgActiveEnabled: 'primary-500',
// bgActiveEnabledDark: 'primary-500',
// focusVisible: 'primary-400/70',
// focusVisibleDark: 'primary-400',
// focusWithin: 'primary-400/70',
// focusWithinDark: 'primary-400',
// },
// info: {
// // text: 'info-50',
// text: 'white',
// border: 'info-500',
// borderDark: 'info-500',
// bg: 'info-500',
// bdDark: 'info-500',
// bgHoverEnabled: 'info-400',
// bgHoverEnabledDark: 'info-400',
// bgFocusVisible: 'info-500',
// bgFocusVisibleDark: 'info-500',
// bgActiveEnabled: 'info-500',
// bgActiveEnabledDark: 'info-500',
// focusVisible: 'info-400/70',
// focusVisibleDark: 'info-400',
// focusWithin: 'info-400/70',
// focusWithinDark: 'info-400',
// },
// success: {
// // text: 'success-50',
// text: 'white',
// border: 'success-500',
// borderDark: 'success-500',
// bg: 'success-500',
// bdDark: 'success-500',
// bgHoverEnabled: 'success-400',
// bgHoverEnabledDark: 'success-400',
// bgFocusVisible: 'success-500',
// bgFocusVisibleDark: 'success-500',
// bgActiveEnabled: 'success-500',
// bgActiveEnabledDark: 'success-500',
// focusVisible: 'success-400/70',
// focusVisibleDark: 'success-400',
// focusWithin: 'success-400/70',
// focusWithinDark: 'success-400',
// },
// warning: {
// // text: 'warning-50',
// text: 'white',
// border: 'warning-500',
// borderDark: 'warning-500',
// bg: 'warning-500',
// bdDark: 'warning-500',
// bgHoverEnabled: 'warning-400',
// bgHoverEnabledDark: 'warning-400',
// bgFocusVisible: 'warning-500',
// bgFocusVisibleDark: 'warning-500',
// bgActiveEnabled: 'warning-500',
// bgActiveEnabledDark: 'warning-500',
// focusVisible: 'warning-400/70',
// focusVisibleDark: 'warning-400',
// focusWithin: 'warning-400/70',
// focusWithinDark: 'warning-400',
// },
// danger: {
// // text: 'danger-50',
// text: 'white',
// border: 'danger-500',
// borderDark: 'danger-500',
// bg: 'danger-500',
// bdDark: 'danger-500',
// bgHoverEnabled: 'danger-400',
// bgHoverEnabledDark: 'danger-400',
// bgFocusVisible: 'danger-500',
// bgFocusVisibleDark: 'danger-500',
// bgActiveEnabled: 'danger-500',
// bgActiveEnabledDark: 'danger-500',
// focusVisible: 'danger-400/70',
// focusVisibleDark: 'danger-400',
// focusWithin: 'danger-400/70',
// focusWithinDark: 'danger-400',
// },
// }

export type ButtonActionConfig = typeof defaultConfig
export interface ButtonActionPluginConfig {
Expand Down
Loading

0 comments on commit cd9bf16

Please sign in to comment.