💄 (switch) change switch lib

src/styles/app.scss

@@ -1,7 +1,7 @@
 @import url('https://fonts.googleapis.com/css2?family=Fira+Mono&display=swap');
-@import '~pretty-checkbox/src/pretty-checkbox';
 
 @import './variables';
+@import './plume';
 
 body {
   text-align: center;

src/styles/plume.scss

@@ -0,0 +1,172 @@
+:root {
+  --pm-placeholder-color: #999;
+  --pm-form-field-margin-bottom: 32px;
+  --pm-form-caption-font-size: 0.8em;
+  --pm-fieldset-border-style: solid;
+  --pm-fieldset-border-width: 1px;
+  --pm-fieldset-border-color: rgba(127, 127, 127, 0.4);
+  --pm-label-font-size: 1em;
+  --pm-label-font-weight: 600;
+  --pm-label-margin-bottom: 24px;
+  --pm-input-height: 40px;
+  --pm-input-box-shadow: none;
+  --pm-input-padding: 8px 16px;
+  --pm-input-border-style: solid;
+  --pm-input-border-radius: none;
+  --pm-input-border-width: 0 0 2px 0;
+  --pm-input-border-color: rgba(127, 127, 127, 0.4);
+  --pm-input-background-color: rgba(200, 200, 200, 0.1);
+  --pm-input-switch-size: 24px;
+  --pm-input-switch-border-width: 2px;
+  --pm-textarea-padding: 16px;
+  --pm-textarea-min-height: 100px;
+}
+.plume fieldset {
+  padding: 12px;
+  border-style: var(--pm-fieldset-border-style);
+  border-width: var(--pm-fieldset-border-width);
+  border-color: var(--pm-fieldset-border-color);
+  border-radius: var(--pm-input-border-radius);
+}
+.plume fieldset legend {
+  padding: 0 10px;
+  color: var(--pm-primary-color);
+}
+.plume .pm-field,
+.plume fieldset {
+  width: 100%;
+  display: block;
+  margin-bottom: var(--pm-form-field-margin-bottom);
+}
+.plume label,
+.plume legend {
+  display: block;
+  color: var(--pm-app-text-color);
+  font-weight: var(--pm-label-font-weight);
+  margin-bottom: var(--pm-label-margin-bottom);
+}
+.plume label[data-pm-holder],
+.plume legend[data-pm-holder] {
+  font-weight: 300;
+  margin: 0 4px;
+  align-items: center;
+  display: inline-flex;
+  height: var(--pm-input-height);
+}
+.plume label.pm-required::after,
+.plume legend.pm-required::after {
+  content: '*';
+  margin-left: 8px;
+  color: var(--pm-color-error);
+}
+.plume
+  input:not([type='range']):not([type='button']):not([type='reset']):not([type='submit']):not([type='checkbox']):not([type='radio']),
+.plume textarea {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+}
+.plume
+  input:not([type='range']):not([type='button']):not([type='reset']):not([type='submit']):not([type='checkbox']):not([type='radio']),
+.plume select,
+.plume textarea {
+  width: 100%;
+  display: block;
+  box-sizing: border-box;
+  height: var(--pm-input-height);
+  padding: var(--pm-input-padding);
+  box-shadow: var(--pm-input-box-shadow);
+  border-style: var(--pm-input-border-style);
+  border-color: var(--pm-input-border-color);
+  border-width: var(--pm-input-border-width);
+  border-radius: var(--pm-input-border-radius);
+  background-color: var(--pm-input-background-color);
+}
+.plume input[type='checkbox'],
+.plume input[type='radio'] {
+  margin: 0 8px;
+  cursor: pointer;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  position: relative;
+  display: inline-block;
+  width: var(--pm-input-switch-size);
+  height: var(--pm-input-switch-size);
+  border: solid var(--pm-input-switch-border-width);
+  border-color: var(--pm-input-border-color);
+}
+.plume input[type='checkbox']::before {
+  top: 2px;
+  left: 2px;
+  content: '';
+  opacity: 0;
+  visibility: hidden;
+  position: absolute;
+  background-color: var(--pm-primary-color);
+  height: calc(100% - 4px);
+  width: calc(100% - 4px);
+}
+.plume input[type='checkbox']:checked,
+.plume input[type='radio']:checked {
+  border-color: var(--pm-primary-color);
+}
+.plume input[type='checkbox']:checked::before,
+.plume input[type='radio']:checked::before {
+  opacity: 1;
+  visibility: visible;
+}
+.plume input[type='radio'],
+.plume input[type='radio']:checked::before {
+  border-radius: 100%;
+}
+.plume input[type='checkbox'][data-pm-checkbox-toggle] {
+  border-radius: 25px;
+  height: var(--pm-input-switch-size);
+  cursor: pointer;
+  width: calc(var(--pm-input-switch-size) * 2);
+}
+.plume input[type='checkbox'][data-pm-checkbox-toggle]::before {
+  top: 2px;
+  left: 2px;
+  content: '';
+  opacity: 1;
+  visibility: visible;
+  position: absolute;
+  border-radius: 100%;
+  height: calc(100% - 4px);
+  width: calc(
+    var(--pm-input-switch-size) - (var(--pm-input-switch-border-width) * 2) -
+      4px
+  );
+  background-color: var(--pm-input-border-color);
+}
+.plume input[type='checkbox'][data-pm-checkbox-toggle]:checked {
+  border-color: var(--pm-input-border-color);
+}
+.plume input[type='checkbox'][data-pm-checkbox-toggle]:checked::before {
+  content: '';
+  top: 2px;
+  left: calc(var(--pm-input-switch-size) + 2px);
+  background-color: var(--pm-primary-color);
+}
+.plume:not(.pm-no-effects) input[type='checkbox']::after,
+.plume:not(.pm-no-effects) input[type='checkbox']::before {
+  transition: 0.1s;
+}
+.plume:not(.pm-no-effects) [data-pm-success]:not([data-pm-success=''])::after {
+  -webkit-animation: slide-down 0.3s ease-out;
+  animation: slide-down 0.3s ease-out;
+}
+.plume:not(.pm-no-effects) [data-pm-error]:not([data-pm-error=''])::after {
+  -webkit-animation: slide-down 0.3s ease-out;
+  animation: slide-down 0.3s ease-out;
+}
+.plume:not(.pm-no-effects) [data-pm-warning]:not([data-pm-warning=''])::after {
+  -webkit-animation: slide-down 0.3s ease-out;
+  animation: slide-down 0.3s ease-out;
+}
+.plume:not(.pm-no-effects) [data-pm-info]:not([data-pm-info=''])::after {
+  -webkit-animation: slide-down 0.3s ease-out;
+  animation: slide-down 0.3s ease-out;
+}

src/styles/variables.scss

@@ -1,3 +1,8 @@
 $color: #f8efba;
 $bgcolor: #2c3a47;
 $font-family: 'Fira Mono', monospace;
+
+:root {
+  --pm-app-surface-color: #{#2c3a47};
+  --pm-primary-color: #{$color};
+}