Skip to content

Commit

Permalink
feat(ThemeToggle): 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 0c1ffc8 commit 071d590
Show file tree
Hide file tree
Showing 2 changed files with 121 additions and 38 deletions.
69 changes: 60 additions & 9 deletions src/plugins/components/theme-toggle/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,55 +19,106 @@ export default plugin.withOptions(
const config = theme(`shurikenUi.${key}`) satisfies ThemeToggleConfig

addComponents({
//Wrapper
[`.${prefix}theme-toggle`]: {
[`@apply ${prefix}focus relative block h-${config.size} w-${config.size} shrink-0 overflow-hidden rounded-${config.rounded} transition-all duration-${config.duration} focus-visible:outline-2 dark:ring-offset-${config.ringDark}`]:
//Base
[`@apply ${prefix}focus relative block shrink-0 overflow-hidden rounded-${config.outer.rounded}`]:
{},

//Size
[`@apply h-${config.outer.size} w-${config.outer.size}`]: {},
//Ring
[`@apply focus-visible:outline-2 ring-2 ring-transparent ring-offset-${config.ring.light} dark:ring-offset-${config.ring.dark}`]:
{},
//Transition
[`@apply transition-${config.transition.property} duration-${config.transition.duration}`]:
{},
//Toggle:inner
[`.${prefix}theme-toggle-inner`]: {
[`@apply relative block h-${config.inner.size} w-${config.inner.size} rounded-${config.inner.rounded} bg-${config.inner.bg} dark:bg-${config.inner.bgDark} border border-${config.inner.border} dark:border-${config.inner.borderDark}`]:
[`@apply relative block rounded-${config.inner.rounded}`]: {},
//Size
[`@apply h-${config.inner.size} w-${config.inner.size}`]: {},
//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}`]:
{},
},
//Toggle:input
[`.${prefix}theme-toggle-input`]: {
[`@apply absolute start-0 top-0 z-[2] h-${config.input.size} w-${config.input.size} cursor-pointer opacity-0`]:
{},
},
//Icon:sun
[`.${prefix}sun`]: {
[`@apply pointer-events-none absolute start-1/2 top-1/2 block h-${config.sun.size} w-${config.sun.size} text-${config.sun.text} transition-all duration-${config.sun.duration} -translate-y-1/2 translate-x-[-50%] rtl:translate-x-[50%]`]:
//Base
[`@apply pointer-events-none absolute start-1/2 top-1/2 block -translate-y-1/2 translate-x-[-50%] rtl:translate-x-[50%]`]:
{},
//Size
[`@apply h-${config.icon.sun.size} w-${config.icon.sun.size}`]: {},
//Color
[`@apply text-${config.icon.sun.color} dark:text-${config.icon.sun.color}`]:
{},
//Transition
[`@apply transition-${config.icon.transition.property} duration-${config.icon.transition.duration}`]:
{},
},
//Icon:moon
[`.${prefix}moon`]: {
[`@apply pointer-events-none absolute start-1/2 top-1/2 block h-${config.moon.size} w-${config.moon.size} text-${config.moon.text} transition-all duration-${config.moon.duration} translate-x-[-50%] rtl:translate-x-[45%]`]:
[`@apply pointer-events-none absolute start-1/2 top-1/2 block translate-x-[-50%] rtl:translate-x-[45%]`]:
{},
//Size
[`@apply h-${config.icon.moon.size} w-${config.icon.moon.size}`]:
{},
//Color
[`@apply text-${config.icon.moon.color} dark:text-${config.icon.moon.color}`]:
{},
//Transition
[`@apply transition-${config.icon.transition.property} duration-${config.icon.transition.duration}`]:
{},
},
//Toggle:not-checked:sun
[`.${prefix}theme-toggle-input:not(:checked) ~ .${prefix}theme-toggle-inner .${prefix}sun`]:
{
[`@apply -translate-y-1/2 opacity-100`]: {},
},
//Toggle:checked:sun
[`.${prefix}theme-toggle-input:checked ~ .${prefix}theme-toggle-inner .${prefix}sun`]:
{
[`@apply translate-y-[-150%] opacity-0`]: {},
},
//Toggle:checked:moon
[`.${prefix}theme-toggle-input:not(:checked) ~ .${prefix}theme-toggle-inner .${prefix}moon`]:
{
[`@apply translate-y-[-150%] opacity-0`]: {},
},
//Toggle:not-checked:moon
[`.${prefix}theme-toggle-input:checked ~ .${prefix}theme-toggle-inner .${prefix}moon`]:
{
[`@apply -translate-y-1/2 opacity-100`]: {},
},
//Toggle:inverted
[`&.${prefix}theme-toggle-inverted`]: {
[`@apply ring-offset-${config.inverted.ring} dark:ring-offset-${config.inverted.ringDark}`]:
[`@apply ring-offset-${config.inverted.enabled.ring.light} dark:ring-offset-${config.inverted.enabled.ring.dark}`]:
{},

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

[`.${prefix}toggle-inner`]: {
[`@apply bg-${config.notInverted.inner.bg} dark:bg-${config.notInverted.inner.bgDark} border border-${config.notInverted.inner.border} dark:border-${config.notInverted.inner.borderDark}`]:
//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
90 changes: 61 additions & 29 deletions src/plugins/components/theme-toggle/theme-toggle.config.ts
View file
Original file line number Diff line number Diff line change
@@ -1,47 +1,79 @@
export const key = 'themeToggle' as const

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

export type ThemeToggleConfig = typeof defaultConfig
Expand Down

0 comments on commit 071d590

Please sign in to comment.