From 1b097eb721de40e4dd9058d732afd2da6a94eadc Mon Sep 17 00:00:00 2001
From: Abel Toledano <atoledano@tuenti.com>
Date: Thu, 8 May 2025 16:46:28 +0200
Subject: [PATCH 1/2] WEB-2190 feat(mistica-css): switch

---
 css/mistica-common.css  |  87 ++++++++++++++++++
 examples/css/index.html | 196 +++++++++++++++++++++++++++++++---------
 2 files changed, 241 insertions(+), 42 deletions(-)

diff --git a/css/mistica-common.css b/css/mistica-common.css
index 592e7ae77b..1c77982d72 100644
--- a/css/mistica-common.css
+++ b/css/mistica-common.css
@@ -921,6 +921,10 @@ button.mistica-display-card:has(.mistica-card__media):active:after {
     transition: background-color 0.1s ease-in-out;
 }
 
+.mistica-accordion-item__summary::-webkit-details-marker {
+    display: none;
+}
+
 .mistica-accordion-item__summary-body {
     display: flex;
     flex-direction: column;
@@ -1164,3 +1168,86 @@ button.mistica-display-card:has(.mistica-card__media):active:after {
         margin-top: 24px;
     }
 }
+
+/* Switch */
+.mistica-switch {
+    --switch-border-width: 2px;
+    --switch-transition: 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
+    appearance: none;
+    position: relative;
+    width: 52px;
+    height: 32px;
+    border-radius: 16px;
+    background-color: var(--mistica-color-backgroundContainerAlternative);
+    border: var(--switch-border-width) solid var(--mistica-color-control);
+    padding: 0;
+    margin: 0;
+    box-sizing: border-box;
+    cursor: pointer;
+    transition:
+        background-color var(--switch-transition),
+        border-color var(--switch-transition);
+}
+
+.mistica-switch:after {
+    content: '';
+    position: absolute;
+    top: calc(8px - var(--switch-border-width));
+    left: calc(8px - var(--switch-border-width));
+    width: 16px;
+    height: 16px;
+    border-radius: 50%;
+    background-color: var(--mistica-color-control);
+    transition:
+        transform var(--switch-transition),
+        background-color var(--switch-transition);
+}
+
+.mistica-switch:hover:after {
+    background-color: var(--mistica-color-neutralMedium);
+}
+
+.mistica-switch:checked {
+    background-color: var(--mistica-color-controlActivated);
+    border-color: var(--mistica-color-controlActivated);
+}
+.mistica-switch:checked:after {
+    background-color: var(--mistica-color-backgroundContainer);
+    transform: translateX(20px) scale(1.5);
+}
+
+.mistica-switch:checked:hover:after {
+    background-color: var(--mistica-color-backgroundContainerAlternative);
+}
+
+.mistica-switch:active:after {
+    transform: scale(1.75);
+}
+.mistica-switch:checked:active:after {
+    transform: translateX(20px) scale(1.75);
+}
+
+.mistica-switch:before {
+    content: '';
+    position: absolute;
+    top: calc(-8px + var(--switch-border-width));
+    left: calc(-8px + var(--switch-border-width));
+    width: 40px;
+    height: 40px;
+    opacity: 0;
+    border-radius: 50%;
+    background-color: var(--mistica-color-neutralMedium);
+    transition:
+        transform var(--switch-transition),
+        background-color var(--switch-transition),
+        opacity var(--switch-transition);
+}
+
+.mistica-switch:hover:before {
+    opacity: 0.1;
+}
+
+.mistica-switch:checked:before {
+    background-color: var(--mistica-color-controlActivated);
+    transform: translateX(20px);
+}
diff --git a/examples/css/index.html b/examples/css/index.html
index a4cb3031b3..9bfe20bcbd 100644
--- a/examples/css/index.html
+++ b/examples/css/index.html
@@ -83,6 +83,9 @@ <h3 class="mistica-text-title2">Tag</h3>
                     <div class="mistica-tag-error">Error</div>
                 </div>
 
