From 82e1b734de7b990eebad4e31554c10cb4e928daf Mon Sep 17 00:00:00 2001
From: Alexander Platov <alexander.platov@hardcoreeng.com>
Date: Tue, 16 Apr 2024 23:20:51 +0300
Subject: [PATCH] Added ModernToggle component (#5375)

Signed-off-by: Alexander Platov <alexander.platov@hardcoreeng.com>
---
 packages/theme/styles/_lumia-colors.scss      |  20 +++
 .../ui/src/components/ModernToggle.svelte     | 153 ++++++++++++++++++
 packages/ui/src/index.ts                      |   1 +
 3 files changed, 174 insertions(+)
 create mode 100644 packages/ui/src/components/ModernToggle.svelte

diff --git a/packages/theme/styles/_lumia-colors.scss b/packages/theme/styles/_lumia-colors.scss
index 02e61812a8..7c91ba5ee7 100644
--- a/packages/theme/styles/_lumia-colors.scss
+++ b/packages/theme/styles/_lumia-colors.scss
@@ -25,6 +25,10 @@
   --button-negative-hover-BackgroundColor: #e34748;
   --button-negative-active-BackgroundColor: #c42a32;
 
+  --selector-active-BackgroundColor: #3364e2;
+  --selector-IconColor: #ffffff;
+  --selector-disabled-IconColor: #8b97ad;
+
   --tag-on-accent-PorpoiseText: #FFFFFF;
   --tag-accent-SunshineBackground: #FFBD2E;
 }
@@ -105,6 +109,14 @@
   --input-error-BorderColor: #fb6863;
   --input-search-IconColor: #ffffff;
 
+  /** Checkboxes **/
+  --selector-BackgroundColor: #a5bdff0d;
+  --selector-BorderColor: #d9dee6;
+  --selector-off-BackgroundColor: #556178;
+  --selector-hover-overlay-BackgroundColor: #a5bdff1a;
+  --selector-disabled-BackgroundColor: #a5bdff1a;
+  --selector-disabled-BorderColor: #a5bdff0d;
+
   --love-active-call-color-1: #5190EC;
   --love-active-call-color-2: #F47758;
   --love-active-call-transform: scaleY(0.25) scaleX(0.4);
@@ -187,6 +199,14 @@
   --input-error-BorderColor: #e34748;
   --input-search-IconColor: #0f121a;
 
+  /** Checkboxes **/
+  --selector-BackgroundColor: #1530720d;
+  --selector-BorderColor: #0f121a;
+  --selector-off-BackgroundColor: #cbd2dd;
+  --selector-hover-overlay-BackgroundColor: #1530721a;
+  --selector-disabled-BackgroundColor: #1530721a;
+  --selector-disabled-BorderColor: #1530720d;
+
   --love-active-call-color-1: #205DC2;
   --love-active-call-color-2: #e34748;
   --love-active-call-filter: blur(10px);
