2 files changed, 181 insertions, 0 deletions
diff --git a/apps/web-shared/src/styles/components/adv-custom-select.scss b/apps/web-shared/src/styles/components/adv-custom-select.scss
new file mode 100644
index 0000000..bd28247
--- /dev/null
+++ b/apps/web-shared/src/styles/components/adv-custom-select.scss
@@ -0,0 +1,79 @@
+@use '../base' as *;
+@use 'popover.scss' as *;
+
+/* -------------------------------- 
+
+File#: _2_adv-custom-select
+Title: Advanced Custom Select
+Descr: Custom select with advanced structure options
+Usage: codyhouse.co/license
+
+-------------------------------- */
+
+.adv-select {
+}
+
+.adv-select__control {
+}
+
+.adv-select-popover {
+  // use rem units
+  @include spaceUnit(1rem);
+  @include textUnit(1rem);
+
+  &.popover { // popover component - dependency
+    --popover-width: 250px;
+    --popover-control-gap: 4px; // ⚠️ use px units - vertical gap between the popover and its control
+    --popover-viewport-gap: 20px; // ⚠️ use px units - vertical gap between the popover and the viewport - visible if popover height > viewport height
+    --popover-transition-duration: 0.2s;
+
+    @include breakpoint(md) {
+      --popover-width: 320px;
+    }
+  }
+}
+
+.adv-select-popover__optgroup:not(:first-of-type) { // custom <optgroup>
+  padding-top: var(--space-xxs);
+}
+
+.adv-select-popover__optgroup:not(:last-of-type) {
+  border-bottom: 1px solid alpha(var(--color-contrast-higher), 0.1);
+  padding-bottom: var(--space-xxs);
+}
+
+.adv-select-popover__check {
+  display: none;
+}
+
+.adv-select-popover__label {
+}
+
+.adv-select-popover__option {
+  position: relative;
+  cursor: pointer;
+  @include fontSmooth;
+  transition: .2s;
+
+  &:hover {
+    background-color: alpha(var(--color-contrast-higher), 0.075);
+  }
+
+  &:focus {
+    outline: none;
+    background-color: alpha(var(--color-primary), 0.15);
+  }
+
+  &[aria-selected=true] { // selected option
+    background-color: var(--color-primary);
+    color: var(--color-white);
+
+    .adv-select-popover__check {
+      display: block;
+    }
+
+    &:focus {
+      box-shadow: inset 0 0 0 2px var(--color-primary-dark);
+    }
+  }
+}
diff --git a/apps/web-shared/src/styles/components/light-dark-switch.scss b/apps/web-shared/src/styles/components/light-dark-switch.scss
new file mode 100644
index 0000000..1554010
--- /dev/null
+++ b/apps/web-shared/src/styles/components/light-dark-switch.scss
@@ -0,0 +1,102 @@
+@use '../base' as *;
+@use 'popover.scss' as *;
+@use 'adv-custom-select.scss' as *;
+
+/* -------------------------------- 
+
+File#: _3_light-dark-switch
+Title: Light/Dark Switch
+Descr: Color theme switcher
+Usage: codyhouse.co/license
+
+-------------------------------- */
+
+.ld-switch {}
+
+.ld-switch-btn {
+  position: relative;
+  width: 24px;
+  height: 24px;
+  overflow: hidden;
+  display: inline-block;
+
+  transition: opacity 0.2s, color 0.2s;
+
+  &:hover {
+    cursor: pointer;
+    opacity: 0.8;
+  }
+
+  &:focus {
+    outline: none;
+    color: var(--color-primary);
+  }
+}
+
+.ld-switch-btn.popover-control--active {
+  /* class added to the control button when the dropdown is visible */
+  color: var(--color-primary);
+}
+
+.ld-switch-btn__icon-wrapper {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  opacity: 0;
+  transform: translateY(100%) rotate(35deg) scale(0.5);
+}
+
+.ld-switch-btn__icon-wrapper--in {
+  opacity: 1;
+  transform: translateY(0) rotate(0) scale(1);
+}
+
+.ld-switch-btn__icon-wrapper--out {
+  opacity: 0;
+  transform: translateY(-100%) rotate(-35deg) scale(0.5);
+}
+
+.ld-switch-btn__icon-wrapper--in,
+.ld-switch-btn__icon-wrapper--out {
+  transition: transform 0.3s var(--ease-in-out), opacity 0.3s;
+}
+
+.ld-switch-btn__icon {
+  margin: auto;
+  --size: 20px; /* icon size */
+}
+
+.popover.ld-switch-popover {
+  --popover-width: 250px;
+}
+
+.ld-switch-popover__option {
+  user-select: none;
+  transition: opacity 0.2s;
+
+  &:hover {
+    cursor: pointer;
+    opacity: 0.85;
+  }
+
+  &:focus {
+    outline: none;
+
+    figure {
+      box-shadow: 0 0 0 1px var(--color-bg-light), 0 0 0 3px var(--color-contrast-higher);
+    }
+  }
+
+  &[aria-selected=true] {
+    color: var(--color-primary);
+
+    figure {
+      box-shadow: 0 0 0 1px var(--color-bg-light), 0 0 0 3px currentColor;
+    }
+  }
+}