Rename AppCheckbox to AppSwitch with glass toggle style

src/components/app/AppSwitch.tsx

@@ -1,8 +1,7 @@
-import { Check } from '@lucide/vue'
 import { defineComponent, computed } from 'vue'
 
 export default defineComponent({
-  name: 'AppCheckbox',
+  name: 'AppSwitch',
 
   props: {
     modelValue: { type: Boolean, default: false },
@@ -14,17 +13,17 @@ export default defineComponent({
 
   setup(props, { emit }) {
     const classes = computed(() => ({
-      checkbox: true,
-      'checkbox--active': props.modelValue
+      switch: true,
+      'switch--active': props.modelValue
     }))
 
     const changeState = () => emit('update:modelValue', !props.modelValue)
 
     return () => (
       <label class={classes.value}>
-        <div class="checkbox-control">
-          <div class="checkbox-control-box">
-            <Check />
+        <div class="switch-control">
+          <div class="switch-track">
+            <span class="switch-knob" />
           </div>
           <input
             type="checkbox"

src/components/base/settings/SettingsCustom.tsx

@@ -3,7 +3,7 @@ import { useI18n } from 'vue-i18n'
 import { useAppStore } from '@/store/app'
 import AppSlider from '@/components/app/AppSlider'
 import AppButton from '@/components/app/AppButton'
-import AppCheckbox from '@/components/app/AppCheckbox'
+import AppSwitch from '@/components/app/AppSwitch'
 import AppSelector from '@/components/app/AppSelector'
 import AppColorSelector from '@/components/app/AppColorSelector'
 import AppPaletteSelector from '@/components/app/AppPaletteSelector'
@@ -77,7 +77,7 @@ export default defineComponent({
     const buildCheckbox = (input: AppInputThemeGeneral) => {
       const { label, value } = input
       return (
-        <AppCheckbox
+        <AppSwitch
           label={t(label)}
           modelValue={value as boolean}
           onUpdate:modelValue={(v: boolean) => {

src/components/base/settings/general/SettingsCheckboxes.tsx

@@ -1,7 +1,7 @@
 import { defineComponent } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useAppStore } from '@/store/app'
-import AppCheckbox from '@/components/app/AppCheckbox'
+import AppSwitch from '@/components/app/AppSwitch'
 
 export default defineComponent({
   name: 'SettingsCheckboxes',
@@ -10,7 +10,7 @@ export default defineComponent({
     const { t } = useI18n()
 
     const buildCheckbox = (name: string) => (
-      <AppCheckbox
+      <AppSwitch
         label={t(`settings.${name}`)}
         modelValue={appStore.bodyClass[name]}
         onUpdate:modelValue={(value: boolean) => {
@@ -26,7 +26,7 @@ export default defineComponent({
         {buildCheckbox('show-framerate')}
         {buildCheckbox('no-transition')}
         {buildCheckbox('only-ui')}
-        <AppCheckbox
+        <AppSwitch
           inline={true}
           label={t('settings.generate-random-theme')}
           modelValue={appStore.generateRandomThemes}

src/style/components/checkbox.styl

@@ -1,47 +0,0 @@
-.checkbox
-  display flex
-  align-items flex-end
-  &:hover
-    .checkbox-control-box
-      border-color rgba(255, 255, 255, .8)
-
-.checkbox--active
-  .checkbox-control-box
-    border-color rgba(255, 255, 255, .8)
-    svg 
-      opacity 1
-
-.checkbox-control
-  margin 4px
-  cursor pointer
-  margin-right 8px
-  position relative
-  input
-    position absolute
-    opacity 0
-    width 100%
-    height 100%
-    cursor pointer
-    user-select none
-
-.checkbox-control-box
-  width 18px
-  height 18px
-  border-radius 4px
-  border 1px solid rgba(255, 255, 255, .6)
-  display flex
-  color var(--color-active)
-  align-items center
-  justify-content center
-  transition .2s
-  svg
-    opacity 0
-    transition opacity .2s
-    stroke-width 3px
-    transition opacity 0.2s
-    transform scale(0.6)
-
-.input-label
-  cursor pointer
-  line-height 1rem
-  margin-bottom 3px

src/style/components/index.styl

@@ -7,7 +7,7 @@
 @import './palette.styl'
 @import './shutdown.styl'
 @import './selector.styl'
-@import './checkbox.styl'
+@import './switch.styl'
 @import './settings/index.styl'
 @import './color-selector.styl'
 @import './background.styl'

src/style/components/switch.styl

@@ -0,0 +1,55 @@
+.switch
+  display flex
+  align-items flex-end
+  &:hover
+    .switch-track
+      border-color var(--glass-border-active)
+
+.switch--active
+  .switch-track
+    background var(--glass-bg-active)
+    border-color var(--glass-border-active)
+  .switch-knob
+    transform translateX(16px)
+    background #fff
+    box-shadow 0 1px 3px rgba(0, 0, 0, .35), inset 0 1px 1px rgba(255, 255, 255, .8), var(--glass-glow)
+
+.switch-control
+  margin 4px
+  cursor pointer
+  margin-right 8px
+  position relative
+  input
+    position absolute
+    opacity 0
+    width 100%
+    height 100%
+    cursor pointer
+    user-select none
+
+.switch-track
+  width 36px
+  height 20px
+  padding 2px
+  border-radius 999px
+  background var(--glass-bg)
+  border 1px solid var(--glass-border)
+  backdrop-filter var(--glass-blur)
+  -webkit-backdrop-filter var(--glass-blur)
+  box-shadow inset 0 1px 3px rgba(0, 0, 0, .2), inset 0 1px 0 rgba(255, 255, 255, .08)
+  display flex
+  align-items center
+  transition background .25s, border-color .25s
+
+.switch-knob
+  width 16px
+  height 16px
+  border-radius 50%
+  background linear-gradient(180deg, #fff, #dcdcdc)
+  box-shadow 0 1px 3px rgba(0, 0, 0, .35), inset 0 1px 1px rgba(255, 255, 255, .8)
+  transition transform .25s cubic-bezier(.4, 0, .2, 1), background .25s
+
+.input-label
+  cursor pointer
+  line-height 1rem
+  margin-bottom 3px