+                <h3 class="mistica-text-title2">Switch</h3>
+                <input type="checkbox" class="mistica-switch" />
+
                 <h3 class="mistica-text-title2">Table</h3>
                 <h4 class="mistica-text-title1">Column headings</h4>
                 <table class="mistica-table mistica-table-mobile-collapsed">
@@ -438,11 +441,25 @@ <h3 class="mistica-text-title2">Cards</h3>
                 <h4 class="mistica-text-title1">MediaCard / DataCard / SnapCard</h4>
                 <div class="cards-group">
                     <section class="mistica-card">
-                        <div class="mistica-card__asset-floating" style="border-radius: 50%; height:40px; width: 40px; background: var(--mistica-color-tagBackgroundActive)"> 
+                        <div
+                            class="mistica-card__asset-floating"
+                            style="
+                                border-radius: 50%;
+                                height: 40px;
+                                width: 40px;
+                                background: var(--mistica-color-tagBackgroundActive);
+                            "
+                        >
                             <svg width="24" height="24" viewBox="0 0 24 24" role="presentation">
-                                <path 
-                                    fill="var(--mistica-color-tagTextActive)" 
-                                    d="M11.39 19.862q.18.05.388.05c.353 0 .653-.112.85-.315q.297-.305.298-.835c0-.72-.425-1.15-1.145-1.15s-1.148.43-1.148 1.15q0 .526.298.835.184.188.46.265"></path><path fill="var(--mistica-color-tagTextActive)" d="M8.396 22.32c-1.141 0-1.974-.275-2.543-.838-.575-.57-.853-1.408-.853-2.558V5.396c0-1.121.278-1.945.85-2.526C6.428 2.286 7.26 2 8.396 2h6.764c1.145 0 1.977.277 2.55.853.572.575.846 1.404.846 2.543v13.528c0 1.15-.28 1.988-.852 2.558-.573.563-1.402.838-2.544.838zm0-19.164c-1.59 0-2.24.65-2.24 2.24v13.528c0 1.633.607 2.24 2.24 2.24h6.764c1.633 0 2.24-.607 2.24-2.24V5.396c0-.818-.168-1.384-.509-1.728s-.91-.512-1.731-.512z"></path></svg>
+                                <path
+                                    fill="var(--mistica-color-tagTextActive)"
+                                    d="M11.39 19.862q.18.05.388.05c.353 0 .653-.112.85-.315q.297-.305.298-.835c0-.72-.425-1.15-1.145-1.15s-1.148.43-1.148 1.15q0 .526.298.835.184.188.46.265"
+                                ></path>
+                                <path
+                                    fill="var(--mistica-color-tagTextActive)"
+                                    d="M8.396 22.32c-1.141 0-1.974-.275-2.543-.838-.575-.57-.853-1.408-.853-2.558V5.396c0-1.121.278-1.945.85-2.526C6.428 2.286 7.26 2 8.396 2h6.764c1.145 0 1.977.277 2.55.853.572.575.846 1.404.846 2.543v13.528c0 1.15-.28 1.988-.852 2.558-.573.563-1.402.838-2.544.838zm0-19.164c-1.59 0-2.24.65-2.24 2.24v13.528c0 1.633.607 2.24 2.24 2.24h6.764c1.633 0 2.24-.607 2.24-2.24V5.396c0-.818-.168-1.384-.509-1.728s-.91-.512-1.731-.512z"
+                                ></path>
+                            </svg>
                         </div>
                         <img class="mistica-card__media" src="https://picsum.photos/1200/1200" />
                         <div class="mistica-tag-promo">Headline</div>
@@ -468,8 +485,13 @@ <h2 class="mistica-card__title">Title</h2>
                         </div>
                     </section>
                     <section class="mistica-card">
