Skip to content

Commit

Permalink
feat(ThemeSwitch): config redesign and implementation
Browse files Browse the repository at this point in the history
  • Loading branch information
@driss-chelouati
driss-chelouati committed Dec 8, 2023
1 parent e2d4203 commit 0c1ffc8
Show file tree
Hide file tree
Showing 2 changed files with 137 additions and 23 deletions.
77 changes: 72 additions & 5 deletions src/plugins/components/theme-switch/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,46 +19,113 @@ export default plugin.withOptions(
const config = theme(`shurikenUi.${key}`) satisfies ThemeSwitchConfig

addComponents({
//Wrapper
[`.${prefix}theme-switch`]: {
[`@apply bg-${config.bg} dark:bg-${config.bgDark} relative block h-6 w-14 scale-[0.8] rounded-${config.rounded}`]:
[`@apply relative block h-6 w-14 scale-[0.8] rounded-${config.outer.rounded}`]:
{},

//Background
[`@apply bg-${config.outer.backgound.light} dark:bg-${config.outer.backgound.dark}`]:
{},
//Toggle:input
[`.${prefix}theme-switch-input`]: {
[`@apply absolute start-0 top-0 z-10 h-${config.input.size} w-${config.input.size} cursor-pointer opacity-0`]:
{},
},
//Toggle:inner
[`.${prefix}theme-switch-inner`]: {
[`@apply dark:bg-${config.inner.bgDark} border-${config.inner.border} dark:border-${config.inner.borderDark} absolute -start-1 -top-2 -ms-1 flex h-${config.inner.size} w-${config.inner.size} items-center justify-center rounded-${config.inner.rounded} border bg-${config.inner.bg} transition-all duration-${config.inner.duration} peer-checked:ms-[45%] peer-checked:rotate-[360deg]`]:
//Base
[`@apply absolute -start-1 -top-2 -ms-1 flex items-center justify-center peer-checked:ms-[45%] peer-checked:rotate-[360deg]`]:
{},
//Size
[`@apply h-${config.inner.size} w-${config.inner.size} rounded-${config.inner.rounded}`]:
{},
//Background
[`@apply bg-${config.inner.background.light} dark:bg-${config.inner.background.dark}`]:
{},
//Border
[`@apply border border-${config.inner.border.light} dark:border-${config.inner.border.dark}`]:
{},
//Transition
[`@apply transition-${config.inner.transition.property} duration-${config.inner.transition.duration}`]:
{},
},
//Icon:sun
[`.${prefix}sun`]: {
[`@apply pointer-events-none h-${config.sun.size} w-${config.sun.size} text-${config.sun.text} transition-all duration-${config.sun.duration}`]:
//Base
[`@apply pointer-events-none`]: {},
//Color
[`@apply text-${config.icon.sun.color} dark:text-${config.icon.sun.color}`]:
{},
//Size
[`@apply h-${config.icon.sun.size} w-${config.icon.sun.size}`]: {},
//Transition
[`@apply transition-${config.icon.transition.property} duration-${config.icon.transition.duration}`]:
{},
},
//Icon:moon
[`.${prefix}moon`]: {
[`@apply pointer-events-none h-${config.moon.size} w-${config.moon.size} text-${config.moon.text} transition-all duration-${config.moon.duration}`]:
//Base
[`@apply pointer-events-none`]: {},
//Color
[`@apply text-${config.icon.moon.color} dark:text-${config.icon.moon.color}`]:
{},
//Size
[`@apply h-${config.icon.moon.size} w-${config.icon.moon.size}`]:
{},
//Transition
[`@apply transition-${config.icon.transition.property} duration-${config.icon.transition.duration}`]:
{},
},
//Toggle:checked:inner
[`.${prefix}theme-switch-input:checked ~ .${prefix}theme-switch-inner`]:
{
[`@apply ms-[45%] rotate-[360deg]`]: {},
},
//Toggle:not-checked:sun
[`.${prefix}theme-switch-input:not(:checked) ~ .${prefix}theme-switch-inner .${prefix}sun`]:
{
[`@apply block`]: {},
},
//Toggle:checked:sun
[`.${prefix}theme-switch-input:checked ~ .${prefix}theme-switch-inner .${prefix}sun`]:
{
[`@apply hidden`]: {},
},
//Toggle:not-checked:moon
[`.${prefix}theme-switch-input:not(:checked) ~ .${prefix}theme-switch-inner .${prefix}moon`]:
{
[`@apply hidden`]: {},
},
//Toggle:checked:moon
[`.${prefix}theme-switch-input:checked ~ .${prefix}theme-switch-inner .${prefix}moon`]:
{
[`@apply block`]: {},
},
//Toogle:inverted
[`&.${prefix}theme-switch-inverted`]: {
[`@apply ring-offset-${config.inverted.enabled.ring.light} dark:ring-offset-${config.inverted.enabled.ring.dark}`]:
{},

[`.${prefix}theme-switch-inner`]: {
[`@apply bg-${config.inverted.enabled.inner.background.light} dark:bg-${config.inverted.enabled.inner.background.dark}`]:
{},
},
},
//Toggle:not-inverted
[`&.not(${prefix}theme-switch-inverted)`]: {
//Ring
[`@apply ring-offset-${config.inverted.disabled.ring.light} dark:ring-offset-${config.inverted.disabled.ring.dark}`]:
{},

[`.${prefix}theme-switch-inner`]: {
//Border
[`@apply border border-${config.inverted.disabled.inner.background.light} dark:border-${config.inverted.disabled.inner.background.dark}`]:
{},
//Background
[`@apply bg-${config.inverted.disabled.inner.background.light} dark:bg-${config.inverted.disabled.inner.background.dark}`]:
{},
},
},
},
})
}
Expand Down
83 changes: 65 additions & 18 deletions src/plugins/components/theme-switch/theme-switch.config.ts
View file
Original file line number Diff line number Diff line change
@@ -1,30 +1,77 @@
export const key = 'themeSwitch' as const

export const defaultConfig = {
bg: 'muted-200',
bgDark: 'muted-700',
rounded: 'full',
input: {
size: 'full',
outer: {
rounded: 'full',
backgound: {
light: 'muted-200',
dark: 'muted-700',
},
},
inner: {
bg: 'white',
bgDark: 'muted-900',
border: 'muted-200',
borderDark: 'muted-800',
size: '10',
rounded: 'full',
duration: '300',
background: {
light: 'white',
dark: 'muted-900',
},
border: {
light: 'muted-200',
dark: 'muted-800',
},
transition: {
property: 'all',
duration: '300',
},
},
input: {
size: 'full',
},
sun: {
size: '6',
text: 'yellow-400',
duration: '300',
icon: {
sun: {
size: '6',
color: 'yellow-400',
duration: '300',
},
moon: {
size: '6',
color: 'yellow-400',
duration: '300',
},
transition: {
property: 'all',
duration: '300',
},
},
moon: {
size: '6',
text: 'yellow-400',
duration: '300',
inverted: {
enabled: {
ring: {
light: 'muted-500',
dark: 'muted-400',
},
inner: {
background: {
light: 'primary-700',
dark: 'primary-700',
},
},
},
disabled: {
ring: {
light: 'muted-500',
dark: 'muted-900',
},
inner: {
background: {
light: 'white',
dark: 'muted-800',
},
border: {
light: 'muted-300',
dark: 'muted-700',
},
},
},
},
}

Expand Down

0 comments on commit 0c1ffc8

Please sign in to comment.