iTwin · smmr-dn · Dec 6, 2024 · Dec 9, 2024 · Dec 9, 2024 · Dec 9, 2024
@@ -0,0 +1,5 @@
+---
+'@itwin/itwinui-react': patch
+---
+
+`ToggleSwitch` now has the height of 24px instead of 26px.
@@ -0,0 +1,5 @@
+---
+'@itwin/itwinui-css': patch
+---
+
+`iui-toggle-switch` now has the height of 24px.
diff --git a/...reference/iTwinUI_column-filter_Type_Date_filter_dark_0_demo-date_0_desktop.png b/...reference/iTwinUI_column-filter_Type_Date_filter_dark_0_demo-date_0_desktop.png
diff --git a/...erence/iTwinUI_column-filter_Type_Date_filter_hc_dark_0_demo-date_0_desktop.png b/...erence/iTwinUI_column-filter_Type_Date_filter_hc_dark_0_demo-date_0_desktop.png
diff --git a/...rence/iTwinUI_column-filter_Type_Date_filter_hc_light_0_demo-date_0_desktop.png b/...rence/iTwinUI_column-filter_Type_Date_filter_hc_light_0_demo-date_0_desktop.png
diff --git a/...eference/iTwinUI_column-filter_Type_Date_filter_light_0_demo-date_0_desktop.png b/...eference/iTwinUI_column-filter_Type_Date_filter_light_0_demo-date_0_desktop.png
diff --git a/...tmaps_reference/iTwinUI_fieldset_Type_Default_dark_0_demo-default_0_desktop.png b/...tmaps_reference/iTwinUI_fieldset_Type_Default_dark_0_demo-default_0_desktop.png
diff --git a/...ps_reference/iTwinUI_fieldset_Type_Default_hc_dark_0_demo-default_0_desktop.png b/...ps_reference/iTwinUI_fieldset_Type_Default_hc_dark_0_demo-default_0_desktop.png
diff --git a/...s_reference/iTwinUI_fieldset_Type_Default_hc_light_0_demo-default_0_desktop.png b/...s_reference/iTwinUI_fieldset_Type_Default_hc_light_0_demo-default_0_desktop.png
diff --git a/...maps_reference/iTwinUI_fieldset_Type_Default_light_0_demo-default_0_desktop.png b/...maps_reference/iTwinUI_fieldset_Type_Default_light_0_demo-default_0_desktop.png
diff --git a/...e-switch_State_focus_checked__hover_unchecked_dark_0_demo-default_0_desktop.png b/...e-switch_State_focus_checked__hover_unchecked_dark_0_demo-default_0_desktop.png
diff --git a/...witch_State_focus_checked__hover_unchecked_hc_dark_0_demo-default_0_desktop.png b/...witch_State_focus_checked__hover_unchecked_hc_dark_0_demo-default_0_desktop.png
diff --git a/...itch_State_focus_checked__hover_unchecked_hc_light_0_demo-default_0_desktop.png b/...itch_State_focus_checked__hover_unchecked_hc_light_0_demo-default_0_desktop.png
diff --git a/...-switch_State_focus_checked__hover_unchecked_light_0_demo-default_0_desktop.png b/...-switch_State_focus_checked__hover_unchecked_light_0_demo-default_0_desktop.png
diff --git a/...e-switch_State_hover_checked__focus_unchecked_dark_0_demo-default_0_desktop.png b/...e-switch_State_hover_checked__focus_unchecked_dark_0_demo-default_0_desktop.png
diff --git a/...witch_State_hover_checked__focus_unchecked_hc_dark_0_demo-default_0_desktop.png b/...witch_State_hover_checked__focus_unchecked_hc_dark_0_demo-default_0_desktop.png
diff --git a/...itch_State_hover_checked__focus_unchecked_hc_light_0_demo-default_0_desktop.png b/...itch_State_hover_checked__focus_unchecked_hc_light_0_demo-default_0_desktop.png
diff --git a/...-switch_State_hover_checked__focus_unchecked_light_0_demo-default_0_desktop.png b/...-switch_State_hover_checked__focus_unchecked_light_0_demo-default_0_desktop.png
diff --git a/..._reference/iTwinUI_toggle-switch_Type_Default_dark_0_demo-default_0_desktop.png b/..._reference/iTwinUI_toggle-switch_Type_Default_dark_0_demo-default_0_desktop.png
diff --git a/...ference/iTwinUI_toggle-switch_Type_Default_hc_dark_0_demo-default_0_desktop.png b/...ference/iTwinUI_toggle-switch_Type_Default_hc_dark_0_demo-default_0_desktop.png
diff --git a/...erence/iTwinUI_toggle-switch_Type_Default_hc_light_0_demo-default_0_desktop.png b/...erence/iTwinUI_toggle-switch_Type_Default_hc_light_0_demo-default_0_desktop.png
diff --git a/...reference/iTwinUI_toggle-switch_Type_Default_light_0_demo-default_0_desktop.png b/...reference/iTwinUI_toggle-switch_Type_Default_light_0_demo-default_0_desktop.png
diff --git a/...maps_reference/iTwinUI_toggle-switch_Type_Small_dark_0_demo-small_0_desktop.png b/...maps_reference/iTwinUI_toggle-switch_Type_Small_dark_0_demo-small_0_desktop.png
diff --git a/...s_reference/iTwinUI_toggle-switch_Type_Small_hc_dark_0_demo-small_0_desktop.png b/...s_reference/iTwinUI_toggle-switch_Type_Small_hc_dark_0_demo-small_0_desktop.png
diff --git a/..._reference/iTwinUI_toggle-switch_Type_Small_hc_light_0_demo-small_0_desktop.png b/..._reference/iTwinUI_toggle-switch_Type_Small_hc_light_0_demo-small_0_desktop.png
diff --git a/...aps_reference/iTwinUI_toggle-switch_Type_Small_light_0_demo-small_0_desktop.png b/...aps_reference/iTwinUI_toggle-switch_Type_Small_light_0_demo-small_0_desktop.png
diff --git a/...ce/iTwinUI_toggle-switch_Type_label_left_dark_0_demo-toggle-right_0_desktop.png b/...ce/iTwinUI_toggle-switch_Type_label_left_dark_0_demo-toggle-right_0_desktop.png
diff --git a/...iTwinUI_toggle-switch_Type_label_left_hc_dark_0_demo-toggle-right_0_desktop.png b/...iTwinUI_toggle-switch_Type_label_left_hc_dark_0_demo-toggle-right_0_desktop.png
diff --git a/...TwinUI_toggle-switch_Type_label_left_hc_light_0_demo-toggle-right_0_desktop.png b/...TwinUI_toggle-switch_Type_label_left_hc_light_0_demo-toggle-right_0_desktop.png
diff --git a/...e/iTwinUI_toggle-switch_Type_label_left_light_0_demo-toggle-right_0_desktop.png b/...e/iTwinUI_toggle-switch_Type_label_left_light_0_demo-toggle-right_0_desktop.png
diff --git a/...iTwinUI_toggle-switch_Type_label_none_dark_0_demo-toggle-no-label_0_desktop.png b/...iTwinUI_toggle-switch_Type_label_none_dark_0_demo-toggle-no-label_0_desktop.png
diff --git a/...inUI_toggle-switch_Type_label_none_hc_dark_0_demo-toggle-no-label_0_desktop.png b/...inUI_toggle-switch_Type_label_none_hc_dark_0_demo-toggle-no-label_0_desktop.png
diff --git a/...nUI_toggle-switch_Type_label_none_hc_light_0_demo-toggle-no-label_0_desktop.png b/...nUI_toggle-switch_Type_label_none_hc_light_0_demo-toggle-no-label_0_desktop.png
diff --git a/...TwinUI_toggle-switch_Type_label_none_light_0_demo-toggle-no-label_0_desktop.png b/...TwinUI_toggle-switch_Type_label_none_light_0_demo-toggle-no-label_0_desktop.png
diff --git a/...ce/iTwinUI_toggle-switch_Type_label_right_dark_0_demo-toggle-left_0_desktop.png b/...ce/iTwinUI_toggle-switch_Type_label_right_dark_0_demo-toggle-left_0_desktop.png
diff --git a/...iTwinUI_toggle-switch_Type_label_right_hc_dark_0_demo-toggle-left_0_desktop.png b/...iTwinUI_toggle-switch_Type_label_right_hc_dark_0_demo-toggle-left_0_desktop.png
diff --git a/...TwinUI_toggle-switch_Type_label_right_hc_light_0_demo-toggle-left_0_desktop.png b/...TwinUI_toggle-switch_Type_label_right_hc_light_0_demo-toggle-left_0_desktop.png
diff --git a/...e/iTwinUI_toggle-switch_Type_label_right_light_0_demo-toggle-left_0_desktop.png b/...e/iTwinUI_toggle-switch_Type_label_right_light_0_demo-toggle-left_0_desktop.png
diff --git a/...act-workshop/cypress-visual-screenshots/baseline/ToggleSwitch.test.ts-Small.png b/...act-workshop/cypress-visual-screenshots/baseline/ToggleSwitch.test.ts-Small.png
@@ -57,10 +57,7 @@
   cursor: pointer;
   appearance: none;
   inline-size: calc((var(--_iui-toggle-switch-handle-size) + var(--_iui-toggle-switch-handle-offset) * 2) * 2);