-                        <div class="mistica-card__asset" style="border-radius: 50%; height:40px; width: 40px;">
-                            <image src="https://mistica-xnuea75b0-flows-projects-65bb050e.vercel.app/static/media/avatar.cb2db2e6.jpg" />                      
+                        <div
+                            class="mistica-card__asset"
+                            style="border-radius: 50%; height: 40px; width: 40px"
+                        >
+                            <image
+                                src="https://mistica-xnuea75b0-flows-projects-65bb050e.vercel.app/static/media/avatar.cb2db2e6.jpg"
+                            />
                         </div>
                         <div class="mistica-tag-promo">Headline</div>
                         <h2 class="mistica-card__pretitle">Pretitle</h2>
@@ -495,7 +517,7 @@ <h2 class="mistica-card__title">Title</h2>
                     </section>
                     <section class="mistica-snap-card">
                         <div class="mistica-card__asset">
-                            <image src="https://picsum.photos/250/100" />                      
+                            <image src="https://picsum.photos/250/100" />
                         </div>
                         <h2 class="mistica-card__title">Title</h2>
                         <p class="mistica-card__subtitle">Subtitle</p>
@@ -646,106 +668,196 @@ <h2 class="mistica-card__title">Title</h2>
                     </div>
                 </div>
 
-                <h3 class="mistica-text-title2">Grid Layout</h3>              
+                <h3 class="mistica-text-title2">Grid Layout</h3>
                 <h4 class="mistica-text-title1">6 + 6</h4>
-                <section class="mistica-grid-layout" id="mistica-grid">              
+                <section class="mistica-grid-layout" id="mistica-grid">
                     <div class="mistica-col-6">
-                        <div style="height: 120px; width: auto; box-sizing: border-box; background: rgba(11, 39, 57, 0.08); border: 2px solid rgba(11, 39, 57, 0.3); position: relative;">
+                        <div
+                            style="
+                                height: 120px;
+                                width: auto;
+                                box-sizing: border-box;
+                                background: rgba(11, 39, 57, 0.08);
+                                border: 2px solid rgba(11, 39, 57, 0.3);
+                                position: relative;
+                            "
+                        >
                             <svg width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none">
                                 <use href="#mistica-grid-svg"></use>
-                              </svg>                                    
+                            </svg>
                         </div>
                     </div>
                     <div class="mistica-col-6">
-                        <div style="height: 120px; width: auto; box-sizing: border-box; background: rgba(11, 39, 57, 0.08); border: 2px solid rgba(11, 39, 57, 0.3); position: relative;">
+                        <div
+                            style="
+                                height: 120px;
+                                width: auto;
+                                box-sizing: border-box;
+                                background: rgba(11, 39, 57, 0.08);
+                                border: 2px solid rgba(11, 39, 57, 0.3);
+                                position: relative;
+                            "
+                        >
                             <svg width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none">
                                 <use href="#mistica-grid-svg"></use>
-                              </svg>                                   
+                            </svg>
                         </div>
                     </div>
-                </section>                
+                </section>
                 <h4 class="mistica-text-title1">5 + 4</h4>
-                <section class="mistica-grid-layout" id="mistica-grid">  
-                    <div class="mistica-col-1"></div>            
+                <section class="mistica-grid-layout" id="mistica-grid">
+                    <div class="mistica-col-1"></div>
                     <div class="mistica-col-5">
-                        <div style="height: 120px; width: auto; box-sizing: border-box; background: rgba(11, 39, 57, 0.08); border: 2px solid rgba(11, 39, 57, 0.3); position: relative;">
+                        <div
+                            style="
+                                height: 120px;
+                                width: auto;
+                                box-sizing: border-box;
+                                background: rgba(11, 39, 57, 0.08);
+                                border: 2px solid rgba(11, 39, 57, 0.3);
+                                position: relative;
+                            "
+                        >
                             <svg width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none">
                                 <use href="#mistica-grid-svg"></use>
