add transition to icon change

Author: reidbarber

packages/dev/s2-docs/pages/s2/home/Header.tsx

@@ -38,13 +38,19 @@ const colorSchemeToggleStyles = style({
 
 const whiteIconStyle = iconStyle({color: 'white'});
 
+const iconContainerStyles = style({
+  position: 'relative',
+  size: 20
+});
+
 function ColorSchemeToggle() {
   let {colorScheme, toggleColorScheme, systemColorScheme} = useSettings();
   let isOverriding = colorScheme !== systemColorScheme;
   let label = isOverriding
     ? `Using ${colorScheme} mode (press to follow system)`
     : `Using system ${systemColorScheme} mode (press to switch)`;
   let ref = useRef<HTMLButtonElement>(null);
+  let isDark = colorScheme === 'dark';
 
   return (
     <Button
@@ -53,7 +59,26 @@ function ColorSchemeToggle() {
       onPress={toggleColorScheme}
       className={renderProps => colorSchemeToggleStyles(renderProps)}
       style={pressScale(ref)}>
-      {colorScheme === 'dark' ? <Lighten styles={whiteIconStyle} /> : <Contrast styles={whiteIconStyle} />}
+      <span className={iconContainerStyles}>
+        <Contrast
+          styles={whiteIconStyle}
+          UNSAFE_style={{
+            position: 'absolute',
+            inset: 0,
+            opacity: isDark ? 0 : 1,
+            transform: isDark ? 'rotate(-90deg) scale(0.5)' : 'rotate(0deg) scale(1)',
+            transition: 'opacity 200ms ease-out, transform 200ms ease-out'
+          }} />
+        <Lighten
+          styles={whiteIconStyle}
+          UNSAFE_style={{
+            position: 'absolute',
+            inset: 0,
+            opacity: isDark ? 1 : 0,
+            transform: isDark ? 'rotate(0deg) scale(1)' : 'rotate(90deg) scale(0.5)',
+            transition: 'opacity 200ms ease-out, transform 200ms ease-out'
+          }} />
+      </span>
     </Button>
   );
 }

packages/dev/s2-docs/src/Header.tsx

@@ -66,13 +66,19 @@ const colorSchemeToggleStyles = style({
   borderWidth: 0
 });
 
+const iconContainerStyles = style({
+  position: 'relative',
+  size: 20
+});
+
 function ColorSchemeToggle() {
   let {colorScheme, toggleColorScheme, systemColorScheme} = useSettings();
   let isOverriding = colorScheme !== systemColorScheme;
   let label = isOverriding
     ? `Using ${colorScheme} mode (press to use system)`
     : `Using system ${systemColorScheme} mode (press to switch)`;
   let ref = useRef(null);
+  let isDark = colorScheme === 'dark';
 
   return (
     <Button
@@ -81,7 +87,24 @@ function ColorSchemeToggle() {
       onPress={toggleColorScheme}
       className={renderProps => colorSchemeToggleStyles(renderProps)}
       style={pressScale(ref)}>
-      {colorScheme === 'dark' ? <Lighten /> : <Contrast />}
+      <span className={iconContainerStyles}>
+        <Contrast
+          UNSAFE_style={{
+            position: 'absolute',
+            inset: 0,
+            opacity: isDark ? 0 : 1,
+            transform: isDark ? 'rotate(-90deg) scale(0.5)' : 'rotate(0deg) scale(1)',
+            transition: 'opacity 200ms ease-out, transform 200ms ease-out'
+          }} />
+        <Lighten
+          UNSAFE_style={{
+            position: 'absolute',
+            inset: 0,
+            opacity: isDark ? 1 : 0,
+            transform: isDark ? 'rotate(0deg) scale(1)' : 'rotate(90deg) scale(0.5)',
+            transition: 'opacity 200ms ease-out, transform 200ms ease-out'
+          }} />
+      </span>
     </Button>
   );
 }

packages/dev/s2-docs/src/MobileHeader.tsx

@@ -87,13 +87,19 @@ const colorSchemeToggleStyles = style({
   borderWidth: 0
 });
 
+const iconContainerStyles = style({
+  position: 'relative',
+  size: 20
+});
+
 function ColorSchemeToggle() {
   let {colorScheme, toggleColorScheme, systemColorScheme} = useSettings();
   let isOverriding = colorScheme !== systemColorScheme;
   let label = isOverriding
     ? `Using ${colorScheme} mode (press to use system)`
     : `Using system ${systemColorScheme} mode (press to switch)`;
   let ref = useRef(null);
+  let isDark = colorScheme === 'dark';
 
   return (
     <Button
@@ -102,7 +108,24 @@ function ColorSchemeToggle() {
       onPress={toggleColorScheme}
       className={renderProps => colorSchemeToggleStyles(renderProps)}
       style={pressScale(ref)}>
-      {colorScheme === 'dark' ? <Lighten /> : <Contrast />}
+      <span className={iconContainerStyles}>
+        <Contrast
+          UNSAFE_style={{
+            position: 'absolute',
+            inset: 0,
+            opacity: isDark ? 0 : 1,
+            transform: isDark ? 'rotate(-90deg) scale(0.5)' : 'rotate(0deg) scale(1)',
+            transition: 'opacity 200ms ease-out, transform 200ms ease-out'
+          }} />
+        <Lighten
+          UNSAFE_style={{
+            position: 'absolute',
+            inset: 0,
+            opacity: isDark ? 1 : 0,
+            transform: isDark ? 'rotate(0deg) scale(1)' : 'rotate(90deg) scale(0.5)',
+            transition: 'opacity 200ms ease-out, transform 200ms ease-out'
+          }} />
+      </span>
     </Button>
   );
 }