-  block-size: calc(
-    var(--_iui-toggle-switch-handle-size) + (var(--_iui-toggle-switch-handle-offset) * 2) +
-      ($iui-toggle-switch-border-thickness * 2)
-  );
+  block-size: calc(var(--_iui-toggle-switch-handle-size) + (var(--_iui-toggle-switch-handle-offset) * 2));
   border-radius: var(--iui-border-radius-round);
   transition:
     background-color var(--iui-duration-1) ease-out,
@@ -76,7 +73,7 @@
     content: '';
     block-size: var(--_iui-toggle-switch-handle-size);
     inline-size: var(--_iui-toggle-switch-handle-size);
-    margin: var(--_iui-toggle-switch-handle-offset);
+    margin: auto var(--_iui-toggle-switch-handle-offset);
     aspect-ratio: 1 / 1;
     border-radius: var(--iui-border-radius-round);
     transition: background-color var(--iui-duration-1) ease-out;
@@ -193,7 +190,7 @@
   &-icon {
     opacity: 0;
     grid-area: toggle;
-    margin: calc(var(--_iui-toggle-switch-handle-offset) + $iui-toggle-switch-border-thickness);
+    margin: var(--_iui-toggle-switch-handle-offset);
     z-index: 1;
     transition: opacity var(--iui-duration-1) ease-out;
     pointer-events: none;