-                              </svg>                                    
+                            </svg>
                         </div>
                     </div>
                     <div class="mistica-col-1"></div>
                     <div class="mistica-col-4">
-                        <div style="height: 120px; width: auto; box-sizing: border-box; background: rgba(11, 39, 57, 0.08); border: 2px solid rgba(11, 39, 57, 0.3); position: relative;">
+                        <div
+                            style="
+                                height: 120px;
+                                width: auto;
+                                box-sizing: border-box;
+                                background: rgba(11, 39, 57, 0.08);
+                                border: 2px solid rgba(11, 39, 57, 0.3);
+                                position: relative;
+                            "
+                        >
                             <svg width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none">
                                 <use href="#mistica-grid-svg"></use>
-                              </svg>                                    
+                            </svg>
                         </div>
                     </div>
-                    <div class="mistica-col-1"></div>            
-                </section>               
+                    <div class="mistica-col-1"></div>
+                </section>
                 <h4 class="mistica-text-title1">4 + 6</h4>
-                <section class="mistica-grid-layout" id="mistica-grid">      
-                    <div class="mistica-col-1"></div>        
+                <section class="mistica-grid-layout" id="mistica-grid">
+                    <div class="mistica-col-1"></div>
                     <div class="mistica-col-4">
-                        <div style="height: 120px; width: auto; box-sizing: border-box; background: rgba(11, 39, 57, 0.08); border: 2px solid rgba(11, 39, 57, 0.3); position: relative;">
+                        <div
+                            style="
+                                height: 120px;
+                                width: auto;
+                                box-sizing: border-box;
+                                background: rgba(11, 39, 57, 0.08);
+                                border: 2px solid rgba(11, 39, 57, 0.3);
+                                position: relative;
+                            "
+                        >
                             <svg width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none">
                                 <use href="#mistica-grid-svg"></use>
                             </svg>
                         </div>
                     </div>
                     <div class="mistica-col-6">
-                        <div style="height: 120px; width: auto; box-sizing: border-box; background: rgba(11, 39, 57, 0.08); border: 2px solid rgba(11, 39, 57, 0.3); position: relative;">
+                        <div
+                            style="
+                                height: 120px;
+                                width: auto;
+                                box-sizing: border-box;
+                                background: rgba(11, 39, 57, 0.08);
+                                border: 2px solid rgba(11, 39, 57, 0.3);
+                                position: relative;
+                            "
+                        >
                             <svg width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none">
                                 <use href="#mistica-grid-svg"></use>
                             </svg>
                         </div>
                     </div>
-                    <div class="mistica-col-1"></div>         
-                </section>               
+                    <div class="mistica-col-1"></div>
+                </section>
                 <h4 class="mistica-text-title1">8 + 4</h4>
-                <section class="mistica-grid-layout" id="mistica-grid">              
+                <section class="mistica-grid-layout" id="mistica-grid">
                     <div class="mistica-col-8">
-                        <div style="height: 120px; width: auto; box-sizing: border-box; background: rgba(11, 39, 57, 0.08); border: 2px solid rgba(11, 39, 57, 0.3); position: relative;">
+                        <div
+                            style="
+                                height: 120px;
+                                width: auto;
+                                box-sizing: border-box;
+                                background: rgba(11, 39, 57, 0.08);
+                                border: 2px solid rgba(11, 39, 57, 0.3);
+                                position: relative;
+                            "
+                        >
                             <svg width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none">
                                 <use href="#mistica-grid-svg"></use>
-                            </svg>                                    
+                            </svg>
                         </div>
                     </div>
                     <div class="mistica-col-4">
