Franknoirot/ux papercuts 1 (#596)

* Properly show dark logo in System-light theme

* Fix linting errors for fill-rule and clip-rule

* Support system-light theme on Parametric Modeling step as well

Signed-off-by: Frank Noirot <frank@kittycad.io>

* Fix line number ref in Parametric Modeling copy

Signed-off-by: Frank Noirot <frank@kittycad.io>

* Copyediting tweaks

* Fix part name disappearing even when there is space

---------

Signed-off-by: Frank Noirot <frank@kittycad.io>

src/routes/Onboarding/Introduction.tsx

@@ -2,7 +2,7 @@ import { faArrowRight, faXmark } from '@fortawesome/free-solid-svg-icons'
 import { ActionButton } from '../../components/ActionButton'
 import { onboardingPaths, useDismiss, useNextClick } from '.'
 import { useGlobalStateContext } from 'hooks/useGlobalStateContext'
-import { Themes } from 'lib/theme'
+import { Themes, getSystemTheme } from 'lib/theme'
 import { bracket } from 'lib/exampleKcl'
 import { useStore } from 'useStore'
 import {
@@ -128,6 +128,11 @@ export default function Introduction() {
       },
     },
   } = useGlobalStateContext()
+  const getLogoTheme = () =>
+    theme === Themes.Light ||
+    (theme === Themes.System && getSystemTheme() === Themes.Light)
+      ? '-dark'
+      : ''
   const dismiss = useDismiss()
   const next = useNextClick(onboardingPaths.CAMERA)
 
@@ -140,7 +145,7 @@ export default function Introduction() {
       <div className="max-w-3xl bg-chalkboard-10 dark:bg-chalkboard-90 p-8 rounded">
         <h1 className="text-2xl font-bold flex gap-4 flex-wrap items-center">
           <img
-            src={`/kcma-logomark${theme === Themes.Light ? '-dark' : ''}.svg`}
+            src={`/kcma-logomark${getLogoTheme()}.svg`}
             alt="KittyCAD Modeling App"
             className="max-w-full h-20"
           />