diff --git a/packages/ui/src/components/ModernToggle.svelte b/packages/ui/src/components/ModernToggle.svelte
new file mode 100644
index 0000000000..91cd05b24e
--- /dev/null
+++ b/packages/ui/src/components/ModernToggle.svelte
@@ -0,0 +1,153 @@
+<script lang="ts">
+  //
+  // © 2023 Hardcore Engineering, Inc. All Rights Reserved.
+  // Licensed under the Eclipse Public License v2.0 (SPDX: EPL-2.0).
+  //
+  import type { Asset, IntlString } from '@hcengineering/platform'
+  import Label from './Label.svelte'
+
+  export let title: string | undefined = undefined
+  export let label: IntlString | undefined = undefined
+  export let labelParams: Record<string, any> = {}
+  export let size: 'small' | 'large' = 'large'
+  export let checked: boolean = false
+  export let disabled: boolean = false
+  export let background: boolean = false
+</script>
+
+<label
+  class="toggle-container {size}"
+  class:background
+  class:disabled
+  class:woLabel={label === undefined && title === undefined}
+>
+  <input type="checkbox" class="toggle" bind:checked {disabled} on:change />
+  <div class="toggle-element {size}" class:disabled />
+  {#if label || title}
+    <div class="toggle-label">
+      {#if label}<Label {label} params={labelParams} />{/if}
+      {#if title}{title}{/if}
+    </div>
+  {/if}
+</label>
+
+<style lang="scss">
+  .toggle-element {
+    position: relative;
+    flex-shrink: 0;
+    background-color: var(--selector-off-BackgroundColor);
+
+    &::after {
+      content: '';
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      width: var(--spacing-1);
+      height: var(--spacing-1);
+      background-color: var(--selector-IconColor);
+      border-radius: 50%;
+      transform: translateY(-50%);
+      transition: left 0.2s;
+    }
+    &.small {
+      width: var(--spacing-4);
+      height: var(--spacing-2);
+      border-radius: var(--medium-BorderRadius);
+
+      &::after {
+        left: var(--spacing-0_5);
+        width: var(--spacing-1);
+        height: var(--spacing-1);
+      }
+    }
+    &.large {
+      width: var(--spacing-6);
+      height: var(--spacing-3);
+      border-radius: var(--large-BorderRadius);
+
+      &::after {
+        left: var(--spacing-0_75);
+        width: var(--spacing-1_75);
+        height: var(--spacing-1_75);
+      }
+    }
+  }
+  .toggle-label {
+    color: var(--global-primary-TextColor);
+    user-select: none;
+  }
+  .toggle {
+    overflow: hidden;
+    position: absolute;
+    margin: -1px;
+    padding: 0;
+    width: 1px;
+    height: 1px;
+    border: 0;
+    clip: rect(0 0 0 0);
+
+    &:checked + .toggle-element {
+      background-color: var(--selector-active-BackgroundColor);
+
+      &.small::after {
+        left: var(--spacing-2_5);
+      }
+      &.large::after {
+        left: var(--spacing-3_5);
+      }
+    }
+    &:disabled + .toggle-element {
+      box-shadow: none;
+      background-color: var(--selector-disabled-BackgroundColor);
+
+      &::after {
+        background-color: var(--selector-disabled-IconColor);
+      }
+      & + .toggle-label {
+        color: var(--global-disabled-TextColor);
+      }
+    }
+    &:focus + .toggle-element {
+      outline: 2px solid var(--global-focus-BorderColor);
+      outline-offset: 2px;
+    }
+  }
+  .toggle-container {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--spacing-2);
+    min-width: var(--spacing-2);
+    min-height: var(--spacing-2);
+
+    &.background {
+      border-radius: 3rem;
+
+      &.woLabel {
+        padding: var(--spacing-1);
+      }
+      &.small:not(.woLabel) {
+        padding: var(--spacing-1) var(--spacing-2) var(--spacing-1) var(--spacing-1);
+      }
+      &.large:not(.woLabel) {
+        padding: var(--spacing-1) var(--spacing-3) var(--spacing-1) var(--spacing-1);
+      }
+    }
+    &.disabled.background {
+      box-shadow: 0 0 0 1px var(--selector-disabled-BorderColor);
+    }
+    &:not(.disabled) {
+      cursor: pointer;
+
+      &.background {
+        background-color: var(--selector-BackgroundColor);
+      }
+      &:active .toggle-element {
+        outline: 2px solid var(--global-focus-BorderColor);
+        outline-offset: 2px;
+      }
+      &:hover .toggle-element {
+        box-shadow: 0 0 0 4px var(--selector-hover-overlay-BackgroundColor);
+      }
+    }
+  }
+</style>
diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts
index 9d8ce03449..aa1cefbb6f 100644
--- a/packages/ui/src/index.ts
+++ b/packages/ui/src/index.ts
@@ -62,6 +62,7 @@ export { default as Toggle } from './components/Toggle.svelte'
 export { default as RadioButton } from './components/RadioButton.svelte'
 export { default as RadioGroup } from './components/RadioGroup.svelte'
 export { default as Dialog } from './components/Dialog.svelte'
+export { default as ModernToggle } from './components/ModernToggle.svelte'
 export { default as ToggleWithLabel } from './components/ToggleWithLabel.svelte'
 export { default as MiniToggle } from './components/MiniToggle.svelte'
 export { default as TooltipInstance } from './components/TooltipInstance.svelte'