-                        <div style="height: 120px; width: auto; box-sizing: border-box; background: rgba(11, 39, 57, 0.08); border: 2px solid rgba(11, 39, 57, 0.3); position: relative;">
+                        <div
+                            style="
+                                height: 120px;
+                                width: auto;
+                                box-sizing: border-box;
+                                background: rgba(11, 39, 57, 0.08);
+                                border: 2px solid rgba(11, 39, 57, 0.3);
+                                position: relative;
+                            "
+                        >
                             <svg width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none">
                                 <use href="#mistica-grid-svg"></use>
                             </svg>
                         </div>
                     </div>
-                </section>               
+                </section>
                 <h4 class="mistica-text-title1">3 + 9</h4>
-                <section class="mistica-grid-layout" id="mistica-grid">              
+                <section class="mistica-grid-layout" id="mistica-grid">
                     <div class="mistica-col-3">
-                        <div style="height: 120px; width: auto; box-sizing: border-box; background: rgba(11, 39, 57, 0.08); border: 2px solid rgba(11, 39, 57, 0.3); position: relative;">
+                        <div
+                            style="
+                                height: 120px;
+                                width: auto;
+                                box-sizing: border-box;
+                                background: rgba(11, 39, 57, 0.08);
+                                border: 2px solid rgba(11, 39, 57, 0.3);
+                                position: relative;
+                            "
+                        >
                             <svg width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none">
                                 <use href="#mistica-grid-svg"></use>
-                            </svg>                                    
+                            </svg>
                         </div>
                     </div>
                     <div class="mistica-col-9">
-                        <div style="height: 120px; width: auto; box-sizing: border-box; background: rgba(11, 39, 57, 0.08); border: 2px solid rgba(11, 39, 57, 0.3); position: relative;">
+                        <div
+                            style="
+                                height: 120px;
+                                width: auto;
+                                box-sizing: border-box;
+                                background: rgba(11, 39, 57, 0.08);
+                                border: 2px solid rgba(11, 39, 57, 0.3);
+                                position: relative;
+                            "
+                        >
                             <svg width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none">
                                 <use href="#mistica-grid-svg"></use>
-                            </svg>                                    
+                            </svg>
                         </div>
                     </div>
-                </section>                
+                </section>
             </div>
         </div>
         <script type="module" src="/main.js"></script>
     </body>
 
-    <svg style="display: none;">
+    <svg style="display: none">
         <symbol id="mistica-grid-svg">
-          <line x1="0" y1="0" x2="100" y2="100" style="stroke-width: 2; stroke: rgba(11, 39, 57, 0.1);" />
-          <line x1="100" y1="0" x2="0" y2="100" style="stroke-width: 2; stroke: rgba(11, 39, 57, 0.1);" />
+            <line x1="0" y1="0" x2="100" y2="100" style="stroke-width: 2; stroke: rgba(11, 39, 57, 0.1)" />
+            <line x1="100" y1="0" x2="0" y2="100" style="stroke-width: 2; stroke: rgba(11, 39, 57, 0.1)" />
         </symbol>
     </svg>
 </html>

From 2226542dae3f962dfc97d1735ab11511286ad2c2 Mon Sep 17 00:00:00 2001
From: Abel Toledano <atoledano@tuenti.com>
Date: Mon, 19 May 2025 12:00:17 +0200
Subject: [PATCH 2/2] change colors

---
 css/mistica-common.css | 45 ++++++++++++++++++++++++------------------
 1 file changed, 26 insertions(+), 19 deletions(-)

diff --git a/css/mistica-common.css b/css/mistica-common.css
index 1fcb593ba9..68fd83a804 100644
--- a/css/mistica-common.css
+++ b/css/mistica-common.css
@@ -43,6 +43,10 @@
     --vcolor-controlActivated: var(--mistica-color-controlActivatedInverse);
     --vcolor-checkbox-tick: var(--mistica-color-controlKnobInverse);
     --vcolor-checkbox-background: transparent;
+
+    --vcolor-switch-trackBackground: transparent;
+    --vcolor-switch-handleChecked: var(--mistica-color-controlKnobInverse);
+    --vcolor-switch-handleHover: var(--mistica-color-inverse);
 }
 
 [data-mistica-skin] > *,
