Skip to content

Commit

Permalink
feat(SwitchThin): config redesign and implementation
Browse files Browse the repository at this point in the history
  • Loading branch information
driss-chelouati committed Dec 8, 2023
1 parent 14c313b commit 7c4f3cf
Show file tree
Hide file tree
Showing 3 changed files with 145 additions and 47 deletions.
2 changes: 1 addition & 1 deletion src/plugins/components/switch-ball/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ export default plugin.withOptions(
[`@apply bg-${config.handle.background.light} dark:bg-${config.handle.background.dark}`]:
{},
//Border
[`@apply border-${config.handle.border.light} dark:border-${config.handle.border.dark}`]:
[`@apply border border-${config.handle.border.light} dark:border-${config.handle.border.dark}`]:
{},
//Transition
[`@apply transition-${config.track.transition.property} duration-${config.track.transition.duration}`]:
Expand Down
78 changes: 65 additions & 13 deletions src/plugins/components/switch-thin/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -15,65 +15,117 @@ export default plugin.withOptions(
const config = theme(`shurikenUi.switchThin`) satisfies SwitchThinConfig

addComponents({
//Wrapper
[`.${prefix}switch-thin`]: {
[`@apply flex cursor-pointer items-center`]: {},

//Switch:outer
[`.${prefix}switch-thin-outer`]: {
[`@apply ${prefix}focus relative block h-4 rounded-${config.handle.rounded}`]:
[`@apply ${prefix}focus relative block h-4 ${config.track.rounded}`]:
{},
},
//Switch:handle
[`.${prefix}switch-thin-handle`]: {
[`@apply border-${config.handle.border} dark:border-${config.handle.borderDark} dark:bg-${config.handle.bgDark} absolute -start-1 top-1/2 flex h-${config.handle.size} w-${config.handle.size} -translate-y-1/2 items-center justify-center rounded-${config.handle.rounded} border bg-${config.handle.bg} shadow transition`]:
[`@apply absolute -start-1 top-1/2 -translate-y-1/2 flex items-center justify-center ${config.handle.rounded}`]:
{},
//Size
[`@apply h-${config.handle.size} w-${config.handle.size}`]: {},
//Background
[`@apply bg-${config.handle.background.light} dark:bg-${config.handle.background.dark}`]:
{},
//Border
[`@apply border border-${config.handle.border.light} dark:border-${config.handle.border.dark}`]:
{},
//Transition
[`@apply transition-${config.track.transition.property} duration-${config.track.transition.duration}`]:
{},
},
//Switch:track
[`.${prefix}switch-thin-track`]: {
[`@apply bg-${config.track.bg} dark:bg-${config.track.bgDark} block h-4 w-10 rounded-${config.track.rounded} shadow-inner transition-all duration-${config.track.duration}`]:
//Base
[`@apply block h-4 w-10 ${config.track.rounded}`]: {},
//Background
[`@apply bg-${config.track.background.light} dark:bg-${config.track.background.dark}`]:
{},
//Transition
[`@apply transition-${config.track.transition.property} duration-${config.track.transition.duration}`]:
{},
},
//Label:single
[`.${prefix}switch-thin-single-label`]: {
[`@apply text-${config.singleLabel.text} relative ms-3 cursor-pointer select-none font-${config.singleLabel.font} text-${config.singleLabel.textSize}`]:
//Base
[`@apply relative ms-3 cursor-pointer select-none`]: {},
//Font
[`@apply font-${config.label.single.font.family} text-${config.label.single.font.size}`]:
{},
//Color
[`@apply text-${config.label.single.font.color.light} dark:text-${config.label.single.font.color.dark}`]:
{},
},
//Label:dual
[`.${prefix}switch-thin-dual-label`]: {
[`@apply ms-3`]: {},

[`.${prefix}switch-thin-label`]: {
[`@apply font-${config.dualLabel.label.font} text-${config.dualLabel.label.text} block text-${config.dualLabel.label.textSize} font-${config.dualLabel.label.fontWeight} dark:text-${config.dualLabel.label.textDark}`]:
//Base
[`@apply block`]: {},
//Font
[`@apply font-${config.label.dual.label.font.family} text-${config.label.dual.label.font.size}`]:
{},
//Color
[`@apply text-${config.label.dual.label.font.color.light} dark:text-${config.label.dual.label.font.color.dark}`]:
{},
},
//Label:sublabel
[`.${prefix}switch-thin-sublabel`]: {
[`@apply text-${config.dualLabel.sublabel.text} block font-${config.dualLabel.sublabel.font} text-${config.dualLabel.sublabel.textSize}`]:
//Base
[`@apply block`]: {},
//Font
[`@apply font-${config.label.dual.sublabel.font.family} text-${config.label.dual.sublabel.font.size}`]:
{},
//Color
[`@apply text-${config.label.dual.sublabel.font.color.light} dark:text-${config.label.dual.sublabel.font.color.dark}`]:
{},
},
},
//Switch:input
[`.${prefix}switch-thin-input`]: {
[`@apply absolute z-20 h-${config.input.size} w-${config.input.size} cursor-pointer opacity-0`]:
{},

//Input:checked
[`&:checked ~ .${prefix}switch-thin-handle`]: {
[`@apply -translate-y-1/2 translate-x-full rtl:-translate-x-full`]:
{},
},
},
//color:primary
[`&.${prefix}switch-thin-primary .${prefix}switch-thin-input:checked ~ .${prefix}switch-thin-track`]:
{
[`@apply bg-${config.primary}`]: {},
[`@apply bg-${config.color.primary.light} dark:bg-${config.color.primary.dark}`]:
{},
},
//color:info
[`&.${prefix}switch-thin-info .${prefix}switch-thin-input:checked ~ .${prefix}switch-thin-track`]:
{
[`@apply bg-${config.info}`]: {},
[`@apply bg-${config.color.info.light} dark:bg-${config.color.info.dark}`]:
{},
},
//color:success
[`&.${prefix}switch-thin-success .${prefix}switch-thin-input:checked ~ .${prefix}switch-thin-track`]:
{
[`@apply bg-${config.success}`]: {},
[`@apply bg-${config.color.success.light} dark:bg-${config.color.success.dark}`]:
{},
},
//color:warning
[`&.${prefix}switch-thin-warning .${prefix}switch-thin-input:checked ~ .${prefix}switch-thin-track`]:
{
[`@apply bg-${config.warning}`]: {},
[`@apply bg-${config.color.warning.light} dark:bg-${config.color.warning.dark}`]:
{},
},
//color:danger
[`&.${prefix}switch-thin-danger .${prefix}switch-thin-input:checked ~ .${prefix}switch-thin-track`]:
{
[`@apply bg-${config.danger}`]: {},
[`@apply bg-${config.color.danger.light} dark:bg-${config.color.danger.dark}`]:
{},
},
},
})
Expand Down
112 changes: 79 additions & 33 deletions src/plugins/components/switch-thin/switch-thin.config.ts
Original file line number Diff line number Diff line change
@@ -1,47 +1,93 @@
export const key = 'switchThin' as const

export const defaultConfig = {
input: {
size: 'full',
},
handle: {
border: 'muted-300',
borderDark: 'muted-600',
bg: 'white',
bgDark: 'muted-700',
size: '6',
rounded: 'full',
rounded: 'rounded-full',
border: {
light: 'muted-300',
dark: 'muted-600',
},
background: {
light: 'white',
dark: 'muted-700',
},
transition: {
property: 'all',
duration: '300',
},
},
track: {
bg: 'muted-300',
bgDark: 'muted-600',
rounded: 'full',
duration: '300',
},
singleLabel: {
text: 'muted-400',
font: 'sans',
textSize: 'sm',
rounded: 'rounded-full',
background: {
light: 'muted-300',
dark: 'muted-600',
},
transition: {
property: 'all',
duration: '300',
},
},
dualLabel: {
label: {
font: 'sans',
fontWeight: 'medium',
text: 'muted-800',
textDark: 'white',
textSize: 'sm',
},
sublabel: {
text: 'muted-400',
textSize: 'xs',
font: 'sans',
label: {
single: {
font: {
family: 'sans',
size: 'sm',
color: {
light: 'muted-400',
dark: 'muted-400',
},
},
},
dual: {
label: {
font: {
family: 'sans',
weight: 'medium',
size: 'sm',
color: {
light: 'muted-800',
dark: 'white',
},
},
},
sublabel: {
font: {
family: 'sans',
size: 'xs',
color: {
light: 'muted-400',
dark: 'muted-400',
},
},
},
},
},
input: {
size: 'full',
color: {
primary: {
light: 'primary-400',
dark: 'primary-400',
},
info: {
light: 'info-400',
dark: 'info-400',
},
success: {
light: 'success-400',
dark: 'success-400',
},
warning: {
light: 'warning-400',
dark: 'warning-400',
},
danger: {
light: 'danger-400',
dark: 'danger-400',
},
},
primary: 'primary-400',
info: 'info-400',
success: 'success-400',
warning: 'warning-400',
danger: 'danger-400',
}

export type SwitchThinConfig = typeof defaultConfig
Expand Down

0 comments on commit 7c4f3cf

Please sign in to comment.