protokit-ui/dist/toggle/Toggle.css

A comprehensive React component library with hand-drawn design system. Features 30+ beautiful, accessible components including buttons, forms, navigation, data display, and layout components. Built with TypeScript and styled with CSS for modern React appl

.paper-toggle-wrapper {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-sm);
  cursor: pointer;
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  color: var(--ink-black);
  user-select: none;
}

.paper-toggle-wrapper:hover .paper-toggle:not(.paper-toggle--disabled) {
  transform: scale(1.02);
}

.paper-toggle__input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.paper-toggle {
  position: relative;
  transition: all var(--transition-normal);
}

.paper-toggle__track {
  width: 44px;
  height: 24px;
  border: 2px solid var(--ink-black);
  border-radius: 12px;
  background: var(--paper-white);
  position: relative;
  transition: all var(--transition-normal);
  display: flex;
  align-items: center;
  padding: 2px;
}

.paper-toggle__thumb {
  width: 16px;
  height: 16px;
  background: var(--ink-black);
  border-radius: 50%;
  transition: all var(--transition-normal);
  position: relative;
}

/* Checked state */
.paper-toggle--checked .paper-toggle__track {
  background: var(--ink-black);
  border-color: var(--ink-black);
}

.paper-toggle--checked .paper-toggle__thumb {
  background: var(--paper-white);
  transform: translateX(20px);
}

/* Disabled state */
.paper-toggle--disabled .paper-toggle__track {
  border-color: var(--pencil-gray);
  background: var(--paper-gray);
  cursor: not-allowed;
  opacity: 0.6;
}

.paper-toggle--disabled .paper-toggle__thumb {
  background: var(--pencil-gray);
}

.paper-toggle-wrapper:hover .paper-toggle--disabled {
  transform: none;
}

/* Label */
.paper-toggle__label {
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  color: var(--ink-black);
  line-height: 1.4;
}

.paper-toggle-wrapper:hover .paper-toggle__label {
  color: var(--ink-gray);
}

/* Focus state */
.paper-toggle__input:focus + .paper-toggle .paper-toggle__track {
  outline: none;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.2);
}

/* Hand-drawn border effect */
.paper-toggle__track::before {
  content: '';
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  bottom: -1px;
  border: 1px solid var(--ink-black);
  border-radius: 12px;
  opacity: 0.3;
  pointer-events: none;
  transition: opacity var(--transition-normal);
}

.paper-toggle:focus .paper-toggle__track::before {
  opacity: 0.1;
}

/* Animation for thumb */
.paper-toggle__thumb {
  animation: toggleThumb 0.2s ease-in-out;
}

@keyframes toggleThumb {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

/* Hover effects */
.paper-toggle-wrapper:hover .paper-toggle__track:not(.paper-toggle--disabled .paper-toggle__track) {
  border-color: var(--ink-gray);
}

.paper-toggle-wrapper:hover .paper-toggle__thumb:not(.paper-toggle--disabled .paper-toggle__thumb) {
  transform: scale(1.1);
}

.paper-toggle--checked .paper-toggle-wrapper:hover .paper-toggle__thumb {
  transform: translateX(20px) scale(1.1);
}