@@ -92,6 +96,10 @@
     --vcolor-controlActivated: var(--mistica-color-controlActivated);
     --vcolor-checkbox-tick: var(--mistica-color-inverse);
     --vcolor-checkbox-background: var(--mistica-color-background);
+
+    --vcolor-switch-trackBackground: var(--mistica-color-backgroundAlternative);
+    --vcolor-switch-handleChecked: var(--mistica-color-inverse);
+    --vcolor-switch-handleHover: var(--mistica-color-neutralHigh);
 }
 
 @media (prefers-color-scheme: dark) {
@@ -1213,8 +1221,8 @@ button.mistica-display-card:has(.mistica-card__media):active:after {
     width: 52px;
     height: 32px;
     border-radius: 16px;
-    background-color: var(--mistica-color-backgroundContainerAlternative);
-    border: var(--switch-border-width) solid var(--mistica-color-control);
+    background-color: var(--vcolor-switch-trackBackground);
+    border: var(--switch-border-width) solid var(--vcolor-control);
     padding: 0;
     margin: 0;
     box-sizing: border-box;
@@ -1224,6 +1232,7 @@ button.mistica-display-card:has(.mistica-card__media):active:after {
         border-color var(--switch-transition);
 }
 
+/* :after is the switch handle (bolita) */
 .mistica-switch:after {
     content: '';
     position: absolute;
@@ -1232,29 +1241,25 @@ button.mistica-display-card:has(.mistica-card__media):active:after {
     width: 16px;
     height: 16px;
     border-radius: 50%;
-    background-color: var(--mistica-color-control);
+    background-color: var(--vcolor-control);
     transition:
         transform var(--switch-transition),
         background-color var(--switch-transition);
 }
 
 .mistica-switch:hover:after {
-    background-color: var(--mistica-color-neutralMedium);
+    background-color: var(--vcolor-switch-handleHover);
 }
 
 .mistica-switch:checked {
-    background-color: var(--mistica-color-controlActivated);
-    border-color: var(--mistica-color-controlActivated);
+    background-color: var(--vcolor-controlActivated);
+    border-color: var(--vcolor-controlActivated);
 }
 .mistica-switch:checked:after {
-    background-color: var(--mistica-color-backgroundContainer);
+    background-color: var(--vcolor-switch-handleChecked);
     transform: translateX(20px) scale(1.5);
 }
 
-.mistica-switch:checked:hover:after {
-    background-color: var(--mistica-color-backgroundContainerAlternative);
-}
-
 .mistica-switch:active:after {
     transform: scale(1.75);
 }
@@ -1262,6 +1267,7 @@ button.mistica-display-card:has(.mistica-card__media):active:after {
     transform: translateX(20px) scale(1.75);
 }
 
+/* :before is the ripple effect overlay on hover */
 .mistica-switch:before {
     content: '';
     position: absolute;
@@ -1269,22 +1275,23 @@ button.mistica-display-card:has(.mistica-card__media):active:after {
     left: calc(-8px + var(--switch-border-width));
     width: 40px;
     height: 40px;
-    opacity: 0;
     border-radius: 50%;
-    background-color: var(--mistica-color-neutralMedium);
+    background-color: transparent;
     transition:
         transform var(--switch-transition),
-        background-color var(--switch-transition),
-        opacity var(--switch-transition);
+        background-color var(--switch-transition);
+}
+
+.mistica-switch:checked:before {
+    transform: translateX(20px);
 }
 
 .mistica-switch:hover:before {
-    opacity: 0.1;
+    background-color: var(--mistica-color-backgroundContainerHover);
 }
 
-.mistica-switch:checked:before {
-    background-color: var(--mistica-color-controlActivated);
-    transform: translateX(20px);
+.mistica-switch:active:before {
+    background-color: var(--mistica-color-backgroundContainerPressed);
 }
 
 /* Checkbox */